I'm carrying out a P5 assignment for college and struggling to understand some code I found online. I've included a screenshot of the output of the code and the actual code below. I understand the logic of creating the basic grid, but I was wondering if someone could explain to me how exactly it changes the size of the squares?
Here is a codepen link to see it working: https://codepen.io/therealpamelahalpert/pen/rNaYrbP
'use strict';
var stepX = 60;
var stepY = 60;
var maxDistance = 600;
function setup() {
createCanvas(1240, 1748);
noStroke();
colorMode(HSB, 360, 100, 100);
}
function draw() {
clear();
for (var gridY = 0; gridY < height; gridY += stepY) {
for (var gridX = 0; gridX < width; gridX += stepX) {
//Creating the variable distanceBetweenTwoPoints which is getting the distance between 2 points on the canvas
distanceBetweenPoints = dist(mouseX, mouseY, gridX, gridY);
var diameter = distanceBetweenPoints / maxDistance * 60;
strokeWeight(4);
stroke(0,0,0);
rect(gridX, gridY, diameter, diameter);
}
}
}