fire.js

import {random} from 'lodash';
// import {run} from 'modules/engine';

// run();

const width = 320;
const height = 200;
const maxHeat = 255;
const size = width * height;

function heat(fire) {
  let newFire = [...fire];
  // add hot spots near bottom
  const distanceFromBottom = width * 20;
  for (let i = 0; i < random(100, 500); i++) {
    newFire[fire.length - random(0, distanceFromBottom)] = maxHeat;
  }
  return newFire;
}

function blurUp(fire, changer = -1) {
  let newFire = Array(fire.length).fill(0);
  let offs = 0;
  for (let y = 0; y < height - 2; y++) {
    // set first pixel in line to 0
    newFire[offs] = 0;
    offs++;

    for (let x = 1; x < width - 1; x++) {
      let total =
        fire[offs - 1] +
        fire[offs + 1] +
        fire[offs + width - 1] +
        fire[offs + width] +
        fire[offs + width + 1] +
        fire[offs + width * 2 - 1] +
        fire[offs + width * 2] +
        fire[offs + width * 2 + 1];

      // bitshift divide by 8ish
      // -1 to lose some intensity
      let avg = total >> 3;
      if (avg > 0) avg += changer;
      newFire[++offs] = avg;
    }

    //set last pixel to 0
    newFire[offs] = 0;
    offs++;
  }

  return newFire;
}

let canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
let ctx = canvas.getContext('2d');

function draw() {
  var imageData = ctx.createImageData(width, height);
  let {data} = imageData;

  for (let i = 0; i < data.length; i += 4) {
    let color = getColor(fire[i / 4]);
    data[i] = color.r;
    data[i + 1] = color.g;
    data[i + 2] = color.b;
    data[i + 3] = 255;
  }

  ctx.putImageData(imageData, 0, 0);
}

function gradient(length, from, to) {
  let arr = Array(length).fill(0);
  return arr.map((_, i) => {
    // distance from "from" color (start at 0)
    let k = i / length;

    return {
      r: from.r + (to.r - from.r) * k,
      g: from.g + (to.g - from.g) * k,
      b: from.b + (to.b - from.b) * k
    };
  });
}

const palette = [
  ...gradient(28, {r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 60}),
  ...gradient(20, {r: 0, g: 0, b: 60}, {r: 128, g: 0, b: 0}),
  ...gradient(20, {r: 128, g: 0, b: 0}, {r: 128, g: 128, b: 0}),
  ...gradient(60, {r: 128, g: 128, b: 0}, {r: 255, g: 255, b: 128}),
  ...gradient(127, {r: 255, g: 255, b: 128}, {r: 255, g: 255, b: 128})
];

function getColor(intensity) {
  return palette[intensity];
}

let fire = Array.from({length: size}, () => 0);
// let fire2 = Array.from({length: size}, () => 0);

console.log(palette);
let step = 0;
function render() {
  if (++step === 1) {
    fire = heat(fire);
    fire = blurUp(fire);
    // fire2 = heat(fire2);
    // fire2 = blurUp(fire2, 1);
    draw();
    step = 0;
  }
  window.requestAnimationFrame(render);
}

render();