load shaders from json

3 files changed, 64 insertions, 34 deletions

diff --git a/js/user.js b/js/user.js
index 11b46df..39beaaa 100644
--- a/js/user.js
+++ b/js/user.js
@@ -44,36 +44,53 @@ user.shaders.init = function(){
   user.shaders.bind()
 }
 user.shaders.bind = function(){
-  var shaders = user.shaders.getShaders()
   user.shaders.buttons = {}
-  for (var i = 0; i < shaders.length; i++){
-    user.shaders.bindButton(shaders[i])
+  user.shaders.bindButtons( user.shaders.getShaders() )
+  if ('SHADERS' in window) {
+    user.shaders.bindButtons( window.SHADERS )
   }
   document.getElementById("add-shader").addEventListener("click", user.shaders.save, false)
   document.getElementById("remove-shader").addEventListener("click", user.shaders.remove, false)
 }
-user.shaders.bindButton = function(name){
-  console.log("button >> " + name)
+user.shaders.bindButtons = function(shaders){
+  for (var i = 0; i < shaders.length; i++){
+    user.shaders.bindButton(shaders[i])
+  }
+}
+user.shaders.bindButton = function(data){
+  console.log("button >> " + data.name)
   var button = document.createElement("button")
-  button.innerHTML = name
-  button.addEventListener("click", user.shaders.load.bind(this, name), false)
+  button.innerHTML = data.name
+  button.addEventListener("click", user.shaders.load.bind(this, data), false)
   document.getElementById("shaders").appendChild(button)
-  user.shaders.buttons[name] = button
+  user.shaders.buttons[data.name] = button
 }
-user.shaders.load = function(name){
-  console.log(name)
-  var shader = localStorage.getItem("im.shaders." + name)
+user.shaders.load = function(data){
+  console.log(data.name)
+  var shader = data.shader
   if (shader && shader.length > 0) {
-    user.shaders.name = name
+    user.shaders.name = data.name
     $("#shader").val(shader)
+    // pause here?
     shader_build()
     $(".active").removeClass("active")
-    $(user.shaders.buttons[name]).addClass("active")
+    $(user.shaders.buttons[data.name]).addClass("active")
   }
 }
+
+user.shaders.getShaderIndex = function(){
+  return JSON.parse( localStorage.getItem("im.shaders") ) || []
+}
 user.shaders.getShader = function(name){
   return localStorage.getItem("im.shaders."+name) || null
 }
+user.shaders.getShaders = function(){
+  var shaders = user.shaders.getShaderIndex()
+  return shaders.map(function(name){ return { name: name, shader: user.shaders.getShader(name) } })
+}
+user.shaders.setShaderIndex = function(shaders){
+  localStorage.setItem("im.shaders", JSON.stringify(shaders))
+}
 user.shaders.setShader = function(name, shader){
   if (! name.length || ! shader.length || !name.length || !shader.length) return
   localStorage.setItem("im.shaders." + name, shader)
@@ -81,12 +98,7 @@ user.shaders.setShader = function(name, shader){
 user.shaders.removeShader = function(name){
   localStorage.removeItem("im.shaders." + name)
 }
-user.shaders.getShaders = function(){
-  return JSON.parse( localStorage.getItem("im.shaders") ) || []
-}
-user.shaders.setShaders = function(shaders){
-  localStorage.setItem("im.shaders", JSON.stringify(shaders))
-}
+
 user.shaders.save = function(){
   var name = prompt("enter shader name")
   var shader = $("#shader").val()
@@ -96,9 +108,9 @@ user.shaders.save = function(){
 
   user.shaders.setShader(name, shader)
 
-  var shaders = user.shaders.getShaders()
+  var shaders = user.shaders.getShaderIndex()
   shaders.push(name)
-  user.shaders.setShaders(shaders)
+  user.shaders.setShaderIndex(shaders)
 
   user.shaders.name = name
   user.shaders.bindButton(name)
@@ -107,9 +119,9 @@ user.shaders.remove = function(){
   var name = user.shaders.name
   if (! name || ! name.length) return
 
-  var shaders = user.shaders.getShaders()
+  var shaders = user.shaders.getShaderIndex()
   if (shaders.splice( shaders.indexOf(name), 1 )) {
-    user.shaders.setShaders(shaders)
+    user.shaders.setShaderIndex(shaders)
     user.shaders.removeShader(name)
     $(user.shaders.buttons[name]).remove()
     user.shaders.name = ""
diff --git a/shader-picker.html b/shader-picker.html
index 65a1a11..8449935 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -32,6 +32,7 @@ form { display: inline-block; }
 #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>
@@ -80,13 +81,16 @@ form { display: inline-block; }
   <br>
   <br>
   <button id="help">help</button>
+<!-- 
   <button id="demo">demo</button>
-  <button id="dither-demo">dither</button>
+ -->
   <button id="test-js">test js</button>
   <span id="shaders"></span>
   <button id="add-shader">+</button>
   <button id="remove-shader">x</button>
   <br>
+  <br>
+  <a href="http://asdf.us/im/gallery/?tag=shader" target="_blank">Photoblaster Gallery</a>
 </div>
 
 <div id="workspace"></div>
@@ -122,6 +126,7 @@ form { display: inline-block; }
 <script type="text/javascript" src="js/user.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
 <script type="text/javascript">
 
 var cc = cq(0,0).appendTo("#workspace")
@@ -138,8 +143,7 @@ function init(){
   $("#pause").click(pause)
   $("#step-forward").click(step_forward)
   $("#add-frame").click(add_frame)
-  $("#demo").click(function(){ demo("#first") })
-  $("#dither-demo").click(function(){ demo("#second") })
+//   $("#demo").click(function(){ demo("#first") })
   $("#frames").sortable({
     start: drag_start,
     stop: drag_stop
@@ -175,7 +179,7 @@ function init(){
   })
   $("#instructions").disableSelection();
 
-  demo('#first')
+//   demo('#first')
   load()
   $(window).on("scroll", function(){ scrolling = true })
 
@@ -187,6 +191,7 @@ function init(){
   if (user.username.length) {
     console.log("signed in as ", user.username)
   }
+  
   $("#test-js").click(function(){
     var script = $("#shader").val()
     var params = {script: script, verbose: 1}
@@ -198,7 +203,6 @@ function init(){
       $("#rendered").append($pre)
       console.log(data)
     })
-    
   })
   
   document.getElementById('shader').addEventListener('input', shader_build);
@@ -217,12 +221,12 @@ function load(){
   var imageURL = $("#url").val()
   loadImage(imageURL, ready)
 }
-function demo(el){
-  $el = $(el)
-  s = $el.html()
-  $("#shader").html(s)
-  shader_build()
-}
+// function demo(el){
+//   $el = $(el)
+//   s = $el.html()
+//   $("#shader").html(s)
+//   shader_build()
+// }
 
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
 function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
@@ -440,6 +444,19 @@ function save (){
   var blob = dataUriToBlob(lastGif)
   saveAs(blob, filename);
 }
+function saveJSON (data, filename) {
+  var bytes = JSON.stringify(data)
+  var buf = new ArrayBuffer(bytes.length);
+  var arr = new Uint8Array(buf);
+  for (var i = 0; i < bytes.length; i++) {
+    arr[i] = bytes.charCodeAt(i);
+  }
+
+  var blob = new Blob([arr], { type: "text/json" });
+  blob.slice = blob.slice || blob.webkitSlice;
+  
+  saveAs(blob, filename);
+}
 
 function upload(){
   var filename = get_filename()
diff --git a/shaders.json b/shaders.json
new file mode 100644
index 0000000..e8e106e
--- /dev/null
+++ b/shaders.json
@@ -0,0 +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 = (Math.sin(t+x*y) + 1.0) / 2\nv = (0.6) * v - 0.4 + Math.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 *= (Math.sin(t*x/y) + 1)/2\ng *= (Math.cos(t*y/x) + 0.4)/2\nb *= (Math.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%1, 1.0, 0.5)[0]\n"},{"name":"tvfuzz","shader":"t /= 500\nif (a == 0) { r = g = b = x; t /= -3 }\nvar waveWidth = ((Math.cos(t)/Math.sin(t) - 0.5) * 100) /4\n\nlineSize = 5.0\nvar color = Math.sin(t)*100;\nr -= color * Math.abs(Math.sin((x - (t * 50.0) - (Math.sin(t * 0.2) * 60.0)) * 0.2))\ng -= color * Math.abs(Math.sin(((x + (2.0 * 3.14)) - (t * 50.0) - (Math.sin(t * 0.4) * 60.0)) * 0.2))\nb -= color * Math.abs( Math.sin(  (  x - (2.0 * 3.14) - (t * 50.0) - (Math.sin(t * 1.0) * 60.0))  * 0.2  )  );\nif(r&g&b){a = Math.abs(Math.sin(y)*1000)+t}else{a=1000}\n//if(r&g&b){a = Math.abs(Math.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 * Math.sin( Math.abs(Math.sin(x/Math.abs(Math.sin(t)))) * px - 5000. * t);\ndy = 1./  (Math.abs(py  - sx) );\ndy +=  (py - (px))*50;\nr += (px + 0.5) * dy \ng = Math.abs(Math.sin(t))*0.9 * dy \nb = dy\na =1000"}]