Processing 使用数组-跟随鼠标的图形

2022-05-16
基本内容：
依次用鼠标的历史位置填充数组。最后的位置是最新的鼠标位置。
用数组内容作为圆形的位置。
一次性绘制所有内容。着色渐变，最新的图形颜色最深，最旧的图形颜色最浅。大小也渐变，最旧的图形最小，最新的图形最大。

// x and y positions
int[] xpos = new int[50];
int[] ypos = new int[50];
void setup() {
size(200, 200);
// Initialize
for (int i = 0; i < xpos.length; i++) {
xpos[i] = 0;
ypos[i] = 0;
}
}
void draw() {
background(255);
// Shift array values
for (int i = 0; i < xpos.length - 1; i++) {
xpos[i] = xpos[i + 1];
ypos[i] = ypos[i + 1];
}
// New location
xpos[xpos.length - 1] = mouseX;
ypos[ypos.length - 1] = mouseY;
// Draw everything
for (int i = 0; i < xpos.length; i++) {
noStroke();
fill(255 - i*5);
ellipse(xpos[i], ypos[i], i, i);
}
}

Shiffman, Daniel. Learning Processing: a beginner's guide to programming images, animation, and interaction. Morgan Kaufmann, 2009. P175
Example 9-8. A snake following the mouse