dither picker

author: jules <jules@okfoc.us> 2013-12-29 18:26:12 -0500
committer: jules <jules@okfoc.us> 2013-12-29 18:26:12 -0500
commit: 8829a743db3ec88182f3034d077971ba5c2a5cbf (patch)
tree: fd49dd91005f74e6211445da1bcc0ce58c5a860b
parent: f483f2667690ddc89961cb163a870ce84196374e (diff)
5 files changed, 263 insertions, 128 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>
+
diff --git a/js/asdf.js b/js/asdf.js
new file mode 100644
index 0000000..0e173a1
--- /dev/null
+++ b/js/asdf.js
@@ -0,0 +1,84 @@
+//
+// asdf .. asdf.us/im search api
+
+var asdf = { fetching: false }
+asdf.random = function (e){
+  status("fetching random photoblasts")
+  e && e.preventDefault();
+  opt = {};
+  opt.data = { random: 1 };
+  opt.success = gallery.load;
+  asdf.fetch(opt);
+}
+
+asdf.fetch = function (opt){
+  if (asdf.fetching) return;
+  asdf.fetching = true;
+  var params = {random:1};
+  $.ajax({
+    'url': "http://asdf.us/cgi-bin/im/list",
+    'data': params,
+    'dataType': "jsonp",
+    'success': function(urls){
+      console.log(urls);
+      asdf.fetching = false;
+      opt.success && opt.success(urls)
+    },
+    'error': opt.error || function(err){
+      console.log(err);
+    }
+  });
+}
+
+
+//
+// dumpfm .. dump.fm/search api
+
+var dumpfm = {}
+dumpfm.search = function (e){
+  e && e.preventDefault();
+
+  var term = $("#dumpfm-search-query").val().toLowerCase()
+  var rawTokens = term.split(" ")
+  var tokens = []
+  rawTokens.forEach(function(t){ if (t.length > 2) tokens.push(t) })
+  if (tokens.length == 0 || tokens[0] == "undefined") {
+    status("search query too small")
+  } else {
+    status("searching for '"+tokens.join(" and ")+"'")
+    dumpfm.fetch({
+      query: tokens.join("+"),
+      success: gallery.load
+    })
+  }
+};
+  
+dumpfm.fetch = function(opt){
+  if (dumpfm.fetching) return;
+  dumpfm.fetching = true;
+  var params = {};
+  $.ajax({
+    'url': "http://dump.fm/cmd/search/" + opt.query,
+    'data': params,
+    'dataType': "jsonp",
+    'success': function(urls){
+      dumpfm.fetching = false;
+      for (var i = 0, len = urls.length; i < len; i++) {
+        var url = urls[i].url;
+        console.log(url)
+        if (url.match(/\/^\d+\//)) {
+          url = "http://dump.fm/images/" + url;
+        }
+        else {
+          url = "http://" + url;
+        }
+        urls[i].url = url;
+      }
+      opt.success && opt.success(urls)
+    },
+    'error': opt.error || function(err){
+      console.log(err);
+    }
+  });
+}
+
diff --git a/js/gallery.js b/js/gallery.js
new file mode 100644
index 0000000..9b2372d
--- /dev/null
+++ b/js/gallery.js
@@ -0,0 +1,33 @@
+//
+// gallery .. the most basic image picker
+
+var gallery = {}
+
+gallery.init = function(){
+  gallery.bind()
+}
+
+gallery.bind = function(){
+  $("#gallery-random").click(asdf.random)
+  $("#gallery-search").submit(dumpfm.search)
+  $(document).on("click", "#gallery-images img", gallery.choose)
+  status("ready")
+}
+
+gallery.load = function(ims){
+  status("loading " + ims.length + " images");
+  $("#gallery-images").empty();
+  for (var i = 0; i < ims.length; i++) {
+    gallery.image(ims[i]);
+  }
+}
+
+gallery.image = function(im){
+  var img = new Image ();
+  img.onload = function(){
+    $("#gallery-images").append(img);
+  }
+  try { img.src = im.url; }
+  catch(e){ return; }
+  if (img.complete) img.onload();
+}
diff --git a/pattern.html b/pattern.html
index f622cce..a88bdc1 100644
--- a/pattern.html
+++ b/pattern.html
@@ -24,6 +24,7 @@ var algo = 'random';
 var urls = ["img/abyss.png","img/building.png","img/gradient.jpg"]
 var imgs = []
 var complete = 0
+
 urls.forEach(function(src){
   var img = new Image ()
   img.onload = ready
@@ -31,6 +32,7 @@ urls.forEach(function(src){
   imgs.push(img)
   if (img.complete) ready()
 })
+
 function ready(){
   complete += 1
   if (complete < imgs.length) return;
@@ -45,10 +47,12 @@ function ready(){
   }
   build()
 }
+
 function build(){
   document.getElementById("images").innerHTML = ""
   imgs.forEach(dither)
 }
+
 function dither(img){
   var w = img.naturalWidth, h = img.naturalHeight;
   var cc = cq(w, h)
diff --git a/search.html b/search.html
index f0fe7b0..cf070e5 100644
--- a/search.html
+++ b/search.html
@@ -4,20 +4,20 @@
 <title>Photoblaster Search Widget</title>
 <style type="text/css">
   form { display: inline-block; }
-  #images img { max-width: 200px; height: 90px; margin: 5px; }
+  #gallery-images img { max-width: 200px; height: 90px; margin: 5px; }
   #result { height: 500px; }
   #result img { max-height: 500px; }
 </style>
 <body>
 
-<div id="ui">
-  <form id="search">
-    <input type="text" id="search-query" value="duck bill">
-    <button id="search">DUMP SEARCH</button>
+<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="random">IM RANDOM</button>
-  <span id="status"></span>
-  <div id="images"></div>
+  <button id="gallery-random">IM RANDOM</button>
+  <span id="gallery-status"></span>
+  <div id="gallery-images"></div>
 </div>
 
 <div id="result">
@@ -27,133 +27,18 @@
 
 </body>
 <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
 <script type="text/javascript">
 
-var ui = {}
-ui.init = function(){
-  ui.bind()
-}
-
-ui.bind = function(){
-  $("#random").click(asdf.random)
-  $("#search").submit(dumpfm.search)
-  $(document).on("click", "#images img", gallery.choose)
-  status("ready")
-}
-
-
-//
-// gallery .. the most basic image picker
-
-var gallery = {}
-gallery.load = function(ims){
-  status("loading " + ims.length + " images");
-  $("#images").empty();
-  for (var i = 0; i < ims.length; i++) {
-    gallery.image(ims[i]);
-  }
-}
-
-gallery.image = function(im){
-  var img = new Image ();
-  img.onload = function(){
-    $("#images").append(img);
-  }
-  try { img.src = im.url; }
-  catch(e){ return; }
-  if (img.complete) img.onload();
-}
+function status(s){ $("#status").html(s); console.log(s) }
 
 gallery.choose = function(){
-  $("#image").empty().append( $(this).clone() )
+  $("#result #image").empty().append( $(this).clone() )
   $("#result #url").val(this.src);
 }
 
-//
-// asdf .. asdf.us/im search api
-
-var asdf = { fetching: false }
-asdf.random = function (e){
-  status("fetching random photoblasts")
-  e.preventDefault();
-  opt = {};
-  opt.data = { random: 1 };
-  opt.success = gallery.load;
-  asdf.fetch(opt);
-}
-
-asdf.fetch = function (opt){
-  if (asdf.fetching) return;
-  asdf.fetching = true;
-  var params = {random:1};
-  $.ajax({
-    'url': "http://asdf.us/cgi-bin/im/list",
-    'data': params,
-    'dataType': "jsonp",
-    'success': function(urls){
-      console.log(urls);
-      asdf.fetching = false;
-      opt.success && opt.success(urls)
-    },
-    'error': opt.error || function(err){
-      console.log(err);
-    }
-  });
-}
-
-//
-// dumpfm .. dump.fm/search api
-
-var dumpfm = {}
-dumpfm.search = function (e){
-  e.preventDefault();
-
-  var term = $("#search-query").val().toLowerCase()
-  var rawTokens = term.split(" ")
-  var tokens = []
-  rawTokens.forEach(function(t){ if (t.length > 2) tokens.push(t) })
-  if (tokens.length == 0 || tokens[0] == "undefined") {
-    status("search query too small")
-  } else {
-    status("searching for '"+tokens.join(" and ")+"'")
-    dumpfm.fetch({
-      query: tokens.join("+"),
-      success: gallery.load
-    })
-  }
-};
-  
-dumpfm.fetch = function(opt){
-  if (dumpfm.fetching) return;
-  dumpfm.fetching = true;
-  var params = {};
-  $.ajax({
-    'url': "http://dump.fm/cmd/search/" + opt.query,
-    'data': params,
-    'dataType': "jsonp",
-    'success': function(urls){
-      dumpfm.fetching = false;
-      for (var i = 0, len = urls.length; i < len; i++) {
-        var url = urls[i].url;
-        if (url.match(/^\d+\//)) {
-          url = "http://dump.fm/images/" + url;
-        }
-        else {
-          url = "http://" + url;
-        }
-        urls[i].url = url;
-      }
-      opt.success && opt.success(urls)
-    },
-    'error': opt.error || function(err){
-      console.log(err);
-    }
-  });
-}
-
-function status(s){ $("#status").html(s); console.log(s) }
-
-$(ui.init);
+$(gallery.init);
 
 </script>
 </html>
author	jules <jules@okfoc.us>	2013-12-29 18:26:12 -0500
committer	jules <jules@okfoc.us>	2013-12-29 18:26:12 -0500
commit	8829a743db3ec88182f3034d077971ba5c2a5cbf (patch)
tree	fd49dd91005f74e6211445da1bcc0ce58c5a860b
parent	f483f2667690ddc89961cb163a870ce84196374e (diff)