Dither

From 8829a743db3ec88182f3034d077971ba5c2a5cbf Mon Sep 17 00:00:00 2001 From: jules Date: Sun, 29 Dec 2013 18:26:12 -0500 Subject: dither picker --- dither-picker.html | 129 ++++++++++++++++++++++++++++++++++++++++++++++++ js/asdf.js | 84 +++++++++++++++++++++++++++++++ js/gallery.js | 33 +++++++++++++ pattern.html | 4 ++ search.html | 141 +++++------------------------------------------------ 5 files changed, 263 insertions(+), 128 deletions(-) create mode 100644 dither-picker.html create mode 100644 js/asdf.js create mode 100644 js/gallery.js 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 @@ + + + +Dither + + + + +

+ + + +

+ +

+ + + + + + + + + +

+ + + + + + + + + + + + + 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 @@ Photoblaster Search Widget -

@@ -27,133 +27,18 @@ + + -- cgit v1.2.3-70-g09d2