Skip to content

Instantly share code, notes, and snippets.

@Makiyu-py
Last active July 7, 2021 05:50
Show Gist options
  • Save Makiyu-py/cc836f29587f1e6df36988efb801fdb9 to your computer and use it in GitHub Desktop.
Save Makiyu-py/cc836f29587f1e6df36988efb801fdb9 to your computer and use it in GitHub Desktop.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<main></main>
</body>
</html>
// try it out here: https://editor.p5js.org/Makiyu-py/sketches/nO4U8cREM
class Bar {
constructor(payload) {
this.x = payload.rect.x;
this.y = payload.rect.y;
this.height = payload.rect.height;
this.start = payload.time.start || millis();
this.end = payload.time.end;
this.max = payload.max;
this.color = payload.color;
this.addOutline = payload.addOutline || false;
}
draw() {
this.drawOutline();
this.drawBar();
}
drawOutline() {
if (this.addOutline === false) return;
stroke(0);
noFill();
rect(this.x, this.y, this.max, this.height);
}
drawBar() {
this.preDrawBar();
noStroke();
fill(255, 100);
let w;
// console.log(Math.ceil(millis()))
if (millis() - this.start > this.end) {
w = this.max;
} else {
w = this.max * ((millis() - this.start) / this.end);
}
rect(this.x, this.y, w, this.height);
}
preDrawBar() {
Model.checkIfSpreadable(this.color)
? fill(...this.color)
: fill(this.color);
}
}
let loadingBar;
function setup() {
createCanvas(1280, 800);
maxBar = width/2;
loadingBar = new Bar({
rect: {
x: width/4,
y: height/2,
height: 20
},
time: {
end: 3000 // milliseconds
},
max: width/2,
color: [255, 100],
addOutline: true,
})
}
function draw() {
background(220);
loadingBar.draw()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment