diff options
| -rw-r--r-- | index.html | 24 | ||||
| -rw-r--r-- | tutorial.html | 4 |
2 files changed, 21 insertions, 7 deletions
@@ -10,7 +10,7 @@ html,body{width:100%;height:100%;margin:0;padding:0;} #palette,#colors div { cursor: pointer; } #dice { font-size: 4em; line-height: 0.8em; position: relative; top: -30px; left: 10px; cursor: pointer; box-shadow: 0 0 4px #b8d6fb,0 0 4px #b8d6fb,0 0 4px #b8d6fb;} #dice {outline:0; } - +h1 { font-size: 26px; font-weight: normal } </style> </head> <body> @@ -30,7 +30,7 @@ html,body{width:100%;height:100%;margin:0;padding:0;} <a target="_blank" href="halftone.html"><button>halftone</button></a> <h1>shader</h1> -<a target="_blank" href="shader-combo.html"><button>shader-combo</button></a> +<a target="_blank" href="/shader/"><button>shader-combo</button></a> ... <a target="_blank" href="shader-demo.html"><button>shader-demo</button></a> <a target="_blank" href="shader-animate.html"><button>shader-animate</button></a> @@ -39,14 +39,26 @@ html,body{width:100%;height:100%;margin:0;padding:0;} <!--<a target="_blank" href="shader-localstorage.html"><button>shader-localstorage</button></a>--> <a target="_blank" href="shader-api.html"><button>shader-api</button></a> -<br><br> +<h1>photoblaster</h1> +<a target="_blank" href="/im/"><button>photoblaster</button></a> +<a target="_blank" href="/imgradient/"><button>im-gradient</button></a> +<a target="_blank" href="/imgrid/"><button>im-grid</button></a> +<a target="_blank" href="/imbreak/"><button>im-break</button></a> + +<h1>etc..</h1> <a target="_blank" href="/gif-recorder/"><button>gif-recorder</button></a> <a target="_blank" href="/neighbor/"><button>neighbor</button></a> -<br><br> +... +<a target="_blank" href="/dendrite/"><button>dendrite</button></a> +<a target="_blank" href="/dendrite/dendrite-life.html"><button>dendrite-life</button></a> +<a target="_blank" href="/mandel/mandel5.html"><button>mandel5</button></a> +<a target="_blank" href="/sortpixels/"><button>sortpixels</button></a> +<a target="_blank" href="/strobe/"><button>strobe</button></a> </div> <script type="text/javascript" src="js/vendor/canvasquery.js"></script> <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script> +<script type="text/javascript" src="http://asdf.us/neighbor/neighbor.js"></script> <script type="text/javascript"> // @@ -213,7 +225,7 @@ function load(){ swatch.onclick = function(){ color = $(this).data("color"); p = cq(paletteImg); - patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).canvas.toDataURL("image/png"); + patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).resizePixel(1 << randint(6)).canvas.toDataURL("image/png"); document.body.style.backgroundImage = 'url(' + patternURI + ')'; } } @@ -223,7 +235,7 @@ function load(){ p.x = randint(palette.canvas.width-20)+20 p.y = randint(palette.canvas.height) pick(p) - swatches[choice(["red","green","cyan","peru","yellow"])].onclick() + swatches[choice(["red","yellow"])].onclick() } $("#dice").click(dice) dice() diff --git a/tutorial.html b/tutorial.html index 47973de..3b4a58b 100644 --- a/tutorial.html +++ b/tutorial.html @@ -18,7 +18,9 @@ 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/">Photoblaster</a>, or enter a URL at top left. +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> |