diff options
| -rw-r--r-- | shader-gif.html | 26 |
1 files changed, 21 insertions, 5 deletions
diff --git a/shader-gif.html b/shader-gif.html index 49e4ac0..f99aaba 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -6,8 +6,10 @@ #url { width: 100px; } #width,#height,#frames,#delay {width: 30px; } #shader { width: 400px; height: 247px; font-family: fixed; } -#frames { width: 400px; height: 100px; overflow-x: scroll; } +#frames { width: 400px; height: 100px; } #controls { width: 450px; } +#frames div { padding: 1px; } +#frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; } div { float: left; padding: 10px;} </style> </head> @@ -38,6 +40,7 @@ delay <input type="text" id="delay" value="60"> <script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script> <script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script> <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script> +<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript" src="js/vendor/canvasquery.js"></script> <script type="text/javascript" src="js/canvasquery.dither.js"></script> <script type="text/javascript" src="js/color.js"></script> @@ -46,6 +49,7 @@ delay <input type="text" id="delay" value="60"> var cc = cq(0,0).appendTo("#workspace") var w, h +var dragging = false $(init) @@ -53,8 +57,14 @@ function init(){ $("#url").change(load) $("#reset").click(reset) $("#pause").click(pause) + $("#add-frame").click(add_frame) $("#demo").click(function(){ demo("#first") }) $("#dither-demo").click(function(){ demo("#second") }) + $("#frames").sortable({ + start: function(){ dragging = true }, + stop: function(){ dragging = false } + }); + $("#frames").disableSelection(); demo('#first') load() draw() @@ -81,7 +91,7 @@ function pause(){ var timeout = null, raf_id, start_t = 0, old_t = 0, pause_t = 0, paused = false; function draw(t){ raf_id = requestAnimationFrame(draw); - if (paused) { + if (paused || dragging) { pause_t += t - old_t old_t = t return @@ -135,14 +145,20 @@ function shade(frame, t){ } } -frames = [] function add_frame(){ - var cel = cc.clone().appendTo("#frames") - frames.push(cel) + var $el = $("<div>") + $el.html( $("#frame-template").html() ) + var frame = cc.clone() + var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0]) + $("#frames").append($el) } function remove_frame(){ } </script> +<script type="text/html" id="frame-template"> +<span class="remove"></span> +<span class="frame"></span> +</script> <script type="text/javascript-shader" id="first"> t /= 500 if (a == 0) { r = g = b = x; t /= -3 } |