Me gustaría hacer que algunos elementos de una matriz aparezcan en diferentes momentos, el tiempo disminuirá con el tiempo (por lo que los elementos aparecerán cada vez más rápido). Lo intenté con setTimeout y setInterval sin suerte, creo que es porque estoy recorriendo la matriz.
No puedes lograr eso a través de intervalos. Sin embargo, es posible con tiempos de espera recursivos. Por ejemplo, digamos que el tiempo está disminuyendo en 2x:
const initialDuration = 10000; function someAnimation(duration) { // Your animation code here... setTimeout(() => someAnimation(duration / 2), duration); } someAnimation(initialDuration);Aquí hay un ejemplo simple de p5.js que, con suerte, debería orientarlo en la dirección correcta.
Estoy llamando a la función setTimeout para cada objeto en la inicialización. El retraso del tiempo de espera se incrementa en un incrementor de valor que disminuye cada iteración.
let circles = []; let count = 100; let incrementor = 500; let delay = 500; function setup() { createCanvas(400, 400); for (let i = 0; i < count; i++) { let circle = { x: random(width), y: random(height), show: false, } incrementor *= 0.9; delay += incrementor; setTimeout(() => circle.show = true, delay); circles.push(circle); } } function draw() { background(220); noStroke() fill(0, 128, 128); for (let circle of circles) { if (circle.show) { ellipse(circle.x, circle.y, 10, 10); } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>