const c = document.getElementById("canvas");
const ctx = c.getContext("2d");

c.width=window.innerWidth;
c.height=window.innerHeight;

const width =c.width;
const height=c.height;


class Partikul{

    constructor(x,y,r){
        this.x=x;
        this.y=y;
        this.r=r;
    }

    ciz() {
        ctx.fillStyle="white";
        ctx.beginPath();
        ctx.arc(this.x, this.y,this.r,0,Math.PI * 2);
        ctx.closePath();
        ctx.fill();
     }
     guncelle() {
        this.x += Math.random() * 2 + 1 ;
        this.y += Math.random() * 2 + 1 ; 
     }
    
}

function animasyon() {
ctx.clearRect(0,0,width,height);

tanecikler.forEach(p=>{
    p.guncelle();
    p.ciz();
})
requestAnimationFrame(animasyon);
}
function init() {
 for(var y=100;y<900;y+=50){//900
    for(var x=100;x<1600;x+=50){//1600
        tanecikler.push(new Partikul(x,y,2));
     }
 }

    animasyon();
}
var tanecikler=[];
init();