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 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>. You can see a full list by clicking "commands" above.
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>
|
