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(); } }