From 08333b714e73034ca9098692950051d5d9d78220 Mon Sep 17 00:00:00 2001 From: jules Date: Tue, 21 Jan 2014 13:51:57 -0500 Subject: split off shader localstorage version --- js/api/localstorage.js | 106 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 js/api/localstorage.js (limited to 'js/api/localstorage.js') diff --git a/js/api/localstorage.js b/js/api/localstorage.js new file mode 100644 index 0000000..0ec7cad --- /dev/null +++ b/js/api/localstorage.js @@ -0,0 +1,106 @@ + +user.shaders = new function(){} +user.shaders.init = function(){ + user.shaders.bind() +} +user.shaders.bind = function(){ + user.shaders.buttons = {} + if ('SHADERS' in window) { + user.shaders.bindButtons( window.SHADERS ) + } + user.shaders.bindButtons( user.shaders.getShaders() ) + document.getElementById("add-shader").addEventListener("click", user.shaders.save, false) + document.getElementById("remove-shader").addEventListener("click", user.shaders.remove, false) +} +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 = data.name + button.addEventListener("click", user.shaders.load.bind(this, data), false) + document.getElementById("shaders").appendChild(button) + user.shaders.buttons[data.name] = button +} +user.shaders.load = function(data){ + var shader = data.shader + if (shader && shader.length > 0) { + user.shaders.name = data.name + $("#shader").val(shader) + // pause here? + shader_build() + $(".active").removeClass("active") + $(user.shaders.buttons[data.name]).addClass("active") + user.shaders.setLastAccessed(data.name) + } +} +user.shaders.loadLastAccessed = function(){ + var name = localStorage.getItem("im.lastShader") || "colorcycle" + if (name in user.shaders.buttons) { + $(user.shaders.buttons[name]).trigger("click") + } +} +user.shaders.setLastAccessed = function(name){ + localStorage.setItem("im.lastShader", name) +} + +user.shaders.getShaderByName = function(name){ + return { name: name, shader: user.shaders.getShaderBody(name) } +} +user.shaders.getShaderIndex = function(){ + return JSON.parse( localStorage.getItem("im.shaders") ) || [] +} +user.shaders.getShaderBody = 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.getShaderBody(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) +} +user.shaders.removeShader = function(name){ + localStorage.removeItem("im.shaders." + name) +} + +user.shaders.save = function(){ + var name = prompt("enter shader name") + var shader = $("#shader").val() + + if (! name) return; + if (shade !== shade_no_error_handling) return; + + user.shaders.setShader(name, shader) + + var shaders = user.shaders.getShaderIndex() + shaders.push(name) + user.shaders.setShaderIndex(shaders) + + user.shaders.name = name + user.shaders.bindButton({ name: name, shader: shader }) + + $(".active").removeClass("active") + $(user.shaders.buttons[name]).addClass("active") + user.shaders.setLastAccessed(name) +} + +user.shaders.remove = function(){ + var name = user.shaders.name + if (! name || ! name.length) return + + var shaders = user.shaders.getShaderIndex() + if (shaders.splice( shaders.indexOf(name), 1 )) { + user.shaders.setShaderIndex(shaders) + user.shaders.removeShader(name) + $(user.shaders.buttons[name]).remove() + user.shaders.name = "" + } +} -- cgit v1.2.3-70-g09d2 From b1aab59987e2f6aecf904d32ba092b509e72e9d3 Mon Sep 17 00:00:00 2001 From: jules Date: Tue, 21 Jan 2014 15:31:31 -0500 Subject: call it local_shaders --- js/api/localstorage.js | 94 ++++++++++++++++++++++++------------------------ shader-localstorage.html | 4 +-- shader-picker.html | 4 +-- 3 files changed, 51 insertions(+), 51 deletions(-) (limited to 'js/api/localstorage.js') diff --git a/js/api/localstorage.js b/js/api/localstorage.js index 0ec7cad..eeae658 100644 --- a/js/api/localstorage.js +++ b/js/api/localstorage.js @@ -1,106 +1,106 @@ -user.shaders = new function(){} -user.shaders.init = function(){ - user.shaders.bind() +local_shaders = new function(){} +local_shaders.init = function(){ + local_shaders.bind() } -user.shaders.bind = function(){ - user.shaders.buttons = {} +local_shaders.bind = function(){ + local_shaders.buttons = {} if ('SHADERS' in window) { - user.shaders.bindButtons( window.SHADERS ) + local_shaders.bindButtons( window.SHADERS ) } - user.shaders.bindButtons( user.shaders.getShaders() ) - document.getElementById("add-shader").addEventListener("click", user.shaders.save, false) - document.getElementById("remove-shader").addEventListener("click", user.shaders.remove, false) + local_shaders.bindButtons( local_shaders.getShaders() ) + document.getElementById("add-shader").addEventListener("click", local_shaders.save, false) + document.getElementById("remove-shader").addEventListener("click", local_shaders.remove, false) } -user.shaders.bindButtons = function(shaders){ +local_shaders.bindButtons = function(shaders){ for (var i = 0; i < shaders.length; i++){ - user.shaders.bindButton(shaders[i]) + local_shaders.bindButton(shaders[i]) } } -user.shaders.bindButton = function(data){ +local_shaders.bindButton = function(data){ // console.log("button >> " + data.name) var button = document.createElement("button") button.innerHTML = data.name - button.addEventListener("click", user.shaders.load.bind(this, data), false) + button.addEventListener("click", local_shaders.load.bind(this, data), false) document.getElementById("shaders").appendChild(button) - user.shaders.buttons[data.name] = button + local_shaders.buttons[data.name] = button } -user.shaders.load = function(data){ +local_shaders.load = function(data){ var shader = data.shader if (shader && shader.length > 0) { - user.shaders.name = data.name + local_shaders.name = data.name $("#shader").val(shader) // pause here? shader_build() $(".active").removeClass("active") - $(user.shaders.buttons[data.name]).addClass("active") - user.shaders.setLastAccessed(data.name) + $(local_shaders.buttons[data.name]).addClass("active") + local_shaders.setLastAccessed(data.name) } } -user.shaders.loadLastAccessed = function(){ +local_shaders.loadLastAccessed = function(){ var name = localStorage.getItem("im.lastShader") || "colorcycle" - if (name in user.shaders.buttons) { - $(user.shaders.buttons[name]).trigger("click") + if (name in local_shaders.buttons) { + $(local_shaders.buttons[name]).trigger("click") } } -user.shaders.setLastAccessed = function(name){ +local_shaders.setLastAccessed = function(name){ localStorage.setItem("im.lastShader", name) } -user.shaders.getShaderByName = function(name){ - return { name: name, shader: user.shaders.getShaderBody(name) } +local_shaders.getShaderByName = function(name){ + return { name: name, shader: local_shaders.getShaderBody(name) } } -user.shaders.getShaderIndex = function(){ +local_shaders.getShaderIndex = function(){ return JSON.parse( localStorage.getItem("im.shaders") ) || [] } -user.shaders.getShaderBody = function(name){ +local_shaders.getShaderBody = 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.getShaderBody(name) } }) +local_shaders.getShaders = function(){ + var shaders = local_shaders.getShaderIndex() + return shaders.map(function(name){ return { name: name, shader: local_shaders.getShaderBody(name) } }) } -user.shaders.setShaderIndex = function(shaders){ +local_shaders.setShaderIndex = function(shaders){ localStorage.setItem("im.shaders", JSON.stringify(shaders)) } -user.shaders.setShader = function(name, shader){ +local_shaders.setShader = function(name, shader){ if (! name.length || ! shader.length || !name.length || !shader.length) return localStorage.setItem("im.shaders." + name, shader) } -user.shaders.removeShader = function(name){ +local_shaders.removeShader = function(name){ localStorage.removeItem("im.shaders." + name) } -user.shaders.save = function(){ +local_shaders.save = function(){ var name = prompt("enter shader name") var shader = $("#shader").val() if (! name) return; if (shade !== shade_no_error_handling) return; - user.shaders.setShader(name, shader) + local_shaders.setShader(name, shader) - var shaders = user.shaders.getShaderIndex() + var shaders = local_shaders.getShaderIndex() shaders.push(name) - user.shaders.setShaderIndex(shaders) + local_shaders.setShaderIndex(shaders) - user.shaders.name = name - user.shaders.bindButton({ name: name, shader: shader }) + local_shaders.name = name + local_shaders.bindButton({ name: name, shader: shader }) $(".active").removeClass("active") - $(user.shaders.buttons[name]).addClass("active") - user.shaders.setLastAccessed(name) + $(local_shaders.buttons[name]).addClass("active") + local_shaders.setLastAccessed(name) } -user.shaders.remove = function(){ - var name = user.shaders.name +local_shaders.remove = function(){ + var name = local_shaders.name if (! name || ! name.length) return - var shaders = user.shaders.getShaderIndex() + var shaders = local_shaders.getShaderIndex() if (shaders.splice( shaders.indexOf(name), 1 )) { - user.shaders.setShaderIndex(shaders) - user.shaders.removeShader(name) - $(user.shaders.buttons[name]).remove() - user.shaders.name = "" + local_shaders.setShaderIndex(shaders) + local_shaders.removeShader(name) + $(local_shaders.buttons[name]).remove() + local_shaders.name = "" } } diff --git a/shader-localstorage.html b/shader-localstorage.html index cc4bd18..923f1b6 100644 --- a/shader-localstorage.html +++ b/shader-localstorage.html @@ -191,8 +191,8 @@ function init(){ console.log("signed in as", user.username) } - user.shaders.init() - user.shaders.loadLastAccessed() + local_shaders.init() + local_shaders.loadLastAccessed() document.getElementById('shader').addEventListener('input', shader_build); shader_build() diff --git a/shader-picker.html b/shader-picker.html index cc4bd18..923f1b6 100644 --- a/shader-picker.html +++ b/shader-picker.html @@ -191,8 +191,8 @@ function init(){ console.log("signed in as", user.username) } - user.shaders.init() - user.shaders.loadLastAccessed() + local_shaders.init() + local_shaders.loadLastAccessed() document.getElementById('shader').addEventListener('input', shader_build); shader_build() -- cgit v1.2.3-70-g09d2 From ff36ed287ec8747fe25e429bc5fa11961274bbd3 Mon Sep 17 00:00:00 2001 From: jules 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/api/localstorage.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 = $("") + $("#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; } + - - - 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