JavaScript "Partikel erstellen"

#1
Hallo,

Ich bin Vanessa und arbeite derzeit in einem Team an einem Hochschulprojekt. Wir möchten gerne eine Animation mit Partikeln machen wie in diesem GIF.
Particle.gif
Wir würden Velocity benutzen, um die Partikel durch Zufall also random auf dem Canvas zu bewegen, wir wissen aber nicht wie wir das mit einer Schleife machen können.

Vielen Dank für eure Hilfe
Vanessa







Das ist der Code in javascript:



window.onload = onReady;
var canvas;
var ctx;

function onReady(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');


// loading picture
img = new Image();
img.src = 'particle.png';

draw();
}


function draw(){

var more=1;
for(var i=0; i<100; i++){
more=more+30;
ctx.beginPath();
ctx.drawImage(img, 20+more, 200);
ctx.fill();
}
}
 
Oben