How to create particles in html5 canvas using javascript

how to make particles effect in html5 canvas using javascript - Nibunan

how to create particles in html5 canvas using javascript - Nibunan

how to write program to display particles effect in html5 canvas using javascript - Nibunan

how to write program to create particles animation in html5 canvas using javascript - Nibunan

how to write code to create particles effect in html5 canvas using javascript - Nibunan

particles system in html5 canvas using javascript - Nibunan

particles engine in html5 canvas using javascript - Nibunan

particles source in html5 canvas using javascript - Nibunan

Html5 canvas is evolving to give the rich graphics on browser without using flash or other plugins. Html5 canvas is being used in many places like games animations and rich user interfaces on web and so on.This airticle explains how to create the particles system in html5 canvas using javascript.

Demo

Open with new tab

Source


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Creating particles system in html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="450" id="drawing-surface"></canvas>
      <script type="text/javascript">
      function Random(range) {
      return Math.floor((Math.random() * range) + 1);
      }
      function RandomFloat(range) {
      return (Math.random() * range) + 1;
      }
      var viewport = new Viewport()
      var source = new ParticleSource();
      viewport.addObject(source);
      for (var i = 0; i < 1000; i++) {
      var particle = new Particle(source);
      particle.color = "violet";
      viewport.addObject(particle);
      }
      var source2 = new ParticleSource();
      source2.speed = 8;
      source2.location = { x: 200, y: 200 };
      source2.direction = { x: 1, y: 1 };
      viewport.addObject(source2);
      for (var i = 0; i < 1000; i++) {
      var particle = new Particle(source2);
      particle.color = 'rgb(' + Random(254) + ',' + Random(254) + ',' + Random(254) + ')';
      viewport.addObject(particle);
      }
      viewport.init();
      </script>
      </body>
      </html>
    

Viewport


      function Viewport() {
      var me = this;
      me.objects = [];
      var canvas = document.getElementById("drawing-surface");
      function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      }
      resizeCanvas();
      window.onresize = function () {
      resizeCanvas();
      }
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      me.doPaint = true;
      function drawBackgroundImage() {
      drawingSurface.fillStyle = 'black';
      drawingSurface.fillRect(0, 0, canvas.width, canvas.height);
      }
      function drawObjects() {
      for (var i = 0; i < me.objects.length; i++) {
      me.objects[i].paint(drawingSurface);
      }
      }
      me.paintInit = function () {
      me.doPaint = true;
      }
      function paint() {
      me.paintInit();
      if (me.doPaint) {
      drawBackgroundImage();
      drawObjects();
      me.doPaint = false;
      }
      }
      var timer;
      me.init = function () {
      timer = setInterval(function () { paint(); }, 1000 / 30);
      };
      me.repaint = function () {
      me.doPaint = true;
      };
      me.addObject = function (obj) {
      me.objects.push(obj);
      }
      }
    

Particle Source


      function ParticleSource() {
      var me = this;
      me.speed = 10;
      me.location = { x: 500, y: 500 };
      me.direction = { x: 0, y: 1 };
      me.move = function () {
      switch (me.direction.x) {
      case 0:
      if (me.location.x <= 0) {
      me.direction.x = 1;
      me.location.x += me.speed;
      }
      else {
      me.location.x -= me.speed;
      }
      break;
      case 1:
      if (me.location.x >= window.innerWidth - 32) {
      me.direction.x = 0;
      me.location.x -= me.speed;
      }
      else {
      me.location.x += me.speed;
      }
      break;
      }
      switch (me.direction.y) {
      case 0:
      if (me.location.y <= 0) {
      me.direction.y = 1;
      me.location.y += me.speed;
      }
      else {
      me.location.y -= me.speed;
      }
      break;
      case 1:
      if (me.location.y >= window.innerHeight - 32) {
      me.direction.y = 0;
      me.location.y -= me.speed;
      }
      else {
      me.location.y += me.speed;
      }
      break;
      }
      }
      me.paint = function (context) {
      me.move();
      context.fillStyle = me.color;
      context.beginPath();
      context.arc(me.location.x, me.location.y, 10, 0, 2 * Math.PI, false);
      context.fill();
      context.closePath();
      }
      }
    

Particle


      function Particle(source) {
      var me = this;
      me.reset = function () {
      me.wind = RandomFloat(10)-5;
      me.speed = RandomFloat(5)+2;
      me.size = { width: RandomFloat(3) + 1, height: RandomFloat(3) + 1 };
      me.location = { x: source.location.x, y: source.location.y };
      };
      me.reset();
      me.move = function () {
      if (me.location.y > window.innerWidth || me.location.x < 0 || me.location.x > window.innerWidth) {
      me.reset();
      }
      me.location.x += me.wind;
      me.location.y += me.speed;
      };
      me.paint = function (context) {
      me.move();
      context.fillStyle =me.color;
      context.fillRect(me.location.x, me.location.y, me.size.width, me.size.height);
      };
      }