JSFiddle - React, Tailwind, and code Playground

by madhugb

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      
      //Make the canvas occupy the full page
      var W = window.innerWidth, H = window.innerHeight;
      canvas.width = W;
      canvas.height = H;
      
      var particles = [];
      var mouse = {};
      
      //Lets create some particles now
      var particle_count = 70;
      for(var i = 0; i < particle_count; i++)
      {
        particles.push(new particle());
      }
      
      //finally some mouse tracking
      canvas.addEventListener('mousemove', track_mouse, false);
      
      function track_mouse(e)
      {
        //since the canvas = full page the position of the mouse 
        //relative to the document will suffice
        mouse.x = e.pageX;
        mouse.y = e.pageY;
      }
      
      function particle()
      {
        //speed, life, location, life, colors
        //speed.x range = -2.5 to 2.5 
        //speed.y range = -15 to -5 to make it move upwards
        //lets change the Y speed to make it look like a flame
        this.speed = {x: -2.5+Math.random()*5, y: -10+Math.random()*5};
        //location = mouse coordinates
        //Now the flame follows the mouse coordinates
        if(mouse.x && mouse.y)
        {
          this.location = {x: mouse.x, y: mouse.y};
        }
        else
        {
          this.location = {x: W/2, y: H/2};
        }
        //radius range = 10-30
        this.radius = 5+Math.random()*10;
        //life range = 20-30
        this.life = 20+Math.random()*10;
        this.remaining_life = this.life;
        //colors
        if(this.radius)
        this.r = Math.round(Math.random()*255);
        this.g = Math.round(Math.random()*255);
        this.b = Math.round(Math.random()*255);
      }
      
      function draw()
      {
        //Painting the canvas black
        //Time for lighting magic
        //particles are painted with "lighter"
        //In the next frame the background is painted normally...