diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/api/get.js | 101 | ||||
| -rw-r--r-- | js/api/set.js | 39 | ||||
| -rw-r--r-- | js/frames.js | 170 | ||||
| -rw-r--r-- | js/render.js | 106 | ||||
| -rw-r--r-- | js/shader.js | 2 |
5 files changed, 417 insertions, 1 deletions
diff --git a/js/api/get.js b/js/api/get.js new file mode 100644 index 0000000..ae06dbd --- /dev/null +++ b/js/api/get.js @@ -0,0 +1,101 @@ +;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){ + if (! cb) { + cb = limit + limit = ShaderAPI.limit + } + 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(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){ + $.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) + } + } + }) +} 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; +} 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 = $("<div>") + $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..fdb0125 --- /dev/null +++ b/js/render.js @@ -0,0 +1,106 @@ +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) +} + +function status(s){ $("#status").html(s); console.log(s) } 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 |