diff options
| -rw-r--r-- | Gruntfile.js | 1 | ||||
| -rw-r--r-- | js/api/gallery.js | 7 | ||||
| -rw-r--r-- | js/api/localstorage.js | 2 | ||||
| -rw-r--r-- | js/help.js | 22 | ||||
| -rw-r--r-- | shader-combo.html | 21 | ||||
| -rw-r--r-- | shaders.json | 2 |
6 files changed, 30 insertions, 25 deletions
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() ) @@ -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"}] |