Fire JS Bin - Attractor

var F, D, DATA = TDATA = 0;
var DIGITS = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
    B = DIGITS.length,
    B2 = B * B,
    B3 = B * B2,
    REVERSE = {};
for (var i = 0; i < B; ++i) REVERSE[DIGITS[i]] = i;

function $(id) {
  return document.getElementById(id)
}

function cc(e) {
  return e.getContext("2d")
}

function get_time() {
  var d = new Date();
  return d.getTime()
}

function rr(minx, maxx) {
  return minx + (maxx - minx) * Math.random()
}

function col(c) {
  return ('00000' + c.toString(16)).substr(-6)
}

function hex(c) {
  return "#" + col(c)
}

function clamp(x, l, h) {
  return x < l ? l : x > h ? h : x
}

function pxl(p, w, h, x, y, c) {
  x = clamp(x, 0, w - 1);
  y = clamp(y, 0, y - 1);
  return p[4 * (x + y * w) + c]
}

function precompute(src, dst, w, h) {
  var x, y, tot = i = 0;
  for (y = 0; y < h; y++)
  for (x = 0; x < w; x++) {
    tot = src.data[4 * i + 3];
    if (x > 0) tot += dst[(i - 1) * 4 + 3];
    if (y > 0) tot += dst[(i - w) * 4 + 3];
    if (x > 0 && y > 0) tot -= dst[(i - w - 1) * 4 + 3];
    dst[4 * i + 3] = tot;
    i++;
  }
}

function blur_box(ids, idd, bx, by) {
  var src = $(ids),
      sc = cc(src),
      width = src.width,
      height = src.height;
  var dst = $(idd),
      dc = cc(dst);
  var sd = sc.getImageData(0, 0, width, height),
      dd = dc.getImageData(0, 0, width, height);

if (bx < 0 || by < 0) dc.drawImage(src, 0, 0);

if (!TDATA) TDATA = new Array(width * height * 4);
  precompute(sd, TDATA, width, height);

var x, y, tot, n = i = 0,
      c = 3,
      mul = 1 / ((bx * 2 + 1) * (by * 2 + 1));
  for (y = 0; y < height; y++) {
    for (x = 0; x < width; x++) {
      tot = pxl(TDATA, width, height, x + bx, y + by, c) + pxl(TDATA, width, height, x - bx, y - by, c) - pxl(TDATA, width, height, x - bx, y + by, c) - pxl(TDATA, width, height, x + bx, y - by, c);

n = i * 4;
      dd.data[n] = 0xff;
      dd.data[n + 1] = 0xff;
      dd.data[n + 2] = 0xff;
      dd.data[n + 3] = tot * mul;

i++;
    }
  }
  dc.putImageData(dd, 0, 0);
}

function composite(idm, idc, idd) {
  var dst = $(idd),
      dc = cc(dst),
      width = dst.width,
      height = dst.height;

var md = cc($(idm)).getImageData(0, 0, width, height);
  var cd = cc($(idc)).getImageData(0, 0, width, height);
  var dd = dc.getImageData(0, 0, width, height);

var a, x, y, start = 0;
  for (x = 0; x < width; x++)
  for (y = 0; y < height; y++) {
    start = (x + y * width) * 4;
    a = md.data[start + 3] / 255;
    dd.data[start] = a * cd.data[start];
    dd.data[start + 1] = a * cd.data[start + 1];
    dd.data[start + 2] = a * cd.data[start + 2];
    dd.data[start + 3] = 255;
  }

dc.putImageData(dd, 0, 0);
}

function render_gradient(id, s1, s2, s3, c1, c2, c3, r) {
  var canvas = $(id),
      ctx = cc(canvas),
      w = canvas.width,
      h = canvas.height;

var diag = Math.sqrt(w * w + h * h) / 2,
      dx = Math.cos(r),
      dy = Math.sin(r);
  var sx = clamp(w / 2 - dx * diag, 0, w);
  var sy = clamp(h / 2 - dy * diag, 0, h);
  var ex = clamp(w / 2 + dx * diag, 0, w);
  var ey = clamp(h / 2 + dy * diag, 0, h);
  var lingrad = ctx.createLinearGradient(sx, sy, ex, ey);

lingrad.addColorStop(s1, c1);
  lingrad.addColorStop(s2, c2);
  lingrad.addColorStop(s3, c3);

ctx.fillStyle = lingrad;
  ctx.fillRect(0, 0, w, h);
}

