Fire

Cellular automata looking like fire.

by Nikita Sadkov

HTML

<p id="info">hello</p>
<canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>

JavaScript

// Based of https://homineludens.itch.io/tic-fire-demo-
// It was pain in the ass to read their Lua code dealing with true/false.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cv_w = canvas.width;
var cv_h = canvas.height;

var info = document.getElementById('info');

var fire_size = 1.5;
var FPS = 30; //frames per seconds
var cols = 100;
var rows = 100;

var pal = ["#140C1C", "#442434", "#30346D", "#4E4A4F",
           "#854C30", "#346524", "#D04648", "#757161",
           "#597DCE", "#D27D2C", "#8595A1", "#6DAA2C",
           "#D2AA99", "#6DC2CA", "#DAD45E", "#DEEED6"]
var map = [15,15,
					 14,14,
					 9,9,
					 6,6,
					 3,
					 7,
					 1,
					 0];

var cell_w = cv_w/cols
var cell_h = cv_h/rows

var buf = []

for (x = -2; x < cols+2; x++) {
  buf[x] = [];
  for (y = -2; y < rows+2; y++) {
   if (0 <= x && x < cols && 0 <= y && y < rows) {
      buf[x][y] = 0;
    } else {
      buf[x][y] = 666;
    }
  }
}

var step = 0;

function rnd(min, max) {
    return Math.round(Math.random() * (max - min) ) + min;
}

function animate() {
  info.innerHTML = "Step: " + step;

  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, cv_w, cv_h);

  for (x = 1; x < cols-1; x++) {
    for (y = 1; y < rows; y++) {
    	c=buf[x][y];
      if (c != 666) {
        b=buf[x][y-1];
        t=buf[x][y+1];
        l=buf[x-1][y];
        r=buf[x+1][y];
        if (b==666) b = 0;
        if (t==666) t = 0;
        if (l==666) l = 10;
        if (r==666) r = 10;
        c = Math.floor((b+t+l+r)/3.2);
      }
      buf[x][y-2] = c;
    }
  }
  for (x = 0; x < cols; x++) {
    buf[x][rows] = rnd(0,8);
    buf[x][rows-1] = buf[x][rows];
  }
  for (x = 0; x < cols; x++) {
    for (y = 0; y < rows; y++) {
      if (buf[x][y] < 16)
      {
        ctx.fillStyle = pal[map[buf[x][y]]];
        ctx.fillRect(x*cell_w, y*cell_h, cell_w, cell_h);
      } else {
        ctx.fillStyle = pal[0];
        ctx.fillRect(x*cell_w, y*cell_h, cell_w, cell_h);
     ...