From e7b0213ebf2621b71fcaa04e7ad80614853e9551 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 00:11:32 -0500
Subject: toggle gallery

---
 js/render.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/render.js')

diff --git a/js/render.js b/js/render.js
index fdb0125..4a9eeef 100644
--- a/js/render.js
+++ b/js/render.js
@@ -103,4 +103,4 @@ function draw(t) {
   shade(frame, t)
 }
 
-function status(s){ $("#status").html(s); console.log(s) }
+function status(s){ $(".status").html(s); console.log(s) }
-- 
cgit v1.2.3-70-g09d2


From 009007363dfca587c2cbbdbba6566179a05d8fb6 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 00:17:45 -0500
Subject: merge js into combo

---
 js/frames.js      |  6 ++++--
 js/help.js        |  2 ++
 js/render.js      |  2 --
 shader-combo.html | 20 +++++++++++++++-----
 4 files changed, 21 insertions(+), 9 deletions(-)

(limited to 'js/render.js')

diff --git a/js/frames.js b/js/frames.js
index c9c844d..2dddae2 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -29,6 +29,10 @@ frame_editor.bind = function(){
   $("#render").click(render)
   $("#save").click(save)
   $("#upload").click(upload)
+
+	$("#background").change(function(){
+		document.body.style.backgroundColor = $("#background").string()
+	})
 }
 
 function add_frame(){
@@ -121,8 +125,6 @@ function render (){
   $("#render").html("rendering")
 }
 
-function status(s){ $(".status").html(s) }
-
 var encoder = new GifEncoder()
 
 encoder.on("quantized", function(url){
diff --git a/js/help.js b/js/help.js
index 5610794..1794f3b 100644
--- a/js/help.js
+++ b/js/help.js
@@ -17,3 +17,5 @@ help.bind = function(){
 
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
 function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
+
+function status(s){ $(".status").html(s); console.log(s) }
diff --git a/js/render.js b/js/render.js
index 4a9eeef..a22c9fe 100644
--- a/js/render.js
+++ b/js/render.js
@@ -102,5 +102,3 @@ function draw(t) {
   frame = giveFrame(t)
   shade(frame, t)
 }
-
-function status(s){ $(".status").html(s); console.log(s) }
diff --git a/shader-combo.html b/shader-combo.html
index 92cb6e1..aa6edd2 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -46,13 +46,13 @@ a { color: #00f; }
 	<button id="toggle-off">hide</button>
 	|
 	<span id="shader-api-form" class="form">
+		<input type="checkbox" id="persist-image" checked>
+		<label for="persist-image">load image</label>
 		<button id="fetch-latest">latest</button>
 		<button id="fetch-next-page" class="hidden">&rarr;</button>
 		<select id="pick-user">
 			<option>fetching users..</option>
 		</select>
-		<input type="checkbox" id="persist-image" checked>
-		<label for="persist-image">load image</label>
 		<span class="status"></span>
 		<div id="shader-gallery"></div>
 	</span>
@@ -80,7 +80,6 @@ a { color: #00f; }
 	<button id="pause">pause</button>
 	<button id="reset">reset</button>
 	<br>
-
 </div>
 
 <div id="workspace"></div>
@@ -125,16 +124,24 @@ a { color: #00f; }
 
 var cc = cq(0,0).appendTo("#workspace")
 var w, h
+var lastGif
+var mousex, mousey
+
 var firsttime = true
 var shader_gallery_template = $("#shader-gallery-template").html()
 
-
 $(init)
 
 function init(){
 	$("#url").change(load)
 	$("#reset").click(reset)
 	$("#pause").click(pause)
+	$("#step-forward").click(step_forward)
+
+	$(document).on("mousemove", function(e) {
+		mousex = e.pageX
+		mousey = e.pageY
+	})
 
 	$("#toggle-shaders").click(function(){
 		$("#header .form").hide()
@@ -152,6 +159,10 @@ function init(){
 		$("#header .form").hide()
 		$(".bold").removeClass("bold")
 	})
+
+	frame_editor.init()
+	help.init()
+	load()
 	
 	user.init()
 	help.init()
@@ -164,6 +175,5 @@ function init(){
 }
 
 
-
 </script>
 </html>
-- 
cgit v1.2.3-70-g09d2


From b0b1b4cfbe3217b9f35343bdc35cdd058f4cf534 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 02:26:23 -0500
Subject: allow empty canvas w/ no url

---
 js/api/gallery.js |  3 ++-
 js/api/set.js     |  2 +-
 js/gallery.js     |  1 -
 js/image.js       | 12 ++++++++++--
 js/render.js      | 40 ++++++++++++++++++++++++++++++++++------
 js/shader.js      |  6 ++++--
 shader-combo.html | 11 +++++++----
 7 files changed, 58 insertions(+), 17 deletions(-)

(limited to 'js/render.js')

diff --git a/js/api/gallery.js b/js/api/gallery.js
index c1a779d..0404009 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -68,7 +68,7 @@ function load_shaders(err, shaders){
 		var $shader = display_shader(shaders[i])
 		$el.append( $shader )
 	}
-	if (firsttime) {
+	if (false && firsttime) {
 		firsttime = false
 		run_shader(shaders[0])
 	}
@@ -81,5 +81,6 @@ function display_shader(shader_object){
 		html = html.replace("{" + field + "}", shader_object[field])
 	}
 	$shader.html(html)
+	shader_object.id && $shader.data("id", shader_object.id)
 	return $shader;
 }
diff --git a/js/api/set.js b/js/api/set.js
index 461f3e3..16e60fe 100644
--- a/js/api/set.js
+++ b/js/api/set.js
@@ -59,7 +59,7 @@ function save_thumbnail(id, thumb){
 		status('')
 		var data = JSON.parse(resp)
 		if (data.success) {
-			$shader.find("img").attr("src", data.url)
+			$(".shader[data-id="+id+"]").find("img").attr("src", data.url)
 		}
 	});
 }
diff --git a/js/gallery.js b/js/gallery.js
index b9acfc0..839316c 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -14,7 +14,6 @@ gallery.bind = function(){
   $("#gallery-random").click(asdf.random)
   $("#gallery-search").submit(dumpfm.search)
   $(document).on("click", "#gallery-images canvas", gallery.click)
-  status("ready")
 }
 
 gallery.load = function(ims){
diff --git a/js/image.js b/js/image.js
index 7a5240f..4de7fd9 100644
--- a/js/image.js
+++ b/js/image.js
@@ -1,15 +1,23 @@
+var gif, img
+
 function loadImage(imageURL, callback) {
   var imageURL = proxify( imageURL );
 
   window.gif = window.img = null
 
-  if (imageURL.substr(-3) === "gif") {
+	if (! imageURL) {
+		window.gif = null
+		window.img = null
+		callback()
+	}
+  else if (imageURL.substr(-3) === "gif") {
     window.gif = GIF(imageURL);
     // gif.on("error", tryToLoadNextImage);
     // gif.on("rendered", trackLoadTime);
     gif.on("rendered", callback);
     return gif.render();
-  } else {
+  }
+  else {
     window.img = new Image();
     // img.addEventListener("error", tryToLoadNextImage);
     img.addEventListener("load", callback);
diff --git a/js/render.js b/js/render.js
index a22c9fe..f6684d7 100644
--- a/js/render.js
+++ b/js/render.js
@@ -9,9 +9,10 @@ function choose (){
   $("#url").val(imageURL)
   loadImage(imageURL, ready)
 }
+
 function load(){
-  loading = true
   var imageURL = $("#url").val()
+  loading = true
   loadImage(imageURL, ready)
 }
 
@@ -25,7 +26,7 @@ function ready(){
       f.cloneData = f.ctx.getImageData(0,0,w,h)
     }
   }
-  else {
+  else if (window.img) {
     fc = cq(img.width, img.height)
     fc.drawImage(img, 0, 0)
     frame = img_frame = { ctx: fc.context }
@@ -33,25 +34,52 @@ function ready(){
     h = cc.canvas.height = frame.ctx.canvas.height
     frame.cloneData = frame.ctx.getImageData(0,0,w,h)
   }
+  else {
+    cc.canvas.width = w
+    cc.canvas.height = h
+    shader_build()
+  }
+	displayWidthHeight(w, h)
 }
 
+function displayWidthHeight(width, height){
+	$("#width").val(width)
+	$("#height").val(height)
+}
+$("#width").change(function(){
+	w = abs(parseInt(this.value,10)) || 1
+	cc.canvas.width = w
+	cc.canvas.height = h
+})
+$("#height").change(function(){
+	h = abs(parseInt(this.value,10)) || 1
+	cc.canvas.width = w
+	cc.canvas.height = h
+})
 function giveFrame(t){
   if (window.gif) {
     if (gif.currentFrame) {
       return gif.frames[gif.currentFrame(t)]
     }
-    else {
+    else if (gif.frames) {
       return gif.frames[0]
     }
   }
-  else if (window.img) {
+  if (window.img) {
     return img_frame
   }
   else {
-    return cq(w, h)
+    return empty_frame()
   }
 }
 
+function empty_frame(){
+	w = w || 400
+	h = h || 266
+	var cx = cq(w, h).fillStyle("rgba(255,255,255,255)").fillRect(0,0,w,h)
+	return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
+}
+
 function reset(){
   start_t = old_t
   pause_t = 0
@@ -76,7 +104,7 @@ function animate(t){
 
   var step_t = t - old_t
   old_t = t
-  
+
   if (paused || dragging || rendering || scrolling || deferring) {
     pause_t += step_t
     if (scrolling) {
diff --git a/js/shader.js b/js/shader.js
index 4a6e950..7773b89 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -1,3 +1,5 @@
+function shader (x,y,t,d) {}
+
 var shader_build = function(){
   var fn_str = document.getElementById('shader').value
   if (!fn_str.length) fn_str = ""
@@ -46,7 +48,7 @@ var firefox_stack_regexp = /:([0-9]+)$/;
 
 function shade_error_handling(frame, t){
   if (! t || isNaN(t)) throw Error ("No time specified")
-  if (! frame) throw Error ("No frame specified")
+  if (! frame || ! frame.ctx || ! frame.cloneData) throw Error ("No frame specified")
 
   var imgData = frame.ctx.getImageData(0,0,w,h)
   var data = imgData.data
@@ -77,7 +79,7 @@ function shade_error_handling(frame, t){
 
     } else if (lines.length > 1) { // attempt chrome match
       var matches = lines[1].match(chrome_stack_regexp)
-      if (matches.length > 1)
+      if (matches && matches.length > 1)
         error_highlight.on(parseInt(matches[1]) - 3)
     }
     
diff --git a/shader-combo.html b/shader-combo.html
index 6d402da..e61beee 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -3,7 +3,8 @@
 <head>
 <style type="text/css">
 #url { width: 250px; }
-#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; }
+#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; }
+#background { text-align: left; }
 #username { width: 55px; }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
@@ -89,7 +90,7 @@ form { display: inline-block; }
 </div>
 
 <div id="controls">
-	<input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
+	<input type="text" id="url">
 	<input type="text" id="username" placeholder="username">
 	<input type="text" id="shader-name" placeholder="shader name">
 	<br>
@@ -100,6 +101,8 @@ form { display: inline-block; }
 	<button id="save-shader"><b>save shader</b></button>
 	<button id="pause">pause</button>
 	<button id="reset">reset</button>
+	<input type="text" id="width" placeholder="width" value="0">
+	<input type="text" id="height" placeholder="height" value="0">
 	<span class="status"></span>
 	<!--<button id="step-forward">&gt;&gt;</button>-->
 	<br>
@@ -154,7 +157,7 @@ form { display: inline-block; }
 <script type="text/javascript">
 
 var cc = cq(0,0).appendTo("#workspace")
-var w, h
+var w = 400, h = 266
 var lastGif
 var mousex, mousey
 
@@ -194,7 +197,7 @@ function init(){
 	frame_editor.init()
 	help.init()
 	load()
-	
+
 	user.init()
 	help.init()
 	shader_gallery.init()
-- 
cgit v1.2.3-70-g09d2


From 41c9d39a851a159d6a2e34fafb975e7c66bddf63 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 02:41:35 -0500
Subject: move width/height out

---
 js/render.js      | 20 ++++++++------------
 shader-combo.html | 10 ++++++++++
 2 files changed, 18 insertions(+), 12 deletions(-)

(limited to 'js/render.js')

diff --git a/js/render.js b/js/render.js
index f6684d7..993ba0e 100644
--- a/js/render.js
+++ b/js/render.js
@@ -1,7 +1,8 @@
 var frame, img_frame;
 var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
-var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null;
-var fps = 30;
+var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null
+var fps = 30
+var imageURL = ""
 
 function choose (){
   imageURL = this.src
@@ -46,16 +47,7 @@ function displayWidthHeight(width, height){
 	$("#width").val(width)
 	$("#height").val(height)
 }
-$("#width").change(function(){
-	w = abs(parseInt(this.value,10)) || 1
-	cc.canvas.width = w
-	cc.canvas.height = h
-})
-$("#height").change(function(){
-	h = abs(parseInt(this.value,10)) || 1
-	cc.canvas.width = w
-	cc.canvas.height = h
-})
+
 function giveFrame(t){
   if (window.gif) {
     if (gif.currentFrame) {
@@ -80,6 +72,10 @@ function empty_frame(){
 	return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
 }
 
+function feedback_frame(){
+	return { ctx: cc.context, cloneData: cc.getImageData(0,0,w,h) }
+}
+
 function reset(){
   start_t = old_t
   pause_t = 0
diff --git a/shader-combo.html b/shader-combo.html
index e61beee..0a5fcab 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -193,6 +193,16 @@ function init(){
 		$("#header .form").hide()
 		$(".bold").removeClass("bold")
 	})
+	$("#width").change(function(){
+		w = abs(parseInt(this.value,10)) || 1
+		cc.canvas.width = w
+		cc.canvas.height = h
+	})
+	$("#height").change(function(){
+		h = abs(parseInt(this.value,10)) || 1
+		cc.canvas.width = w
+		cc.canvas.height = h
+	})
 
 	frame_editor.init()
 	help.init()
-- 
cgit v1.2.3-70-g09d2


From fb322430f61b32af4e22d5136704ce87ddfd6f3a Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 02:55:13 -0500
Subject: actual_w, actual_h to fix rgbpixel on resized workspace

---
 js/render.js | 12 ++++++------
 js/shader.js |  2 +-
 js/util.js   |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'js/render.js')

diff --git a/js/render.js b/js/render.js
index 993ba0e..e379ab8 100644
--- a/js/render.js
+++ b/js/render.js
@@ -21,8 +21,8 @@ function ready(){
   loading = false
   if (window.gif) {
     frame = gif.frames[0]
-    w = cc.canvas.width = frame.ctx.canvas.width
-    h = cc.canvas.height = frame.ctx.canvas.height
+    actual_w = w = cc.canvas.width = frame.ctx.canvas.width
+    actual_h = h = cc.canvas.height = frame.ctx.canvas.height
     for (var i=0, f; f=gif.frames[i]; i++){
       f.cloneData = f.ctx.getImageData(0,0,w,h)
     }
@@ -31,8 +31,8 @@ function ready(){
     fc = cq(img.width, img.height)
     fc.drawImage(img, 0, 0)
     frame = img_frame = { ctx: fc.context }
-    w = cc.canvas.width = frame.ctx.canvas.width
-    h = cc.canvas.height = frame.ctx.canvas.height
+    actual_w = w = cc.canvas.width = frame.ctx.canvas.width
+    actual_h = h = cc.canvas.height = frame.ctx.canvas.height
     frame.cloneData = frame.ctx.getImageData(0,0,w,h)
   }
   else {
@@ -66,8 +66,8 @@ function giveFrame(t){
 }
 
 function empty_frame(){
-	w = w || 400
-	h = h || 266
+	actual_w = w = w || 400
+	actual_h = h = h || 266
 	var cx = cq(w, h).fillStyle("rgba(255,255,255,255)").fillRect(0,0,w,h)
 	return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
 }
diff --git a/js/shader.js b/js/shader.js
index 7773b89..a8559ba 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -18,7 +18,7 @@ var shader_build = function(){
 }
 
 var r,g,b,a;
-
+var w, h, actual_w, actual_h;
 function shade_no_error_handling(frame, t){
   if (! t || isNaN(t)) throw Error ("No time specified")
   if (! frame) throw Error ("No frame specified")
diff --git a/js/util.js b/js/util.js
index 7bb1c78..5e85c3b 100644
--- a/js/util.js
+++ b/js/util.js
@@ -43,7 +43,7 @@ function choice(a){ return a[randint(a.length)] }
 function deg(n){ return n*180/PI }
 function rad(n){ return n*PI/180 }
 function xor(a,b){ a=!!a; b=!!b; return (a||b) && !(a&&b) }
-function pixel(x,y){ return 4*(mod(y,h)*w+mod(x,w)) }
+function pixel(x,y){ return 4*(mod(y,actual_h)*actual_w+mod(x,actual_w)) }
 function rgbpixel(d,x,y){
   var p = pixel(~~x,~~y)
   r = d[p]
-- 
cgit v1.2.3-70-g09d2


From d93bffc6438e6c89081b9b345c85a131a3de1138 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 03:13:42 -0500
Subject: display rendered gif in workspace

---
 js/frames.js | 5 +++--
 js/render.js | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'js/render.js')

diff --git a/js/frames.js b/js/frames.js
index 62306fa..1d08807 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -109,7 +109,7 @@ function render (){
     encoder.addFrame(frame.canvas, delay)
   })
   $("#pause,#render,#add-frame").disable()
-  $("#rendered").find("img").remove()
+  $("#workspace").find("img").remove()
   $("#rendered").show()
   // really bad results with neuquant?
   // status("quantizing")
@@ -144,7 +144,8 @@ encoder.on("rendered", function(bytes){
 encoder.on("rendered-url", function(url){
   var image = new Image ()
   lastGif = image.src = url
-  $("#rendered").append(image)
+	$("#workspace canvas").hide()
+  $("#workspace").append(image)
   $("#uploaded-url").hide().val("")
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
diff --git a/js/render.js b/js/render.js
index e379ab8..6ad7560 100644
--- a/js/render.js
+++ b/js/render.js
@@ -80,7 +80,8 @@ function reset(){
   start_t = old_t
   pause_t = 0
   pause(false)
-  $("#rendered img").remove()
+  $("#workspace img").remove()
+  $("#workspace canvas").show()
   draw(0)
 }
 
-- 
cgit v1.2.3-70-g09d2


From beb6a880100835aa44b8508a03b3b0b63562055a Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 04:22:07 -0500
Subject: nicer loading logic

---
 js/frames.js      | 11 ++++++-----
 js/image.js       |  1 +
 js/render.js      |  8 ++++++--
 shader-combo.html | 32 ++++++++++++++++++--------------
 4 files changed, 31 insertions(+), 21 deletions(-)

(limited to 'js/render.js')

diff --git a/js/frames.js b/js/frames.js
index 1d08807..887b497 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -54,7 +54,6 @@ function add_single_frame(){
   frame.canvas.style.display = "none"
   var thumb = cc.clone().resize(frame_thumb_size,frame_thumb_size).appendTo($el.find(".frame")[0])
   $("#frames").append($el)
-  $("#render").enable()
 }
 function add_frames(frame_count){
   rendering = true
@@ -71,9 +70,6 @@ function add_frames(frame_count){
 }
 function remove_frame(){
   $(this).closest("div").remove()
-  if ($("#frames div").length == 0) {
-    $("#render").disable()
-  }
 }
 function remove_all_frames(){
   $("#frames").empty()
@@ -102,6 +98,11 @@ function sort_frames(){
 function render (){
   if (rendering) return
   rendering = true
+  
+  if ($("#frames canvas.fullsize").length == 0) {
+  	add_frame()
+  }
+  
   encoder.reset()
   var delay = $("#framedelay").float() * 1000 || 100
   $("#frames canvas.fullsize").each(function(){
@@ -149,7 +150,7 @@ encoder.on("rendered-url", function(url){
   $("#uploaded-url").hide().val("")
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
-  $("#render").html("render")
+  $("#render").html("render gif")
   rendering = false
   pause(true)
 })
diff --git a/js/image.js b/js/image.js
index 4de7fd9..aabab89 100644
--- a/js/image.js
+++ b/js/image.js
@@ -2,6 +2,7 @@ var gif, img
 
 function loadImage(imageURL, callback) {
   var imageURL = proxify( imageURL );
+  window.imageURL = imageURL
 
   window.gif = window.img = null
 
diff --git a/js/render.js b/js/render.js
index 6ad7560..cfc2d81 100644
--- a/js/render.js
+++ b/js/render.js
@@ -12,13 +12,17 @@ function choose (){
 }
 
 function load(){
-  var imageURL = $("#url").val()
+  var newImageURL = $("#url").val()
   loading = true
-  loadImage(imageURL, ready)
+  if (newImageURL != imageURL) {
+		loadImage(newImageURL, ready)
+		status("loading")
+	}
 }
 
 function ready(){
   loading = false
+  status("")
   if (window.gif) {
     frame = gif.frames[0]
     actual_w = w = cc.canvas.width = frame.ctx.canvas.width
diff --git a/shader-combo.html b/shader-combo.html
index 3c28b54..f51037b 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style type="text/css">
-body { background: #f8f8f8; }
+body { background: #f8f8f8; font-size: 14px }
 #url { width: 250px; }
 #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; }
 #background { text-align: left; }
@@ -47,8 +47,10 @@ form { display: inline-block; }
 #rendered { display: none; }
 
 .status { font-size: 12px; }
-#header .status { float: right; margin-top: 5px; margin-right: 5px;}
 .toggle-off { float: right; }
+
+#render,#save,#upload,#save-shader { font-weight: bold; }
+#save[disabled],#upload[disabled] { font-weight: normal; }
 </style>
 </head>
 <body>
@@ -99,23 +101,20 @@ form { display: inline-block; }
 
 	<textarea id="shader"></textarea>
 	<br>
-	<button id="save-shader"><b>save shader</b></button>
-	<button id="pause">pause</button>
+	<button id="render">render gif</button>
+	<button id="save" disabled>save gif</button>
+	<button id="upload" disabled>upload gif</button>
 	<button id="reset">reset</button>
+	<br>
+	<button id="save-shader">save shader</button>
 	<input type="text" id="width" placeholder="width" value="0">
 	<input type="text" id="height" placeholder="height" value="0">
 	<span class="status"></span>
 	<!--<button id="step-forward">&gt;&gt;</button>-->
 	<br>
-	<span id="rendered">
-		<button id="save" disabled>save image</button>
-		<button id="upload" disabled>upload</button>
-		<br>
-		<input type="text" id="uploaded-url">
-	</span>
-	<br>
-	
-	frames <input type="text" id="framecount" value="1">
+	<br>	
+
+	frames <input type="text" id="framecount" value="10">
 	<button id="add-frame">+add frame</button>
 	<select id="reorder-frames">
 		<option value="">reorder</option>
@@ -125,15 +124,20 @@ form { display: inline-block; }
 		<option value="sort-frames">sort</button>
 	</select>
 	<button id="remove-all-frames">clear</button>
-	<button id="render" disabled>render</button>
 	<br>
 	
 	<span id="frames"></span>
 	<br>
 	<br>
 
+	<button id="pause">pause</button>
 	gif delay <input type="text" id="framedelay" value="0.06s">
 	background <input type="text" id="background" value="#fff">
+	&nbsp;
+	<input type="text" id="uploaded-url">
+	<span id="rendered">
+	</span>
+	<br>
 </div>
 
 <div id="workspace"></div>
-- 
cgit v1.2.3-70-g09d2


From c3470d02a57396e92a71d3cfb072e655ccb51780 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 04:25:35 -0500
Subject: examples placeholder

---
 js/image.js       | 3 ++-
 js/render.js      | 2 --
 shader-combo.html | 3 +++
 3 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'js/render.js')

diff --git a/js/image.js b/js/image.js
index aabab89..1f36473 100644
--- a/js/image.js
+++ b/js/image.js
@@ -1,4 +1,5 @@
 var gif, img
+var imageURL = null
 
 function loadImage(imageURL, callback) {
   var imageURL = proxify( imageURL );
@@ -37,7 +38,7 @@ function giveImage(t) {
 
 function proxify (url) {
   if (url.indexOf("http") == 0)
-    return "/cgi-bin/proxy?" + url // .replace(/^https?:\/\//, "");
+    return "/cgi-bin/proxy?" + url.replace(/^https?:\/\//, "");
   else
     return url
 }
diff --git a/js/render.js b/js/render.js
index cfc2d81..4de7329 100644
--- a/js/render.js
+++ b/js/render.js
@@ -2,10 +2,8 @@ var frame, img_frame;
 var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
 var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null
 var fps = 30
-var imageURL = ""
 
 function choose (){
-  imageURL = this.src
   loading = true
   $("#url").val(imageURL)
   loadImage(imageURL, ready)
diff --git a/shader-combo.html b/shader-combo.html
index f51037b..5b218a6 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -59,6 +59,9 @@ form { display: inline-block; }
 <div id="header">
 	<button id="help">help</button>
 	<button id="new-shader"><b>new shader</b></button>
+	<select id="examples">
+		<option>examples</option>
+	</select>
 <!--
 	<input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button>
 	<button id="fetch-history" disabled>history</button>
-- 
cgit v1.2.3-70-g09d2


From c030a4c619c4fc6182cc9b266241ce1970174a40 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 04:38:18 -0500
Subject: try to proxy https as http

---
 js/image.js  |  2 +-
 js/render.js |  4 ++--
 js/util.js   | 10 ++++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'js/render.js')

diff --git a/js/image.js b/js/image.js
index 1f36473..3138299 100644
--- a/js/image.js
+++ b/js/image.js
@@ -38,7 +38,7 @@ function giveImage(t) {
 
 function proxify (url) {
   if (url.indexOf("http") == 0)
-    return "/cgi-bin/proxy?" + url.replace(/^https?:\/\//, "");
+    return "/cgi-bin/proxy?" + url.replace(/^https/, "http");
   else
     return url
 }
diff --git a/js/render.js b/js/render.js
index 4de7329..7f0e672 100644
--- a/js/render.js
+++ b/js/render.js
@@ -5,8 +5,8 @@ var fps = 30
 
 function choose (){
   loading = true
-  $("#url").val(imageURL)
-  loadImage(imageURL, ready)
+  $("#url").val(this.src)
+  loadImage(this.src, ready)
 }
 
 function load(){
diff --git a/js/util.js b/js/util.js
index 5e85c3b..cecb210 100644
--- a/js/util.js
+++ b/js/util.js
@@ -43,6 +43,11 @@ function choice(a){ return a[randint(a.length)] }
 function deg(n){ return n*180/PI }
 function rad(n){ return n*PI/180 }
 function xor(a,b){ a=!!a; b=!!b; return (a||b) && !(a&&b) }
+function mod(n,m){ return n-(m * floor(n/m)) }
+function dist(x0,y0,x1,y1){ return sqrt(pow(x1-x0,2)+pow(y1-y0,2)) }
+function angle(x0,y0,x1,y1){ return atan2(y1-y0,x1-x0) }
+function avg(m,n,a){ return (m*(a-1)+n)/a }
+
 function pixel(x,y){ return 4*(mod(y,actual_h)*actual_w+mod(x,actual_w)) }
 function rgbpixel(d,x,y){
   var p = pixel(~~x,~~y)
@@ -51,10 +56,7 @@ function rgbpixel(d,x,y){
   b = d[p+2]
   a = d[p+3]
 }
-function mod(n,m){ return n-(m * floor(n/m)) }
-function dist(x0,y0,x1,y1){ return sqrt(pow(x1-x0,2)+pow(y1-y0,2)) }
-function angle(x0,y0,x1,y1){ return atan2(y1-y0,x1-x0) }
-function avg(m,n,a){ return (m*(a-1)+n)/a }
+function fit(d,x,y){ rgbpixel(d,x*actual_w/w,y*actual_h/h) }
 
 function step(a, b){
   return (b >= a) + 0 
-- 
cgit v1.2.3-70-g09d2


From ed18fa084bb3ac015e799a0e5b5821ae68297e3a Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 09:37:52 -0500
Subject: fps

---
 js/render.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/render.js')

diff --git a/js/render.js b/js/render.js
index 7f0e672..2790d5f 100644
--- a/js/render.js
+++ b/js/render.js
@@ -120,7 +120,7 @@ function animate(t){
   draw(t)
   // timing = +(new Date()) - timing
   fps = avg(fps, 1000/step_t, 4)
-  // status(~~(fps) + " fps")
+  status(~~(fps) + " fps")
 }
 
 function draw(t) {
-- 
cgit v1.2.3-70-g09d2


From 12b5c87fe564bb565eed4f8804142a60a6884c0b Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 13:09:39 -0500
Subject: merge 'clear' behavior into reset and pause

---
 js/help.js        |   1 +
 js/render.js      | 161 ++++++++++++++++++++++++++++--------------------------
 shader-combo.html |  20 +++----
 3 files changed, 95 insertions(+), 87 deletions(-)

(limited to 'js/render.js')

diff --git a/js/help.js b/js/help.js
index 9ac2660..6f39aa7 100644
--- a/js/help.js
+++ b/js/help.js
@@ -20,3 +20,4 @@ function drag_start(){ dragging = true; $(this).addClass("dragging") }
 function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
 
 function status(s){ $(".status").html(s); console.log(s) }
+function quiet_status(s){ $(".status").html(s) }
diff --git a/js/render.js b/js/render.js
index 2790d5f..205da88 100644
--- a/js/render.js
+++ b/js/render.js
@@ -4,44 +4,44 @@ var paused = false, dragging = false, rendering = false, scrolling = false, defe
 var fps = 30
 
 function choose (){
-  loading = true
-  $("#url").val(this.src)
-  loadImage(this.src, ready)
+	loading = true
+	$("#url").val(this.src)
+	loadImage(this.src, ready)
 }
 
 function load(){
-  var newImageURL = $("#url").val()
-  loading = true
-  if (newImageURL != imageURL) {
+	var newImageURL = $("#url").val()
+	loading = true
+	if (newImageURL != imageURL) {
 		loadImage(newImageURL, ready)
 		status("loading")
 	}
 }
 
 function ready(){
-  loading = false
-  status("")
-  if (window.gif) {
-    frame = gif.frames[0]
-    actual_w = w = cc.canvas.width = frame.ctx.canvas.width
-    actual_h = h = cc.canvas.height = frame.ctx.canvas.height
-    for (var i=0, f; f=gif.frames[i]; i++){
-      f.cloneData = f.ctx.getImageData(0,0,w,h)
-    }
-  }
-  else if (window.img) {
-    fc = cq(img.width, img.height)
-    fc.drawImage(img, 0, 0)
-    frame = img_frame = { ctx: fc.context }
-    actual_w = w = cc.canvas.width = frame.ctx.canvas.width
-    actual_h = h = cc.canvas.height = frame.ctx.canvas.height
-    frame.cloneData = frame.ctx.getImageData(0,0,w,h)
-  }
-  else {
-    cc.canvas.width = w
-    cc.canvas.height = h
-    shader_build()
-  }
+	loading = false
+	status("")
+	if (window.gif) {
+		frame = gif.frames[0]
+		actual_w = w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = h = cc.canvas.height = frame.ctx.canvas.height
+		for (var i=0, f; f=gif.frames[i]; i++){
+			f.cloneData = f.ctx.getImageData(0,0,w,h)
+		}
+	}
+	else if (window.img) {
+		fc = cq(img.width, img.height)
+		fc.drawImage(img, 0, 0)
+		frame = img_frame = { ctx: fc.context }
+		actual_w = w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = h = cc.canvas.height = frame.ctx.canvas.height
+		frame.cloneData = frame.ctx.getImageData(0,0,w,h)
+	}
+	else {
+		cc.canvas.width = w
+		cc.canvas.height = h
+		shader_build()
+	}
 	displayWidthHeight(w, h)
 }
 
@@ -51,20 +51,20 @@ function displayWidthHeight(width, height){
 }
 
 function giveFrame(t){
-  if (window.gif) {
-    if (gif.currentFrame) {
-      return gif.frames[gif.currentFrame(t)]
-    }
-    else if (gif.frames) {
-      return gif.frames[0]
-    }
-  }
-  if (window.img) {
-    return img_frame
-  }
-  else {
-    return empty_frame()
-  }
+	if (window.gif) {
+		if (gif.currentFrame) {
+			return gif.frames[gif.currentFrame(t)]
+		}
+		else if (gif.frames) {
+			return gif.frames[0]
+		}
+	}
+	if (window.img) {
+		return img_frame
+	}
+	else {
+		return empty_frame()
+	}
 }
 
 function empty_frame(){
@@ -79,53 +79,60 @@ function feedback_frame(){
 }
 
 function reset(){
-  start_t = old_t
-  pause_t = 0
-  pause(false)
-  $("#workspace img").remove()
-  $("#workspace canvas").show()
-  draw(0)
+	start_t = old_t
+	pause_t = 0
+	pause(false)
+	$("#workspace img").remove()
+	$("#workspace canvas").show()
+	remove_all_frames()
+	draw(0)
 }
 
 function pause(state){
-  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
+	paused = typeof state == "boolean" ? state : ! paused
+	$("#pause").toggleClass("paused", paused).html(paused ? "paused" : "pause")
+	if (!paused) {
+		$("#workspace canvas").show()
+		$("#workspace img").hide()
+		$("#save,#upload").disable()
+	}
 }
 
 function step_forward(){
-  var step = $("#framedelay").float() * 1000 || 100
-  old_t += step
-  draw(old_t)
-  pause(true)
+	var step = $("#framedelay").float() * 1000 || 100
+	old_t += step
+	draw(old_t)
+	pause(true)
 }
 
 function animate(t){
-  raf_id = requestAnimationFrame(animate);
+	raf_id = requestAnimationFrame(animate);
 
-  var step_t = t - old_t
-  old_t = t
+	var step_t = t - old_t
+	old_t = t
 
-  if (paused || dragging || rendering || scrolling || deferring) {
-    pause_t += step_t
-    if (scrolling) {
-      scrolling = false
-      deferring = true
-    }
-    else {
-      deferring = false
-    }
-    return
-  }
+	if (paused || dragging || rendering || scrolling || deferring) {
+		pause_t += step_t
+		if (scrolling) {
+			scrolling = false
+			deferring = true
+		}
+		else {
+			deferring = false
+		}
+		return
+	}
 
-  // var timing = +(new Date())
-  draw(t)
-  // timing = +(new Date()) - timing
-  fps = avg(fps, 1000/step_t, 4)
-  status(~~(fps) + " fps")
+	// var timing = +(new Date())
+	draw(t)
+	// timing = +(new Date()) - timing
+	fps = avg(fps, 1000/step_t, 4)
+	quiet_status(~~(fps) + " fps")
 }
 
 function draw(t) {
-  t -= start_t
-  t -= pause_t
-  frame = giveFrame(t)
-  shade(frame, t)
+	t -= start_t
+	t -= pause_t
+	frame = giveFrame(t)
+	shade(frame, t)
 }
diff --git a/shader-combo.html b/shader-combo.html
index ba62657..97ffd33 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -10,7 +10,7 @@ body { background: #f8f8f8; font-size: 14px }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
-#uploaded-url { display: none; width: 300px; }
+#uploaded-url { display: none; width: 300px; clear: both; }
 a { color: #00f; }
 
 div { float: left; padding: 10px;}
@@ -44,8 +44,6 @@ form { display: inline-block; }
 .bold { font-weight: bold; }
 .close,.remove { cursor: pointer; }
 
-#rendered { display: none; }
-
 .status { font-size: 12px; }
 .toggle-off { float: right; }
 
@@ -104,6 +102,7 @@ form { display: inline-block; }
 
 	<textarea id="shader"></textarea>
 	<br>
+	<input type="text" id="uploaded-url">
 	<button id="render">render gif</button>
 	<button id="save" disabled>save gif</button>
 	<button id="upload" disabled>upload gif</button>
@@ -118,7 +117,7 @@ form { display: inline-block; }
 	<br>	
 
 	frames <input type="text" id="framecount" value="10">
-	<button id="add-frame">+add frame</button>
+	<button id="add-frame">+add frames</button>
 	<select id="reorder-frames">
 		<option value="">reorder</option>
 		<option value="weave-frames">weave</button>
@@ -126,7 +125,7 @@ form { display: inline-block; }
 		<option value="reverse-frames">reverse</button>
 		<option value="sort-frames">sort</button>
 	</select>
-	<button id="remove-all-frames">clear</button>
+	<!--<button id="remove-all-frames">clear</button>-->
 	<br>
 	
 	<span id="frames"></span>
@@ -136,11 +135,6 @@ form { display: inline-block; }
 	<button id="pause">pause</button>
 	gif delay <input type="text" id="framedelay" value="0.06s">
 	background <input type="text" id="background" value="#fff">
-	&nbsp;
-	<input type="text" id="uploaded-url">
-	<span id="rendered">
-	</span>
-	<br>
 </div>
 
 <div id="workspace"></div>
@@ -231,6 +225,12 @@ function init(){
 		cc.canvas.width = w
 		cc.canvas.height = h
 	})
+	$("#reorder-frames").change(function(){
+		var order = $(this).val()
+		if (order) {
+			
+		}
+	})
 
 	load()
 	help.init()
-- 
cgit v1.2.3-70-g09d2


From e3297c52583f38ed71f7734f1ff04a267834e40c Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 21:45:12 -0500
Subject: fix rendering bug

---
 js/api/gallery.js |  1 +
 js/frames.js      |  3 +--
 js/render.js      |  2 ++
 shader-combo.html | 11 +++++------
 4 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'js/render.js')

diff --git a/js/api/gallery.js b/js/api/gallery.js
index 830ff93..e8af7f1 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -76,6 +76,7 @@ function load_shaders(err, shaders){
 function display_shader(shader_object){
 	var $shader = $("<div>").addClass("shader")
 	$shader.data("shader", shader_object)
+	$shader.data("id", shader_object.id)
 	var html = shader_gallery_template
 	for (var field in shader_object) {
 		html = html.replace("{" + field + "}", shader_object[field])
diff --git a/js/frames.js b/js/frames.js
index 887b497..571e862 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -97,12 +97,11 @@ function sort_frames(){
 
 function render (){
   if (rendering) return
-  rendering = true
-  
   if ($("#frames canvas.fullsize").length == 0) {
   	add_frame()
   }
   
+  rendering = true
   encoder.reset()
   var delay = $("#framedelay").float() * 1000 || 100
   $("#frames canvas.fullsize").each(function(){
diff --git a/js/render.js b/js/render.js
index 205da88..bd6deb1 100644
--- a/js/render.js
+++ b/js/render.js
@@ -7,6 +7,7 @@ function choose (){
 	loading = true
 	$("#url").val(this.src)
 	loadImage(this.src, ready)
+	reset()
 }
 
 function load(){
@@ -84,6 +85,7 @@ function reset(){
 	pause(false)
 	$("#workspace img").remove()
 	$("#workspace canvas").show()
+  $("#uploaded-url").hide().val("")
 	remove_all_frames()
 	draw(0)
 }
diff --git a/shader-combo.html b/shader-combo.html
index 97ffd33..65b81e9 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -3,6 +3,10 @@
 <head>
 <style type="text/css">
 body { background: #f8f8f8; font-size: 14px }
+div { float: left; padding: 10px;}
+form { display: inline-block; }
+a { color: #00f; }
+
 #url { width: 250px; }
 #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; }
 #background { text-align: left; }
@@ -11,10 +15,6 @@ body { background: #f8f8f8; font-size: 14px }
 #shader-id { width: 40px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
 #uploaded-url { display: none; width: 300px; clear: both; }
-a { color: #00f; }
-
-div { float: left; padding: 10px;}
-form { display: inline-block; }
 
 #header { clear: right; width:100%; padding: 0; font-size: 12px; }
 #shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; }
@@ -45,7 +45,6 @@ form { display: inline-block; }
 .close,.remove { cursor: pointer; }
 
 .status { font-size: 12px; }
-.toggle-off { float: right; }
 
 #render,#save,#upload,#save-shader { font-weight: bold; }
 #save[disabled],#upload[disabled] { font-weight: normal; }
@@ -56,6 +55,7 @@ form { display: inline-block; }
 
 <div id="header">
 	<button id="help">help</button>
+	<button class="toggle-off">x</button>
 	<button id="new-shader"><b>new shader</b></button>
 	<select id="examples">
 		<option>examples</option>
@@ -70,7 +70,6 @@ form { display: inline-block; }
 	|
 	<button id="toggle-shaders">browse shaders</button>
 	<button id="toggle-images">browse images</button>
-	<button class="toggle-off">hide</button>
 	<span class="status"></span>
 
 	<span id="shader-api-form" class="form">
-- 
cgit v1.2.3-70-g09d2


From a373ad5bf748abba348bd5e1a3865b61b470c5d1 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 22:56:38 -0500
Subject: using a plus selector weirdly

---
 js/frames.js      |  2 ++
 js/render.js      |  3 ++-
 shader-combo.html | 11 +++++------
 3 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'js/render.js')

diff --git a/js/frames.js b/js/frames.js
index 571e862..fc6ee24 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -147,6 +147,7 @@ encoder.on("rendered-url", function(url){
 	$("#workspace canvas").hide()
   $("#workspace").append(image)
   $("#uploaded-url").hide().val("")
+	$("#uploaded-url + br").hide()
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
   $("#render").html("render gif")
@@ -197,6 +198,7 @@ function upload(){
       console.log(data);
       status("uploaded");
       $("#uploaded-url").show().focus().val(data.url)
+      $("#uploaded-url + br").show()
     },
     error: function(data){
       console.log(data)
diff --git a/js/render.js b/js/render.js
index bd6deb1..ac26eec 100644
--- a/js/render.js
+++ b/js/render.js
@@ -85,7 +85,8 @@ function reset(){
 	pause(false)
 	$("#workspace img").remove()
 	$("#workspace canvas").show()
-  $("#uploaded-url").hide().val("")
+  $("#uploaded-url").hide()
+	$("#uploaded-url + br").show()
 	remove_all_frames()
 	draw(0)
 }
diff --git a/shader-combo.html b/shader-combo.html
index 6b721a1..784f246 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -14,7 +14,8 @@ a { color: #00f; }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
-#uploaded-url { display: none; width: 300px; clear: both; }
+#uploaded-url { display: none; width: 400px; }
+#uploaded-url + br { display: none; }
 
 #header { clear: right; width:100%; padding: 0; font-size: 12px; }
 #shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; }
@@ -103,22 +104,24 @@ a { color: #00f; }
 	<textarea id="shader"></textarea>
 	<br>
 	<input type="text" id="uploaded-url">
+	<br>
 	<button id="render">render gif</button>
 	<button id="save" disabled>save gif</button>
 	<button id="upload" disabled>upload gif</button>
 	<button id="reset">reset</button>
+	<button id="pause">pause</button>
 	<br>
 	<button id="save-shader">save shader</button>
 	<input type="text" id="width" placeholder="width" value="0">
 	<input type="text" id="height" placeholder="height" value="0">
 	<span class="status"></span>
 	<!--<button id="step-forward">&gt;&gt;</button>-->
-	<br>
 	<br>	
 	<span id="frame-hidden-controls">
 		<button id="show-frame-controls">show frame editor</button>
 	</span>
 	<span id="frame-controls">
+		<br>
 		<button id="hide-frame-controls">x</button>
 		frames <input type="text" id="framecount" value="10">
 		rate <input type="text" id="framedelay" value="0.06s">
@@ -135,10 +138,6 @@ a { color: #00f; }
 		<br>
 		<span id="frames"></span>
 	</span>
-	<br>
-	<br>
-
-	<button id="pause">pause</button>
 </div>
 
 <div id="workspace"></div>
-- 
cgit v1.2.3-70-g09d2


From 7c6c73cd52330a165e5297ba2ae819101dac641c Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Fri, 31 Jan 2014 23:40:37 -0500
Subject: get width/height from db

---
 js/api/gallery.js |  7 +++++++
 js/api/set.js     |  4 +++-
 js/image.js       |  4 ++--
 js/render.js      | 26 ++++++++++++++++++--------
 4 files changed, 30 insertions(+), 11 deletions(-)

(limited to 'js/render.js')

diff --git a/js/api/gallery.js b/js/api/gallery.js
index e8af7f1..ae50dc9 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -53,7 +53,14 @@ function run_shader(shader_object){
 	console.log(shader_object)
 	shader_id_root = shader_object.shader_id
 	if ($("#persist-image:checked").length) {
+		var new_w = parseInt(shader_object.width,10)
+		var new_h = parseInt(shader_object.width,10)
 		$("#url").val( shader_object.image_url )
+		if (new_w && new_h) {
+			preserve_dimensions = true
+			w = new_w
+			h = new_h
+		}
 		load()
 	}
 	$("#shader").val(shader_object.script)
diff --git a/js/api/set.js b/js/api/set.js
index 088edbc..3446134 100644
--- a/js/api/set.js
+++ b/js/api/set.js
@@ -6,7 +6,9 @@ function save_shader(){
 		image_url: $("#url").val(),
 		username: user.username,
 		name: $("#shader-name").val() || "",
-		shader_id: shader_id_root
+		shader_id: shader_id_root,
+		width: $("#width").int() || "",
+		height: $("#height").int() || ""
 	}
 	var thumb = make_thumbnail()
 
diff --git a/js/image.js b/js/image.js
index 3138299..9ac1290 100644
--- a/js/image.js
+++ b/js/image.js
@@ -17,14 +17,14 @@ function loadImage(imageURL, callback) {
     // gif.on("error", tryToLoadNextImage);
     // gif.on("rendered", trackLoadTime);
     gif.on("rendered", callback);
-    return gif.render();
+		gif.render();
   }
   else {
     window.img = new Image();
     // img.addEventListener("error", tryToLoadNextImage);
     img.addEventListener("load", callback);
     img.crossOrigin = "anonymous";
-    return img.src = imageURL;
+    img.src = imageURL;
   }
 }
 
diff --git a/js/render.js b/js/render.js
index ac26eec..68554cb 100644
--- a/js/render.js
+++ b/js/render.js
@@ -2,6 +2,7 @@ var frame, img_frame;
 var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
 var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null
 var fps = 30
+var preserve_dimensions = true;
 
 function choose (){
 	loading = true
@@ -24,26 +25,35 @@ function ready(){
 	status("")
 	if (window.gif) {
 		frame = gif.frames[0]
-		actual_w = w = cc.canvas.width = frame.ctx.canvas.width
-		actual_h = h = cc.canvas.height = frame.ctx.canvas.height
+		cc.canvas.width = frame.ctx.canvas.width
+		cc.canvas.height = frame.ctx.canvas.height
+		if (preserve_dimensions) {
+			actual_w = w = cc.canvas.width
+			actual_h = h = cc.canvas.height
+		}
 		for (var i=0, f; f=gif.frames[i]; i++){
-			f.cloneData = f.ctx.getImageData(0,0,w,h)
+			f.cloneData = f.ctx.getImageData(0,0,cc.canvas.width,cc.canvas.height)
 		}
 	}
 	else if (window.img) {
 		fc = cq(img.width, img.height)
 		fc.drawImage(img, 0, 0)
 		frame = img_frame = { ctx: fc.context }
-		actual_w = w = cc.canvas.width = frame.ctx.canvas.width
-		actual_h = h = cc.canvas.height = frame.ctx.canvas.height
-		frame.cloneData = frame.ctx.getImageData(0,0,w,h)
+		cc.canvas.width = frame.ctx.canvas.width
+		cc.canvas.height = frame.ctx.canvas.height
+		if (preserve_dimensions) {
+			actual_w = w = cc.canvas.width
+			actual_h = h = cc.canvas.height
+		}
+		frame.cloneData = frame.ctx.getImageData(0,0,cc.canvas.width,cc.canvas.height)
 	}
 	else {
-		cc.canvas.width = w
-		cc.canvas.height = h
+		cc.canvas.width = actual_w = w
+		cc.canvas.height = actual_h = h
 		shader_build()
 	}
 	displayWidthHeight(w, h)
+	preserve_dimensions = false;
 }
 
 function displayWidthHeight(width, height){
-- 
cgit v1.2.3-70-g09d2


From 023684efdf8983362fddef2a3aa36838b90dbf00 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sat, 1 Feb 2014 12:32:20 -0500
Subject: fix w/h issue

---
 js/api/gallery.js | 4 ++--
 js/render.js      | 5 +++--
 shader-combo.html | 6 +++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'js/render.js')

diff --git a/js/api/gallery.js b/js/api/gallery.js
index ae50dc9..8cb738b 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -58,8 +58,8 @@ function run_shader(shader_object){
 		$("#url").val( shader_object.image_url )
 		if (new_w && new_h) {
 			preserve_dimensions = true
-			w = new_w
-			h = new_h
+			actual_w = w = new_w
+			actual_h = h = new_h
 		}
 		load()
 	}
diff --git a/js/render.js b/js/render.js
index 68554cb..955f525 100644
--- a/js/render.js
+++ b/js/render.js
@@ -6,6 +6,7 @@ var preserve_dimensions = true;
 
 function choose (){
 	loading = true
+	preserve_dimensions = false
 	$("#url").val(this.src)
 	loadImage(this.src, ready)
 	reset()
@@ -27,7 +28,7 @@ function ready(){
 		frame = gif.frames[0]
 		cc.canvas.width = frame.ctx.canvas.width
 		cc.canvas.height = frame.ctx.canvas.height
-		if (preserve_dimensions) {
+		if (! preserve_dimensions) {
 			actual_w = w = cc.canvas.width
 			actual_h = h = cc.canvas.height
 		}
@@ -41,7 +42,7 @@ function ready(){
 		frame = img_frame = { ctx: fc.context }
 		cc.canvas.width = frame.ctx.canvas.width
 		cc.canvas.height = frame.ctx.canvas.height
-		if (preserve_dimensions) {
+		if (! preserve_dimensions) {
 			actual_w = w = cc.canvas.width
 			actual_h = h = cc.canvas.height
 		}
diff --git a/shader-combo.html b/shader-combo.html
index da7f579..2ef8ed1 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -1,8 +1,9 @@
 <!doctype html>
 <html>
 <head>
+<title>Shaderblaster</title>
 <style type="text/css">
-body { background: #f8f8f8; font-size: 14px }
+body { background: #f8f8f8; font-size: 14px; }
 div { float: left; padding: 10px;}
 form { display: inline-block; }
 a { color: #00f; }
@@ -50,10 +51,13 @@ a { color: #00f; }
 
 #render,#save,#upload,#save-shader { font-weight: bold; }
 #save[disabled],#upload[disabled] { font-weight: normal; }
+
+#logo { position: fixed; bottom: 10px; right: 10px; font-size: 38px; font-weight: bold; font-style: italic; margin-top: 0px; margin: 0 5px; color: #000; }
 </style>
 </head>
 <body>
 
+<h1 id="logo">shaderblaster</h1>
 
 <div id="header">
 	<button id="help">help</button>
-- 
cgit v1.2.3-70-g09d2


From 27e0dfdf406b65c1ed81cf4f52c7dd1078468336 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sat, 1 Feb 2014 12:48:42 -0500
Subject: set actual_w/actual_h

---
 js/render.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'js/render.js')

diff --git a/js/render.js b/js/render.js
index 955f525..7eea965 100644
--- a/js/render.js
+++ b/js/render.js
@@ -26,27 +26,27 @@ function ready(){
 	status("")
 	if (window.gif) {
 		frame = gif.frames[0]
-		cc.canvas.width = frame.ctx.canvas.width
-		cc.canvas.height = frame.ctx.canvas.height
+		actual_w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = cc.canvas.height = frame.ctx.canvas.height
 		if (! preserve_dimensions) {
-			actual_w = w = cc.canvas.width
-			actual_h = h = cc.canvas.height
+			w = actual_w
+			h = actual_h
 		}
 		for (var i=0, f; f=gif.frames[i]; i++){
-			f.cloneData = f.ctx.getImageData(0,0,cc.canvas.width,cc.canvas.height)
+			f.cloneData = f.ctx.getImageData(0,0,actual_w,actual_h)
 		}
 	}
 	else if (window.img) {
 		fc = cq(img.width, img.height)
 		fc.drawImage(img, 0, 0)
 		frame = img_frame = { ctx: fc.context }
-		cc.canvas.width = frame.ctx.canvas.width
-		cc.canvas.height = frame.ctx.canvas.height
+		actual_w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = cc.canvas.height = frame.ctx.canvas.height
 		if (! preserve_dimensions) {
-			actual_w = w = cc.canvas.width
-			actual_h = h = cc.canvas.height
+			w = actual_w
+			h = actual_h
 		}
-		frame.cloneData = frame.ctx.getImageData(0,0,cc.canvas.width,cc.canvas.height)
+		frame.cloneData = frame.ctx.getImageData(0,0,actual_w,actual_h)
 	}
 	else {
 		cc.canvas.width = actual_w = w
-- 
cgit v1.2.3-70-g09d2


From 2b1d57245acbe0c9202c0e1d736242926211150d Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Fri, 7 Feb 2014 09:29:58 -0500
Subject: fix preserve_dimensions bug

---
 js/api/gallery.js      | 16 ++++++++++++----
 js/api/localstorage.js |  2 +-
 js/render.js           |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

(limited to 'js/render.js')

diff --git a/js/api/gallery.js b/js/api/gallery.js
index 0e6614b..48d6a92 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -22,13 +22,21 @@ shader_gallery.bind = function(){
 
 	ShaderAPI.list_users(function(err, users){
 		var $el = $("#pick-user").empty()
-		for (var i in users) {
+
+		var $option = $("<option>")
+		var username = "users"
+		$option.val(username).html(username)
+		$el.append( $option )
+
+		users.sort(function(a,b){
+			return a.username < b.username ? -1 : a.username > b.username ? 1 : 0
+		}).forEach(function(user){
 			var $option = $("<option>")
-			var username = users[i].username
+			var username = user.username
 			$option.val(username).html(username)
 			$el.append( $option )
-		}
-	})
+		})
+	});
 	
 	$(document).on("change", "#pick-user", function(){
 		var name = $(this).val()
diff --git a/js/api/localstorage.js b/js/api/localstorage.js
index 309d49d..835d139 100644
--- a/js/api/localstorage.js
+++ b/js/api/localstorage.js
@@ -6,7 +6,7 @@ local_shaders.init = function(){
 local_shaders.bind = function(){
   local_shaders.buttons = {}
   if ('EXAMPLE_SHADERS' in window) {
-    local_shaders.bindButtons( window.SHADERS )
+    local_shaders.bindButtons( window.EXAMPLE_SHADERS )
   }
   local_shaders.bindButtons( local_shaders.getShaders() )
   document.getElementById("add-shader").addEventListener("click", local_shaders.save, false)
diff --git a/js/render.js b/js/render.js
index 7eea965..e77711e 100644
--- a/js/render.js
+++ b/js/render.js
@@ -2,7 +2,7 @@ var frame, img_frame;
 var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
 var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null
 var fps = 30
-var preserve_dimensions = true;
+var preserve_dimensions = false;
 
 function choose (){
 	loading = true
-- 
cgit v1.2.3-70-g09d2


From b2375e11e2c9eee9d09bf30fd5ec8e900023c46f Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Wed, 30 Jul 2014 09:34:57 -0400
Subject: shader-cam

---
 js/camera.js    |  61 ++++++++++++++++++
 js/image.js     |   2 +-
 js/render.js    |   8 +++
 shader-cam.html | 188 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 258 insertions(+), 1 deletion(-)
 create mode 100644 js/camera.js
 create mode 100644 shader-cam.html

(limited to 'js/render.js')

diff --git a/js/camera.js b/js/camera.js
new file mode 100644
index 0000000..3a0c8b4
--- /dev/null
+++ b/js/camera.js
@@ -0,0 +1,61 @@
+var camera = (function(){
+	var loaded = false, video
+
+	navigator.getMedia = ( navigator.getUserMedia ||
+												 navigator.webkitGetUserMedia ||
+												 navigator.mozGetUserMedia ||
+												 navigator.msGetUserMedia);
+
+  if (! navigator.getMedia) {
+    $("#camera").hide()
+    return
+  }
+
+	$("#camera").click(load)
+	function load(){
+		if (! loaded) {
+			build()
+		}
+		else {
+			ready()
+		}
+		window.gif = window.img = null
+	}
+
+	function ready(){
+		cc.canvas.width = actual_w = w = min(video.videoWidth, 400)
+		cc.canvas.height = actual_h = h = video.videoHeight / (video.videoWidth/w)
+		video.setAttribute('width', video.videoWidth)
+		video.setAttribute('height', video.videoHeight)
+		window.gif = window.img = null
+		window.cam = video
+	}
+	
+	function build(){
+		video = document.createElement("video")
+		navigator.getMedia({
+				video: true,
+				audio: false
+			},
+			function(stream) {
+				if (navigator.mozGetUserMedia) {
+					video.mozSrcObject = stream;
+				} else {
+					var vendorURL = window.URL || window.webkitURL;
+					video.src = vendorURL.createObjectURL(stream);
+				}
+				video.play();
+			},
+			function(err) {
+				console.log("An error occured! " + err);
+			}
+		)
+
+		video.addEventListener('canplay', function(ev){
+			if (! loaded) {
+				loaded = true
+				ready()
+			}
+		}, false);
+	}
+})()
diff --git a/js/image.js b/js/image.js
index 27b5c2c..d02673e 100644
--- a/js/image.js
+++ b/js/image.js
@@ -5,7 +5,7 @@ function loadImage(imageURL, callback) {
   var imageURL = proxify( imageURL );
   window.imageURL = imageURL
 
-  window.gif = window.img = null
+  window.gif = window.img = window.cam = null
 
 	if (! imageURL) {
 		window.gif = null
diff --git a/js/render.js b/js/render.js
index e77711e..a589efc 100644
--- a/js/render.js
+++ b/js/render.js
@@ -74,6 +74,9 @@ function giveFrame(t){
 	if (window.img) {
 		return img_frame
 	}
+	else if (window.cam) {
+		return camera_frame()
+	}
 	else {
 		return empty_frame()
 	}
@@ -90,6 +93,11 @@ function feedback_frame(){
 	return { ctx: cc.context, cloneData: cc.getImageData(0,0,w,h) }
 }
 
+function camera_frame(){
+	var cx = cq(w, h).drawImage(cam, 0, 0, w, h)
+	return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
+}
+
 function reset(){
 	start_t = old_t
 	pause_t = 0
diff --git a/shader-cam.html b/shader-cam.html
new file mode 100644
index 0000000..1bf34e0
--- /dev/null
+++ b/shader-cam.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<html>
+<head>
+<title>Shader</title>
+<style type="text/css">
+html,body { margin: 0; padding: 0; }
+#url { width: 450px; }
+#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; }
+#shader { width: 100%; height: 247px; font-family: fixed; }
+#controls { width: 450px; }
+#frames { width: 435px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
+#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
+.dragging { cursor: -webkit-grabbing !important; }
+.ui-sortable-helper { cursor: -webkit-grabbing !important; }
+#frames canvas { display: block }
+#frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+.paused { background: black; color: white; border-width: 1px; padding: 1px 3px 2px 4px; outline: 0 !important; }
+.active { background: black; color: white; border-width: 1px; padding: 1px 4px 2px 4px; outline: 0 !important; }
+div { display: inline-block; padding: 10px;}
+#gallery,#controls,#workspace,#rendered{ float: left; }
+#rendered img { display: block; }
+#render,#save { font-weight: bold; }
+#render { float: right; }
+#commands { 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; }
+#commands iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#commands.dragging iframe { pointer-events: none; }
+#commands .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; }
+#uploaded-url { display: none; width: 300px; }
+form { display: inline-block; }
+#gallery { clear: right; width:100%; padding: 0; }
+#gallery-images { display: block; max-height: 210px; overflow-y: auto; }
+#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; }
+#username { width: 40px; }
+a { color: #00f; }
+</style>
+</head>
+<body>
+<div id="gallery">
+	<div id="gallery-form">
+		<form id="gallery-search">
+			<input type="text" id="dumpfm-search-query" value="duck bill">
+			<button id="gallery-search">DUMP SEARCH</button>
+		</form>
+		<button id="gallery-random">IM RANDOM</button>
+		<button id="camera">CAMERA</button>
+		<span class="status"></span>
+	</div>
+	<div id="gallery-images"></div>
+</div>
+
+<div id="controls">
+
+	<input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
+	<br>
+	<br>
+
+	<textarea id="shader"></textarea>
+	<br>
+	<br>
+
+	frames <input type="text" id="framecount" value="1">
+	interval <input type="text" id="frameinterval" value="0.1s">
+	<button id="add-frame">+add frame</button>
+	<button id="remove-all-frames">clear</button>
+	<button id="render" disabled>render</button>
+	<br>
+	reorder:
+	<button id="weave-frames">weave</button>
+	<button id="shuffle-frames">shuffle</button>
+	<button id="reverse-frames">reverse</button>
+	<button id="sort-frames">sort</button>
+	
+	<div id="frames"></div>
+	<br>
+	<br>
+
+	gif delay <input type="text" id="framedelay" value="0.06s">
+	background <input type="text" id="background" value="#fff">
+	your name here &rarr; <input type="text" id="username" value="">
+	<br>
+	<br>
+	<button id="show-commands">help</button>
+	&nbsp;
+	<button id="add-shader">+</button>
+	<button id="remove-shader">&times;</button>
+	&nbsp;
+	<span id="shaders"></span>
+	<br>
+	<br>
+	<a href="http://asdf.us/im/gallery/?tag=shader" target="_blank">Photoblaster Gallery</a>
+</div>
+
+<div id="workspace"></div>
+
+<div id="rendered">
+	<button id="reset">reset</button>
+	<button id="pause">pause</button>
+	<button id="step-forward">&gt;&gt;</button>
+	<span class="status"></span>
+	<button id="save" disabled>save</button>
+	<button id="upload" disabled>upload</button>
+	<br>
+	<input type="text" id="uploaded-url">
+</div>
+
+<div id="commands"><iframe src="commands.html"></iframe><button class="close">&times;</button></div>
+</body>
+<script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/client.js"></script>
+<script type="text/javascript" src="js/vendor/gif.js"></script>
+<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/acorn.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/api/localstorage.js"></script>
+<script type="text/javascript" src="js/error.highlight.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/camera.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
+<script type="text/javascript" src="js/color.js"></script>
+<script type="text/javascript" src="js/frames.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/user.js"></script>
+<script type="text/javascript" src="js/render.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="js/help.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
+
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</script>
+
+<script type="text/javascript">
+
+var cc = cq(0,0).appendTo("#workspace")
+var w, h
+var lastGif
+
+$(init)
+
+var mousex, mousey
+
+function init(){
+	$("#url").change(load)
+	$("#reset").click(reset)
+	$("#pause").click(pause)
+	$("#step-forward").click(step_forward)
+	$(document).on("mousemove", function(e) {
+		mousex = e.pageX
+		mousey = e.pageY
+	})
+
+	$("#background").change(function(){
+		document.body.style.backgroundColor = $("#background").string()
+	})
+	
+	frame_editor.init()
+	help.init()
+	load()
+
+	gallery.init(choose)
+
+	user.init()
+	if (user.username.length) {
+		console.log("signed in as", user.username)
+	}
+
+	local_shaders.init()
+	local_shaders.loadLastAccessed()
+
+	document.getElementById('shader').addEventListener('input', shader_build);
+	shader_build()
+
+	requestAnimationFrame(animate)
+}
+
+</script>
+</html>
+
-- 
cgit v1.2.3-70-g09d2