Shader

From f7f0aa24d8a80184bc3695234e9f57a08d73684c Mon Sep 17 00:00:00 2001 From: jules Date: Mon, 16 Dec 2013 13:17:45 -0500 Subject: render & save gif --- js/util.js | 2 ++ shader-gif.html | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 71 insertions(+), 9 deletions(-) diff --git a/js/util.js b/js/util.js index ac0f517..b738d1e 100644 --- a/js/util.js +++ b/js/util.js @@ -1,6 +1,8 @@ if (window.$) { $.fn.int = function(){ return parseInt($(this).val(),10) } $.fn.float = function(){ return parseFloat($(this).val()) } + $.fn.enable = function() { return $(this).attr("disabled",null) } + $.fn.disable = function() { return $(this).attr("disabled","disabled") } } var E = Math.E diff --git a/shader-gif.html b/shader-gif.html index e5c4884..e509d0a 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -1,16 +1,19 @@ - - + Shader @@ -32,6 +35,11 @@ delay

+

+ + +
+

@@ -50,6 +58,7 @@ delay var cc = cq(0,0).appendTo("#workspace") var w, h var dragging = false +var lastGif $(init) @@ -66,6 +75,8 @@ function init(){ }); $(document).on("click","#frames .remove",remove_frame) $("#frames").disableSelection(); + $("#render").click(render) + $("#save").click(save) demo('#first') load() draw() @@ -85,14 +96,14 @@ function reset(){ start_t = old_t pause_t = 0 } -function pause(){ - paused = ! paused +function pause(state){ + $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused) } -var timeout = null, raf_id, start_t = 0, old_t = 0, pause_t = 0, paused = false; +var timeout = null, raf_id, start_t = 0, old_t = 0, pause_t = 0, paused = false, rendering = false; function draw(t){ raf_id = requestAnimationFrame(draw); - if (paused || dragging) { + if (paused || dragging || rendering) { pause_t += t - old_t old_t = t return @@ -149,13 +160,62 @@ function shade(frame, t){ function add_frame(){ var $el = $("

") $el.html( $("#frame-template").html() ) - var frame = cc.clone() + 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 remove_frame(){ $(this).closest("div").remove() + if ($("#frames div").length == 0) { + $("#render").disable() + } +} + +function render (){ + if (rendering) return + rendering = true + $("#frames canvas.fullsize").each(function(){ + encoder.addFrame(this, 60) + }) + $("#pause,#render,#add-frame").disable() + $("#rendered").find("img").remove() + $("#rendered").show() + status("quantizing") + encoder.encode() +} + +function status(s){ + $("#status").html(s) } + +var encoder = new GifEncoder() + +encoder.on("quantized", function(url){ + status("encoding") + encoder.encode() +}) + +encoder.on("rendered-url", function(url){ + status("") + var image = new Image () + lastGif = image.src = url + $("#rendered").append(image) + $("#save,#rendered").show() + $("#pause,#render,#add-frame,#save").enable() + rendering = false + pause(true) +}) + +function save (){ + if (! lastGif) return; + var filename = document.getElementById("url").value.replace(/^.*\//,"").replace(/\.gif.*$/,"") + var blob = dataUriToBlob(lastGif) + saveAs(blob, filename + "-" + (+new Date()) + ".gif"); +} +