function render_shape_offline(id, iterations, size, x, y, p) {
  var i, a = p.a,
      b = p.b,
      c = p.c,
      d = p.d,
      e = p.e,
      f = p.f,
      g = p.g,
      h = p.h,
      zoom = p.zoom,
      dx = p.dx,
      dy = p.dy;
  var canvas = $(id),
      ctx = cc(canvas),
      width = canvas.width,
      height = canvas.height,
      cx = dx + width / 2,
      cy = dy + height / 2;

ctx.clearRect(0, 0, width, height);

var l = width * height;
  if (!DATA) {
    DATA = new Array(l)
  }
  for (i = 0; i < l; ++i) DATA[i] = 0;

var tmpX, tmpY, px, py;
  for (i = 0; i < iterations; ++i) {
    px = Math.round(cx + x * 50 * zoom);
    py = Math.round(cy + y * 50 * zoom);
    if (px >= 0 && px < width && py >= 0 && py < height) DATA[px + py * width]++;

tmpX = a * Math.sin(b * y) + c * Math.cos(d * x);
    tmpY = e * Math.sin(f * x) + g * Math.cos(h * y);

x = tmpX;
    y = tmpY;
  }

var datamax = DATA[0];
  for (i = 1; i < l; ++i) if (DATA[i] > datamax) datamax = DATA[i];

var q = ctx.getImageData(0, 0, width, height);
  for (i = 0; i < l; ++i) {
    if (DATA[i] > 0) {
      n = i * 4;
      q.data[n] = 0xff;
      q.data[n + 1] = 0xff;
      q.data[n + 2] = 0xff;
      q.data[n + 3] = clamp(255 * (0.025 + 4 * DATA[i] / datamax), 0, 0xff);
    }
  }
  ctx.putImageData(q, 0, 0);
}

function generate_parameters(maxtrials) {
  var i, a, b, c, d, e, f, g, h, s1, s2, s3, c1, c2, c3, r;

for (i = 0; i < maxtrials; ++i) {
    a = rr(-2.0, 2.0);
    b = rr(-2.0, 2.0);
    c = rr(-2.0, 2.0);
    d = rr(0.2, 2.0);
    e = rr(-2.0, 2.0);
    f = rr(-2.0, 2.0);
    g = rr(-2.0, 2.0);
    h = rr(0.1, 2.0);

var res = test_attractor(a, b, c, d, e, f, g, h, 2, 100, 1000);
    if (res.ok) break;
  }

if (i == maxtrials) {
    a = -1.32, b = -1.47, c = 1.65, d = 1.26, e = -0.35, f = 0.63, g = 1.51, h = 1.71;
  }

var width = height = 300;

var zoom = Math.min(width / (res.maxx - res.minx), height / (res.maxy - res.miny));
  var dx = 0.5 * (width - (res.maxx + res.minx));
  var dy = 0.5 * (height - (res.maxy + res.miny));

if (zoom > 1) zoom = 1;
  else zoom *= 0.9;

zoom *= 1.5;

s1 = 0.25;
  s2 = 0.5;
  s3 = 0.75;

c1 = Math.floor(Math.random() * 0xffffff);
  c2 = Math.floor(Math.random() * 0xffffff);
  c3 = Math.floor(Math.random() * 0xffffff);

r = 2 * Math.PI * Math.random();

var parameters = {
    'a': a,
    'b': b,
    'c': c,
    'd': d,
    'e': e,
    'f': f,
    'g': g,
    'h': h,
    's1': s1,
    's2': s2,
    's3': s3,
    'c1': c1,
    'c2': c2,
    'c3': c3,
    'r': r,
    'zoom': zoom,
    'dx': dx,
    'dy': dy
  }

return parameters;
}

function ef(f) {
  var n = Math.floor(((f + 2) / 4) * B3);
  var d1 = Math.floor(n / B2);
  var d2 = Math.floor((n - d1 * B2) / B);
  var d3 = Math.floor(n - d1 * B2 - d2 * B);
  return DIGITS[d1] + DIGITS[d2] + DIGITS[d3];
}

function ef2(f) {
  var n = f * 100 + B3 / 2;
  var d1 = Math.floor(n / B3);
  var d2 = Math.floor((n - d1 * B3) / B2);
  var d3 = Math.floor((n - d1 * B3 - d2 * B2) / B);
  var d4 = Math.floor(n - d1 * B3 - d2 * B2 - d3 * B);
  return DIGITS[d1] + DIGITS[d2] + DIGITS[d3] + DIGITS[d4];
}

