From 9433b20670a1eada77e1a4372a8f8ccad6f499c3 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sat, 25 Jan 2014 23:24:36 -0500
Subject: split out help and whatever else

---
 js/help.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 js/help.js

(limited to 'js/help.js')

diff --git a/js/help.js b/js/help.js
new file mode 100644
index 0000000..5610794
--- /dev/null
+++ b/js/help.js
@@ -0,0 +1,19 @@
+
+var help = {}
+
+help.init = function(){
+	help.bind()
+}
+
+help.bind = function(){
+	$(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
+	$("#help,#instructions .close").click(function(){ $("#instructions").toggle() })
+	$("#instructions").draggable({
+		start: drag_start,
+		stop: drag_stop
+	})
+	$("#instructions").disableSelection();
+}
+
+function drag_start(){ dragging = true; $(this).addClass("dragging") }
+function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
-- 
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/help.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 ab6c9b4b5b8871c2d1e108beafb630c8693f98c4 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 04:47:39 -0500
Subject: help!

---
 js/help.js        | 3 ++-
 shader-combo.html | 6 ++----
 2 files changed, 4 insertions(+), 5 deletions(-)

(limited to 'js/help.js')

diff --git a/js/help.js b/js/help.js
index 1794f3b..9ac2660 100644
--- a/js/help.js
+++ b/js/help.js
@@ -7,7 +7,8 @@ help.init = function(){
 
 help.bind = function(){
 	$(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
-	$("#help,#instructions .close").click(function(){ $("#instructions").toggle() })
+	$("#help").click(function(){ $("#instructions").toggle() ;console.log("zZ") })
+	$("#instructions .close").click(function(){ $("#instructions").toggle() ;console.log("zZ") })
 	$("#instructions").draggable({
 		start: drag_start,
 		stop: drag_stop
diff --git a/shader-combo.html b/shader-combo.html
index 5b218a6..ba62657 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -232,12 +232,10 @@ function init(){
 		cc.canvas.height = h
 	})
 
-	frame_editor.init()
-	help.init()
 	load()
-
-	user.init()
 	help.init()
+	user.init()
+	frame_editor.init()
 	shader_gallery.init()
 	gallery.init(choose)
 
-- 
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/help.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 dd7d18e344da5aa5b326621857d17993d01d7151 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 2 Feb 2014 01:08:41 -0500
Subject: toggle iframes, write short copy

---
 commands.html      | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 instructions.html  | 69 ------------------------------------------------------
 js/help.js         | 10 ++++----
 shader-combo.html  |  6 ++---
 shader-picker.html | 12 +++++-----
 tutorial.html      |  2 +-
 6 files changed, 85 insertions(+), 83 deletions(-)
 create mode 100644 commands.html
 delete mode 100644 instructions.html

(limited to 'js/help.js')

diff --git a/commands.html b/commands.html
new file mode 100644
index 0000000..df9b072
--- /dev/null
+++ b/commands.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+<title>instructions</title>
+<style type="text/css">
+html,body{margin:0;padding:5px; }
+pre { font-family: serif; font-size: 14px; margin:0;padding:0;}
+u{ color: #866; }
+i{ color: #666; }
+</style>
+</head>
+<body>
+<pre id="pre"><u>function parameters</u>
+w, h, x, y
+t = current time (ms)
+d[] = imageData array
+r, g, b, a = color values
+mousex, mousey
+
+<u>Math aliases</u>
+floor, ceil, round
+abs, sign, mod(n,m)
+pow, exp, sqrt
+cos, sin, tan
+acos, asin, atan, atan2
+random()
+E, PI, PHI
+
+<u>convenience functions</u>
+clamp(n,min,max)
+mix(n,a,b) (lerp)
+step(a,b)
+smoothstep(min,max,n)
+avg(m,n,a)
+cosp, sinp (mapped to [0,1])
+pixel(x,y) == 4*(y*w+h)
+dist(x,y,a,b)
+angle(x,y,a,b)
+rand(n), randint(n)
+randrange(a,b)
+choice(array)
+deg(radians), rad(degrees)
+
+<u>set pixel color</u>
+rgb(r,g,b)
+rgbref([rgb])
+black() white() red()
+gray(n)
+
+<u>color spaces</u>
+rgb2xyz(rgb)
+xyz2rgb(xyz)
+xyz2hunterlab(xyz)
+hunterlab2xyz(Lab)
+xyz2cielab(xyz)
+cielab2xyz(Lab)
+rgb2hsl(rgb)
+hsl2rgb(hsl)
+rgb2cmy(r,g,b)
+cmy2rgb(cmy)
+cmy2cmyk(cmy)
+cmyk2cmy(cmyk)
+(not all have been tested)
+</pre>
+</body>
+<script>
+pre.innerHTML = pre.innerHTML.replace(/\(/g,"(<i>").replace(/\)/g,"</i>)")
+</script>
+</html>
diff --git a/instructions.html b/instructions.html
deleted file mode 100644
index df9b072..0000000
--- a/instructions.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<title>instructions</title>
-<style type="text/css">
-html,body{margin:0;padding:5px; }
-pre { font-family: serif; font-size: 14px; margin:0;padding:0;}
-u{ color: #866; }
-i{ color: #666; }
-</style>
-</head>
-<body>
-<pre id="pre"><u>function parameters</u>
-w, h, x, y
-t = current time (ms)
-d[] = imageData array
-r, g, b, a = color values
-mousex, mousey
-
-<u>Math aliases</u>
-floor, ceil, round
-abs, sign, mod(n,m)
-pow, exp, sqrt
-cos, sin, tan
-acos, asin, atan, atan2
-random()
-E, PI, PHI
-
-<u>convenience functions</u>
-clamp(n,min,max)
-mix(n,a,b) (lerp)
-step(a,b)
-smoothstep(min,max,n)
-avg(m,n,a)
-cosp, sinp (mapped to [0,1])
-pixel(x,y) == 4*(y*w+h)
-dist(x,y,a,b)
-angle(x,y,a,b)
-rand(n), randint(n)
-randrange(a,b)
-choice(array)
-deg(radians), rad(degrees)
-
-<u>set pixel color</u>
-rgb(r,g,b)
-rgbref([rgb])
-black() white() red()
-gray(n)
-
-<u>color spaces</u>
-rgb2xyz(rgb)
-xyz2rgb(xyz)
-xyz2hunterlab(xyz)
-hunterlab2xyz(Lab)
-xyz2cielab(xyz)
-cielab2xyz(Lab)
-rgb2hsl(rgb)
-hsl2rgb(hsl)
-rgb2cmy(r,g,b)
-cmy2rgb(cmy)
-cmy2cmyk(cmy)
-cmyk2cmy(cmyk)
-(not all have been tested)
-</pre>
-</body>
-<script>
-pre.innerHTML = pre.innerHTML.replace(/\(/g,"(<i>").replace(/\)/g,"</i>)")
-</script>
-</html>
diff --git a/js/help.js b/js/help.js
index 6f39aa7..7bc3a6b 100644
--- a/js/help.js
+++ b/js/help.js
@@ -7,13 +7,15 @@ help.init = function(){
 
 help.bind = function(){
 	$(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
-	$("#help").click(function(){ $("#instructions").toggle() ;console.log("zZ") })
-	$("#instructions .close").click(function(){ $("#instructions").toggle() ;console.log("zZ") })
-	$("#instructions").draggable({
+	$("#show-commands").click(function(){ $("#tutorial").hide(); $("#commands").toggle() })
+	$("#show-tutorial").click(function(){ $("#commands").hide(); $("#tutorial").toggle() })
+	$("#commands .close").click(function(){ $("#commands").toggle() })
+	$("#tutorial .close").click(function(){ $("#tutorial").toggle() })
+	$("#commands,#tutorial").draggable({
 		start: drag_start,
 		stop: drag_stop
 	})
-	$("#instructions").disableSelection();
+	$("#commands,#tutorial").disableSelection();
 }
 
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
diff --git a/shader-combo.html b/shader-combo.html
index 99c5a6c..5d9c869 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -29,7 +29,7 @@ a { color: #00f; }
 .dragging { cursor: -webkit-grabbing !important; }
 .ui-sortable-helper { cursor: -webkit-grabbing !important; }
 
-#instructions { top:20px;right:20px; width:190px;height:465px; }
+#commands { top:40px;right:20px; width:190px;height:calc(95% - 230px); }
 #tutorial { top:40px;right:30px; width:290px;height:325px; display: block;}
 .iframe { position: absolute; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
 .iframe iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
@@ -64,7 +64,7 @@ a { color: #00f; }
 
 <div id="corner">
 	<h1 id="logo">shaderblaster</h1>
-	<button id="show-help">help</button>
+	<button id="show-tutorial">help</button>
 	<button id="show-commands">commands</button>
 	<select id="examples">
 		<option>examples</option>
@@ -156,7 +156,7 @@ a { color: #00f; }
 <div id="workspace"></div>
 
 <div class="iframe" id="tutorial"><iframe src="tutorial.html"></iframe><button class="close">&times;</button></div>
-<div class="iframe" id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
+<div class="iframe" id="commands"><iframe src="commands.html"></iframe><button class="close">&times;</button></div>
 <script type="text/javascript" src="js/vendor/acorn.js"></script>
 <script type="text/javascript" src="js/vendor/gif.js"></script>
 <script type="text/javascript" src="js/vendor/gif-encode.min.js"></script>
diff --git a/shader-picker.html b/shader-picker.html
index 7efe39f..8bafc60 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -21,10 +21,10 @@ div { display: inline-block; padding: 10px;}
 #rendered img { display: block; }
 #render,#save { font-weight: bold; }
 #render { float: right; }
-#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; }
+#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; }
@@ -79,7 +79,7 @@ a { color: #00f; }
 	your name here &rarr; <input type="text" id="username" value="">
 	<br>
 	<br>
-	<button id="help">help</button>
+	<button id="show-commands">help</button>
 	&nbsp;
 	<button id="add-shader">+</button>
 	<button id="remove-shader">&times;</button>
@@ -103,7 +103,7 @@ a { color: #00f; }
 	<input type="text" id="uploaded-url">
 </div>
 
-<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></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>
diff --git a/tutorial.html b/tutorial.html
index 84d4ca0..be42f74 100644
--- a/tutorial.html
+++ b/tutorial.html
@@ -18,7 +18,7 @@ Your basic variables are position (x, y), time (t), and color (r, g, b, a).
 
 Many math functions such as <i>cos</i> and <i>sqrt</i> are available, along with functions from GLSL like <i>step</i> and <i>mix</i>.  Click <b>commands</b> to see a complete list.
 
-Use the bar below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/">Photoblaster</a> for images.
+Use the bar below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/">Photoblaster</a> for images, or use your own.
 
 If you make a cool effect, you can render it out to a gif, or save the shader for others to use.
 </article>
-- 
cgit v1.2.3-70-g09d2


From ff36ed287ec8747fe25e429bc5fa11961274bbd3 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 2 Feb 2014 02:25:07 -0500
Subject: add examples from json

---
 Gruntfile.js           |  1 +
 js/api/gallery.js      |  7 ++++---
 js/api/localstorage.js |  2 +-
 js/help.js             | 22 ++++++++++++++++++++++
 shader-combo.html      | 21 +--------------------
 shaders.json           |  2 +-
 6 files changed, 30 insertions(+), 25 deletions(-)

(limited to 'js/help.js')

diff --git a/Gruntfile.js b/Gruntfile.js
index 95df856..42d25c3 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -43,6 +43,7 @@ module.exports = function(grunt) {
 					"js/api/gallery.js",
 					"js/api/get.js",
 					"js/api/set.js",
+					"shaders.json",
 					"dist/app.init.js",
 				],
 				dest: 'dist/app.concat.js',
diff --git a/js/api/gallery.js b/js/api/gallery.js
index c83d5f6..0e6614b 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -39,14 +39,15 @@ shader_gallery.bind = function(){
 	})
 }
 
-function new_shader(){
+function new_shader(opt){
+	opt = opt || {}
 	shader_id_root = null
 	run_shader({
 		id: "",
 		shader_id: "",
 		image_url: $("#url").val(),
-		script: "",
-		name: ""
+		script: opt.shader || "",
+		name: opt.name || ""
 	})
 }
 function run_shader(shader_object){
diff --git a/js/api/localstorage.js b/js/api/localstorage.js
index eeae658..309d49d 100644
--- a/js/api/localstorage.js
+++ b/js/api/localstorage.js
@@ -5,7 +5,7 @@ local_shaders.init = function(){
 }
 local_shaders.bind = function(){
   local_shaders.buttons = {}
-  if ('SHADERS' in window) {
+  if ('EXAMPLE_SHADERS' in window) {
     local_shaders.bindButtons( window.SHADERS )
   }
   local_shaders.bindButtons( local_shaders.getShaders() )
diff --git a/js/help.js b/js/help.js
index 7bc3a6b..db0ac6d 100644
--- a/js/help.js
+++ b/js/help.js
@@ -16,6 +16,28 @@ help.bind = function(){
 		stop: drag_stop
 	})
 	$("#commands,#tutorial").disableSelection();
+	
+	$("#examples").change(function(){ 
+		help.load_example($(this).val())
+		$("#toggle-images").trigger("click")
+	})
+
+  if ('EXAMPLE_SHADERS' in window) {
+  	help.examples = {}
+    window.EXAMPLE_SHADERS.forEach(function(s){
+    	help.examples[ s.name ] = s.shader
+			var $option = $("<option value='" + s.name +"'>" + s.name + "</option>")
+			$("#examples").append($option)
+    })
+  }
+}
+
+help.examples = {}
+
+help.load_example = function(name){
+	var s = help.examples[name]
+	$("#shader").html(s)
+	new_shader({ name: name, shader: s })
 }
 
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
diff --git a/shader-combo.html b/shader-combo.html
index 312f52f..399d2e7 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -179,6 +179,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/api/gallery.js"></script>
 <script type="text/javascript" src="js/api/get.js"></script>
 <script type="text/javascript" src="js/api/set.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
 
 <script type="text/html" id="shader-gallery-template">
 <span><img src="{thumbnail_url}"></span>
@@ -274,26 +275,6 @@ function init(){
 
 	requestAnimationFrame(animate)
 }
-
-</script>
-<script type="text/javascript-shader" data-name="basic">
-// The most basic shaders determine pixel color and nothing else.
-// This shader makes the image red.
-
-r = r
-g = 0
-b = 0
-a = 255
 </script>
-<script type="text/javascript-shader" data-name="basic">
-// The most basic shaders determine pixel color and nothing else.
-// This shader makes the image red.
-
-r = r
-g = 0
-b = 0
-a = 255
-</script>
-
 </body>
 </html>
diff --git a/shaders.json b/shaders.json
index 0653237..c44bc7e 100644
--- a/shaders.json
+++ b/shaders.json
@@ -1 +1 @@
-window.SHADERS = [{"name":"red","shader":"r = 255"},{"name":"demo","shader":"\n\nu = x + t/10\nv = y * sin(b/100)\n\nrgbpixel(d,u,v)\n\n"},{"name":"dither","shader":"\nxx = x, yy = y\n\nvar d = ((x % 2) + 2 * (y % 2)) - 2\n\nx += w/2\ny -= h/2\nt/=-200\ny/=96\nx/=50\nv = (sin(t+x*y) + 1.0) / 2\nv = (0.6) * v - 0.4 + random()\n\nv = clamp( v*64 + 128 , 0, 255)\nv += d*32\nif (a == 0) r = g = b = xx/w * 255\na = v > 128 ? v:0\n\n"},{"name":"rotozoom","shader":"u = (x * sin(t/10000)) - (y / cos(t/1000))\nv =  (x / cos(t/1000)) + (y * sin(t/10000))\nrgbpixel(d,u,v)"},{"name":"donjuan","shader":"t /= 500\nif (a == 0) { r = g = b = 0; t /= -3 }\nr *= (sin(t*x/y) + 1)/2\ng *= (cos(t*y/x) + 0.4)/2\nb *= (sin(t) + 1.5)/2\na = b/9"},{"name":"barber","shader":"t/=10\noo = (y+x+t) % 100\nr *= 1/sin(oo/100)\ng *= 1/sin(oo/100)\nb *= 1/sin(oo/100)"},{"name":"redsmear","shader":"r = x\nz = 10\nr += random()*z\ng += random()*z\nb += random()*z"},{"name":"colorcycle","shader":"\nt /= 5000\nr = hsl2rgb( b/255 + t%2-1, 1.0, 0.5)[0]\n"},{"name":"tvfuzz","shader":"t /= 500\nif (a == 0) { r = g = b = x; t /= -3 }\nvar waveWidth = ((cos(t)/sin(t) - 0.5) * 100) /4\n\nlineSize = 5.0\nvar color = sin(t)*100;\nr -= color * abs(sin((x - (t * 50.0) - (sin(t * 0.2) * 60.0)) * 0.2))\ng -= color * abs(sin(((x + (2.0 * 3.14)) - (t * 50.0) - (sin(t * 0.4) * 60.0)) * 0.2))\nb -= color * abs( sin(  (  x - (2.0 * 3.14) - (t * 50.0) - (sin(t * 1.0) * 60.0))  * 0.2  )  );\nif(r&g&b){a = abs(sin(y)*1000)+t}else{a=1000}\n//if(r&g&b){a = abs(sin(y)*1000)-t}else{a=1000}"},{"name":"pepper","shader":"t/=6000000\npx = x/100 - 1\npy = y/(100) -1\nsx = 0.8 * px -py * sin( abs(sin(x/abs(sin(t)))) * px - 5000. * t);\ndy = 1./  (abs(py  - sx) );\ndy +=  (py - (px))*50;\nr += (px + 0.5) * dy \ng = abs(sin(t))*0.9 * dy \nb = dy\na =1000"}]
+window.EXAMPLE_SHADERS = [{"name":"red","shader":"r = 255"},{"name":"demo","shader":"\n\nu = x + t/10\nv = y * sin(b/100)\n\nrgbpixel(d,u,v)\n\n"},{"name":"dither","shader":"\nxx = x, yy = y\n\nvar d = ((x % 2) + 2 * (y % 2)) - 2\n\nx += w/2\ny -= h/2\nt/=-200\ny/=96\nx/=50\nv = (sin(t+x*y) + 1.0) / 2\nv = (0.6) * v - 0.4 + random()\n\nv = clamp( v*64 + 128 , 0, 255)\nv += d*32\nif (a == 0) r = g = b = xx/w * 255\na = v > 128 ? v:0\n\n"},{"name":"rotozoom","shader":"u = (x * sin(t/10000)) - (y / cos(t/1000))\nv =  (x / cos(t/1000)) + (y * sin(t/10000))\nrgbpixel(d,u,v)"},{"name":"donjuan","shader":"t /= 500\nif (a == 0) { r = g = b = 0; t /= -3 }\nr *= (sin(t*x/y) + 1)/2\ng *= (cos(t*y/x) + 0.4)/2\nb *= (sin(t) + 1.5)/2\na = b/9"},{"name":"barber","shader":"t/=10\noo = (y+x+t) % 100\nr *= 1/sin(oo/100)\ng *= 1/sin(oo/100)\nb *= 1/sin(oo/100)"},{"name":"redsmear","shader":"r = x\nz = 10\nr += random()*z\ng += random()*z\nb += random()*z"},{"name":"colorcycle","shader":"\nt /= 5000\nr = hsl2rgb( b/255 + t%2-1, 1.0, 0.5)[0]\n"},{"name":"tvfuzz","shader":"t /= 500\nif (a == 0) { r = g = b = x; t /= -3 }\nvar waveWidth = ((cos(t)/sin(t) - 0.5) * 100) /4\n\nlineSize = 5.0\nvar color = sin(t)*100;\nr -= color * abs(sin((x - (t * 50.0) - (sin(t * 0.2) * 60.0)) * 0.2))\ng -= color * abs(sin(((x + (2.0 * 3.14)) - (t * 50.0) - (sin(t * 0.4) * 60.0)) * 0.2))\nb -= color * abs( sin(  (  x - (2.0 * 3.14) - (t * 50.0) - (sin(t * 1.0) * 60.0))  * 0.2  )  );\nif(r&g&b){a = abs(sin(y)*1000)+t}else{a=1000}\n//if(r&g&b){a = abs(sin(y)*1000)-t}else{a=1000}"},{"name":"pepper","shader":"t/=6000000\npx = x/100 - 1\npy = y/(100) -1\nsx = 0.8 * px -py * sin( abs(sin(x/abs(sin(t)))) * px - 5000. * t);\ndy = 1./  (abs(py  - sx) );\ndy +=  (py - (px))*50;\nr += (px + 0.5) * dy \ng = abs(sin(t))*0.9 * dy \nb = dy\na =1000"}]
-- 
cgit v1.2.3-70-g09d2