The inverse tan calculation is used to create a function that allows the individual squares to follow the cursor (i.e. let rotateVal = atan2(mouseY - transValY, mouseX - transValX); rotate(rotateVal);). Following the theme of "interpolation" from the previous chapter, the projects in this chapter also integrates the lerpColor() function to further add dynamic aesthetics.
Link to Full Codes
for (let y = 0; y < row; y++) {
for (let x = 0; x < col; x++) {
push();
translate(x * spaceWidth + spaceWidth/2, y * spaceHeight + spaceHeight/2);
let rotateVal = atan2(mouseY - transValY, mouseX - transValX);
rotate(rotateVal);
stroke(lerpColor(fromColour, toColour, x * y / 32));
strokeWeight(5);
strokeCap(ROUND);
fill(lerpColor(fromColour, toColour, x * y / 32));
rect(0, 0, 100, 100);
pop();
}
}