p5.js 的光标轨迹算法

Question

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

关于这个算法，我不明白的部分是当用作椭圆比例的变量 i 增加时，（在轨迹中）绘制的椭圆如何缩小。我怀疑它与变量索引的值有关，但我无法将其拼凑起来。

有谁知道这个算法是如何工作的？任何帮助将不胜感激。

这是代码的 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>

p5.js 的光标轨迹算法

Cursor trail algorithm for p5.js

javascript

processing

p5.js

mouse-cursor