First let's define a couple of variables:
var n = 4;
var speed = 1;
setup
function¶The usual p5 setup function, which creates the canvas.
function setup () {
createCanvas(innerWidth, innerHeight);
rectMode(CENTER);
}
draw
function¶From the p5.js documentation:
The
draw()
function continuously executes the lines of code contained inside its block until the program is stopped ornoLoop()
is called.
function draw() {
background('#ddd');
translate(innerWidth / 2, innerHeight / 2);
for (let i = 0; i < n; i++) {
push();
rotate(frameCount * speed / 1000 * (i + 1));
fill(i * 5, i * 100, i * 150);
const s = 200 - i * 10;
rect(0, 0, s, s);
pop();
}
}
Now let's show the sketch by using the %show
magic:
%show
We can also tweak some values in real time:
speed = 3
n = 20
We can also show the sketch a second time taking into account the new values:
%show