diff options
| -rw-r--r-- | commands.html (renamed from instructions.html) | 0 | ||||
| -rw-r--r-- | js/help.js | 10 | ||||
| -rw-r--r-- | shader-combo.html | 6 | ||||
| -rw-r--r-- | shader-picker.html | 12 | ||||
| -rw-r--r-- | tutorial.html | 2 |
5 files changed, 16 insertions, 14 deletions
diff --git a/instructions.html b/commands.html index df9b072..df9b072 100644 --- a/instructions.html +++ b/commands.html @@ -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 99c5a6c..5d9c869 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -29,7 +29,7 @@ a { color: #00f; } .dragging { cursor: -webkit-grabbing !important; } .ui-sortable-helper { cursor: -webkit-grabbing !important; } -#instructions { top:20px;right:20px; width:190px;height:465px; } +#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;} @@ -64,7 +64,7 @@ a { color: #00f; } <div id="corner"> <h1 id="logo">shaderblaster</h1> - <button id="show-help">help</button> + <button id="show-tutorial">help</button> <button id="show-commands">commands</button> <select id="examples"> <option>examples</option> @@ -156,7 +156,7 @@ a { color: #00f; } <div id="workspace"></div> <div class="iframe" id="tutorial"><iframe src="tutorial.html"></iframe><button class="close">×</button></div> -<div class="iframe" id="instructions"><iframe src="instructions.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> 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 index 84d4ca0..be42f74 100644 --- a/tutorial.html +++ b/tutorial.html @@ -18,7 +18,7 @@ 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. +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> |