p5.js鼠标拖尾算法疑问：循环变量i递增时为何拖尾椭圆反而缩小

算法运行原理 #

这个程序用循环数组实现鼠标移动的渐变拖尾效果，整体逻辑拆解如下：

• 全局定义的num=60表示拖尾总共由60个椭圆组成，mx、my两个长度为60的数组用来缓存最近60帧的鼠标坐标
• draw函数每帧执行一次：
  1. 先清空画布，计算array_pos = frameCount % num，frameCount是p5.js内置的帧计数器，每执行一次draw自动加1，因此array_pos会在0~59之间循环取值，每帧都会把当前鼠标坐标存入mx[array_pos]、my[array_pos]，相当于循环覆盖数组里最早的旧坐标
  2. 循环遍历绘制60个椭圆：
     计算index = (array_pos + 1 + i) % num 来获取对应坐标的数组下标，最终绘制不同位置、不同大小的椭圆

疑问解答 #

你看到的「拖尾从鼠标位置逐渐缩小」的效果，和循环变量i的递增逻辑刚好是反向对应的：

• 当i=0时，index对应数组里最早的、离当前时间最远的鼠标坐标，这时候绘制的椭圆大小是i=0（最小）
• 随着i从0递增到59，index会逐步指向更新的鼠标坐标，对应的椭圆尺寸也随i递增变大，直到i=59时，index刚好等于array_pos，对应当前最新的鼠标坐标，绘制的椭圆大小是59（最大）
  肉眼观察时，你会把鼠标当前位置的最大椭圆作为起点，往之前移动的路径看过去，刚好是从最大的椭圆逐步看到最小的椭圆，所以会产生拖尾逐渐缩小的视觉效果。

以下是p5.js实现代码：

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

内容的提问来源于stack exchange，提问作者bentoBAUX