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();
                            }
                        }