diff options
| author | jules <jules@okfoc.us> | 2013-12-16 13:17:45 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2013-12-16 13:17:45 -0500 |
| commit | f7f0aa24d8a80184bc3695234e9f57a08d73684c (patch) | |
| tree | f19f7a043b1b8123c5d51276ff77d34fc4e53108 | |
| parent | 3534e706c32d8892f3499722fae61c1f3bad607f (diff) | |
render & save gif
| -rw-r--r-- | js/util.js | 2 | ||||
| -rw-r--r-- | shader-gif.html | 78 |
2 files changed, 71 insertions, 9 deletions
@@ -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 @@ -<!doctype html> -<html> +<!doctype html> <html> <head> <title>Shader</title> <style type="text/css"> #url { width: 100px; } #width,#height,#frames,#delay {width: 30px; } -#shader { width: 400px; height: 247px; font-family: fixed; } +#shader { width: 100%; height: 247px; font-family: fixed; } #frames { width: 450px; height: 100px; } #controls { width: 450px; } #frames div { padding: 1px; position: relative; } #frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; } -div { float: left; padding: 10px;} +.paused { background: black; color: white; border-width: 1px; padding: 2px 7px; } +.paused { outline: 0 !important; } +div { display: inline-block; padding: 10px;} +#controls,#workspace,#rendered{float: left;} +#rendered { display: none; } </style> </head> <body> @@ -32,6 +35,11 @@ delay <input type="text" id="delay" value="60"> <div id="frames"></div> </div> <div id="workspace"></div> +<div id="rendered"> +<span id="status"></span> +<button id="save" disabled>save</button> +<br> +</div> </body> <script type="text/javascript" src="js/vendor/gif-encode/util.js"></script> <script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script> @@ -50,6 +58,7 @@ delay <input type="text" id="delay" value="60"> 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 = $("<div>") $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"); +} + </script> <script type="text/html" id="frame-template"> <button class="remove">x</button> |