From 88e537899767c7b35e9e6f7352345bf15c555278 Mon Sep 17 00:00:00 2001 From: jules Date: Mon, 20 Jan 2014 19:02:51 -0500 Subject: localstorage fork --- cgi-bin/javascript_example.js | 39 ------------- cgi-bin/shader_api.js | 92 ----------------------------- dither-localstorage.html | 132 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 132 insertions(+), 131 deletions(-) delete mode 100644 cgi-bin/javascript_example.js delete mode 100644 cgi-bin/shader_api.js create mode 100644 dither-localstorage.html diff --git a/cgi-bin/javascript_example.js b/cgi-bin/javascript_example.js deleted file mode 100644 index 1e7e31f..0000000 --- a/cgi-bin/javascript_example.js +++ /dev/null @@ -1,39 +0,0 @@ -function save_shader(){ - typeof shader_id_root == 'undefined' ? shader_id_root = "" : shader_id_root - var params = { - script : $("#shader").val(), - image_url : $("#url").val(), - username : user.username, - shader_id : shader_id_root - } - console.log(params) - $.post("/cgi-bin/im/shader/save", params, function(resp){ - console.log(resp); - data = JSON.parse(resp) - if (data.ERROR ){ - alert(data.ERROR) - return false - } - if (! shader_id_root) { - shader_id_root = data.id; - } - - var blob = dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png")) - var form = new FormData(); - - form.append("id", data.id); - form.append("qqfile", blob); - $.ajax({ - url: "/cgi-bin/im/shader/thumbnail_upload", - type: "POST", - data: form, - processData: false, - contentType: false, - }).done(function(resp){ - console.log(resp); - }); - - }) - //maintain the shader_id_root... - return shader_id_root; -} diff --git a/cgi-bin/shader_api.js b/cgi-bin/shader_api.js deleted file mode 100644 index dd43130..0000000 --- a/cgi-bin/shader_api.js +++ /dev/null @@ -1,92 +0,0 @@ -;var ShaderAPI = {} -ShaderAPI.limit = 24 - -// info - fetch a single shader -// id: shader id -ShaderAPI.info = function(id, cb){ - ShaderAPI.fetch({ - f: "info", - id: id - }, cb) -} - -// all - fetch all shaders -ShaderAPI.all = function(cb){ - ShaderAPI.fetch({ - f: "all" - }, cb) -} - -// range - fetch a pageful of results -// limit: number of shaders to fetch -// offset: number of results to skip -ShaderAPI.range = function(limit, offset, cb){ - ShaderAPI.fetch({ - f: "range", - limit: limit || ShaderAPI.limit, - last: offset - }, cb) -} - -// latest - get the latest N shaders -// limit: number of shaders to fetch -ShaderAPI.latest = function(limit, cb){ - ShaderAPI.fetch({ - f: "range", - limit: limit || ShaderAPI.limit - }, cb) -} - -// page - get a page of N results -// page: page number, start counting at 1 -// limit: number of shaders to fetch -ShaderAPI.page = function(page, limit, cb){ - ShaderAPI.fetch({ - f: "range", - last: (page-1) * limit, - limit: limit || ShaderAPI.limit - }, cb) -} - -// history - get all previous versions of a shader -// id: shader id -ShaderAPI.history = function(id, cb){ - ShaderAPI.fetch({ - f: "history", - id: id - }, cb) -} - -// username - get all ids by a user -ShaderAPI.username = function(username, cb){ - ShaderAPI.fetch({ - f: "username", - username: username - }, cb) -} - -// list_users - list all users -ShaderAPI.list_users = function(list_users, cb){ - ShaderAPI.fetch({ - f: "list_users" - }, cb) -} - -// originals - get the earliest version of all named shaders -ShaderAPI.originals = function(cb){ - ShaderAPI.fetch({ - f: "originals" - }, cb) -} - -// fetch - AJAX wrapper -ShaderAPI.fetch = function(params, cb){ - $.getJSON("/cgi-bin/im/shader/view", params, function(data){ - if (data.SUCCESS) { - cb(null, data.data) - } - else if (data.ERROR) { - cb(data.ERROR, data.data) - } - }) -} diff --git a/dither-localstorage.html b/dither-localstorage.html new file mode 100644 index 0000000..5e9bff9 --- /dev/null +++ b/dither-localstorage.html @@ -0,0 +1,132 @@ + + + +Dither + + + + + + +
+ + + + + + + + + +
+
+ + + + + + + + + + + + + -- cgit v1.2.3-70-g09d2 From a703503ee09092a98fbab31e763bc64081d0e7d5 Mon Sep 17 00:00:00 2001 From: jules Date: Mon, 20 Jan 2014 19:03:18 -0500 Subject: move js api into js --- js/api/get.js | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/api/set.js | 39 +++++++++++++++++++++++++ 2 files changed, 131 insertions(+) create mode 100644 js/api/get.js create mode 100644 js/api/set.js diff --git a/js/api/get.js b/js/api/get.js new file mode 100644 index 0000000..dd43130 --- /dev/null +++ b/js/api/get.js @@ -0,0 +1,92 @@ +;var ShaderAPI = {} +ShaderAPI.limit = 24 + +// info - fetch a single shader +// id: shader id +ShaderAPI.info = function(id, cb){ + ShaderAPI.fetch({ + f: "info", + id: id + }, cb) +} + +// all - fetch all shaders +ShaderAPI.all = function(cb){ + ShaderAPI.fetch({ + f: "all" + }, cb) +} + +// range - fetch a pageful of results +// limit: number of shaders to fetch +// offset: number of results to skip +ShaderAPI.range = function(limit, offset, cb){ + ShaderAPI.fetch({ + f: "range", + limit: limit || ShaderAPI.limit, + last: offset + }, cb) +} + +// latest - get the latest N shaders +// limit: number of shaders to fetch +ShaderAPI.latest = function(limit, cb){ + ShaderAPI.fetch({ + f: "range", + limit: limit || ShaderAPI.limit + }, cb) +} + +// page - get a page of N results +// page: page number, start counting at 1 +// limit: number of shaders to fetch +ShaderAPI.page = function(page, limit, cb){ + ShaderAPI.fetch({ + f: "range", + last: (page-1) * limit, + limit: limit || ShaderAPI.limit + }, cb) +} + +// history - get all previous versions of a shader +// id: shader id +ShaderAPI.history = function(id, cb){ + ShaderAPI.fetch({ + f: "history", + id: id + }, cb) +} + +// username - get all ids by a user +ShaderAPI.username = function(username, cb){ + ShaderAPI.fetch({ + f: "username", + username: username + }, cb) +} + +// list_users - list all users +ShaderAPI.list_users = function(list_users, cb){ + ShaderAPI.fetch({ + f: "list_users" + }, cb) +} + +// originals - get the earliest version of all named shaders +ShaderAPI.originals = function(cb){ + ShaderAPI.fetch({ + f: "originals" + }, cb) +} + +// fetch - AJAX wrapper +ShaderAPI.fetch = function(params, cb){ + $.getJSON("/cgi-bin/im/shader/view", params, function(data){ + if (data.SUCCESS) { + cb(null, data.data) + } + else if (data.ERROR) { + cb(data.ERROR, data.data) + } + }) +} diff --git a/js/api/set.js b/js/api/set.js new file mode 100644 index 0000000..1e7e31f --- /dev/null +++ b/js/api/set.js @@ -0,0 +1,39 @@ +function save_shader(){ + typeof shader_id_root == 'undefined' ? shader_id_root = "" : shader_id_root + var params = { + script : $("#shader").val(), + image_url : $("#url").val(), + username : user.username, + shader_id : shader_id_root + } + console.log(params) + $.post("/cgi-bin/im/shader/save", params, function(resp){ + console.log(resp); + data = JSON.parse(resp) + if (data.ERROR ){ + alert(data.ERROR) + return false + } + if (! shader_id_root) { + shader_id_root = data.id; + } + + var blob = dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png")) + var form = new FormData(); + + form.append("id", data.id); + form.append("qqfile", blob); + $.ajax({ + url: "/cgi-bin/im/shader/thumbnail_upload", + type: "POST", + data: form, + processData: false, + contentType: false, + }).done(function(resp){ + console.log(resp); + }); + + }) + //maintain the shader_id_root... + return shader_id_root; +} -- cgit v1.2.3-70-g09d2 From e3f9a2a3b385382ae72258c216b068a53717c224 Mon Sep 17 00:00:00 2001 From: jules Date: Mon, 20 Jan 2014 22:05:27 -0500 Subject: pull out frames editor, main render loop --- js/frames.js | 170 +++++++++++++++++++++++++++ js/render.js | 103 +++++++++++++++++ shader-animate.html | 36 ++---- shader-picker.html | 324 ++-------------------------------------------------- 4 files changed, 291 insertions(+), 342 deletions(-) create mode 100644 js/frames.js create mode 100644 js/render.js diff --git a/js/frames.js b/js/frames.js new file mode 100644 index 0000000..0ae256c --- /dev/null +++ b/js/frames.js @@ -0,0 +1,170 @@ + +function add_frame(){ + var frame_count = $("#framecount").int() + if (frame_count < 2) { + add_single_frame() + } + else { + add_frames(frame_count) + } +} +function add_single_frame(){ + var $el = $("
") + $el.html( $("#frame-template").html() ) + $el.attr('index', $("#frames div").length) + var frame = cc.clone().appendTo($el.find(".frame")[0]) + frame.canvas.className = "fullsize" + frame.canvas.style.display = "none" + var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0]) + $("#frames").append($el) + $("#render").enable() +} +function add_frames(frame_count){ + rendering = true + var t = old_t - start_t - pause_t + var frame_delay = $("#frameinterval").float() * 1000 + var frame + for (var i = 0; i < frame_count; i++) { + frame = giveFrame(t) + t += frame_delay + shade(frame, t) + add_single_frame() + } + rendering = false +} +function remove_frame(){ + $(this).closest("div").remove() + if ($("#frames div").length == 0) { + $("#render").disable() + } +} +function remove_all_frames(){ + $("#frames").empty() +} +function shuffle_frames(){ + var shuffled = [] + var $frames = $("#frames div") + $("#frames").empty().append(shuffle($frames)) +} +function reverse_frames(){ + var $frames = $("#frames div") + $("#frames").empty().append(reverse($frames)) +} +function weave_frames(){ + var $frames = $("#frames div") + $("#frames").empty().append(weave($frames)) +} +function sort_frames(){ + var $frames = $("#frames div") + var sorted = $frames.map(function(i,el){ console.log(i,el); return [[ el.getAttribute('index'), el ]] }) + .sort(function(a,b){ return a[0]-b[0] }) + .map(function(i,e){ console.log( e ); return e[1] }) + $("#frames").empty().append(sorted) +} + +function render (){ + if (rendering) return + rendering = true + encoder.reset() + var delay = $("#framedelay").float() * 1000 || 100 + $("#frames canvas.fullsize").each(function(){ + var frame = cq(this.width, this.height).fillStyle($("#background").string()).fillRect(0,0,this.width, this.height).drawImage(this,0,0) + encoder.addFrame(frame.canvas, delay) + }) + $("#pause,#render,#add-frame").disable() + $("#rendered").find("img").remove() + $("#rendered").show() + // really bad results with neuquant? + // status("quantizing") + // encoder.quantize() + status("encoding") + try { + encoder.encode() + } catch (e) { + $("#pause,#render,#add-frame").enable() + rendering = false + status(e) + throw e + } + $("#render").html("rendering") +} + +function status(s){ $(".status").html(s) } + +var encoder = new GifEncoder() + +encoder.on("quantized", function(url){ + status("encoding") + encoder.encode() +}) + +encoder.on("encoded-frame", function(done,count){ + status("encoded " + done + " / " + count) +}) + +encoder.on("rendered", function(bytes){ + status(filesize(bytes.length)) +}) + +encoder.on("rendered-url", function(url){ + var image = new Image () + lastGif = image.src = url + $("#rendered").append(image) + $("#uploaded-url").hide().val("") + $("#save,#upload,#rendered").show() + $("#pause,#render,#add-frame,#save,#upload").enable() + $("#render").html("render") + rendering = false + pause(true) +}) + +function get_filename(){ + var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"") + var username = user.username + var filename = basename + "-" + username + "-" + (+new Date()) + ".gif" + return filename.replace(/ /g,"_").replace(/-+/g,"-") +} +function save (){ + if (! lastGif) return; + var filename = get_filename() + var blob = dataUriToBlob(lastGif) + saveAs(blob, filename); +} +function saveJSON (data, filename) { + var bytes = JSON.stringify(data) + var buf = new ArrayBuffer(bytes.length); + var arr = new Uint8Array(buf); + for (var i = 0; i < bytes.length; i++) { + arr[i] = bytes.charCodeAt(i); + } + + var blob = new Blob([arr], { type: "text/json" }); + blob.slice = blob.slice || blob.webkitSlice; + + saveAs(blob, filename); +} + +function upload(){ + var filename = get_filename() + var username = user.username + var blob = dataUriToBlob(lastGif) + uploadImage({ + blob: blob, + filename: filename, + username: username, + success: function(data){ + + // data.url + // data.filesize + // data.success + + console.log(data); + status("uploaded"); + $("#uploaded-url").show().focus().val(data.url) + }, + error: function(data){ + console.log(data) + status("error uploading: " + data.error) + } + }); +} diff --git a/js/render.js b/js/render.js new file mode 100644 index 0000000..9d3ab04 --- /dev/null +++ b/js/render.js @@ -0,0 +1,103 @@ +var frame, img_frame; +var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0 +var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null; +var fps = 30; + +function choose (){ + imageURL = this.src + loading = true + $("#url").val(imageURL) + loadImage(imageURL, ready) +} +function load(){ + loading = true + var imageURL = $("#url").val() + loadImage(imageURL, ready) +} + +function ready(){ + loading = false + if (window.gif) { + frame = gif.frames[0] + w = cc.canvas.width = frame.ctx.canvas.width + h = cc.canvas.height = frame.ctx.canvas.height + for (var i=0, f; f=gif.frames[i]; i++){ + f.cloneData = f.ctx.getImageData(0,0,w,h) + } + } + else { + fc = cq(img.width, img.height) + fc.drawImage(img, 0, 0) + frame = img_frame = { ctx: fc.context } + w = cc.canvas.width = frame.ctx.canvas.width + h = cc.canvas.height = frame.ctx.canvas.height + frame.cloneData = frame.ctx.getImageData(0,0,w,h) + } +} + +function giveFrame(t){ + if (window.gif) { + if (gif.currentFrame) { + return gif.frames[gif.currentFrame(t)] + } + else { + return gif.frames[0] + } + } + else if (window.img) { + return img_frame + } + else { + return cq(w, h) + } +} + +function reset(){ + start_t = old_t + pause_t = 0 + pause(false) + $("#rendered img").remove() + draw(0) +} + +function pause(state){ + $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause") +} + +function step_forward(){ + var step = $("#framedelay").float() * 1000 || 100 + old_t += step + draw(old_t) + pause(true) +} + +function animate(t){ + raf_id = requestAnimationFrame(animate); + + var step_t = t - old_t + old_t = t + + if (paused || dragging || rendering || scrolling || deferring) { + pause_t += step_t + if (scrolling) { + scrolling = false + deferring = true + } + else { + deferring = false + } + return + } + + // var timing = +(new Date()) + draw(t) + // timing = +(new Date()) - timing + fps = avg(fps, 1000/step_t, 4) + status(~~(fps) + " fps") +} +function draw(t) { + t -= start_t + t -= pause_t + frame = giveFrame(t) + shade(frame, t) +} diff --git a/shader-animate.html b/shader-animate.html index 80d71aa..2525088 100644 --- a/shader-animate.html +++ b/shader-animate.html @@ -33,6 +33,8 @@ delay + + + + @@ -139,15 +141,16 @@ function init(){ $("#reset").click(reset) $("#pause").click(pause) $("#step-forward").click(step_forward) + $(document).on("mousemove", function(e) { + mousex = e.pageX + mousey = e.pageY + }) + $("#add-frame").click(add_frame) $("#frames").sortable({ start: drag_start, stop: drag_stop }); - $(document).on("mousemove", function(e) { - mousex = e.pageX - mousey = e.pageY - }) $(document).on("click","#frames .remove",remove_frame) $("#framecount").change(function(){ var val = $(this).int() @@ -158,6 +161,7 @@ function init(){ $("#background").change(function(){ document.body.style.backgroundColor = $("#background").string() }) + $("#frames").disableSelection(); $("#remove-all-frames").click(remove_all_frames) $("#weave-frames").click(weave_frames) @@ -188,329 +192,19 @@ function init(){ user.shaders.init() user.shaders.loadLastAccessed() - - $("#test-js").click(function(){ - var script = $("#shader").val() - var params = {script: script, verbose: 1} - $.post("/cgi-bin/js/test_javascript.py", params, function(data){ - $("pre").remove() - $("#rendered").show() - var $pre = $("
")
-      $pre.html(data)
-      $("#rendered").append($pre)
-      console.log(data)
-    })
-  })
-  
+
   document.getElementById('shader').addEventListener('input', shader_build);
   shader_build()
 
   requestAnimationFrame(animate)
 }
