DO: Make something with a lot of repetition, more than you want to hand-code. You could take something you've already done where there was a lot of repetition in the code and see if you can re-write it using a loop so that instead of 28 lines of code that call rect(), you have 1 line of code calls rect() inside of a loop that goes around 28 times. How do you need to rework the way you position that rect() in order to make it work in a loop? Try creating an algorithmic design with simple parameters.
link to sketch:
Code:
let on = false;
let speed = 0.02;
let phase = 0;
maxsize = 20;
function setup() {
createCanvas(600, 600);
}
function draw() {
background(0);
//
let x1 = width / 2;
let y1 = height / 2 + sin(phase) * 50;
let x2 = width / 2 + sin(phase) * 50;
let y2 = height / 2;
phase = frameCount * speed;
let sizeoffset = (cos(phase) + 1) * 0.5;
let shapesize = sizeoffset * maxsize;
// fill(random(255),255,random(255),255);
// rect(x, y, shapesize, shapesize);
// for()
noStroke();
for (let x1 = 3; x1 < 15 + 3; x1++) {
if (on) {
fill(random(255), 255, random(255), 255);
} else {
fill(random(255), 255, 255, random(255));
}
rect(x1 * 30, y1, shapesize, shapesize)
}
for (let y2 = 3; y2 < 15 + 3; y2++) {
if (on) {
fill(255, 0, random(255));
} else {
fill(255, random(255), 0);
}
rect(x2, y2 * 30, shapesize, shapesize)
}
}
function mousePressed() {
on = !on;
}