Javascript 如何降低随机生成速率？

我刚刚开始学习P5和JavaScript，我已经成功地创建了一个画布，其中生成了随机模式。但是，似乎所有内容都是以相同的帧速率生成的，这使得某些对象/形状显示得太快。我尝试将帧速率更改为较慢的速度，但它会减慢整个过程

我怎样才能减慢随机生成的圆圈的速度，同时保持其他所有圆圈的速度不变？谢谢大家!

// Variables for randomCircles function with squares occuring at random times
var spot = { 
  x: 1000,
  y: 500
}

var col= {
  r: 255,
  g: 0, 
  b: 0
}

var angle = 0;

var x = 10;

function setup() { 
  frameRate(12);
  background(45, 46, 45);
  createCanvas(600, 600);
}

function draw() {
  // Changing background color of canvas to a dark gray
  background(45, 46, 45);
  //background(255, 255, 255);
  targets();
  deadlyLaser();
  randomCircles();
  harmlessLasers();
  player();

// Four targets or "bars of gold" in the background
function targets() {
  push();
  var x = 0;
    while (x < width) {  
      fill(235, 200, 37); 
      stroke(235, 200, 37); 
      rect(x + 40, 300, 25, 25);
      x = x + 100
      pop();
    } 
}

// Rotating laser
function deadlyLaser(){
  push();
  translate(300, 300);
  rotate(-angle/15);
  strokeWeight(2);
  stroke(235, 40, 26);
  // Last parameter is opacity
  fill(235, 72, 59, 127);
  rect(0, 0, 400, 400);
  x = x + 1;
  angle = angle + 2;
  pop();
}

// Random circles appearing at random times with random color
function randomCircles(){
  push();
  noStroke();
  // Randomizing positions of circles within canvas
  spot.x = random(0, width);
  spot.y= random(0, height);
  // Giving circles opacity in lass parameter; full is 255
  fill(41, 227, 235, 200);
  ellipse(spot.x, spot.y, 50, 50);
  pop();
}

// Lasers going back and fourth, happening at spontaneous times, with a hint of random color   
function harmlessLasers(){  
  push();
  stroke(random(131, 152), random(219, 255), random(167, 195));
    for (var x = 0; x < 20; x++) {
      var y = randomGaussian(800, 1400);
      line(300, 300, x, y);
      pop();
    }
}

// Player line that appears when mouse is on canvas
function player(){
  push();
  stroke(0, 224, 64);
  strokeWeight(6);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + " - " + mouseX);
  pop();
 }
}

//随机圆函数的变量，其平方在随机时间出现
var spot={
x:1000，
y:500
}
变量列={
r:255，
g:0，
b:0
}
var角=0；
var x=10；
函数设置（）{
帧率（12）；
背景（45,46,45）；
createCanvas（600600）；
}
函数绘图（）{
//将画布的背景色更改为深灰色
背景（45,46,45）；
//背景（255、255、255）；
目标（）；
致命激光（）；
随机圈（）；
Harmleslasers（）；
player（）；
//四个目标或背景中的“金条”
功能目标（）{
推（）；
var x=0；
而（x

您可以使用

frameCount

变量或

millis（）

函数执行定时相关逻辑。下面是一个小例子：

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

function draw() {

    // add a circle once per second
    if(frameCount % 60 == 0){
        ellipse(random(width), random(height), 20, 20);
    }
}

相关职位：

---

有关更多信息，请咨询。

一个简单的解决方案是将时间与以前的时间进行比较，看看是否经过了足够的时间

let timeLastUpdated = Date.now() // will hold the current date/time in milliseconds

现在唯一需要的是一个常数，表示再次随机之前经过的时间，然后进行比较

const TIME_BETWEEN_RANDOMIZATIONS = 1000; // milliseconds between new randoms

然后，在生成新的随机数之前，将经过的时间与常数进行比较，看看我们是否准备好生成新的数字：

if (Date.now() - timeLastUpdated > TIME_BETWEEN_RANDOMIZATIONS) {
   // generate new random numbers
   spot.x = random(0, width);
   spot.y = random(0, height);

   // update the time
   timeLastUpdated = Date.now();
}

---

您可以使用Javascript做任何事情。请注意，P5.js有自己的计时功能。你可能想用

millis（）

函数来代替；使用

millis（）

代替日期。现在（）谢谢你们！只要仔细检查我的理解，我就会创建两个变量（timeLastUpdated和常量）作为全局变量，然后所有介于“noStroke（）；”和“pop（）；”（包含）之间的代码都会包含在if语句中？@Karen您想要遵循的想法是将图形与更新逻辑分开。每一帧你都要画圆。只有当条件为真时，圆才会更新，而不是每一帧都为真。如果使用

update（）

方法保留逻辑，您会发现分离代码要容易得多。@RobBrander啊，这很有道理，谢谢！我会继续尝试一下：）