Javascript P5，在 Canvas 上绘制网格

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

Output of the code

Answer 1

dist()计算 Euclidean distance点之间。
在这种情况下，它计算网格中的当前位置(gridX、gridY)和鼠标位置(mouseX、鼠标Y):

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>