p5.js使用setInterval,array.push(),for循环创建动画时出现问题

Question

使用setInterval、array.push()for循环，我希望每3秒出现一个气泡，直到数组气泡的长度变为10.

但是，当我执行我的代码时，同时出现了 10 个气泡，并且 console.log(array.length) 显示长度在增长，尽管我将其设置为小于 10。我觉得我排列代码的方式有问题，谁能帮忙？

let bubbles = [];
var n = 10;

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

function addBubbles() {
    for (let i = 0; i < n; i++) {
        let x = random(50, 550);
        let y = random(50, 350);
        let r = random(10, 50);
        let b = new Bubble(x, y, r);
        setInterval(bubbles.push(b), 3000);
    }
}

function draw() {
    background(0);
    addBubbles();
    for (let i = 0; i < n; i++) {
      bubbles[i].show();
      bubbles[i].move();
    }
}

class Bubble {
    constructor(_x, _y, _r, _c) {
        this.x = _x;
        this.y = _y;
        this.r = _r;
        this.c = _c;
    }

    move() {
        this.x = this.x + random(-5, 5);
        this.y = this.y + random(-5, 5);
    }

    show() {
        stroke(255);
        noFill();
        strokeWeight(4);
        ellipse(this.x, this.y, this.r * 2);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

您的代码中存在一些问题。

问题一： 每次绘制 canvas 时，您都会开始 10 个间隔。这些间隔中的每一个都会运行每 3 秒执行一次函数。这会很快（并且成倍地）给你一个很多的气泡。

每3秒加1个泡泡，只需要开始1个间隔。您可以在 setup 函数中执行此操作，因为它只被调用一次。

您可以在 addBubble 函数中添加一个检查，一旦您有一定数量的气泡就会取消间隔。

问题二： 调用 setInterval().

时，您没有将函数作为参数传递

您每 3 秒将 bubbles.push(b) 作为函数传递给运行。 bubbles.push(b) 不是 return 函数类型。

我们将传递一个向数组添加气泡的函数，而不是传递 bubbles.push 的 return 值。

问题三： 绘制 canvas 时，您只是迭代了 n (10) 个气泡。相反，您需要遍历所有这些。

let bubbles = [];
let maxBubbles = 10;
let interval;

funtion setup() {
  createCanvas(600, 400);
  interval = setInterval(addBubble, 3000);
}

function addBubble() {
  let x = random(50, 550);
  let y = random(50, 350);
  let r = random(10, 50);
  let b = new Bubble(x, y, r);
  bubbles.push(b);

  if (bubbles.length >= maxBubbles) {
    clearInterval(interval);
  }
}

function draw() {
  background(0);

  for (let bubble of bubbles) {
    bubble.show();
    bubble.move();
  }
}

Answer 2

我可以看到你已经准确地实现了 setInterval() 方法，并且根据你组织代码的方式，你得到的结果是相当公平的，因为你的 addBubbles() 方法是在 FOR 之前执行的loop 有机会开始，这就是为什么你一次得到 10 个气泡。我建议您像这样在循环中使用 addBubbles() 方法：

 for (let i = 0; i < n; i++) {
    addBubbles();
  }

通过这种方式，您的 addBubbles() 方法将随着增量每 3000 毫秒执行一次。

p5.js使用setInterval,array.push(),for循环创建动画时出现问题

p5.js a problem when using setInterval, array.push(), for loop to create animation

javascript

arrays

processing

setinterval

p5.js