<canvas id="canvas" width="100%" height="100%"></canvas>

<aside class="Signature">
        <p>Codevember #7 - Twindev</p>
        <p>Diana Marchal & Nathalie Marchal</p>
		</aside>
html, body {
  margin: 0px; 
  padding: 0px; 
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
}


.Signature {
  position: absolute;
  z-index: 100;
  bottom: 20px;
  right: 20px;
  color: black;
  line-height: .2;
  font-size: .7em;
  font-family: Open Sans, sans-serif;
}
var nbOfParticles = 80;

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

//width and height of canvas :
var w = window.innerWidth;
var h = window.innerHeight;

c.width = w;
c.height = h;

var paramX = 0;
var paramY = 0;

var mouse = {
  x: w / 2, 
  y: h / 2
};

document.addEventListener('mousemove', function(e){ 
    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY 

  paramX = mouse.x;
  paramY = mouse.y *2;
}, false);

var particles = [];

    
for(i = 0; i < nbOfParticles; i++) {
  setTimeout(function(){
    paramX = Math.random() * c.width; //first creation: random x
    paramY = Math.random() * c.height; //first creation: random y

    particles.push(new createParticle);
  }, i * 15);
}

function createParticle() {

  this.x = paramX;
  this.y = paramY ;
  
  //velocity :
  this.vx = Math.random() * 4;
  this.vy = Math.random() * 4;
  
  this.size = 20;  //max size
  this.life = Math.random() * 100;  //life time

  //colors :
  var color1 = '#ED616A';
  var color2 = '#F49B61';
  var color3 = '#F3AB8C';
  var array = [color1, color2, color3];
  this.color = array[Math.floor(Math.random() * 3)]; //one of the three colors
  
  this.reset = function() {
    this.x = paramX ;
    this.y = paramY;
    this.vx = Math.random() * 4;
    this.vy = Math.random() * 4;
    this.size = 20;
    this.life = Math.random() * 30;
  }
}
  
function drawParticles() {
  requestAnimFrame(drawParticles);
  
  ctx.fillStyle = "#FFFFBB";
  ctx.fillRect(0,0, c.width, c.height);
  
  for(t = 0; t < particles.length; t++) {
    var p = particles[t];
    
    ctx.beginPath();
    ctx.fillStyle = p.color;

    ctx.arc(p.x, p.y, p.size, p.size,Math.PI*2,true); //create circles
    ctx.fill();
    
    //velocity :
    p.x+=p.vx;
    p.y+=p.vy;
    
    p.life*=0.9;
    p.size*=0.89999;
    
    //reset particles when no more lifetime :
    if(p.life < 1) {
      p.reset();
    }
  }  
}

drawParticles();

/*function resizeCanvas() {
				w = window.innerWidth;
				h = window.innerHeight;
				drawParticles();
			}*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.