Estoy creando una animación con varios círculos dibujados de izquierda a derecha. Sin embargo, la animación comienza al mismo tiempo para todos los círculos y necesito que tengan un intervalo de tiempo (por ejemplo, 1 segundo) entre ellos. ¿Alguna idea sobre cómo manejar esto? Probé setInterval sin éxito. El dibujo de los círculos es el siguiente:

 function isPrime(num) { for(var i = 2; i < num; i++) if(num % i === 0) return false; return num > 1; } const settings = { width: 300, height: 930, radius: 13, gap: 5, circles: 30, }; const canvas = document.getElementById("canvas"); canvas.width = settings.width; canvas.height = settings.height; const ctx = canvas.getContext("2d"); var randomNumber = []; const circles = [...Array(settings.circles).keys()].map((i) => ({ number: randomNumber[i], x: settings.radius, y: settings.radius + (settings.radius * 2 + settings.gap) * i, radius: settings.radius, dx: 100, // This is the speed in pixels per second dy: 0, isPrime: isPrime(randomNumber[i]), })); function drawCircle(circle) { i = 0; if (circle.number > 0 && circle.number <= 10) { ctx.strokeStyle = "#0b0bf1"; } else if (circle.number > 10 && circle.number <= 20) { ctx.strokeStyle = "#f10b0b"; } else if (circle.number > 20 && circle.number <= 30) { ctx.strokeStyle = "#0bf163"; } else if (circle.number > 30 && circle.number <= 40) { ctx.strokeStyle = "#f1da0b"; } else if (circle.number > 40 && circle.number <= 50) { ctx.strokeStyle = "#950bf1"; } else if (circle.number > 50 && circle.number <= 60) { ctx.strokeStyle = "#0bf1e5"; } ctx.beginPath(); ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false); ctx.stroke(); ctx.fillText(circle.number, circle.x - 5, circle.y + 3); } function updateCircle(circle, dt) { circle.x = clamp( circle.x + circle.dx * dt, circle.radius + 1, settings.width - circle.radius - 1 ); circle.y = clamp( circle.y + circle.dy * dt, circle.radius + 1, settings.height - circle.radius - 1 ); } function animate() { ctx.clearRect(0, 0, settings.width, settings.height); circles.forEach(drawCircle); requestAnimationFrame(animate); } animate(); update((dt) => circles.forEach((circle) => updateCircle(circle, dt)), 50);