如何在绘制它们的循环结束时为圆圈设置动画p5.js [关闭]

Question

我试图在屏幕上显示大量随机点，然后通过spot.x ++来制作动画。 。一旦循环结束，为什么my code没有为它们设置动画？如何在循环结束后使代码变为动画？

Answer 1

是的，来自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);
  };
}

Answer 2

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

---

让我们逐步完成您的代码： （为了简化，我假装你画的是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的原始圆圈。

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