1 files changed, 129 insertions, 0 deletions
diff --git a/dither-picker.html b/dither-picker.html
new file mode 100644
index 0000000..f4680c2
--- /dev/null
+++ b/dither-picker.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html>
+<head>
+<title>Dither</title>
+<style>
+  form { display: inline-block; }
+  #gallery-images img { max-width: 200px; height: 90px; margin: 5px; }
+</style>
+</head>
+<body>
+
+<div id="gallery">
+  <form id="gallery-search">
+    <input type="text" id="dumpfm-search-query" value="duck bill">
+    <button id="gallery-search">DUMP SEARCH</button>
+  </form>
+  <button id="gallery-random">IM RANDOM</button>
+  <span id="status"></span>
+  <div id="gallery-images"></div>
+</div>
+
+<div id="dither">
+<button id="random">random</button>
+<button id="pattern2">pattern2</button>
+<button id="pattern3">pattern3</button>
+<button id="pattern4">pattern4</button>
+<button id="pattern2Lite">pattern2lite</button>
+<button id="pattern3Lite">pattern3lite</button>
+<button id="pattern4Lite">pattern4lite</button>
+<button id="floydSteinberg">floyd-steinberg</button>
+<button id="right">right</button>
+</div>
+<div id="images"></div>
+
+
+</body>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/vendor/gif.js"></script>
+<script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
+<script type="text/javascript">
+
+var algo = 'random';
+var url = "img/abyss.png";
+var imgs = []
+var anim = []
+var complete = 0
+var viewport = cq(100, 100)
+$("#images").append(viewport.canvas)
+
+var ui = function(){}
+
+ui.init = function(){
+  gallery.choose = ui.choose
+  gallery.init()
+  ui.bind()
+  ui.animate()
+  asdf.random()
+}
+
+ui.bind = function(){
+  var buttons = $("#dither button")
+  for (var i = 0; i < buttons.length; i++) {
+    (function(n){
+      buttons[n].onclick = function(){
+        algo = buttons[n].id;
+        ui.build()
+      }
+    })(i)
+  }
+}
+
+ui.choose = function(){
+  loadImage( this.src, ui.ready );
+}
+
+ui.ready = function(){
+  loading = false
+  if (window.gif) {
+    frames = gif.frames
+  }
+  else {
+    fc = cq(img.width, img.height)
+    fc.drawImage(img, 0, 0)
+    frames = [ { ctx: fc.context } ]
+  }
+  w = viewport.canvas.width = frames[0].ctx.canvas.width
+  h = viewport.canvas.height = frames[0].ctx.canvas.height
+  ui.build()
+}
+
+ui.build = function (){
+  anim = []
+  for (var i in frames) {
+    anim.push( ui.dither(frames[i].ctx).context )
+  }
+}
+
+ui.animate = function(t){
+  requestAnimationFrame(ui.animate)
+  if (! anim.length) return;
+  
+  if (window.gif && window.gif.currentFrame) {
+    var idx = gif.currentFrame(t)
+    var frame = anim[idx]
+  }
+  else {
+    var frame = anim[0]
+  }
+  viewport.clearRect(0,0,w,h).drawImage(frame.canvas, 0, 0, w, h);
+}
+
+ui.dither = function (frame){
+  var cc = cq(w, h)
+  cc.drawImage(frame.canvas, 0, 0, w, h);
+  cc[algo + "Dither"]( )
+  return cc
+}
+
+function status(s){ $("#status").html(s); console.log(s) }
+
+$(ui.init)
+
+</script>
+</html>
+