Overlay Fire


<head></head>
<body></body>

<script>var pP=[],tP,cX,cY,c,ctx,w=1920;h=1080;pi=2*Math.PI;var canvasName="pablo"</script>
<script>function init(){c=document.createElement('canvas');c.width=w;c.height=h;ctx=c.getContext('2d');ctx.globalCompositeOperation="lighter";c.id=canvasName;c.style.position='absolute';c.style.left="0px";c.style.pointerEvents="none";c.style.top="0px";document.body.appendChild(c);};</script>
<script></script>
<script>init();

//var mx=40,sp=5,sz=50,np=200,sx=w/2,sy=h/2;
var mx=100,sp=5,sz=150,np=50,sx=155,sy=h-140;

function Particle(x,y,xs,ys){this.x=x;this.y=y;this.xs=xs;this.ys=ys;this.lt=0;}

for(var i=0;i<np;i++)
{
  const p=new Particle(sx,sy,(Math.random()*2*sp-sp)/2,0-Math.random()*2*sp);
  pP.push(p);
}
let counter = 0;
const maxCounter = 2000;
let colorToggle = false;

let r = 255;
let g = 255;
let b = 255;
let a = 1;

function burn(flame){
  {
    //ctx.fillStyle="rgba("+(260-(flame.lt*2))+","+((flame.lt*2)+50)+","+(flame.lt*2)+","+(((mx-flame.lt)/mx)*0.4)+")";


    // caLLow added BELOW
    counter++;
    if(counter > maxCounter) {
        counter = 0;
        colorToggle = !colorToggle;
    }

    const rMax = (260-(flame.lt*2));
    const val = counter / maxCounter;

    if(colorToggle) {
        r = rMax - rMax * val;
        g = ((flame.lt*2)+50);
        b = (flame.lt*2);
        a = (((mx-flame.lt)/mx)*0.1);
    }
    else {
        r = rMax * val;
        g = ((flame.lt*2)+50);
        b = (flame.lt*2);
        a = (((mx-flame.lt)/mx)*0.1);
    }
    // caLLow added ABOVE

    ctx.fillStyle="rgba("+r+","+g+","+b+","+a+")";
    ctx.beginPath();
    ctx.arc(flame.x,flame.y,(mx-flame.lt)/mx*(sz/2)+(sz/2),0,pi);
    ctx.fill();
    flame.x+=flame.xs;
    flame.y+=flame.ys;
    flame.lt++;

    if(flame.lt >= mx * (Math.random() * sp))
    {
      flame.x = sx;
      flame.y = sy;
      flame.xs = (Math.random()*2*sp-sp)/2;
      flame.ys = 0-Math.random()*2*sp;
      flame.lt = 0;
    }
  }
}

function fire(){
  ctx.clearRect(0,0,w,h);
  pP.map(burn);
}

//setInterval(function(){requestAnimationFrame(fire)}, 25);
setInterval(function(){requestAnimationFrame(fire)}, 100);

</script>