Javascript P5, drawing a grid on a canvas

Question

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

Output of the code

Here is a codepen link so you can see what the code does: https://codepen.io/therealpamelahalpert/pen/rNaYrbP — therealpamhalpert, Jan 04 '20 at 08:00

score 1 · Answer 1 · answered Jan 04 '20 at 08:54

dist() computes the Euclidean distance between to points.
In this case it computes the distance between the current position in the grid (gridX, gridY) and the position of the mouse (mouseX, mouseY):

distanceBetweenPoints = dist(mouseX, mouseY, gridX, gridY);

The size of a cell depends on this distance. If the mouse is close to a cell, the the distance is short and the size is small. If the mouse is far away from the cell, then the distance is large and the size of the cell, too.
At a distance of maxDistance, the size is 60. Below maxDistance a cell is smaller and above it is larger:

var diameter = distanceBetweenPoints / maxDistance * 60;

Note, you can't see that a cell becomes larger than 60, because it is covered, by the cells which are drawn later through the cells that are drawn afterwards.
Use noFill to see what I mean:

strokeWeight(4);
stroke(0,0,0);
noFill();
rect(gridX, gridY, diameter, diameter);

But you can get rid of that by using min:

var diameter = min(1, distanceBetweenPoints / maxDistance) * 60;

See the example, where in compare to the left side, on the right side the size is limited:

var stepX = 60;
var stepY = 60;

var maxDistance = 200;

function setup() {
    createCanvas(482, 482);
    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;
            if (gridX >= 240)
                diameter = min(1, distanceBetweenPoints / maxDistance) * 60;
            strokeWeight(4);
            stroke(0,0,0);
            noFill();
            rect(gridX, gridY, diameter, diameter);
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Javascript P5, drawing a grid on a canvas

1 Answers1