You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.3 KiB
46 lines
1.3 KiB
2 years ago
|
class Loader{
|
||
|
|
|
||
|
|
constructor(pos, radius){
|
||
|
|
this.pos = pos;
|
||
|
|
this.c = p.createGraphics(radius * 2, radius * 2);
|
||
|
|
this.radius = radius;
|
||
|
|
this.center = p.createVector(radius, radius);
|
||
|
|
this.message = 'Loading...';
|
||
|
|
this.progress = 0;
|
||
|
|
this.angle = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
update(){
|
||
|
|
this.angle += Math.PI / 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
display(){
|
||
|
|
let c = this.c;
|
||
|
|
c.clear();
|
||
|
|
c.noFill();
|
||
|
|
c.stroke(20, 100, 200);
|
||
|
|
c.strokeWeight(this.radius * 0.025);
|
||
|
|
//c.arc(this.center.x, this.center.y, this.radius * 2, this.radius * 2, this.angle, this.angle + Math.PI * 1.5);
|
||
|
|
c.strokeWeight(2);
|
||
|
|
c.rect(this.center.x - this.radius + 5, this.center.y - 25, this.radius * 2 - 50, 50);
|
||
|
|
c.fill(50, 150, 255);
|
||
|
|
c.rect(this.center.x - this.radius + 5, this.center.y - 25, (this.radius - 50) * this.progress, 50);
|
||
|
|
|
||
|
|
c.textAlign(p.CENTER, p.CENTER);
|
||
|
|
c.textSize(25);
|
||
|
|
c.fill(220);
|
||
|
|
c.strokeWeight(4);
|
||
|
|
c.text(this.message, this.radius, this.radius * 1.5);
|
||
|
|
|
||
|
|
c.textSize(40);
|
||
|
|
c.text(Math.floor(this.progress * 100) + '%', this.radius, this.radius / 2);
|
||
|
|
|
||
|
|
p.imageMode(p.CENTER);
|
||
|
|
p.image(c, this.pos.x, this.pos.y);
|
||
|
|
}
|
||
|
|
|
||
|
|
destroy(){
|
||
|
|
this.c.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|