summaryrefslogtreecommitdiff
path: root/tutorial.html
blob: 84d4ca0206d377d5d3d301bf44cfd2b487d03874 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>