canvas-html

by Md. Mostafa Kamal

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:700"></script>
<canvas id="c" class="abs center"></canvas>



<script>(function () {
  Math.randomInt = function (min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  };
  Math.randomDec = function (min, max, decimals) {
    return (Math.random() * (max - min) + min).toFixed(decimals || 2);
  };
  Math.randomList = function (list) {
    return list[Math.randomInt(0, list.length)];
  };
})();</script>

CSS

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: dimgray;
}

canvas {
  background: #f9f9f9;
}

div.overlay {
  width: 100%;
  opacity: .75;
  
  h1 {
    margin: 0;
    display: block;
    color: rgb(51, 51, 51);
    font-size: 10vw;
    font-family: 'Open Sans';
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
  }
}


/* Utility */

.abs {position: absolute;}
.left {left: 5px};
.right {right: 5px;}
.bottom {bottom: 5px;}
.top {top: 5px;}
.hcenter {left: 50%; transform: translateX(-50%);}
.vcenter {top: 50%; transform: translateY(-50%);}
.center {top: 50%; left: 50%; transform: translate(-50%, -50%);}
.overlay {z-index: 999;}
.hidden {display: none};

JavaScript

'use strict';

var c, ctx, w, h, particles, nextframe;


function init() {
  c = document.getElementById('c');
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
  ctx = c.getContext('2d');
  
  particles = [];
  for (var i = 0; i < 300; i++) {
    particles[i] = new Particle();
    particles[i].init();
  }
  
  loop();
}


function loop() {
  for (var i = 0; i < particles.length; i++) {
    if (particles[i].isOut()) {
      particles[i].init();
    }
    particles[i].clear();
  }
  for (var i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();
  }
  
  nextframe = requestAnimationFrame(loop);
}


function Particle() {
  this.alive = false;
  
  this.init = function () {
    this.x = w/2;
    this.y = h/2;
    this.r = Math.randomInt(4, 8);
    this.a = Math.randomDec(0, 2*Math.PI);
    this.s = Math.randomDec(.2, 2);
    this.c = Math.randomList(['tomato', 'gray', 'orange']);
    this.alive = true;
  };
}

Particle.prototype.kill = function () {
  this.alive = false;
};

Particle.prototype.isOut = function () {
  return (this.x+this.r < 0
         || this.x-this.r > w
         || this.y+this.r < 0
         || this.y-this.r > h);
};

Particle.prototype.update = function () {
  this.x += Math.cos(this.a) * this.s;
  this.y += Math.sin(this.a) * this.s;
};

Particle.prototype.clear = function () {
  ctx.clearRect(this.x-this.r-1, this.y-this.r-1, 2*this.r+2, 2*this.r+2);
};

Particle.prototype.draw = function () {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
  ctx.fillStyle = this.c;
  ctx.fill();
};


init();


window.addEventListener('resize', function () {
  cancelAnimationFrame(nextframe);
  init();
});