如何在绘制圆圈结束时为圆圈设置动画 p5.js

Question

我试图让屏幕上出现很多随机点，然后通过 spot.x++ 使它们动画化； .为什么 my code 在循环结束后不对它们进行动画处理，而在循环结束后如何使代码动画化？

Answer 1

您需要为要绘制的每个个圆创建一个点对象。数组非常适合存储这样的东西。
然后，每个绘制循环都必须递增 每个点 ，然后重新绘制每个圆。

让我们单步执行您的代码：
（为简化起见，我假设您画的是 2 个圆圈而不是 36 个。）

spot 以 x = 50 和 y = 50 的单个数据对象开始。

你在 spot 的坐标 (50, 50) 处画了一个圆。那个圈子留在那里。
然后你随机化 spot 中的值，所以现在它可能是 x = 231.3，y = 4.2，并在这些坐标处绘制一个新圆。那个圆圈已经画在那里，并且会留在那儿。

现在你使用 spot，它仍然只是一个带有随机坐标的单个数据对象，你递增 x。 spot.x 变成 232.3, 233.3, 234.3... 但你永远不会调用代码来重新绘制圆圈。

即使您在spot的新坐标处再次画了一个圆，也不会影响您原来在50、50处的圆[=18] =]

（如果将 console.log(spot); 行添加到 draw() 函数中，您就会明白我的意思。）

Answer 2

是的，Wes Lord 的好建议。您正在创建斑点而不是存储它们。如果你为你的斑点创建一个数组，你就可以开始为它们制作动画了。

这是对您的代码的一个非常简单的修改，但应该可以完成您想要做的事情。

var spots = []; // array of spots

var col = {
  r: 200,
  g: 5,
  b: 100,
  a: 180
}

function setup() {
  createCanvas(400, 400);

// Create spots
  for (var i=0; i<50; i++) {
    spots.push(new Spot());
  }
}

function draw() {
  background(220);
  noStroke();
  for (var i=0; i<spots.length; i++) {
    spots[i].move();
    spots[i].display();
  }
}

// Spot class
function Spot() {
  this.x = random(width);
  this.y = random(height);
  this.g = random(5, 255);
  this.a = random(150, 180);
  this.diameter = 20;

  this.move = function() {
    this.x += 1;
  };

  this.display = function() {
    fill(col.r, col.g, col.b, col.a);   
    col.r = this.x / 1.5 + 100;
    col.g = this.g;
    col.b = this.y;
    col.a = this.a;
    ellipse(this.x, this.y, this.diameter, this.diameter);
  };
}

如何在绘制圆圈结束时为圆圈设置动画 p5.js

How to animate circles when the loop of drawing them ends p5.js

html

javascript

animation

editor

p5.js