p5js怎么不停生成新的圆

在p5.js中不停生成新的圆的核心方法是使用循环、定时器和数组来存储圆的信息。你可以通过在draw函数中不断添加新的圆、使用数组来存储圆的位置和大小，并在每一帧中重绘所有的圆。

为了实现这一点，可以采取以下步骤：

初始化数组：在setup函数中初始化一个空数组，用于存储圆的信息。
定时添加新圆：使用frameCount或者setInterval函数来定时添加新的圆到数组中。
更新和显示圆：在draw函数中遍历数组，更新每个圆的位置和状态，并将其显示在画布上。

一、初始化数组

在setup函数中初始化一个空数组，用于存储圆的信息。圆的信息可以包括位置、大小和颜色等。

let circles = [];
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
}

二、定时添加新圆

使用frameCount或者setInterval函数来定时添加新的圆到数组中。

function draw() {
  background(255);
  // 每隔一定帧数添加一个新的圆
  if (frameCount % 30 === 0) {
    let newCircle = {
      x: random(width),
      y: random(height),
      r: random(10, 50),
      color: color(random(255), random(255), random(255))
    };
    circles.push(newCircle);
  }
  // 显示所有的圆
  for (let circle of circles) {
    fill(circle.color);
    noStroke();
    ellipse(circle.x, circle.y, circle.r * 2);
  }
}

三、更新和显示圆

在draw函数中遍历数组，更新每个圆的位置和状态，并将其显示在画布上。

function draw() {
  background(255);
  // 每隔一定帧数添加一个新的圆
  if (frameCount % 30 === 0) {
    let newCircle = {
      x: random(width),
      y: random(height),
      r: random(10, 50),
      color: color(random(255), random(255), random(255))
    };
    circles.push(newCircle);
  }
  // 显示所有的圆
  for (let circle of circles) {
    fill(circle.color);
    noStroke();
    ellipse(circle.x, circle.y, circle.r * 2);
  }
}

四、添加更多特效和交互

为了使生成的圆更具动态效果，可以在draw函数中添加更多的特效和交互，例如让圆逐渐变大或变小，或者根据鼠标位置改变圆的颜色等。

function draw() {
  background(255);
  // 每隔一定帧数添加一个新的圆
  if (frameCount % 30 === 0) {
    let newCircle = {
      x: random(width),
      y: random(height),
      r: random(10, 50),
      color: color(random(255), random(255), random(255))
    };
    circles.push(newCircle);
  }
  // 更新和显示所有的圆
  for (let circle of circles) {
    // 让圆逐渐变大
    circle.r += 0.5;
    // 根据鼠标位置改变圆的颜色
    if (dist(mouseX, mouseY, circle.x, circle.y) < circle.r) {
      circle.color = color(255, 0, 0);
    }
    fill(circle.color);
    noStroke();
    ellipse(circle.x, circle.y, circle.r * 2);
  }
}

五、处理圆的生命周期

为了避免数组无限增长，可以给每个圆添加一个生命周期，当生命周期结束时，将其从数组中移除。

function draw() {
  background(255);
  // 每隔一定帧数添加一个新的圆
  if (frameCount % 30 === 0) {
    let newCircle = {
      x: random(width),
      y: random(height),
      r: random(10, 50),
      color: color(random(255), random(255), random(255)),
      life: 255
    };
    circles.push(newCircle);
  }
  // 更新和显示所有的圆
  for (let i = circles.length - 1; i >= 0; i--) {
    let circle = circles[i];
    // 让圆逐渐变大和变淡
    circle.r += 0.5;
    circle.life -= 2;
    // 根据生命周期移除圆
    if (circle.life <= 0) {
      circles.splice(i, 1);
      continue;
    }
    // 根据鼠标位置改变圆的颜色
    if (dist(mouseX, mouseY, circle.x, circle.y) < circle.r) {
      circle.color = color(255, 0, 0);
    }
    fill(circle.color.levels[0], circle.color.levels[1], circle.color.levels[2], circle.life);
    noStroke();
    ellipse(circle.x, circle.y, circle.r * 2);
  }
}

通过以上步骤，你可以在p5.js中不停生成新的圆，并根据需要添加各种动态效果和交互功能。关键在于使用数组来存储圆的信息，并在draw函数中不断更新和显示这些圆。