diff options
Diffstat (limited to 'shader-cam.html')
| -rw-r--r-- | shader-cam.html | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/shader-cam.html b/shader-cam.html new file mode 100644 index 0000000..7aea288 --- /dev/null +++ b/shader-cam.html @@ -0,0 +1,190 @@ +<!doctype html> +<html> +<head> +<title>Shader</title> +<style type="text/css"> +html,body { margin: 0; padding: 0; } +#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; } +</style> +</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> + <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"> + <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="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.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> + |