fire.js

const fireWidth = 50;
const fireHeight = 50;
const firePixelsArray = new Array(fireWidth * fireHeight).fill(0);
const debug = false;
const fireColorsPalette = [
  { r: 7, g: 7, b: 7 },
  { r: 31, g: 7, b: 7 },
  { r: 47, g: 15, b: 7 },
  { r: 71, g: 15, b: 7 },
  { r: 87, g: 23, b: 7 },
  { r: 103, g: 31, b: 7 },
  { r: 119, g: 31, b: 7 },
  { r: 143, g: 39, b: 7 },
  { r: 159, g: 47, b: 7 },
  { r: 175, g: 63, b: 7 },
  { r: 191, g: 71, b: 7 },
  { r: 199, g: 71, b: 7 },
  { r: 223, g: 79, b: 7 },
  { r: 223, g: 87, b: 7 },
  { r: 223, g: 87, b: 7 },
  { r: 215, g: 95, b: 7 },
  { r: 215, g: 95, b: 7 },
  { r: 215, g: 103, b: 15 },
  { r: 207, g: 111, b: 15 },
  { r: 207, g: 119, b: 15 },
  { r: 207, g: 127, b: 15 },
  { r: 207, g: 135, b: 23 },
  { r: 199, g: 135, b: 23 },
  { r: 199, g: 143, b: 23 },
  { r: 199, g: 151, b: 31 },
  { r: 191, g: 159, b: 31 },
  { r: 191, g: 159, b: 31 },
  { r: 191, g: 167, b: 39 },
  { r: 191, g: 167, b: 39 },
  { r: 191, g: 175, b: 47 },
  { r: 183, g: 175, b: 47 },
  { r: 183, g: 183, b: 47 },
  { r: 183, g: 183, b: 55 },
  { r: 207, g: 207, b: 111 },
  { r: 223, g: 223, b: 159 },
  { r: 239, g: 239, b: 199 },
  { r: 255, g: 255, b: 255 }
];

function start() {
  createFireSource();
  renderFire();

  setInterval(calculateFirePropagation, 50);
}

function calculateFirePropagation() {
  for (let col = 0; col < fireWidth; col++) {
    for (let row = 0; row < fireHeight; row++) {
      const pixelIndex = col + fireWidth * row;
      const fireDirection = 1;

      updateFireIntensityPerPixel(pixelIndex, fireDirection);
    }
  }

  renderFire();
}

function updateFireIntensityPerPixel(currentPixelIndex, fireDirection) {
  const belowPixelIndex = currentPixelIndex + fireWidth;

  if (belowPixelIndex >= fireWidth * fireHeight) return;

  const decay = Math.floor(Math.random() * 3);
  const belowPixelFireIntesity = firePixelsArray[belowPixelIndex];
  const newFireIntesity =
    belowPixelFireIntesity - decay >= 0 ? belowPixelFireIntesity - decay : 0;

  firePixelsArray[
    fireDirection ? currentPixelIndex + decay : currentPixelIndex - decay
  ] = newFireIntesity;
}

function renderFire() {
  let html = '<table cellpadding=0 cellspacing=0>';

  for (let row = 0; row < fireHeight; row++) {
    html += '<tr>';
    for (let col = 0; col < fireWidth; col++) {
      const pixelIndex = col + fireWidth * row;
      const fireIntensity = firePixelsArray[pixelIndex];
      if (debug) {
        html += '<td>';
        html += `<div class="pixel-index">${pixelIndex}</div>`;
        html += fireIntensity;
        html += '</td>';
      } else {
        const color = fireColorsPalette[fireIntensity];
        const colorString = `${color.r},${color.g},${color.b}`;
        html += `<td class="pixel" style="background-color: rgb(${colorString})">`;
        html += `</td>`;
      }
    }
    html += '</tr>';
  }

  html += '</table>';

  document.querySelector('#fireCanvas').innerHTML = html;
}

function createFireSource() {
  for (let col = 0; col < fireHeight; col++) {
    const lastRow = (fireHeight - 1) * fireWidth;
    const pixelIndex = col + lastRow;
    firePixelsArray[pixelIndex] = 36;
  }
}

start();