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>
+