-function choose (){
-  imageURL = this.src
-  loading = true
-  $("#url").val(imageURL)
-  loadImage(imageURL, ready)
-}
-function load(){
-  loading = true
-  var imageURL = $("#url").val()
-  loadImage(imageURL, ready)
-}
-
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
 function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
 
-function reset(){
-  start_t = old_t
-  pause_t = 0
-  pause(false)
-  $("#rendered img").remove()
-  draw(0)
-}
-function pause(state){
-  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
-}
-function step_forward(){
-  var step = $("#framedelay").float() * 1000 || 100
-  old_t += step
-  draw(old_t)
-  pause(true)
-}
-var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
-var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null;
-var fps = 30;
-function animate(t){
-  raf_id = requestAnimationFrame(animate);
-
-  var step_t = t - old_t
-  old_t = t
-  
-  if (paused || dragging || rendering || scrolling || deferring) {
-    pause_t += step_t
-    if (scrolling) {
-      scrolling = false
-      deferring = true
-    }
-    else {
-      deferring = false
-    }
-    return
-  }
-
-  // var timing = +(new Date())
-  draw(t)
-  // timing = +(new Date()) - timing
-  fps = avg(fps, 1000/step_t, 4)
-  status(~~(fps) + " fps")
-}
-function draw(t) {
-  t -= start_t
-  t -= pause_t
-  frame = giveFrame(t)
-  shade(frame, t)
-}
-
-var frame, img_frame;
-function giveFrame(t){
-  if (window.gif) {
-    if (gif.currentFrame) {
-      return gif.frames[gif.currentFrame(t)]
-    }
-    else {
-      return gif.frames[0]
-    }
-  }
-  else if (window.img) {
-    return img_frame
-  }
-  else {
-    return cq(w, h)
-  }
-}
-
-function ready(){
-  loading = false
-  if (window.gif) {
-    frame = gif.frames[0]
-    w = cc.canvas.width = frame.ctx.canvas.width
-    h = cc.canvas.height = frame.ctx.canvas.height
-    for (var i=0, f; f=gif.frames[i]; i++){
-      f.cloneData = f.ctx.getImageData(0,0,w,h)
-    }
-  }
-  else {
-    fc = cq(img.width, img.height)
-    fc.drawImage(img, 0, 0)
-    frame = img_frame = { ctx: fc.context }
-    w = cc.canvas.width = frame.ctx.canvas.width
-    h = cc.canvas.height = frame.ctx.canvas.height
-    frame.cloneData = frame.ctx.getImageData(0,0,w,h)
-  }
-}
-
-function add_frame(){
-  var frame_count = $("#framecount").int()
-  if (frame_count < 2) {
-    add_single_frame()
-  }
-  else {
-    add_frames(frame_count)
-  }
-}
-function add_single_frame(){
-  var $el = $("
")
-  $el.html( $("#frame-template").html() )
-  $el.attr('index', $("#frames div").length)
-  var frame = cc.clone().appendTo($el.find(".frame")[0])
-  frame.canvas.className = "fullsize"
-  frame.canvas.style.display = "none"
-  var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0])
-  $("#frames").append($el)
-  $("#render").enable()
-}
-function add_frames(frame_count){
-  rendering = true
-  var t = old_t - start_t - pause_t
-  var frame_delay = $("#frameinterval").float() * 1000
-  var frame
-  for (var i = 0; i < frame_count; i++) {
-    frame = giveFrame(t)
-    t += frame_delay
-    shade(frame, t)
-    add_single_frame()
-  }
-  rendering = false
-}
-function remove_frame(){
-  $(this).closest("div").remove()
-  if ($("#frames div").length == 0) {
-    $("#render").disable()
-  }
-}
-function remove_all_frames(){
-  $("#frames").empty()
-}
-function shuffle_frames(){
-  var shuffled = []
-  var $frames = $("#frames div")
-  $("#frames").empty().append(shuffle($frames))
-}
-function reverse_frames(){
-  var $frames = $("#frames div")
-  $("#frames").empty().append(reverse($frames))
-}
-function weave_frames(){
-  var $frames = $("#frames div")
-  $("#frames").empty().append(weave($frames))
-}
-function sort_frames(){
-  var $frames = $("#frames div")
-  var sorted = $frames.map(function(i,el){ console.log(i,el); return [[ el.getAttribute('index'), el ]] })
-                     .sort(function(a,b){ return a[0]-b[0] })
-                     .map(function(i,e){ console.log( e ); return e[1] })
-  $("#frames").empty().append(sorted)
-}
-
-function render (){
-  if (rendering) return
-  rendering = true
-  encoder.reset()
-  var delay = $("#framedelay").float() * 1000 || 100
-  $("#frames canvas.fullsize").each(function(){
-    var frame = cq(this.width, this.height).fillStyle($("#background").string()).fillRect(0,0,this.width, this.height).drawImage(this,0,0)
-    encoder.addFrame(frame.canvas, delay)
-  })
-  $("#pause,#render,#add-frame").disable()
-  $("#rendered").find("img").remove()
-  $("#rendered").show()
-  // really bad results with neuquant?
-  // status("quantizing")
-  // encoder.quantize()
-  status("encoding")
-  try {
-    encoder.encode()
-  } catch (e) {
-    $("#pause,#render,#add-frame").enable()
-    rendering = false
-    status(e)
-    throw e
-  }
-  $("#render").html("rendering")
-}
-
-function status(s){ $(".status").html(s) }
-
-var encoder = new GifEncoder()
-
-encoder.on("quantized", function(url){
-  status("encoding")
-  encoder.encode()
-})
-
-encoder.on("encoded-frame", function(done,count){
-  status("encoded " + done + " / " + count)
-})
-
-encoder.on("rendered", function(bytes){
-  status(filesize(bytes.length))
-})
-
-encoder.on("rendered-url", function(url){
-  var image = new Image ()
-  lastGif = image.src = url
-  $("#rendered").append(image)
-  $("#uploaded-url").hide().val("")
-  $("#save,#upload,#rendered").show()
-  $("#pause,#render,#add-frame,#save,#upload").enable()
-  $("#render").html("render")
-  rendering = false
-  pause(true)
-})
-
-function get_filename(){
-  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
-  var username = user.username
-  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
-  return filename.replace(/ /g,"_").replace(/-+/g,"-")
-}
-function save (){
-  if (! lastGif) return;
-  var filename = get_filename()
-  var blob = dataUriToBlob(lastGif)
-  saveAs(blob, filename);
-}
-function saveJSON (data, filename) {
-  var bytes = JSON.stringify(data)
-  var buf = new ArrayBuffer(bytes.length);
-  var arr = new Uint8Array(buf);
-  for (var i = 0; i < bytes.length; i++) {
-    arr[i] = bytes.charCodeAt(i);
-  }
-
-  var blob = new Blob([arr], { type: "text/json" });
-  blob.slice = blob.slice || blob.webkitSlice;
-  
-  saveAs(blob, filename);
-}
-
-function upload(){
-  var filename = get_filename()
-  var username = user.username
-  var blob = dataUriToBlob(lastGif)
-  uploadImage({
-    blob: blob,
-    filename: filename,
-    username: username,
-    success: function(data){
-    
-      // data.url
-      // data.filesize
-      // data.success
-
-      console.log(data);
-      status("uploaded");
-      $("#uploaded-url").show().focus().val(data.url)
-    },
-    error: function(data){
-      console.log(data)
-      status("error uploading: " + data.error)
-    }
-  });
-}
-
 
 
-
-
 
 
-- 
cgit v1.2.3-70-g09d2


