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: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">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.
Click "images" below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/">Photoblaster</a> for images, or enter a URL at top left.
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>
|
