Perlin Fire

gistfile1.js

// Variable usage: (* marks globals, all other variables are used for various purposes by various parts of the code)
// a  = calculator
// b* = random data
// c* = main canvas
// d* = main canvas style / main canvas context
// e  = calculator
// f  =
// g* = main canvas composite operations
// h* = 300 (height)
// i  = counter
// j  = 
// k  = 
// l  = calculator
// m* = perlin data
// n  = calculator
// o  = calculator
// p* = progress counter
// q* = Math
// r* = context
// s* = image data
// t* = canvas
// u  = calculator
// v* = color map
// w* = 450 (width)
// x  = document / counter
// y* = 999 (size of random data)
// z  = "A" element / gradient / length of perlin data

// <i = [9...0]>
// <x = document>
// <z = "A" element>
for(v = [
      b = [
        r = [
          t = [
            m = [
              s = [x=document],
                  [q=Math],
                  [x.body.appendChild(z=x.createElement('a'))]
            ]
          ]
        ]
      ],
      [
        [  0, y=i=999, p=  0],
        [  0,   h=300, i    ],
        [  0,       0,   h*2]
      ],
      [
        [ 24,   w=190, y    ],
        [ 32,   w    , y    ],
        [ 24,   w    , y    ]
      ]
    ];i--;) b[i]=q.random(z.href='http://skypher.com/index.php/2010/11/28/perlin-flames/');
// </i = [9...0]>
// <i = [2...0]>
for(i=3;i--;)
  c = t[i] = x.createElement('canvas'),
  // <d = main canvas style>
  d=c.style,
  c.width = w = 450,
  d.width = w * 2,
  c.height = h,
  d.height = h * 2,
  // </d = main canvas style>
  // <d = main canvas context>
  d = r[i] = c.getContext('2d'),
  d.fillRect(0, 0, w, h),
  s[i] = d.getImageData(0, 0, w, 1);
// </x = document>
// </i = [2...0]>
g=[z.appendChild(c), d.globalCompositeOperation, 'lighter'];
// </z = "A" element>
// <z = gradient>
z = d.createLinearGradient(0, 0, 0, h);
z.addColorStop(0, r[2].fillStyle = 'rgba(24,9,9,.9)');
z.addColorStop(1, r[1].fillStyle = 'rgba(24,9,9,.03)');
d.fillStyle = z;
// </z = gradient>
setInterval(function () {
  // <i = [2...1]>
  for(i = 3; --i;)
    // <z = length of perlin data>
    // <x = [z...0]>
    for (x=z=w+i*h-h;x--;)
      // <u = calculator>
      // <l = calculator>
      for (m[i][x]=0,l=2,u=5;u--;l*=2)
        // <e = calculator>
        e = 1<<(u+6-i*2),
        // <n = calculator>
        n = p / i / e,
        // <o = calculator>
        o = x / e,
        // <a = calculator>
        m[i][x] += ((e = (a=b[((e = z*(n>>0)+o)>>0)%y]) + (b[(e+.999>>0)%y] - a) * (-q.cos(o%1*q.PI)/2+1/2)) + 
            (-e+(a=b[((e = z*(n+.999>>0)+o)>>0)%y]) + (b[(e+.999>>0)%y] - a) * (-q.cos(o%1*q.PI)/2+1/2)) * 
            (-q.cos(n%1*q.PI)/2+1/2)) / l;
        // </a = calculator>
        // </o = calculator>
        // </n = calculator>
        // </e = calculator>
      // </l = calculator>
      // </u = calculator>
    // </x = [z..0]>
    // </z = length of perlin data>
  // </i = [2...1]>
  // <i = [2...1]>
  for(i=3;--i;)
    // <x = [w...0]>
    for (x = w; x--;)
      // <e = calculator>
      // <u = calculator>
      for(e = m[2][x + m[1][x] * h >> 0] - .3,u=3;u--;)
        // <n = calculator>
        n=v[i][u],
        s[i].data[x * 4 + u] = q.max(0, q.min(255, e * n[1] + e*e * n[2] - n[0]));
        // </n = calculator>
      // </e = calculator>
      // </u = calculator>
    // </x = [w...0]>
  // </i = [2...1]>
  // <i = [2...1]>
  for(i=3;--i;)
    r[i].drawImage(t[i], 0, 0, w, h, 0, -4, w, h + 2),
    r[i].putImageData(s[i], 0, h-1),
    r[i].putImageData(s[i], 0, h-2);
  // </i = [2...1]>
  r[1].fillRect(0, 0, w, h);
  // <i = [2...1]>
  for(i=3;--i;)
    d.drawImage(t[i], 0, 0),
    d.globalCompositeOperation = g[i];
  // </i = [2...1]>
  d.fillRect(0, 0, w, h);
  p++;
},17);