diff options
Diffstat (limited to 'tutorial.html')
| -rw-r--r-- | tutorial.html | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/tutorial.html b/tutorial.html new file mode 100644 index 0000000..3b4a58b --- /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: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> |