var cvs = document.querySelector(".cvs"),
    ctx = cvs.getContext("2d"),
    app = {};

cvs.width  = document.body.clientWidth;
cvs.height = document.body.clientHeight;

app.graphics = {};
app.graphics.draw = function() {
  ctx.fillStyle="#333";
  ctx.fillRect(0, 0, cvs.width, cvs.height);
  
  particle.update();
  particle2.update();
  
  window.requestAnimationFrame(app.graphics.draw);
};

window.addEventListener('resize', function(event){
  cvs.width  = document.body.clientWidth;
  cvs.height = document.body.clientHeight;
});


var Particle = function(x, y, w, h, type) {
  this.x = x;
  this.y = y;
  
  this.dx = x;
  this.dy = y;
  
  this.w = w;
  this.h = h;
  
  this.draw = function() {
    ctx.fillStyle = "#0F0";
    ctx.fillRect(this.dx, this.dy, this.w, this.h);
    
    ctx.fillStyle = "#FFF";
    ctx.fillRect(this.x, this.y, this.w, this.h);
  };
  
  this.update = function() {
    if (this.x > cvs.width + this.w)
      this.x = -2
    
    this.dx = this.x;
    this.dy = this.y;
    
    this.x += 2;
    
    if (type === "sin")
      this.y = 160 + Math.sin(this.x / 15) * 50;
    
    if (type === "cos")
      this.y = 160 + Math.cos(this.x / 20) * 25;
    
    this.draw();
  }
};

var particle  = new Particle(10, 80, 4, 4, "sin");
var particle2 = new Particle(10, 80, 4, 4, "cos");
window.requestAnimationFrame(app.graphics.draw);