diff options
| author | Julie Lala <jules@okfoc.us> | 2013-12-10 00:47:36 -0500 |
|---|---|---|
| committer | Julie Lala <jules@okfoc.us> | 2013-12-10 00:47:36 -0500 |
| commit | 037a0ae8072217f7821549bbdfe030e73289330d (patch) | |
| tree | b2e20cff097a44e08cd8e6609e7d5a00b732d88c /index.html | |
dither stuff
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..18dfc3a --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ +<!doctype html> +<html> +<head> +<title>Dither</title> +</head> +<body> +<div> +<button id="random">random</button> +<button id="pattern2">pattern2</button> +<button id="pattern3">pattern3</button> +<button id="pattern4">pattern4</button> +<button id="pattern2Lite">pattern2lite</button> +<button id="pattern3Lite">pattern3lite</button> +<button id="pattern4Lite">pattern4lite</button> +<button id="floydSteinberg">floyd-steinberg</button> +<button id="right">right</button> +</div> +<div id="images"></div> +</body> +<script type="text/javascript" src="canvasquery.js"></script> +<script type="text/javascript" src="canvasquery.dither.js"></script> +<script type="text/javascript"> +var algo = 'random'; +var urls = ["abyss.png","building.png","gradient.jpg"] +var imgs = [] +var complete = 0 +urls.forEach(function(src){ + var img = new Image () + img.onload = ready + img.src = src + imgs.push(img) + if (img.complete) ready() +}) +function ready(){ + complete += 1 + if (complete < imgs.length) return; + var buttons = document.getElementsByTagName("button") + for (var i = 0; i < buttons.length; i++) { + (function(n){ + buttons[n].onclick = function(){ + algo = buttons[n].id; + build() + } + })(i) + } + build() +} +function build(){ + document.getElementById("images").innerHTML = "" + imgs.forEach(dither) +} +function dither(img){ + var w = img.naturalWidth, h = img.naturalHeight; + var cc = cq(w, h) + cc.drawImage(img, 0, 0, w, h); + cc[algo + "Dither"]( ) + cc.appendTo("#images") +} +</script> +</html> + |