1 files changed, 108 insertions, 0 deletions
diff --git a/gif-animate.html b/gif-animate.html
new file mode 100644
index 0000000..6681aff
--- /dev/null
+++ b/gif-animate.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html>
+<head>
+<title>Gifs</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>
+<input type="text" id="url" value="http://s3.amazonaws.com/feellondon/uploads/1.gif">
+<div id="loading">loading...</div>
+</div>
+<div id="images"></div>
+</body>
+<script type="text/javascript" src="gif.js"></script>
+<script type="text/javascript" src="canvasquery.js"></script>
+<script type="text/javascript" src="canvasquery.dither.js"></script>
+<script type="text/javascript">
+
+document.getElementById("url").onchange = load
+load()
+
+function load(imageURL) {
+  document.getElementById("loading").style.display = "inline"
+  var imageURL = proxify( document.getElementById("url").value );
+
+  if (imageURL.substr(-3) === "gif") {
+    window.gif = GIF(imageURL);
+    // gif.on("error", tryToLoadNextImage);
+    // gif.on("rendered", trackLoadTime);
+    gif.on("rendered", ready);
+    return gif.render();
+  } else {
+    window.img = new Image();
+    // img.addEventListener("error", tryToLoadNextImage);
+    img.addEventListener("load", ready);
+    img.crossOrigin = "anonymous";
+    return img.src = imageURL;
+  }
+}
+
+function giveImage() {
+  if (imageURL.substr(-3) === "gif") {
+    return gif.frames[gif.currentFrame()].ctx.canvas;
+  } else {
+    return img;
+  }
+}
+
+function proxify (url) {
+  return "/cgi-bin/proxy?" + url // .replace(/^https?:\/\//, "");
+};
+
+
+function ready(){
+  document.getElementById("loading").style.display = "none"
+  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()
+  animate()
+}
+
+var algo = "random"
+var frames;
+var viewer;
+function build(){
+  frames = []
+
+  document.getElementById("images").innerHTML = ""
+  gif.frames.forEach(function(frame){ dither(frame) })
+
+  canvas = gif.frames[0].ctx.canvas
+  var w = canvas.width, h = canvas.height;
+  viewer = cq(w, h)
+  viewer.appendTo("#images")
+}
+function dither(frame){
+  var canvas = frame.ctx.canvas
+  var w = canvas.width, h = canvas.height;
+  var cc = cq(w, h)
+  cc.drawImage(canvas, 0, 0, w, h);
+  cc[algo + "Dither"]( )
+  frames.push(cc)
+}
+
+var raf_id;
+function animate(){
+  raf_id = requestAnimationFrame(animate)
+  var canvas = frames[gif.currentFrame()].canvas
+  viewer.drawImage(canvas, 0, 0, canvas.width, canvas.height)
+}
+</script>
+</html>
+