# Random Particles in Canvas

I made some randomly generated particles in canvas, best part is it made it to the front page of CodePen!

See the Pen Randomly Generated Particles by Josh Fabean (@fabean) on CodePen.

The bulk of the work I had to do was pretty simple, just loop and randomly come up with some numbers and use those numbers to display things on the screen.

``````for (let i=0; i<amountOfParticles; i++) {
particles[i] = {
y: Math.floor(Math.random() * canvas.height),
x: Math.floor(Math.random() * canvas.width),
speedX: (Math.floor(Math.random() * maxSpeed + 1) * (Math.random() < 0.5 ? -1 : 1)),
speedY: (Math.floor(Math.random() * maxSpeed + 1) * (Math.random() < 0.5 ? -1 : 1)),
color: randomColor(),
};
}
``````

Once I've done that, in my render function I basically loop over it again but this time fill in some circles with the information I have.

``````for (let i=0; i<amountOfParticles; i++) {
if (particles[i].x >= c.width || particles[i].x <= 0) {
particles[i].speedX = -(particles[i].speedX);
}

if (particles[i].y < 0 || particles[i].y > c.height) {
particles[i].speedY = -particles[i].speedY;
}

particles[i].x += particles[i].speedX;
particles[i].y += particles[i].speedY;

drawCircle(particles[i]);
}

let drawCircle = (circle) => {
ctx.fillStyle = circle.color;
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2, true);
ctx.fill();
}
``````

All in all a very simple task, that a month or so would have been super confusing to me. Now that I've made a couple different projects using canvas it's not some weird mythical thing.

You should play with canvas and learn a lot!

:wq