Fire JS Bin - Filterrific

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

Find

⟲

Replace

var a, d = 0,
    e, f, g, j, aa, o, r, w, x, y = 400,
    B = y * 4,
    C = y / 2,
    D = 255,
    _ = 100,
    E, F, G, J = Math,
    ba = J.PI * 2,
    ca = J.random,
    da = J.sqrt,
    K = J.min,
    L = J.max,
    M = document,
    ea = window;

function N(b) {
  return M.getElementById(b)
}

function O(b) {
  return M.createElement(b || "canvas")
}
var P, fa, R, ga, ha = ea.setTimeout,
    ia, S;

function T(b) {
  return b.getContext("2d")
}
var ja = 0;

function U(b, c) {
  return b.appendChild(c)
}

function ka(b, c) {
  b.className = c
}

function sa(c, v) {
  c.globalAlpha = v
}

function gm(a, b, c) {
  c = a.getBoundingClientRect();
  return [b.clientX - c.left, b.clientY - c.top]
}

function la(b, c) {
  b.innerHTML = c
}

function V(b) {
  return b < 0 ? 0 : b > D ? D : b
}
ea.onload = function () {
  M.onselectstart = function () {
    return !1
  };

function pa(b, c, h, p, i, m, s, v, t, n) {
  for (; d < a;) {
    f = d - B;
    e = d + B;
    if (f < 0) f = d;
    if (e < a - 1) e = d;
    f = (d + 1) % 4 ? (P[L(0, f - 4)] * b + P[f] * c + P[K(f + 4, a - 1)] * h + P[L(0, d - 4)] * p + P[d] * i + P[K(d + 4, a - 1)] * m + P[L(0, e - 4)] * s + P[e] * v + P[K(e + 4, a - 1)] * t) * n : D;
    R[d++] = V(f)
  }
}

function Y(b, c, h, p, i, m) {
  b.drawImage(c, h || 0, p || 0, i || y, m || y)
}

function X(b, c, h, p, i, m) {
  if (i > 0 && m > 0) {
    b.fillStyle = c;
    b.fillRect(h, p, i, m)
  }
}

function oa(b) {
  var c = O(),
      h = c.a = T(c);
  c.width = c.height = y;
  Y(h, o);
  for (e = 0; e++ < 10 * b;) {
    x.clearRect(0, 0, y, y);
    Y(x, c, y / 4, y / 4, C, C);
    Y(h, w, -C, -C, y * 2, y * 2)
  }
  Y(x, o);
  return c
}

function na() {
  var b = [],
      c = $(r).data,
      h = T(N("h")),
      p = 0,
      i;
  for (d = 0; d <= D;) b[d++] = 0;
  for (d = 0; d < y * B; d++) {
    i = (p += f = (c[d++] + c[d++] + c[d++]) / 3 >> 0) / (y * y * 20 * D);
    b[f]++
  }
  h.clearRect(0, 0, y, y);
  for (d in b) X(h, "#345", d * 230 / D >> 0, 70 - i * b[d], 1, i * b[d])
}

function ma(b, c) {
  ka(S, "x");
  f = ia[b];
  if (f[1] && !c) return qa(b, f[1]);
  aa = f[0] || f;
  ka(N("y"), "x");
  d = 0;
  a = y * B;
  P = $(r).data;
  Y(x, o, 0, 0);
  R = (fa = $(x)).data;
  r.putImageData(aa(c) || fa, 0, 0);
  na()
}

<!DOCTYPE html>
<html>
  
  <head>
    <title>Filterrific!</title>
  </head>
  
  <body>
    <canvas id=bg width=800 height=600></canvas>
    <div id=q>
      <div>
        <div id=k>FILTERRIFIC</div>
        <div id=l>FILTERRIFIC</div>
      </div>
      <div id=t>
        By <a href=http://blog.nihilogic.dk>Jacob Seidelin</a>
      </div>
      <div id=e class=w>
        <div class=t>Actions</div>
        <div class=c id=r></div>
      </div>
      <div id=o class=w>
        <div class=t>Settings</div>
        <div class=c id=y>
          <div id=z></div>
          <div id=v>OK</div>
        </div>
      </div>
      <div id=j class=w>
        <div class=t>Histogram</div>
        <div class=c>
          <canvas id=h width=230 height=70></canvas>
        </div>
      </div>
      <div id=m class=w>
        <div class=t>Mondrian</div>
        <div class=c>
          <div id=p>
            <canvas id=i></canvas>
            <div id=b class=x></div>
          </div>
        </div>
        <div id=u>
          <canvas id=g width=256 height=256></canvas>
        </div>
      </div>
    </div>
  </body>

</html>

body { -moz-user-select:none; cursor:default; font:11px Arial; margin:0; overflow:hidden }
body, #bg, #v, .u #g { height:100%; width:100% }
#q { height:660px; left:50%; margin:-330px 0 0 -490px; top:50%; width:980px }
#l, #k, #t, .w, .n, body, #bg, #q, #u, #g { position:absolute }
#u { background-color:#f00; bottom:8px; height:32px; left:8px; width:32px }
#u.u { height:256px; width:256px }
#g { top:0; height:33px; width:32px }
a { text-decoration:none }
a:hover, #o label, #l .h { color:#def }
#l, #k, #t, .w { left:50% }
#l, #k, #m { width:71.5% }
#l, #k { font:70px Arial Black; letter-spacing:21px; opacity:.4; top:-14px }
#l, #k, a { color:#bcd }
#k { color:#234; padding:1px }
#t { color:#89a; left:91%; top:8% }
.w, .t { -moz-border-radius:10px 10px 0 0; background-color:rgba(240, 245, 255, .25); border-radius:10px 10px 0 0 }
body, .t, #e a { color:#456 }
.t { height:21px; padding:4px 1px 1px 10px }
.t, #e, .s, #v { text-shadow:1px 1px #fff }
.t, #e a, #v, .n { background-image:url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAaCAYAAAB2BDbRAAAAOklEQVQImXXMsQkAIBAEweNbsgVbsP8eBBPhb01MfDCbYFnNtYm0FTaqSqNwUVphuCrJd/Uman0ggANAdE5H6cmMEQAAAABJRU5ErkJggg==) }
#m, #l, #k { margin-left:-485px }
#m, #e { height:87%; margin-top:71px }
#p { margin:37% 0 0 50% }
.w, #i, #e a:hover { -moz-box-shadow:4px 4px 4px rgba(0, 0, 0, .4); -webkit-box-shadow:4px 4px 5px rgba(0, 0, 0, .4); box-shadow:4px 4px 4px rgba(0, 0, 0, .4) }
#i, .s, #b { position:relative }
#i { margin:-200px }
#o { height:20%; margin-top:369px }
#j { height:19%; margin-top:521px }
#h { height:80px; margin:4%; width:90% }
#e, #j, #o { margin-left:24%; width:26% }
#e { height:42% }
#v, #e a, .t { font:12px Arial Black }
#v, #e a, .n, .s, #o label { display:inline-block }
#v, #e a, .n, .s { -moz-border-radius:4px; border-radius:4px }
#v, #e a, .n { height:16px; margin:0 0 2% 4%; padding:1px 5px; width:39% }
#e a:hover { background-color:#def; background-image:none; margin-left:3%; margin-right:-1%; width:41% }
#y { margin:5px 0 0 10px }
#o label { margin:3px 5px; padding-top:1px; width:70px }
.s, .n, #i, .w, #e a, #v, #u { border:1px solid #345 }
.s { -moz-box-shadow:1px 1px #fff; -webkit-box-shadow:1px 1px #fff; box-shadow:1px 1px #fff; height:4px; width:140px }
.n, #v { text-align:center }
.n { margin:-8px 0 0 -20px; padding:1px 0 0; width:30px }
#v { margin:5px 95px }
#b { -moz-border-radius:15px; border:5px solid; border-radius:15px; height:20px; width:20px }
#i, #b, #u { cursor:crosshair }
.x { display:none }
#e ul, #e .c { margin-top: 10px }

Pop out