如果你知道图片在计算机中的表示方式是什么样子的，那就一定会发现，数组特别适合存储图像，我们来看一个简化版的案例，通过数组在画布中对点进行着色，来模拟图像显示。
// 定义全局变量
let distances = [];
let maxDistance;
let spacer;
function setup() {
// 画布：720 * 360
createCanvas(720, 360);
// dist(x1, y1, x2, y2)，该函数用于测量两点之间的距离(x1, y1)与(x2, y2)
// maxDistance：画布中心点到画布右下角的距离
maxDistance = dist(width / 2, height / 2, width, height);
// 注意此处使用了嵌套循环，即循环中还有循环，下方的这种写法是处理二维数组的标准写法；
// 可以看到distances中的每一个元素都是一个新的数组。
for (let x = 0; x < width; x++) {
distances[x] = []; // 创建嵌套数组
// 内部循环是为了构建distances中的数组元素
for (let y = 0; y < height; y++) {
let distance = dist(width / 2, height / 2, x, y);
// 元素的值：点到画布中心的距离 / maxDistance * 255，后续将要使用该值作为点的颜色，从计算公式中就可以看出，画布四角处的点会更加白一点。
distances[x][y] = (distance / maxDistance) * 255;
}
}
// 更改 spacer 变量的值可以更改点的密度
spacer = 10;
// draw函数只执行一次
noLoop();
}
function draw() {
background(0);
// 这个嵌入式循环基于 spacer 变量跳过数组中的值，二维数组的（标准）遍历方式
for (let x = 0; x < width; x += spacer) {
for (let y = 0; y < height; y += spacer) {
stroke(distances[x][y]);
point(x + spacer / 2, y + spacer / 2);
}
}
}
new p5();
