xxxxxxxxxx
48
// 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
let angle = 25;
function setup() {
createCanvas(400, 400);
frameRate(30);
pixelDensity(1);
createLoop({
duration: 3,
gif: false
});
}
//------------------------------------------
function draw() {
background("DodgerBlue");
fill("white");
noStroke();
angle = animLoop.theta //connie helped w/ this and the 0-100 values in line 25
push();
translate(200, 200);
rectMode(CENTER);
let r = map(sin(angle), 1, -1, 0, 100);
rect(0, 0, 200, 200, r);
pop();
angle += 0.02;
// 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.
}