LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
 body,html{
        padding:0;
        margin: 0;
        overflow:hidden;
 }
JS
window.onload = function(){
 var canvas = document.createElement("canvas");
 var ctx = canvas.getContext("2d");
canvas.height =innerHeight;
canvas.width = innerWidth;
 document.body.appendChild(canvas);

var particleIndex = 0;
 var particleNum = 10 ;
 var life  = 0;
 var maxlife = 100;

 var particles = {};

 function Particle () {
     this.posX = canvas.width / 2; //(Math.random() * 10 - 2)
     this.posY = canvas.height  / 4;

     this.Yvelocity = Math.random() * 20 - 10;
     this.Xvelocity = Math.random() * 20 - 10;

     this.gravity = 1;
     this.radiusize = 10;
     particleIndex++;
     particles[particleIndex] = this;
      this.id = particleIndex;
      this.life = 0;
      this.maxLife=90;
 }

Particle.prototype.draw= function() {
    this.posX+=this.Xvelocity;
    this.posY+=this.Yvelocity;
    this.Yvelocity+=1;
     this.color = "#FF0000";
    if (this.posY > canvas.height * 0.98){
        this.Yvelocity *= -0.6;
        this.Xvelocity*= 0.75;

        this.posY = canvas.height * 0.98;
    }

    this.life++;
if (this.life >= this.maxLife){
    delete particles[this.id];
}
        ctx.beginPath();
        ctx.fillStyle=this.color;
        // Draws a circle of radius 10 at the coordinates posX , posY on the canvas
        ctx.arc(this.posX, this.posY, 10, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
};

setInterval(function(){
   ctx.fillStyle = "rgba(0,0,0,0.3)";
   ctx.fillRect(0, 0, canvas.width, canvas.height);


for(var i =0 ; i < particleNum ;i++){
if (Math.random() > 0.7){
     new Particle();
}
}
for(  i in particles){
    particles[i].draw();
}

},30);
};
Term
Sat, 01/13/2018 - 08:24

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv