xxxxxxxxxx
45
// Uses https://www.npmjs.com/package/p5.createloop
// Be sure that the following script is included in index.html:
// https://unpkg.com/p5.createloop@0.2.8/dist/p5.createloop.js
function setup() {
createCanvas(400, 400);
frameRate(30);
pixelDensity(1);
createLoop({ duration:3, gif:false });
}
//------------------------------------------
function draw() {
background("DodgerBlue");
fill("white");
noStroke();
textSize(14);
text("animLoop.theta = " + nf(animLoop.theta,1,3), 15,25);
text("Note how this animLoop.theta number", 15,45);
text("constantly changes from 0 to TWO_PI,", 15,65);
text("over a duration of 3 seconds.", 15,85);
rectMode(CENTER);
t = animLoop.theta;
let r = map(sin(t), -1, 1, 0, 100);
rect(200, 200, 200, 200, r);
// Put code here which reproduces the GIF at:
// https://bit.ly/3bENH6W
// You should only need 2 or 3 lines of code!
//
// IMPORTANT HINTS:
// -- Draw a rect, centered on the canvas,
// -- whose width and height are 200 pixels.
// -- The radius of the corners is changing
// -- somehow based on a sinusoidal function
// -- of the animLoop.theta variable
// -- so that it animates from a pure circle to a pure square.
// -- When it's time to actually generate the GIF,
// you'll need to set gif:true in line 10.
// -- Also, feel free to delete the text in lines 18-22.
}