diff options
Diffstat (limited to 'shader-picker.html')
| -rw-r--r-- | shader-picker.html | 209 |
1 files changed, 92 insertions, 117 deletions
diff --git a/shader-picker.html b/shader-picker.html index d482a6b..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; } @@ -37,73 +37,73 @@ a { color: #00f; } </head> <body> <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> - <span class="status"></span> - </div> - <div id="gallery-images"></div> + <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> + <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> + <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png"> + <br> + <br> - <textarea id="shader"></textarea> - <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> + 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="help">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> + 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"> - <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> - <button id="upload" disabled>upload</button> - <br> - <input type="text" id="uploaded-url"> + <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> + <button id="upload" disabled>upload</button> + <br> + <input type="text" id="uploaded-url"> </div> -<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">×</button></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> @@ -111,10 +111,13 @@ a { color: #00f; } <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/gallery.js"></script> @@ -125,7 +128,14 @@ a { color: #00f; } <script type="text/javascript" src="js/render.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="js/help.js"></script> <script type="text/javascript" src="shaders.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") @@ -137,74 +147,39 @@ $(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 - }) + $("#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 + }) - $("#add-frame").click(add_frame) - $("#frames").sortable({ - start: drag_start, - stop: drag_stop - }); - $(document).on("click","#frames .remove",remove_frame) - $("#framecount").change(function(){ - var val = $(this).int() - if (val < 1 || isNaN(val)) $(this).val(val = 1) - if (val == 1) $("#add-frame").html("+add frame") - else $("#add-frame").html("+add frames") - }) - $("#background").change(function(){ - document.body.style.backgroundColor = $("#background").string() - }) - - $("#frames").disableSelection(); - $("#remove-all-frames").click(remove_all_frames) - $("#weave-frames").click(weave_frames) - $("#shuffle-frames").click(shuffle_frames) - $("#reverse-frames").click(reverse_frames) - $("#sort-frames").click(sort_frames) + $("#background").change(function(){ + document.body.style.backgroundColor = $("#background").string() + }) + + frame_editor.init() + help.init() + load() - $("#render").click(render) - $("#save").click(save) - $("#upload").click(upload) - $("#help,#instructions .close").click(function(){ $("#instructions").toggle() }) - $("#instructions").draggable({ - start: drag_start, - stop: drag_stop - }) - $("#instructions").disableSelection(); + gallery.init(choose) - load() - $(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true }) + user.init() + if (user.username.length) { + console.log("signed in as", user.username) + } - gallery.choose = choose - gallery.init() + local_shaders.init() + local_shaders.loadLastAccessed() - user.init() - if (user.username.length) { - console.log("signed in as", user.username) - } + document.getElementById('shader').addEventListener('input', shader_build); + shader_build() - user.shaders.init() - user.shaders.loadLastAccessed() - - document.getElementById('shader').addEventListener('input', shader_build); - shader_build() - - requestAnimationFrame(animate) + requestAnimationFrame(animate) } -function drag_start(){ dragging = true; $(this).addClass("dragging") } -function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") } </script> -<script type="text/html" id="frame-template"> -<button class="remove">x</button> -<span class="frame"></span> -</script> </html> |