From e8c4db53f205c9407d8b208657a9f62cbee47b07 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 2 Feb 2014 00:54:39 -0500
Subject: tutorial

---
 instructions.html |  1 +
 shader-combo.html | 21 ++++++++++++---------
 tutorial.html     | 29 +++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 tutorial.html

diff --git a/instructions.html b/instructions.html
index dff99d8..df9b072 100644
--- a/instructions.html
+++ b/instructions.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)
 
diff --git a/shader-combo.html b/shader-combo.html
index bd9f1c0..99c5a6c 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -18,7 +18,7 @@ a { color: #00f; }
 #uploaded-url { display: none; width: 400px; }
 #uploaded-url + br { display: none; }
 
-#header { clear: right; width:100%; padding: 0; font-size: 12px; position: fixed;bottom:0;background: rgba(255,255,255,0.9); }
+#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); }
@@ -29,10 +29,12 @@ a { color: #00f; }
 .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; }
+#instructions { top:20px;right:20px; width:190px;height:465px; }
+#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; }
@@ -53,7 +55,7 @@ a { color: #00f; }
 #render,#save,#upload,#save-shader { font-weight: bold; }
 #save[disabled],#upload[disabled] { font-weight: normal; }
 
-#logo { display: inline; position: relative; top: 2px; font-size: 18px; font-family: georgia; font-weight: bold; font-style: italic; margin: 0px; color: #333; }
+#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>
@@ -63,7 +65,7 @@ a { color: #00f; }
 <div id="corner">
 	<h1 id="logo">shaderblaster</h1>
 	<button id="show-help">help</button>
-	<button id="show-about">about</button>
+	<button id="show-commands">commands</button>
 	<select id="examples">
 		<option>examples</option>
 	</select>
@@ -98,7 +100,7 @@ a { color: #00f; }
 	<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" class="gallery"></div>
@@ -153,7 +155,8 @@ a { color: #00f; }
 
 <div id="workspace"></div>
 
-<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
+<div class="iframe" id="tutorial"><iframe src="tutorial.html"></iframe><button class="close">&times;</button></div>
+<div class="iframe" id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</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/tutorial.html b/tutorial.html
new file mode 100644
index 0000000..84d4ca0
--- /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; }
+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"><u>About ShaderBlaster</u>
+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.
+
+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>
-- 
cgit v1.2.3-70-g09d2