1 files changed, 61 insertions, 0 deletions
diff --git a/pattern.html b/pattern.html
new file mode 100644
index 0000000..18dfc3a
--- /dev/null
+++ b/pattern.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>
+