diff options
| author | jules <jules@okfoc.us> | 2013-12-16 16:44:31 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2013-12-16 16:44:31 -0500 |
| commit | b3807b435f3ed01f159fb0f6c53956962b964d13 (patch) | |
| tree | 13b4bcb8117a91a04602c5103d71323c35394711 | |
| parent | 647e85694a9ab1ef8ef9f0ad321710c064cf74fd (diff) | |
ui reorg, remove all frames, handle alpha w/ bgcolor
| -rw-r--r-- | js/util.js | 3 | ||||
| -rw-r--r-- | shader-gif.html | 84 |
2 files changed, 62 insertions, 25 deletions
@@ -1,10 +1,13 @@ if (window.$) { $.fn.int = function(){ return parseInt($(this).val(),10) } $.fn.float = function(){ return parseFloat($(this).val()) } + $.fn.string = function(){ return trim($(this).val()) } $.fn.enable = function() { return $(this).attr("disabled",null) } $.fn.disable = function() { return $(this).attr("disabled","disabled") } } +function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } + var E = Math.E var PI = Math.PI function clamp(n,a,b){ return n<a?a:n<b?n:b } diff --git a/shader-gif.html b/shader-gif.html index 45069bd..8d8d63b 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -2,42 +2,63 @@ <head> <title>Shader</title> <style type="text/css"> -#url { width: 100px; } -#width,#height,#framecount,#delay {width: 30px; } +#url { width: 450px; } +#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; } #shader { width: 100%; height: 247px; font-family: fixed; } -#frames { width: 450px; height: 100px; } +#frames { width: 435px; min-height: 100px; border: 1px solid #ddd; line-height: 0; } #controls { width: 450px; } -#frames div { padding: 1px; position: relative; } +#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; } +#frames canvas { display: block } #frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 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;} +#controls,#workspace,#rendered{ float: left; } #rendered { display: none; } +#render,#save { font-weight: bold; } </style> </head> <body> + <div id="controls"> -<input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png"> -frames <input type="text" id="framecount" value="1"> -delay <input type="text" id="delay" value="0.1s"> -<button id="reset">reset</button> -<button id="pause">pause</button> -<button id="add-frame">+frame</button> -<button id="render" disabled>render</button> -<button id="demo">demo</button> -<button id="dither-demo">dither</button> -<br> -<br> -<textarea id="shader"></textarea> -<div id="frames"></div> + + frame delay <input type="text" id="framedelay" value="0.1s"> + background <input type="text" id="background" value="#fff"> + <button id="reset">reset</button> + <button id="pause">pause</button> + <button id="render" disabled>render</button> + <br> + <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png"> + <br> + <br> + + <textarea id="shader"></textarea> + <br> + <br> + + frames <input type="text" id="framecount" value="1"> + interval <input type="text" id="frameinterval" value="0.1s"> + <button id="add-frame">+add frame</button> + <button id="remove-all-frames">remove all</button> + <br> + + <div id="frames"></div> + <br> + <br> + + <button id="demo">demo</button> + <button id="dither-demo">dither</button> + <br> </div> + <div id="workspace"></div> + <div id="rendered"> -<span id="status"></span> -<button id="save" disabled>save</button> -<br> + <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> @@ -78,7 +99,17 @@ function init(){ mousey = event.pageY }) $(document).on("click","#frames .remove",remove_frame) + $("#framecount").change(function(){ + var val = $(this).int() + if (val < 1 || isNaN(val)) $(this).val(val = 1) + if (val == 1) $("#add-frame").html("+add frame") + else $("#add-frame").html("+add frames") + }) + $("#background").change(function(){ + document.body.style.backgroundColor = $("#background").string() + }) $("#frames").disableSelection(); + $("#remove-all-frames").click(remove_all_frames) $("#render").click(render) $("#save").click(save) demo('#first') @@ -100,7 +131,6 @@ function reset(){ start_t = old_t pause_t = 0 $("#rendered").hide() - $("#frames").empty() } function pause(state){ $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused) @@ -185,7 +215,7 @@ function add_single_frame(){ function add_frames(frame_count){ rendering = true var t = old_t - start_t - pause_t - var frame_delay = $("#delay").float() * 1000 + var frame_delay = $("#frameinterval").float() * 1000 for (var i = 0; i < frame_count; i++) { t += frame_delay shade(frame, t) @@ -199,14 +229,18 @@ function remove_frame(){ $("#render").disable() } } +function remove_all_frames(){ + $("#frames").empty() +} function render (){ if (rendering) return rendering = true encoder.reset() - var delay = $("#delay").float() * 1000 || 100 + var delay = $("#framedelay").float() * 1000 || 100 $("#frames canvas.fullsize").each(function(){ - encoder.addFrame(this, delay) + 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() |