diff options
| -rw-r--r-- | instructions.html | 16 | ||||
| -rw-r--r-- | js/color.js | 6 | ||||
| -rw-r--r-- | js/vendor/gif-encode/client.js | 3 | ||||
| -rw-r--r-- | shader-gif.html | 46 |
4 files changed, 52 insertions, 19 deletions
diff --git a/instructions.html b/instructions.html index 7fb31c4..39bf3bf 100644 --- a/instructions.html +++ b/instructions.html @@ -36,6 +36,22 @@ pixel(x,y) == 4*(y*w+h) rand(n), randint(n) choice(array) deg(radians), rad(degrees) + +<u>color functions</u> +rgb(x,y,z) (setter) +rgb2xyz(rgb) +xyz2rgb(xyz) +xyz2hunterlab(xyz) +hunterlab2xyz(Lab) +xyz2cielab(xyz) +cielab2xyz(Lab) +rgb2hsl (rgb) +hsl2rgb (hsl) +rgb2cmy (rgb) +cmy2rgb (cmy) +cmy2cmyk (cmy) +cmyk2cmy (cmyk) +(not all have been tested) </pre> </body> <script> diff --git a/js/color.js b/js/color.js index a6e1317..34404cd 100644 --- a/js/color.js +++ b/js/color.js @@ -205,7 +205,7 @@ function rgb2cmy (R,G,B){ return [C,M,Y] } function cmy2rgb (C,M,Y){ - if (CMY.length) { + if (C.length) { Y = C[2] M = C[1] C = C[0] @@ -216,7 +216,7 @@ function cmy2rgb (C,M,Y){ return [R,G,B] } function cmy2cmyk (C,M,Y) { - if (CMY.length) { + if (C.length) { Y = C[2] M = C[1] C = C[0] @@ -241,7 +241,7 @@ function cmy2cmyk (C,M,Y) { return [C,M,Y,K] } function cmyk2cmy (C,M,Y,K) { - if (CMYK.length) { + if (C.length) { K = C[3] Y = C[2] M = C[1] diff --git a/js/vendor/gif-encode/client.js b/js/vendor/gif-encode/client.js index 8116bf0..c441b47 100644 --- a/js/vendor/gif-encode/client.js +++ b/js/vendor/gif-encode/client.js @@ -141,6 +141,9 @@ function GifEncoder(){ } var encode = this.encode = function (nq, ct) { + if (! canvases.length) { + throw Error ("No frames to encode") + } nq = nq || neuquant ct = ct || colortab diff --git a/shader-gif.html b/shader-gif.html index afa8e22..c921b88 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -20,8 +20,9 @@ div { display: inline-block; padding: 10px;} #rendered { display: none; } #render,#save { font-weight: bold; } #render { float: right; } -#instructions { position: absolute;top:20px;right:20px; width:180px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; } -#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;pointer-events:none;} +#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; } +#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;} +#instructions.dragging iframe { pointer-events: none; } #instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; } .close,.remove { cursor: pointer; } </style> @@ -88,7 +89,6 @@ div { display: inline-block; padding: 10px;} var cc = cq(0,0).appendTo("#workspace") var w, h -var dragging = false var lastGif $(init) @@ -135,6 +135,7 @@ function init(){ demo('#first') load() animate(0) + $(window).on("scroll", function(){ scrolling = true }) } function drag_start(){ dragging = true; $(this).addClass("dragging") } function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") } @@ -164,12 +165,13 @@ function step_forward(){ draw(old_t) } var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0 -var paused = false, rendering = false; +var paused = false, dragging = false, rendering = false, scrolling = false; function animate(t){ raf_id = requestAnimationFrame(animate); - if (paused || dragging || rendering) { + if (paused || dragging || rendering || scrolling) { pause_t += t - old_t old_t = t + scrolling = false return } else { @@ -213,17 +215,22 @@ function ready(){ function shade(frame, t){ if (! t || isNaN(t)) throw Error ("No time specified") if (! frame) throw Error ("No frame specified") - // try { - if (1) { + try { var f = $("#shader").val() if (!f.length) return; var shader = new Function('x','y','t','d', f) + } + catch (e) { + throw Error ("Shader compilation error") + } + + var imageData = frame.ctx.getImageData(0,0,w,h) + var data = imageData.data - var imageData = frame.ctx.getImageData(0,0,w,h) - var data = imageData.data + var cloneData = frame.ctx.getImageData(0,0,w,h) + var clone = cloneData.data - var cloneData = frame.ctx.getImageData(0,0,w,h) - var clone = cloneData.data + try { for (var x = 0; x < w; x++) { for (var y = 0; y < h; y++) { q = 4*(y*w+x) @@ -235,11 +242,11 @@ function shade(frame, t){ data[q+3] = a } } - cc.putImageData(imageData,0,0) -// } -// catch (e){ -// console.log(e) } + catch(e){ + throw Error ("Shader execution error") + } + cc.putImageData(imageData,0,0) } function add_frame(){ @@ -300,7 +307,14 @@ function render (){ // status("quantizing") // encoder.quantize() status("encoding") - encoder.encode() + try { + encoder.encode() + } catch (e) { + $("#pause,#render,#add-frame").enable() + rendering = false + status(e) + throw e + } } function status(s){ |