From b3807b435f3ed01f159fb0f6c53956962b964d13 Mon Sep 17 00:00:00 2001 From: jules Date: Mon, 16 Dec 2013 16:44:31 -0500 Subject: ui reorg, remove all frames, handle alpha w/ bgcolor --- js/util.js | 3 +++ shader-gif.html | 84 ++++++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 62 insertions(+), 25 deletions(-) diff --git a/js/util.js b/js/util.js index dcc978f..dde3427 100644 --- a/js/util.js +++ b/js/util.js @@ -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 Shader +
- -frames -delay - - - - - - -
-
- -
+ + frame delay + background + + + +
+ +
+
+ + +
+
+ + frames + interval + + +
+ +
+
+
+ + + +
+
+
- - -
+ + +
+ @@ -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() -- cgit v1.2.3-70-g09d2