From a16f1daaa4294c66ed16a9a6fd6abe85b5b049a9 Mon Sep 17 00:00:00 2001
From: jules 
Date: Mon, 20 Jan 2014 22:48:50 -0500
Subject: chisel out shader-animate to use library

---
 shader-animate.html | 43 +++++++++----------------------------------
 1 file changed, 9 insertions(+), 34 deletions(-)

diff --git a/shader-animate.html b/shader-animate.html
index 2525088..6591d6d 100644
--- a/shader-animate.html
+++ b/shader-animate.html
@@ -45,47 +45,22 @@ $(init)
 
 function init(){
   $("#url").change(load)
-  $("#demo").click(function(){ demo("#first") })
-  $("#dither-demo").click(function(){ demo("#second") })
-  demo('#first')
+  $("#demo").click(function(){ run("#first") })
+  $("#dither-demo").click(function(){ run("#second") })
+  run('#first')
+
   load()
-  draw()
 
   document.getElementById('shader').addEventListener('input', shader_build);
   shader_build()
 
   requestAnimationFrame(animate)
 }
-function demo(el){
-  $el = $(el)
-  s = $el.html()
-  $("#shader").html(s)
-}
-function load(){
-  loading = true
-  var imageURL = $("#url").val()
-  loadImage(imageURL, ready)
-}
-
-var frame;
-function ready(){
-  loading = false
-  if (window.gif) {
-    frame = gif.frames[0]
-  }
-  else {
-    fc = cq(img.width, img.height)
-    fc.drawImage(img, 0, 0)
-    frame = { ctx: fc.context }
-  }
-  w = cc.canvas.width = frame.ctx.canvas.width
-  h = cc.canvas.height = frame.ctx.canvas.height
-}
-
-var timeout = null;
-function animate(t){
-  requestAnimationFrame(animate);
-  shade(frame, t)
+function run(el){
+	$el = $(el)
+	s = $el.html()
+	$("#shader").html(s)
+	shader_build()
 }
 
 
-- 
cgit v1.2.3-70-g09d2


From d947152a7c8553462091f25f8cff249c0cb43004 Mon Sep 17 00:00:00 2001
From: jules 
Date: Tue, 21 Jan 2014 00:40:33 -0500
Subject: shader api test

---
 js/api/get.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/js/api/get.js b/js/api/get.js
index dd43130..ec269b0 100644
--- a/js/api/get.js
+++ b/js/api/get.js
@@ -81,12 +81,17 @@ ShaderAPI.originals = function(cb){
 
 // fetch - AJAX wrapper
 ShaderAPI.fetch = function(params, cb){
-  $.getJSON("/cgi-bin/im/shader/view", params, function(data){
-    if (data.SUCCESS) {
-      cb(null, data.data)
-    }
-    else if (data.ERROR) {
-      cb(data.ERROR, data.data)
-    }
+  $.ajax({
+  	url: "http://asdf.us/cgi-bin/im/shader/view",
+  	data: params,
+  	dataType: "jsonp",
+  	success: function(data){
+			if (data.SUCCESS) {
+				cb(null, data.data)
+			}
+			else if (data.ERROR) {
+				cb(data.ERROR, data.data)
+			}
+		}
   })
 }
-- 
cgit v1.2.3-70-g09d2


From c55b90c1ed47028a5e6ce0aff2284fb7cb5ed554 Mon Sep 17 00:00:00 2001
From: jules 
Date: Tue, 21 Jan 2014 00:58:48 -0500
Subject: allow null shader

---
 js/shader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/shader.js b/js/shader.js
index 2f5fda1..19c049b 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -1,6 +1,6 @@
 var shader_build = function(){
   var fn_str = document.getElementById('shader').value
-  if (!fn_str.length) return
+  if (!fn_str.length) fn_str = ""
   try {
     var fn = new Function('x','y','t','d', fn_str)
     shader = fn
-- 
cgit v1.2.3-70-g09d2


From ced1db8df6c73f7bd0a4debd3f20b5570b99e7b4 Mon Sep 17 00:00:00 2001
From: jules 
Date: Tue, 21 Jan 2014 01:18:36 -0500
Subject: shader loader demo

---
 js/api/get.js   |   6 ++-
 js/render.js    |   5 +-
 shader-api.html | 155 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 164 insertions(+), 2 deletions(-)
 create mode 100644 shader-api.html

diff --git a/js/api/get.js b/js/api/get.js
index ec269b0..ae06dbd 100644
--- a/js/api/get.js
+++ b/js/api/get.js
@@ -31,6 +31,10 @@ ShaderAPI.range = function(limit, offset, cb){
 // latest - get the latest N shaders
 //   limit: number of shaders to fetch
 ShaderAPI.latest = function(limit, cb){
+	if (! cb) {
+		cb = limit
+		limit = ShaderAPI.limit
+	}
   ShaderAPI.fetch({
     f: "range",
     limit: limit || ShaderAPI.limit
@@ -66,7 +70,7 @@ ShaderAPI.username = function(username, cb){
 }
 
 // list_users - list all users
-ShaderAPI.list_users = function(list_users, cb){
+ShaderAPI.list_users = function(cb){
   ShaderAPI.fetch({
     f: "list_users"
   }, cb)
diff --git a/js/render.js b/js/render.js
index 9d3ab04..fdb0125 100644
--- a/js/render.js
+++ b/js/render.js
@@ -93,11 +93,14 @@ function animate(t){
   draw(t)
   // timing = +(new Date()) - timing
   fps = avg(fps, 1000/step_t, 4)
-  status(~~(fps) + " fps")
+  // status(~~(fps) + " fps")
 }
+
 function draw(t) {
   t -= start_t
   t -= pause_t
   frame = giveFrame(t)
   shade(frame, t)
 }
+
+function status(s){ $("#status").html(s); console.log(s) }
diff --git a/shader-api.html b/shader-api.html
new file mode 100644
index 0000000..284d1a4
--- /dev/null
+++ b/shader-api.html
@@ -0,0 +1,155 @@
+
+
+
+
+
+
+
+
+
+

+	
+	
+	
+	
+	
+	
+	
+	
+	
+

+
+

+	
+  

+  

+
+  
+  

+  

+
+

+
+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-- 
cgit v1.2.3-70-g09d2


From 60a5e5581ccbf05170ccd6bab292562c460a42c2 Mon Sep 17 00:00:00 2001
From: jules 
Date: Tue, 21 Jan 2014 01:22:37 -0500
Subject: disable some of the buttons for now

---
 shader-api.html | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/shader-api.html b/shader-api.html
index 284d1a4..9020136 100644
--- a/shader-api.html
+++ b/shader-api.html
@@ -35,12 +35,13 @@ a { color: #00f; }
 -->
 
 

-	
+	
+	
+	|
+	
 	
-	
 	
-	
-	
+	
 	
@@ -146,7 +147,7 @@ function run(shader_object){
 	console.log(shader_object)
 	$("#url").val( shader_object.image_url )
 	$("#shader").html(shader_object.script)
-
+	$("#shader-id").val(shader_object.id)
 	load()
 	shader_build()
 }
-- 
cgit v1.2.3-70-g09d2