1 files changed, 30 insertions, 16 deletions

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){