Javascript P5, рисование сетки на холсте

Question

Я выполняю задание P5 для колледжа и изо всех сил пытаюсь понять код, который я нашел в Интернете. Я включил снимок экрана с выводом кода и фактический код ниже. Я понимаю логику создания базовой сетки, но мне было интересно, может ли кто-нибудь объяснить мне, как именно она меняет размер квадратов?

Вот ссылка на код, чтобы увидеть, как он работает: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);
        }
    }
}

Вывод кода

Answer 1

dist() вычисляет евклидово расстояние между точками.
В этом случае он вычисляет расстояние между текущей позицией в сетке (gridX, gridY) и положение мыши (mouseX, mouseY):

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

Размер ячейки зависит от этого расстояния. Если мышь находится близко к ячейке, расстояние небольшое и размер небольшой. Если мышь находится далеко от ячейки, то расстояние велико и размер ячейки тоже.
На расстоянииmaxDistance, размер 60. Ниже maxDistance ячейка меньше, а над ней больше:

var diameter = distanceBetweenPoints / maxDistance * 60;

Обратите внимание: вы не можете увидеть, что ячейка становится больше 60, потому что она покрыта ячейками, которые рисуются позже через ячейки, которые рисуются позже.
Использовать noFill чтобы понять, что я имею в виду:

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

Но вы можете избавиться от этого, используя min:

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

См. Пример, где по сравнению с левой стороной размер ограничен справа:

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>