xxxxxxxxxx
57
// 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);
rectMode(CENTER);
frameRate(30);
pixelDensity(1);
createLoop({
duration: 3,
gif: true
});
}
//------------------------------------------
function draw() {
fill("white");
noStroke();
background("DodgerBlue");
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);
// 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.
translate (200,200);
var angle = 0
angle= animLoop.theta
var r= map (sin(angle), -1, 1, 0, 100);
rect (0, 0, 200, 200, r)
}