diff options
| -rw-r--r-- | index.html | 9 | ||||
| -rw-r--r-- | shader-booth.html | 233 | ||||
| -rw-r--r-- | shaders-cam.json | 1 |
3 files changed, 240 insertions, 3 deletions
@@ -43,6 +43,7 @@ h1 { font-size: 26px; font-weight: normal } <a target="_blank" href="shader-api.html"><button>shader-api</button></a> <br><br> <a target="_blank" href="shader-cam.html"><button>shader-cam</button></a> +<a target="_blank" href="shader-booth.html"><button>shader-booth</button></a> <a target="_blank" href="shader-webm.html"><button>shader-webm</button></a> <h1>photoblaster</h1> @@ -54,9 +55,8 @@ h1 { font-size: 26px; font-weight: normal } <a target="_blank" href="/impattern/"><button>im-pattern</button></a> <h1>colorcodes</h1> -<a target="_blank" href="/ascii/"><button>ascii-shader</button></a> +<a target="_blank" href="/ascii/"><button>ascii-paint</button></a> <a target="_blank" href="/ascii/image.html"><button>ascii-image</button></a> -<a target="_blank" href="/ascii/webcam.html"><button>ascii-webcam</button></a> <a target="_blank" href="/xdcc/"><button>xdcc.pl</button></a> <!-- <br> @@ -75,8 +75,11 @@ h1 { font-size: 26px; font-weight: normal } <a target="_blank" href="/dendrite/"><button>dendrite</button></a> <a target="_blank" href="/dendrite/life.html"><button>dendrite-life</button></a> <a target="_blank" href="/mandel/mandel5.html"><button>mandel5</button></a> -<a target="_blank" href="/sortpixels/"><button>sortpixels</button></a> <a target="_blank" href="/strobe/"><button>strobe</button></a> +<br><br> +<a target="_blank" href="/displace/"><button>displace</button></a> +<a target="_blank" href="/slitscan/"><button>slitscan</button></a> +<a target="_blank" href="/sortpixels/"><button>sortpixels</button></a> <br><br><br><br> <font size="-1" color="#888"><i>All software made available under the <a style="color: #000" href="LNT-1.txt">Jollo LNT License</a> (Leave no trace)</i></font> diff --git a/shader-booth.html b/shader-booth.html new file mode 100644 index 0000000..96741c8 --- /dev/null +++ b/shader-booth.html @@ -0,0 +1,233 @@ +<!doctype html> +<html> +<head> +<title>Shader</title> +<style type="text/css"> +html,body { margin: 0; padding: 0; width: 100%; height: 100%; } +#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; } + +.booth #workspace canvas { + position: fixed; top: 0; left: 0; + width: 100%; height: 100%; + pointer-events: none; +} +.booth #controls, +.booth #gallery, +.booth #render_buttons { + display: none; +} +.booth #bottom { + display: block; + position: fixed; + bottom: 0; left: 0; width: 100%; +} +.booth #render { + float: none; +} +</style> +</head> +<body class="booth"> +<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 → <input type="text" id="username" value=""> + <br> + <br> + <button id="show-commands">help</button> + + <button id="add-shader">+</button> + <button id="remove-shader">×</button> + +<!-- + <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"> + <div id="render_buttons"> +<!-- + <button id="reset">reset</button> + --> + <button id="pause">pause</button> + <button id="step-forward">>></button> + <span class="status"></span> + <button id="save" disabled>save</button> + </div> +<!-- + <button id="upload" disabled>upload</button> + <br> + <input type="text" id="uploaded-url"> + --> +</div> + +<div id="bottom"> + <span id="shaders"></span> + ... + <button id="add-frame">+add frame</button> + <button id="remove-all-frames">clear frames</button> + <button id="reset">reset</button> + ... + <button id="render" disabled>render</button> + <button id="upload" disabled>upload</button> + ... + <input type="text" id="uploaded-url"> + <a href="http://asdf.us/im/gallery/?tag=shader"><button>gallery :)</button></a> +</div> + +<div id="commands"><iframe src="commands.html"></iframe><button class="close">×</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-cam.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) + + $("#camera").trigger("click") +} + +</script> +</html> + diff --git a/shaders-cam.json b/shaders-cam.json new file mode 100644 index 0000000..5c8aa68 --- /dev/null +++ b/shaders-cam.json @@ -0,0 +1 @@ +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"},{"name":"bouncy","shader":"\nu=(x + sin(t/100+y/20)*10)\nv=(y + sin(t/100+x/20)*10)\nrgbpixel(d,u,v)"},{"name":"morris one","shader":"zz = pow( norm(r*1.2,0,255) , r/55 )\nr = lerp( zz , 18, 237 )\ng = lerp( zz , 10, 123 )\nb = lerp( zz , 43, 118 )"},{"name":"morris two","shader":"zz = pow( norm((255-r)*1.2,0,255) , r/55 )\nr = lerp( zz , 18, 237 )\ng = lerp( zz , 10, 123 )\nb = lerp( zz , 43, 118 )"},{"name":"dots","shader":"t /= 700\nx=(t+x/2)|0\ny=(t+y/2)|0\nif (!(x%2) && !(y%2)) gray(x+y)\nelse gray(b+g+r)\na+=cosp(t*1)*30"}] |