JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<center>
<canvas id="fire_c" width="200px" height="200px" style="width: 200px; height: 200px;"></canvas>
<br>
<a href="#" onclick="start();"> Старт </a> | <a href="#" onclick="stop();"> Стоп </a>
 <br>
<a href="#" onclick="gen_fire_pal()">Палитра №1</a> | <a href="#" onclick="gen_fire_pal2()">Палитра №2</a>
 </center>

JavaScript

// requestAnim shim layer by Paul Irish
   window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                 window.setTimeout(callback, 1000 / 60);
              };
   })();

var SCREEN_WIDTH  = 200, SCREEN_HEIGHT = 200;
var fire = Array(SCREEN_WIDTH * (SCREEN_HEIGHT + 2));
var colors = Array(256 * 3); // r g b color parts
var FIRE_INTENSE;
//палитра для огня
function gen_fire_pal(){
	var p=0;
    for(i = 0;i < 256 - 8 - 32 -16 -32;i++){			
        colors[p++] = 0;
        colors[p++] = 0;
        colors[p++] = 0;       
    }
    for(i = 0;i < 32;i++){		
        colors[p++] = ((i-32)<<3) & 255;
        colors[p++] = 0;
        colors[p++] = 0;       
    }
    for(i = 0;i < 16;i++){
        colors[p++] = 255;
        colors[p++] = i<<4;
        colors[p++] = 0;
        
    }
    for(i = 0;i < 32;i++){
        colors[p++] = 255;
        colors[p++] = 255;
        colors[p++] = ((i - 32)<<3) & 255;    
    }
    for(i = 0;i < 8;i++){			
        colors[p++] = 255;
        colors[p++] = 255;
        colors[p++] = 255;    
    }  
    clear_screen();
    FIRE_INTENSE= 0.2;
}
function gen_fire_pal2(){
 for (i = 0; i < 32; ++i)
    {
      /* black to blue, 32 values*/
      colors[i * 3 + 0] = 0;
      colors[i * 3 + 2] = i << 1;
      colors[i * 3 + 1] = 0;

      /* blue to red, 32 values*/
      colors[(i + 32) * 3 + 0] = i << 3;
      colors[(i + 32) * 3 + 1] = 0;        
      colors[(i + 32) * 3 + 2] =  64 - (i << 1);

      /*red to yellow, 32 values*/
      colors[(i + 64) * 3 + 0] = 255;
      colors[(i + 64) * 3 + 1] = i << 3;
      colors[(i + 64) * 3 + 2] = 0;

      /* yellow to white, 162 */
      colors[(i + 96) * 3 + 0] =...