xxxxxxxxxx
39
// Uses https://www.npmjs.com/package/p5.createloop
// Be sure to include the following script in index.html:
// https://unpkg.com/p5.createloop@0.2.8/dist/p5.createloop.js
function setup() {
createCanvas(840, 400);
frameRate(30);
pixelDensity(1);
createLoop({ duration: 3, gif: false });
}
//------------------------------------------
function draw() {
background("DodgerBlue");
fill("white");
noStroke();
textSize(20);
// Draw the animLoop.progress, a number between 0 and 1
text("Progress: " + nf(animLoop.progress,1,2), 10, 35);
// Use progress to govern a rectangle width
rect(0,50, animLoop.progress * width, 50);
// Use progress to govern a circle position
circle(width * animLoop.progress, 150, 50);
circle(width * (1-animLoop.progress), 200, 50);
// Use progress to govern circles' radius
circle(100, 300, 100 * animLoop.progress);
circle(175, 300, 100 * (1-animLoop.progress));
fill (255 * animLoop.progress);
circle (300, 300, 100);
fill (255 * (1-animLoop.progress));
circle (450, 300, 100);
}