diff options
| author | jules <jules@okfoc.us> | 2013-12-16 15:50:19 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2013-12-16 15:50:19 -0500 |
| commit | 87dda10ae99345be913d153fb4a9c6843b29e49c (patch) | |
| tree | 9304342d9a1667f7d8a5c442f91aa0def42305f3 | |
| parent | f7f0aa24d8a80184bc3695234e9f57a08d73684c (diff) | |
add filesize... append multiple frames
| -rw-r--r-- | js/util.js | 18 | ||||
| -rw-r--r-- | shader-gif.html | 46 |
2 files changed, 52 insertions, 12 deletions
@@ -61,9 +61,9 @@ function loadImage(imageURL, callback) { } } -function giveImage() { +function giveImage(t) { if (window.gif) { - return gif.frames[gif.currentFrame()]; + return gif.frames[gif.currentFrame(t)]; } else { return img; } @@ -74,4 +74,16 @@ function proxify (url) { return "/cgi-bin/proxy?" + url // .replace(/^https?:\/\//, ""); else return url -}; +} + +function filesize(n) { + if (n < 1e3) return n + " bytes" + if (n < 1e6) return decimalString(n/1e3) + " kb" + if (n < 1e9) return decimalString(n/1e6) + " mb" + return "WAY TOO BIG DUDE" +} +function decimalString(n){ + var m = Math.floor(n); + return m + "." + Math.round((n-m)*10) +} + diff --git a/shader-gif.html b/shader-gif.html index e509d0a..8259f82 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -3,7 +3,7 @@ <title>Shader</title> <style type="text/css"> #url { width: 100px; } -#width,#height,#frames,#delay {width: 30px; } +#width,#height,#framecount,#delay {width: 30px; } #shader { width: 100%; height: 247px; font-family: fixed; } #frames { width: 450px; height: 100px; } #controls { width: 450px; } @@ -19,10 +19,8 @@ div { display: inline-block; padding: 10px;} <body> <div id="controls"> <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png"> -<!-- -frames <input type="text" id="frames" value="7"> -delay <input type="text" id="delay" value="60"> ---> +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> @@ -95,6 +93,8 @@ function load(){ 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) @@ -133,7 +133,7 @@ function ready(){ function shade(frame, t){ try { - if (window.gif) frame = giveImage() + if (window.gif) frame = giveImage(t) var f = $("#shader").val() if (!f.length) return; var shader = new Function('x','y','t', f) @@ -158,6 +158,15 @@ function shade(frame, t){ } 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() ) var frame = cc.clone().appendTo($el.find(".frame")[0]) @@ -167,6 +176,17 @@ function add_frame(){ $("#frames").append($el) $("#render").enable() } +function add_frames(frame_count){ + rendering = true + var t = old_t - start_t - pause_t + var frame_delay = $("#delay").float() * 1000 + for (var i = 0; i < frame_count; i++) { + t += frame_delay + shade(frame, t) + add_single_frame() + } + rendering = false +} function remove_frame(){ $(this).closest("div").remove() if ($("#frames div").length == 0) { @@ -177,13 +197,18 @@ function remove_frame(){ function render (){ if (rendering) return rendering = true + encoder.reset() + var delay = $("#delay").float() * 1000 || 100 $("#frames canvas.fullsize").each(function(){ - encoder.addFrame(this, 60) + encoder.addFrame(this, delay) }) $("#pause,#render,#add-frame").disable() $("#rendered").find("img").remove() $("#rendered").show() - status("quantizing") + // really bad results with neuquant? + // status("quantizing") + // encoder.quantize() + status("encoding") encoder.encode() } @@ -198,8 +223,11 @@ encoder.on("quantized", function(url){ encoder.encode() }) +encoder.on("rendered", function(bytes){ + status(filesize(bytes.length)) +}) + encoder.on("rendered-url", function(url){ - status("") var image = new Image () lastGif = image.src = url $("#rendered").append(image) |