TheoTown

Code: Select all

let c=document.getElementById("mysnowcanvas");
c.width=c.clientWidth;
c.height=c.clientHeight;
let width = c.width;
let height = c.height;

class Flake {
  constructor(x,y,r) {
    this.x=x;
    this.y=y;
    this.r=r;
    this.speedx=0.2*Math.random();
    this.speedy=0.5*Math.random()+1;
  }
  update() {
    this.x+=this.speedx;
    this.y+=this.speedy;
    if (this.x>width+this.r) this.x=-this.r;
    if (this.y>height+this.r) this.y=-this.r;
  }
  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
    ctx.fillStyle='rgba(255,255,255,0.8)';
    ctx.fill();
  }
}

let flakes = [];
for (let i = 0; i < Math.min(width*height/2000,200); i++) {
  let r = Math.random()*20+10;
  flakes.push(new Flake(Math.random()*(width+2*r)-r,Math.random()*(height+2*r)-r,r));
}

function animate() {
  requestAnimationFrame(animate);

  var ctx=c.getContext("2d");
  ctx.clearRect(0,0,c.width,c.height);


  for(let flake of flakes) {
    flake.update();
    flake.draw(ctx);
  }
}

animate();