diff options
| -rw-r--r-- | Gruntfile.js | 2 | ||||
| -rw-r--r-- | commands.html (renamed from instructions.html) | 1 | ||||
| -rw-r--r-- | js/help.js | 10 | ||||
| -rw-r--r-- | shader-combo.html | 66 | ||||
| -rw-r--r-- | shader-picker.html | 12 | ||||
| -rw-r--r-- | tutorial.html | 29 |
6 files changed, 90 insertions, 30 deletions
diff --git a/Gruntfile.js b/Gruntfile.js index b4ad093..95df856 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -66,7 +66,7 @@ module.exports = function(grunt) { { nonull: true, expand: true, - src: ['instructions.html', 'img/*'], + src: ['commands.html', 'tutorial.html', 'img/*'], dest: "dist/", }, ] diff --git a/instructions.html b/commands.html index dff99d8..df9b072 100644 --- a/instructions.html +++ b/commands.html @@ -37,6 +37,7 @@ pixel(x,y) == 4*(y*w+h) dist(x,y,a,b) angle(x,y,a,b) rand(n), randint(n) +randrange(a,b) choice(array) deg(radians), rad(degrees) @@ -7,13 +7,15 @@ help.init = function(){ help.bind = function(){ $(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true }) - $("#help").click(function(){ $("#instructions").toggle() ;console.log("zZ") }) - $("#instructions .close").click(function(){ $("#instructions").toggle() ;console.log("zZ") }) - $("#instructions").draggable({ + $("#show-commands").click(function(){ $("#tutorial").hide(); $("#commands").toggle() }) + $("#show-tutorial").click(function(){ $("#commands").hide(); $("#tutorial").toggle() }) + $("#commands .close").click(function(){ $("#commands").toggle() }) + $("#tutorial .close").click(function(){ $("#tutorial").toggle() }) + $("#commands,#tutorial").draggable({ start: drag_start, stop: drag_stop }) - $("#instructions").disableSelection(); + $("#commands,#tutorial").disableSelection(); } function drag_start(){ dragging = true; $(this).addClass("dragging") } diff --git a/shader-combo.html b/shader-combo.html index 2ef8ed1..312f52f 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -3,7 +3,7 @@ <head> <title>Shaderblaster</title> <style type="text/css"> -body { background: #f8f8f8; font-size: 14px; } +body { background: #fbfbfb; font-size: 14px; } div { float: left; padding: 10px;} form { display: inline-block; } a { color: #00f; } @@ -18,20 +18,23 @@ a { color: #00f; } #uploaded-url { display: none; width: 400px; } #uploaded-url + br { display: none; } -#header { clear: right; width:100%; padding: 0; font-size: 12px; } -#shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; } +#header { width:calc(100% - 10px); padding: 0; font-size: 12px; position: fixed; bottom:0; left: 0; padding: 5px; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px #888; z-index: 2;} +.gallery { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; } +.gallery::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } +.gallery::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); } #shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; clear: right; } .shader { width: 100px; } .shader span { display: block } -#help { float: right; } .dragging { cursor: -webkit-grabbing !important; } .ui-sortable-helper { cursor: -webkit-grabbing !important; } -#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 { top:40px;right:20px; width:190px;height:calc(95% - 230px); } +#tutorial { top:40px;right:30px; width:290px;height:325px; display: block;} +.iframe { position: absolute; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; } +.iframe iframe {width: 100%;height:100%;margin:0;padding:0;border:0;} +.iframe.dragging iframe { pointer-events: none; } +.iframe .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; } #frame-controls { display: none; } #frames { display: block; width: 404px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; } @@ -52,21 +55,26 @@ a { color: #00f; } #render,#save,#upload,#save-shader { font-weight: bold; } #save[disabled],#upload[disabled] { font-weight: normal; } -#logo { position: fixed; bottom: 10px; right: 10px; font-size: 38px; font-weight: bold; font-style: italic; margin-top: 0px; margin: 0 5px; color: #000; } +#logo { display: inline; position: relative; top: 2px; font-size: 18px; font-family: georgia; font-weight: bold; font-style: italic; margin: 0px; color: #243; } +#corner { position: fixed; top: -5px; right: 0px; } + </style> </head> <body> -<h1 id="logo">shaderblaster</h1> +<div id="corner"> + <h1 id="logo">shaderblaster</h1> + <button id="show-tutorial">help</button> + <button id="show-commands">commands</button> + <select id="examples"> + <option>examples</option> + </select> +</div> <div id="header"> - <button id="help">help</button> <button class="toggle-off">x</button> - <button id="new-shader"><b>new shader</b></button> <!-- - <select id="examples"> - <option>examples</option> - </select> + <button id="new-shader"><b>new shader</b></button> --> <!-- <input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button> @@ -87,15 +95,15 @@ a { color: #00f; } <select id="pick-user"> <option>fetching users..</option> </select> - <div id="shader-gallery"></div> + <div id="shader-gallery" class="gallery"></div> </span> <span id="gallery-form" class="form"> <button id="gallery-random">asdf random</button> <form id="gallery-search"> - <input type="text" id="dumpfm-search-query" value="duck bill"> + <input type="text" id="dumpfm-search-query" value="webcam"> <button id="gallery-search">search dump</button> </form> - <div id="gallery-images"></div> + <div id="gallery-images" class="gallery"></div> </span> </div> @@ -147,7 +155,8 @@ a { color: #00f; } <div id="workspace"></div> -<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">×</button></div> +<div class="iframe" id="tutorial"><iframe src="tutorial.html"></iframe><button class="close">×</button></div> +<div class="iframe" id="commands"><iframe src="commands.html"></iframe><button class="close">×</button></div> <script type="text/javascript" src="js/vendor/acorn.js"></script> <script type="text/javascript" src="js/vendor/gif.js"></script> <script type="text/javascript" src="js/vendor/gif-encode.min.js"></script> @@ -267,5 +276,24 @@ function init(){ } </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/shader-picker.html b/shader-picker.html index 7efe39f..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; } @@ -79,7 +79,7 @@ a { color: #00f; } your name here → <input type="text" id="username" value=""> <br> <br> - <button id="help">help</button> + <button id="show-commands">help</button> <button id="add-shader">+</button> <button id="remove-shader">×</button> @@ -103,7 +103,7 @@ a { color: #00f; } <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> diff --git a/tutorial.html b/tutorial.html new file mode 100644 index 0000000..f994c2a --- /dev/null +++ b/tutorial.html @@ -0,0 +1,29 @@ +<!doctype html> +<html> +<head> +<title>tutorial</title> +<style type="text/css"> +html,body{margin:0;padding:5px 5px 5px 5px; } +article { font-family: serif; font-size: 14px; margin:0;padding:0;} +u{ color: #866; } +i{ color: #666; } +a{ color: #a39; } +</style> +</head> +<body> +<article id="pre">Shaders are little programs that draw a picture, pixel by pixel. With ShaderBlaster, use shaders on gifs and images to make new effects. + +Your basic variables are position (x, y), +time (t), and color (r, g, b, a). + +Many math functions such as <i>cos</i> and <i>sqrt</i> are available, along with functions from GLSL like <i>step</i> and <i>mix</i>. Click <b>commands</b> to see a complete list. + +Use the bar below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/">Photoblaster</a> for images, or use your own. + +If you make a cool effect, you can render it out to a gif, or save the shader for others to use. +</article> +</body> +<script> +pre.innerHTML = pre.innerHTML.replace(/\(/g,"(<i>").replace(/\)/g,"</i>)").replace(/\n/g,"<br>") +</script> +</html> |