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 /halftone.html | |
dither stuff
Diffstat (limited to 'halftone.html')
| -rw-r--r-- | halftone.html | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/halftone.html b/halftone.html new file mode 100644 index 0000000..17f7ca8 --- /dev/null +++ b/halftone.html @@ -0,0 +1,48 @@ +<!doctype html> +<html> +<head> +<title>Halftone</title> +</head> +<body> +<div> +radius <input type="range" min="4" max="20" step="1" value="5" id="radius"> +angle <input type="range" min="0" max="90" step="1" value="45" id="angle"> +</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 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; + document.getElementById("radius").onchange = build + document.getElementById("angle").onchange = build + 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) + var radius = parseFloat(document.getElementById("radius").value) + var angle = parseFloat(document.getElementById("angle").value) + cc.drawImage(img, 0, 0, w, h); + cc.halftone( radius, angle ) + cc.appendTo("#images") +} +</script> +</html> + |