Fire JS Bin - Squares - 2

You can jump to the latest bin by adding /latest to your URL

z

Find

⟲

Replace

⊗ All Replace

Event.observe(window, "load", function () {
  var F = Element.addClassName;
  var ae = Element.removeClassName;
  var s = Event.observe;
  var y = $("b");
  var p = 0;
  var x = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

function af(am) {
    var ai, ak, ag;
    var al, aj, ah;
    ag = am.length;
    ak = 0;
    ai = "";
    while (ak < ag) {
      al = am.charCodeAt(ak++) & 255;
      if (ak == ag) {
        ai += x.charAt(al >> 2);
        ai += x.charAt((al & 3) << 4);
        ai += "==";
        break
      }
      aj = am.charCodeAt(ak++);
      if (ak == ag) {
        ai += x.charAt(al >> 2);
        ai += x.charAt(((al & 3) << 4) | ((aj & 240) >> 4));
        ai += x.charAt((aj & 15) << 2);
        ai += "=";
        break
      }
      ah = am.charCodeAt(ak++);
      ai += x.charAt(al >> 2);
      ai += x.charAt(((al & 3) << 4) | ((aj & 240) >> 4));
      ai += x.charAt(((aj & 15) << 2) | ((ah & 192) >> 6));
      ai += x.charAt(ah & 63)
    }
    return ai
  }
  var e = function (ag, ai, ah) {
    this.x = ag;
    this.y = ai;
    this.d = ah
  };
  e.prototype.move = function () {
    var ag = this.d;
    if (ag == 0) {
      this.x += 1
    }
    if (ag == 1) {
      this.y -= 1
    }
    if (ag == 2) {
      this.x -= 1
    }
    if (ag == 3) {
      this.y += 1
    }
  };

function o(aj, ah, ak) {
    var ai = [];
    for (var ag = 0; ag < aj; ag++) {
      ai[ag] = [];
      for (var al = 0; al < ah; al++) {
        ai[ag][al] = ak
      }
    }
    return ai
  }
  function g(ah, ai) {
    for (var ag = 0; ag < ah.length; ag++) {
      for (var aj = 0; aj < ah[ag].length; aj++) {
        ai(ag, aj)
      }
    }
  }
  function H(ag, ah) {
    g(ag, function (ai, aj) {
      ah(ag[ai][aj], ai, aj)
    })
  }
  var Y;

function h(ag) {
    setInterval(function () {
      var ai = document.location.hash;
      if (Y != ai) {
        try {
          var ah = ai.match(/^\#?(.*)$/);
          if (ah) {
            ag(ah[1])
          }
        } finally {
          Y = ai
        }
      }
    }, 100)
  }
  function R(ag) {
    document.location.hash = "#" + ag;
    Y = document.location.hash
  }
  var S = "a".charCodeAt(0);

function k(ag, ai, ah) {
    return j[ag][ai] & ah
  }
  function ac(ag, ai, ah) {
    j[ag][ai] |= ah;
    if (ah & 1) {
      j[ag + 1][ai] |= 4
    }
    if (ah & 2) {
      j[ag][ai - 1] |= 8
    }
    if (ah & 4) {
      j[ag - 1][ai] |= 1
    }
    if (ah & 8) {
      j[ag][ai + 1] |= 2
    }
  }
  function ab(ag, ai, ah) {
    j[ag][ai] &= ~ah;
    if (ah & 1) {
      j[ag + 1][ai] &= ~4
    }
    if (ah & 2) {
      j[ag][ai - 1] &= ~8
    }
    if (ah & 4) {
      j[ag - 1][ai] &= ~1
    }
    if (ah & 8) {
      j[ag][ai + 1] &= ~2
    }
  }
  function ad() {
    var ag = "";
    H(j, function (ah) {
      ag += String.fromCharCode(S + ah)
    });
    H(O, function (ah) {
      ag += ah.substr(0, 1)
    });
    H(c, function (ah) {
      ag += String.fromCharCode(S + ah)
    });
    return ag
  }
  function B(ag) {
    P = [];
    var ai = ag.match(/^([a-z]{24})([a-z]{24})([a-z]{24})$/);
    if (ai) {
      var ah = 0;
      H(j, function (ak, aj, al) {
        j[aj][al] = 0;
        ac(aj, al, ai[1].charCodeAt(ah) - S);
        ah++
      });
      var ah = 0;
      H(O, function (ak, aj, al) {
        O[aj][al] = ai[2].substr(ah, 1);
        ah++
      });
      var ah = 0;
      H(c, function (ak, aj, al) {
        c[aj][al] = ai[3].charCodeAt(ah) - S;
        ah++
      })
    }
  }
  function D(ag, ai, ah) {
    P.push(new e(ag, ai, ah))
  }
  function i() {
    P = P.reject(function (ag) {
      return ag.z
    });
    P.each(function (ak) {
      ak.move();
      if (!k(ak.x, ak.y, 1 << ak.d)) {
        var aj = (ak.d + 1) % 4;
        var ah = (ak.d + 3) % 4;
        var ai = k(ak.x, ak.y, 1 << aj);
        var ag = k(ak.x, ak.y, 1 << ah);
        if (ai && ag) {
          ak.d = Math.random() > 0.5 ? aj : ah
        } else {
          if (ai) {
            ak.d = aj
          } else {
            if (ag) {
              ak.d = ah
            } else {
              ak.z = true
            }
          }
        }
      }
    });
    P = P.reject(function (ag) {
      return O[ag.x][ag.y] == "s"
    });
    q = {};
    H(O, function (ai, ag, al) {
      var aj = c[ag][al];
      if (ai == "s" && Math.floor(p / 3) % aj == 0) {
        var ah = j[ag][al];
        var ak = [];
        if (ah & 1) {
          ak.push(0)
        }
        if (ah & 2) {
          ak.push(1)
        }
        if (ah & 4) {
          ak.push(2)
        }
        if (ah & 8) {
          ak.push(3)
        }
        if (ak.length > 0) {
          D(ag, al, ak[Math.floor(Math.random() * ak.length)])
        }
      }
      if (ai == "m") {
        P.each(function (am) {
          if (am.x == ag && am.y == al) {
            A = aj
          }
        })
      }
      if (ai == "n") {
        P.each(function (am) {
          if (am.x == ag && am.y == al) {
            q[aj] = true
          }
        })
      }
    })
  }
  var j = o(6, 4, 0);
  var O = o(6, 4, "p");
  var c = o(6, 4, 0);
  var P = [];
  var q = {};
  var A = 0;

function aa(ag, ah) {
    G.select("button").each(function (ai) {
      if (ai.retrieve("k") == ag && ai.retrieve("v") == ah) {
        F(ai, "x")
      } else {
        ae(ai, "x")
      }
    })
  }
  function M(ah, ag) {
    ae(G, "ol");
    ae(G, "or");
    ae(G, "oc");
    ae(G, "oa");
    ae(G, "ob");
    y.insert(G);
    G.style.left = (ah - (G.offsetWidth / 2)) + "px";
    G.style.top = (ag - G.offsetHeight - 32) + "px";
    if (G.cumulativeOffset().top < 10) {
      G.style.top = (ag + 32) + "px";
      F(G, "ob")
    } else {
      F(G, "oa")
    }
    if (G.cumulativeOffset().left < 10) {
      G.style.left = (ah - 60) + "px";
      F(G, "ol")
    } else {
      if (G.cumulativeOffset().left + G.offsetWidth > document.viewport.getWidth()) {
        G.style.left = ((ah - G.offsetWidth) + 60) + "px";
        F(G, "or")
      } else {
        F(G, "oc")
      }
    }(function () {
      J = true
    }).defer()
  }
  function b() {
    G.remove();
    J = false
  }
  function w(ah, ai) {
    var ag = new Element("button", {
      className: ah
    });
    ag.store("k", ah);
    ag.store("v", ai);
    return ag
  }
  function r(al, ai) {
    var ag = $A(arguments).slice(2);
    var ak = new Element("tr", {
      className: ai
    });
    var aj = new Element("th").insert(al);
    var am = new Element("td");
    for (var ah = 2; ah < arguments.length; ah++) {
      am.insert(w(ai, arguments[ah]))
    }
    ak.insert(aj);
    ak.insert(am);
    return ak
  }
  function Z() {
    G = new Element("div", {
      className: "e"
    });
    var ag = new Element("table");
    ag.insert(r("Blank", "p", 0));
    ag.insert(r("Source", "s", 16, 8, 4, 2));
    ag.insert(r("Note", "n", 0, 2, 4, 5, 7, 9, 11, 12));
    ag.insert(r("Modulation", "m", 0, 1, 2, 3, 4));
    G.insert(ag);
    var ah = new Element("div", {
      className: "v"
    });
    G.insert(ah);
    s(G, "click", function (aj) {
      var ai = aj.findElement("button");
      if (ai) {
        aj.stop();
        V(ai.retrieve("k"), ai.retrieve("v"));
        b()
      }
    });
    s(window, "click", function (ai) {
      if (J && !ai.findElement(".e")) {
        ai.stop();
        b();
        t()
      }
    });
    return y
  }
  var J = false;
  var G;
  Z();
  var W = {};

function E(ai) {
    function ag(al) {
      var ak = "";
      for (ah = 0; ah < 4; ah++) {
        ak += String.fromCharCode(al % 256);
        al = Math.floor(al / 256)
      }
      return ak
    }
    var aj = "RIFF" + ag(36 + ai.length) + "WAVEfmt \x10\x00\x00\x00\x01\x00\x01\x00" + ag(44100) + ag(44100) + "\x01\x00\x08\x00data";
    for (var ah = 0; ah < ai.length; ah++) {
      aj += String.fromCharCode(ai[ah] * 127 + 127)
    }
    return "data:audio/wav;base64," + af(aj)
  }
  function X(aj, ai) {
    var ag = 0;
    var ak = [];
    var am = 440 * Math.pow(Math.pow(2, 1 / 12), aj - 49);
    for (var ah = 0; ah < 1200; ah++) {
      ag = (ag + (am / 44100)) % 1;
      ak.push(ag > 0.5 + ((ai / 5) * 0.49) ? 0.25 : -0.25)
    }
    var al = new Element("audio", {
      src: E(ak)
    });
    document.body.appendChild(al);
    return al
  }
  function U() {
    for (n in q) {
      var ag = parseInt(n) + 40;
      var ai = ag + "-" + A;
      try {
        if (!W[ai]) {
          W[ai] = X(ag, A)
        } else {
          W[ai].currentTime = 0
        }
      } catch (ah) {}
      W[ai].play()
    }
  }
  function u(ah) {
    var ag = y.cumulativeOffset();
    return {
      x: Math.floor((ah.x - ag.left) / 96),
      y: Math.floor((ah.y - ag.top) / 96)
    }
  }
  function T(ag, aj) {
    I(ag, aj);
    var ai = (ag * 96) + 48;
    var ah = (aj * 96) + 48;
    aa(O[ag][aj], c[ag][aj]);
    M(ai, ah)
  }
  function V(ag, ah) {
    O[d.x][d.y] = ag;
    c[d.x][d.y] = ah;
    l();
    L();
    R(ad())
  }
  function t() {
    l()
  }
  function I(ag, ah) {
    l();
    d = {
      x: ag,
      y: ah
    };
    F(a[ag][ah], "r")
  }
  function l(ag, ah) {
    if (d) {
      ae(a[d.x][d.y], "r");
      d = false
    }
  }
  function v(ag, ah) {
    I(ag, ah)
  }
  function C(ag, al) {
    if (d.x == ag && d.y != al) {
      var ah = d.y < al ? d.y : al;
      var aj = d.y < al ? al : d.y;
      var ak = !k(ag, ah, 8);
      for (var ai = ah; ai < aj; ai++) {
        if (ak) {
          ac(ag, ai, 8)
        } else {
          ab(ag, ai, 8)
        }
        K(ag, ai)
      }
    } else {
      if (d.y == al && d.x != ag) {
        var ah = d.x < ag ? d.x : ag;
        var aj = d.x < ag ? ag : d.x;
        var ak = !k(ah, al, 1);
        for (var ai = ah; ai < aj; ai++) {
          if (ak) {
            ac(ai, al, 1)
          } else {
            ab(ai, al, 1)
          }
          K(ai, al)
        }
      }
    }
    R(ad());
    I(ag, al)
  }
  function K(ah, aj) {
    function ag(ak, ap, am, al, ao) {
      for (var an = 1; an < 3; an++) {
        ao(N[(ak * 3) + (am * an) + 1][(ap * 3) + (al * an) + 1], "d")
      }
    }
    var ai = j[ah][aj];
    if (ah < 6 - 1) {
      if (ai & 1) {
        ag(ah, aj, 1, 0, F)
      } else {
        ag(ah, aj, 1, 0, ae)
      }
    }
    if (aj > 0) {
      if (ai & 2) {
        ag(ah, aj, 0, -1, F)
      } else {
        ag(ah, aj, 0, -1, ae)
      }
    }
    if (ah > 0) {
      if (ai & 4) {
        ag(ah, aj, -1, 0, F)
      } else {
        ag(ah, aj, -1, 0, ae)
      }
    }
    if (aj < 4 - 1) {
      if (ai & 8) {
        ag(ah, aj, 0, 1, F)
      } else {
        ag(ah, aj, 0, 1, ae)
      }
    }
  }
  function L() {
    H(a, function (ah, ag, ai) {
      ae(ah, "p");
      ae(ah, "s");
      ae(ah, "m");
      ae(ah, "n");
      F(ah, O[ag][ai]);
      K(ag, ai)
    });
    H(N, function (ag) {
      ae(ag, "c")
    });
    P.each(function (ai) {
      var ah = (ai.x * 3) + 3 - 2;
      var ag = (ai.y * 3) + 3 - 2;
      if (!ai.z) {
        if (ai.d == 0) {
          ah += p % 3
        } else {
          if (ai.d == 1) {
            ag -= p % 3
          } else {
            if (ai.d == 2) {
              ah -= p % 3
            } else {
              if (ai.d == 3) {
                ag += p % 3
              }
            }
          }
        }
      }
      F(N[ah][ag], "c")
    })
  }
  var N = o(6 * 3, 4 * 3);
  var a = o(6, 4);
  var d;
  var z, Q;
  var f, m;
  g(N, function (ag, ai) {
    var ah = new Element("div");
    ah.className = "q";
    ah.style.left = (ag * 32) + 8 + "px";
    ah.style.top = (ai * 32) + 8 + "px";
    y.insert(ah);
    N[ag][ai] = ah;
    if (ag % 3 == 1 && ai % 3 == 1) {
      a[Math.floor(ag / 3)][Math.floor(ai / 3)] = ah
    }
  });
  s(window, "mousedown", function (ah) {
    if (J) {
      return
    }
    var ai = ah.pointer();
    var ag = u(ai);
    if (ag.x >= 0 && ag.y >= 0 && ag.x < 6 && ag.y < 4) {
      ah.stop();
      z = ai;
      Q = new Date();
      f = true;
      m = true;
      v(ag.x, ag.y)
    }
  });
  s(window, "mousemove", function (ah) {
    var ai = ah.pointer();
    var ag = u(ai);
    if (f) {
      if (Math.sqrt(Math.pow(ai.x - z.x, 2) + Math.pow(ai.y - z.y, 2)) >= 5 || new Date() - Q >= 400) {
        f = false
      } else {
        return
      }
    }
    if (m) {
      if (ag.x < 0) {
        ag.x = 0
      }
      if (ag.y < 0) {
        ag.y = 0
      }
      if (ag.x > 6 - 1) {
        ag.x = 6 - 1
      }
      if (ag.y > 4 - 1) {
        ag.y = 4 - 1
      }
      C(ag.x, ag.y)
    }
  });
  s(window, "mouseup", function (ah) {
    var ai = ah.pointer();
    var ag = u(ai);
    if (f && Math.sqrt(Math.pow(ai.x - z.x, 2) + Math.pow(ai.y - z.y, 2)) < 5 && new Date() - Q < 400) {
      ah.stop();
      m = false;
      f = false;
      T(ag.x, ag.y);
      return
    }
    if (m) {
      m = false;
      l()
    }
  });
  h(function (ag) {
    B(ag);
    L()
  });
  setInterval(function () {
    L();
    p++;
    if (p % 3 == 0) {
      i();
      U()
    }
  }, 80)
});

body { background:#000; padding:0; margin:0; color:#fff; font:12pt helvetica; }
#i { width:450px; margin:30px auto; font-size:14pt; }
#w { width:450px; margin:30px auto; font-size:14pt; }
#w a { color:white; background:#333; padding:4pt; }
#b { position:relative; width:576px; height:384px; margin:30px auto; }
#b .q { position:absolute; width:16px; height:16px; background:#181818; }
#b .d { background:#303030; }
#b .p { background:#666; }
#b .s { background:#0f0; }
#b .n { background:#00f; }
#b .m { background:#f0f; }
#b .c { background:orange; }
#b .r { background:#fff; }
.e { position:absolute; background:#222; border:1px solid #fff; padding:2pt 6pt; z-index:1; }
.e .v { position:absolute; }
.e.oa .v { bottom:-10px; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #fff; }
.e.ob .v { top:-10px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #fff; }
.e.ol .v { left:49px; }
.e.or .v { right:49px; }
.e.oc .v { left:50%; margin-left:-9px; }
.e table { border-collapse:collapse; border:hidden; }
.e th { text-align:left; font-weight:normal; font-size:10pt; }
.e td, .e th { white-space:nowrap; background:#222!important; padding:4pt 8pt; border-top:1px solid #333; border-bottom:1px solid #333; vertical-align:middle; }
.e button { float:left; width:24px; height:24px; border:0; padding:0; margin:6px; }
.e button.x { outline:4px solid yellow; }
.e .p button { background:#444; }
.e .s button { background:#0f0; }
.e .n button { background:#00f; }
.e .m button { background: #f0f; }