blob: 3b4a58bfc45cca0e3cd92f9b01a5f0dd842bbf78 (
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: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 procedures that draw a picture by coloring each pixel individually. 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. When you make a cool effect, render a gif and save the shader for others to use.
You can apply these shaders to any image. Click "images" below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/" target="_blank">Photoblaster</a>, or enter a URL at top left.
See more: <a href="http://asdf.us/dither/" target="_blank">Dither</a>
</article>
</body>
<script>
pre.innerHTML = pre.innerHTML.replace(/\(/g,"(<i>").replace(/\)/g,"</i>)").replace(/\n/g,"<br>")
</script>
</html>
|
