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()计算to点之间的欧氏距离。

在这种情况下，它计算网格中当前位置(gridX，gridY)和鼠标位置(mouseX，mouseY)之间的距离：

distanceBetweenPoints = dist(mouseX，mouseY，gridX，gridY)；

单元格的大小取决于这个距离。如果鼠标靠近单元格，则距离较短，大小较小。如果鼠标离细胞很远，那么距离和细胞的大小也很大。

在距离maxDistance的地方，大小是60。在maxDistance下面，一个单元格更小，而高于它的是更大的：

变径= 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>

​