function er(r) {
  return DIGITS[Math.floor(r * (B - 1))]
}

function ed(r) {
  var n = Math.floor(r / (2 * Math.PI) * B2);
  var d1 = Math.floor(n / B);
  var d2 = Math.floor(n - d1 * B);
  return DIGITS[d1] + DIGITS[d2];
}

function df(s, i) {
  return ((B2 * REVERSE[s[i]] + B * REVERSE[s[i + 1]] + REVERSE[s[i + 2]]) / B3) * 4 - 2
}

function df2(s, i) {
  return ((B3 * REVERSE[s[i]] + B2 * REVERSE[s[i + 1]] + B * REVERSE[s[i + 2]] + REVERSE[s[i + 3]]) - B3 / 2) / 100
}

function dr(s, i) {
  return REVERSE[s[i]] / B
}

function dd(s, i) {
  return 2 * Math.PI * (B * REVERSE[s[i]] + REVERSE[s[i + 1]]) / B2
}

function decode_pars(s) {
  var p = {
    'a': df(s, 0),
    'b': df(s, 3),
    'c': df(s, 6),
    'd': df(s, 9),
    'e': df(s, 12),
    'f': df(s, 15),
    'g': df(s, 18),
    'h': df(s, 21),
    's1': dr(s, 24),
    's2': dr(s, 25),
    's3': dr(s, 26),
    'c1': parseInt(s.substr(27, 6), 16),
    'c2': parseInt(s.substr(33, 6), 16),
    'c3': parseInt(s.substr(39, 6), 16),
    'r': dd(s, 45),
    'zoom': df2(s, 47),
    'dx': df2(s, 51),
    'dy': df2(s, 55)
  }
  return p;
}

function encode_pars(p) {
  return ef(p.a) + ef(p.b) + ef(p.c) + ef(p.d) + ef(p.e) + ef(p.f) + ef(p.g) + ef(p.h) + er(p.s1) + er(p.s2) + er(p.s3) + col(p.c1) + col(p.c2) + col(p.c3) + ed(p.r) + ef2(p.zoom) + ef2(p.dx) + ef2(p.dy);
}

function test_attractor(a, b, c, d, e, f, g, h, epsilon, threshold, iterations) {
  var i, j, x = y = 0,
      minx = miny = 9999999999,
      maxx = maxy = 0,
      seeds = [],
      px, py, tmpX, tmpY, unique, dx, dy;
  for (i = 0; i < iterations; i++) {
    px = Math.round(150 + x * 50);
    py = Math.round(150 + y * 50);

tmpX = a * Math.sin(b * y) + c * Math.cos(d * x);
    tmpY = e * Math.sin(f * x) + g * Math.cos(h * y);

x = tmpX;
    y = tmpY;

if (seeds.length == 0) seeds.push([px, py]);
    else {
      unique = 1;
      for (j = 0; j < seeds.length; j++) {
        dx = Math.abs(seeds[j][0] - px);
        dy = Math.abs(seeds[j][1] - py);
        if (dx < epsilon && dy < epsilon) unique = 0;
      }
      if (unique) {
        seeds.push([px, py]);
        if (px < minx) minx = px;
        else if (px > maxx) maxx = px;
        if (py < miny) miny = py;
        else if (py > maxy) maxy = py;
      }
    }
  }
  return {
    'ok': seeds.length > threshold,
    'minx': minx,
    'maxx': maxx,
    'miny': miny,
    'maxy': maxy
  };
}

function render_attractor_canvas(id, p) {
  render_shape_offline("shape", 300000, 1, 0, 0, p);
  blur_box("shape", "glow", 5, 5);
  cc($("glow")).drawImage($("shape"), 0, 0);
  render_gradient("color", p.s1, p.s2, p.s3, hex(p.c1), hex(p.c2), hex(p.c3), p.r);
  composite("glow", "color", id);
}

function go(hash) {
  var p, start = get_time();

if (hash) p = decode_pars(hash);
  else {
    p = generate_parameters(20);
    hash = encode_pars(p)
  }

render_attractor_canvas("final", p);

set_url(hash);

D.innerHTML = "<p>Computed in " + (get_time() - start) + " ms</p>";
}

function get_hash(url) {
  var c = url.split("#");
  if (c.length == 2) return c[1];
  return ""
}

function set_url(t) {
  window.location.hash = t;
  $("l").href = "http://alteredqualia.com/attractor/#" + t
}