Как рисовать объект в массиве один за другим не все одновременно?

Question

Я использую библиотеки p5js с JavaScript и делаю программу для отображения пятен случайного цвета и положения. Единственное, что все пятна сделаны в цикле for и затем нарисованы все сразу. Как сделать так, чтобы пятна рисовались по одному, а затем останавливались в конце массива? Весь код, который я использую, приведен ниже:

var spots = [] 
var ammount = 1000 

function setup() { 
    createCanvas(windowWidth , windowHeight); 
    background(0); 
    for (var i = 0; i <= ammount; i++) { 
    spots[i] = new Spot(); 
    } 
} 

function draw() { 
    for (var i = 0; i < spots.length; i++) { 
    spots[i].render(); 
    } 
} 

function Spot() { 
    this.x = random(0, width); 
    this.y = random(0, height); 
    this.d = 24 
    this.col = { 
    r:random(50, 200), 
    g:random(20, 241), 
    b:random(100, 200), 
    alpha: random(50, 150) 
    }; 

    this.render = function() { 
    noStroke(); 
    fill(this.col.r,this.col.g,this.col.b,this.col.alpha); 
    ellipse(this.x, this.y, this.d, this.d) 
    } 
} 

Answer 1

Если вы не хотите, чтобы все пятна появляются в начале, то вы не должны создавать их в настройки функции. Вместо этого создавайте одно место каждый раз, когда вызывается ничья, пока у вас не будет больше пятен для создания. Как ничья называется асинхронно библиотекой p5, вы увидите, что они появляются постепенно.

Так что вам нужно сделать два изменения, отмеченные в приведенном ниже фрагменте кода с комментарием:

var spots = [] 
 
var ammount = 1000 
 

 
function setup() { 
 
    createCanvas(windowWidth , windowHeight); 
 
    background(0); 
 
    // don't create the spots at the setup phase 
 
} 
 

 
function draw() { 
 
    for (var i = 0; i < spots.length; i++) { 
 
    spots[i].render(); 
 
    } 
 
    // As long as you have not created all spots, create one now: 
 
    if (spots.length < ammount) spots.push(new Spot()); 
 
} 
 

 
function Spot() { 
 
    this.x = random(0, width); 
 
    this.y = random(0, height); 
 
    this.d = 24 
 
    this.col = { 
 
    r:random(50, 200), 
 
    g:random(20, 241), 
 
    b:random(100, 200), 
 
    alpha: random(50, 150) 
 
    }; 
 

 
    this.render = function() { 
 
    noStroke(); 
 
    fill(this.col.r,this.col.g,this.col.b,this.col.alpha); 
 
    ellipse(this.x, this.y, this.d, this.d) 
 
    } 
 
}

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

Answer 2

Вы могли бы сделать что-то вроде этого.

var i = 0; 
var iterationCount = spots.length; 
function draw() { 
    spots[i].render(); 
    i++; 
    if (i <= iterationCount){ 
     setTimeout(draw, 500); // Here 500 will be equivalent to half a second. so you will have a spot for every half a second 
    } 
} 
draw();