1 files changed, 46 insertions, 0 deletions
diff --git a/threshold.html b/threshold.html
new file mode 100644
index 0000000..f3cdc76
--- /dev/null
+++ b/threshold.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<head>
+<title>Threshold</title>
+</head>
+<body>
+<div>
+threshold <input type="range" min="0" max="1" step="0.01" value="0.5" id="threshold">
+</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("threshold").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 thresh = parseFloat(document.getElementById("threshold").value)
+  console.log(thresh)
+  cc.drawImage(img, 0, 0, w, h);
+  cc.threshold( thresh )
+  cc.appendTo("#images")
+}
+</script>
+</html>
+