p5.js的游标轨迹算法

Question

我在Processing的网站(https://processing.org/examples/storinginput.html)上找到了这个小的编码练习，并决定制作一个p5.js版本。

关于这个算法，我不理解的部分是，当变量I(用作椭圆的尺度)增加时，绘制的椭圆(在trail中)是如何缩小的。我怀疑它与变量index的值有关，但我无法将其拼凑在一起。

有人知道这个算法是如何工作的吗?如有任何帮助，不胜感激。

下面是Javascript版本的代码:

var num = 60;
var mx = []; 
var my = []; 
function setup() {
createCanvas(windowHeight, windowHeight);
noStroke();
fill('rgba(0,0,0, 0.5)');
noCursor();
}
function draw() {
background(255);
var array_pos = (frameCount) % num; 
mx[array_pos] = mouseX; 
my[array_pos] = mouseY; 

for (var i = 0; i < num; i++) {
var index = (array_pos + 1 + i) % num; 
ellipse(mx[index], my[index], i, i); 
}
}

Answer 1

当前鼠标位置存储在每一帧的数组中。当数组已满时，它将从头重新填充。这是使用模(%)算子实现的(%计算除法的余数)。

var array_pos = frameCount % num; 
mx[array_pos] = mouseX; 
my[array_pos] = mouseY; 

圆的直径取决于回路的控制变量(i)。最小的圆是指数为array_pos + 1的圆。因此，使用i == 0绘制索引为array_pos + 1的圆。下面的圆圈随着i的增加而变大。同样，模运算符(%)用于防止数组被越界访问。

var index = (array_pos + 1 + i) % num; 

var num = 60;
var mx = []; 
var my = []; 
function setup() {
createCanvas(windowWidth, windowHeight);
noCursor();
}
function draw() {
var array_pos = frameCount % num; 
mx[array_pos] = mouseX; 
my[array_pos] = mouseY; 
background(255);
noStroke();
fill(255, 0, 0, 127);
for (var i = 0; i < num; i++) {
var index = (array_pos + 1 + i) % num; 
ellipse(mx[index], my[index], i, i); 
}
}

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