adding noisia bookmarklet test

author: jules <jules@okfoc.us> 2013-12-18 19:00:31 -0500
committer: jules <jules@okfoc.us> 2013-12-18 19:00:31 -0500
commit: 0aff8a87124d7925172c40acfa65f7349f89d49b (patch)
tree: 07ecfda9c606a5c06ae7b8330d4ce679345cbf60
parent: 1af02407044e53bc6100a45ff6d31cf8cd22f439 (diff)
2 files changed, 344 insertions, 0 deletions
diff --git a/js/vendor/gif-encode/client.js b/js/vendor/gif-encode/client.js
index c441b47..62dd260 100644
--- a/js/vendor/gif-encode/client.js
+++ b/js/vendor/gif-encode/client.js
@@ -75,6 +75,20 @@ function GifEncoder(){
       height = canvas.height;
     }
   }
+  
+  var addFrames = this.addFrames = function(canvas_array, delay){
+    for (var i = 0; i < canvas_array.length; i++) {
+      var ctx = canvas.getContext('2d');
+      canvases.push(canvas);
+      contexts.push(ctx);
+      delays.push(delay);
+    }
+
+    if (canvases.length == 1) {
+      width = canvas_array[0].width;
+      height = canvas_array[0].height;
+    }
+  }
 
   var copyFrame = this.copyFrame = function(canvas, delay) {
     var newCanvas = document.createElement("canvas");
diff --git a/noisia.html b/noisia.html
new file mode 100644
index 0000000..3e474e9
--- /dev/null
+++ b/noisia.html
@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<title>JS Bin</title>
+
+<style id="jsbin-css">
+body, canvas{
+  margin: 0;
+  padding: 0;
+  border: 0;
+  position: fixed;
+  cursor:none;
+  background: hsla(0,9%,11%,1);
+}
+</style>
+</head>
+<body>
+  <canvas id='canvas'></canvas>
+<script>
+var Mouse, PI, animloop, canvas, cos, ctx, decay, degToRad, distance, hypotenuse, now, pegs, radToDeg, rotateTo, sin, start;
+
+Mouse = {
+  x: window.innerWidth / 2,
+  y: window.innerHeight / 2,
+  down: false,
+  events: {
+    move: function(e) {
+      e.preventDefault();
+      if ('touches' in e) {
+        e = e.touches[0];
+      }
+      Mouse.x = (Mouse.x + e.pageX) * 0.5;
+      return Mouse.y = (Mouse.y + e.pageY) * 0.5;
+    },
+    down: function(e) {
+      e.preventDefault();
+      return Mouse.down = !Mouse.down;
+    },
+    up: function() {
+      return Mouse.down = !Mouse.down;
+    }
+  }
+};
+
+window.addEventListener('mousemove', Mouse.events.move, false);
+window.addEventListener('mousedown', Mouse.events.down, false);
+window.addEventListener('mouseup', Mouse.events.up, false);
+window.addEventListener('touchmove', Mouse.events.move, false);
+window.addEventListener('touchstart', Mouse.events.move, false);
+window.addEventListener('touchstart', Mouse.events.down, false);
+window.addEventListener('touchend', Mouse.events.up, false);
+
+start = Date.now();
+
+now = 0;
+
+PI = Math.PI;
+
+sin = function(a) {
+  return Math.sin(a);
+};
+
+cos = function(a) {
+  return Math.cos(a);
+};
+
+hypotenuse = function(a, b) {
+  if (a == null) {
+    a = 0;
+  }
+  if (b == null) {
+    b = 0;
+  }
+  return Math.sqrt(a * a + b * b);
+};
+
+distance = function(x1, y1, x2, y2) {
+  return hypotenuse(x2 - x1, y2 - y1);
+};
+
+radToDeg = function(rad) {
+  return rad / (Math.PI / 180);
+};
+
+degToRad = function(deg) {
+  return deg * (Math.PI / 180);
+};
+
+rotateTo = function(rise, run) {
+  var rotation, slope, tangent;
+
+  if (rise == null) {
+    rise = 0;
+  }
+  if (run == null) {
+    run = 0;
+  }
+  if (run === 0) {
+    run = 1;
+  }
+  slope = rise / run;
+  tangent = radToDeg(Math.atan(slope));
+  if (run < 0) {
+    rotation = degToRad(tangent - 180);
+  } else {
+    rotation = degToRad(tangent);
+  }
+  return rotation;
+};
+
+canvas = document.getElementById('canvas');
+
+ctx = canvas.getContext('2d');
+
+(canvas.sizeToWindow = function() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  return canvas.hyp = hypotenuse(canvas.width, canvas.height);
+})();
+
+window.addEventListener('resize', canvas.sizeToWindow, false);
+
+pegs = function() {
+  var clockwise, dist, endAngle, i, interval, j, radius, rot, startAngle, xo, yo, _i, _j, _ref, _ref1;
+
+  interval = hypotenuse(canvas.height, canvas.width) / 31;
+  radius = interval / 2 - 1;
+  ctx.lineWidth = 1;
+  ctx.lineCap = 'round';
+  ctx.strokeStyle = 'black';
+  ctx.fillStyle = "hsla(0,60%,60%,1)";
+  for (i = _i = -interval, _ref = canvas.width + interval; interval > 0 ? _i < _ref : _i > _ref; i = _i += interval) {
+    for (j = _j = -interval, _ref1 = canvas.height + interval; interval > 0 ? _j < _ref1 : _j > _ref1; j = _j += interval) {
+      rot = now / 111 + rotateTo(Mouse.x - i, j - Mouse.y);
+      dist = distance(i, j, Mouse.x, Mouse.y);
+      xo = sin(j / canvas.height * PI * 22 + now / 55) * radius / 4;
+      yo = cos(i / canvas.width * PI * 22 + now / 77) * radius / 4;
+      ctx.beginPath();
+      startAngle = rot + sin(dist / canvas.hyp * PI * (cos(now / 444) * 4) + now / 99 * PI);
+      endAngle = (rot + 0.1) + sin(dist / canvas.hyp * PI * (cos(now / 333) * 4) - now / 111) * PI / 6;
+      clockwise = startAngle > endAngle ? true : false;
+      ctx.arc(i + xo, j + yo, radius, startAngle, endAngle, clockwise);
+      ctx.closePath();
+      ctx.fillStyle = "hsla(" + ((endAngle - startAngle) / PI * 90 + 240 - now / 3 % 360) + ",100%,50%,1)";
+      ctx.fill();
+    }
+  }
+  return true;
+};
+
+decay = function(context, x, y, w, h, r) {
+  context.save();
+  context.translate(context.canvas.width / 2 + x - w / 2, context.canvas.height / 2 + y - h / 2);
+  context.rotate(r);
+  context.drawImage(context.canvas, -context.canvas.width / 2, -context.canvas.height / 2, context.canvas.width + w, context.canvas.height + h);
+  return context.restore();
+};
+
+(animloop = function() {
+  animloop.id = requestAnimationFrame(animloop);
+  now = (Date.now() - start) / 32;
+  ctx.fillStyle = 'hsla(0,0%,0%,0.1)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  return pegs();
+})();
+</script>
+<script type="text/html" id="template">
+<div id="curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);"></div>
+<div id="outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div>
+<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;width:300px; padding: 4px;">
+  frames <input type="text" id="framecount" value="30" style="width:30px;">
+  delay <input type="text" id="framedelay" value="0.06s" style="width:30px;">
+  <button id="record" disabled>record</button>
+  <button id="save" disabled>save</button>
+  <span id="status"></span>
+  <div id="preview"></div>
+</div>
+</script>
+<script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/client.js"></script>
+<script type="text/javascript">
+(function(){
+  var canvases = document.getElementsByTagName("canvas")
+  if (canvases.length == 0) { alert("no canvas found"); return; }
+
+  var source = canvases[0]
+
+  var encoder = new GifEncoder()
+  encoder.on("encoded-frame", encoded_frame)
+  encoder.on("rendered", rendered_bytes)
+  encoder.on("rendered-url", rendered_url)
+
+  var w, h, x, y;
+  var last_t, frame_t, count, delay, done;
+  var frames = []
+  var curtain, outline
+  var dragging = false
+  var lastGif
+
+  init()
+  function init(){
+    document.body.style.width = "100%"
+    document.body.style.height = "100%"
+    document.body.parentNode.style.width = "100%"
+    document.body.parentNode.style.height = "100%"
+    var template = document.getElementById("template").innerHTML
+    var el = document.createElement("div")
+    el.innerHTML = template
+    document.body.appendChild(el)
+    bind()
+  }
+  function bind(){
+    curtain = document.getElementById("curtain")
+    outline = document.getElementById("outline")
+    controls = document.getElementById("outline")
+    document.getElementById("record").addEventListener("click", record, false)
+    document.getElementById("save").addEventListener("click", save, false)
+    curtain.addEventListener("mousedown", box_start, false)
+    curtain.addEventListener("mousemove", box_size, false)
+    curtain.addEventListener("mouseup", box_end, false)
+    outline.style.display = "none"
+    controls.style.display = "none"
+  }
+  function box_start(e){
+    x = e.pageX
+    y = e.pageY
+    w = 1
+    h = 1
+    dragging = true
+    outline.style.left = px(x-1)
+    outline.style.top = px(y-1)
+    outline.style.width = px(w)
+    outline.style.height = px(h)
+    outline.style.display = "block"
+  }
+  function box_size(e){
+    if (! dragging) return
+    w = e.pageX - x
+    h = e.pageY - y
+    outline.style.width = px(w)
+    outline.style.height = px(h)
+  }
+  function box_end(e){
+    dragging = false
+    controls.style.display = "block"
+    enable("record")
+  }
+  function enable(id){ document.getElementById(id).removeAttribute("disabled") }
+  function disable(id){ document.getElementById(id).setAttribute("disabled","disabled") }
+  function px(n){ return n + "px" }
+  function record(){
+    count = parseInt(document.getElementById("framecount").value)
+    delay = parseFloat(document.getElementById("framedelay").value) * 1000
+    done = 0
+    frame_t = 0
+    build()
+    capture()
+    last_t = +new Date()
+    requestAnimationFrame(recordloop)
+    status("recording")
+  }
+  function recordloop(){
+    var canvas = document.createElement("canvas")
+    var t = +new Date()
+    frame_t += t - last_t
+    last_t = t
+    if (frame_t > delay) {
+      frame_t -= delay
+      capture()
+    }
+    if (done == count) {
+      render()
+    }
+    else {
+      requestAnimationFrame(recordloop)
+    }
+  }
+  function build(){
+    frames = new Array(count)
+    for (var i = 0; i < count; i++){
+      frames[i] = document.createElement("canvas")
+      frames[i].height = h
+      frames[i].width = w
+    }
+  }
+  function capture(){
+    var frame = frames[done++]
+    var ctx = frame.getContext('2d')
+    ctx.fillStyle = document.body.backgroundColor
+    ctx.fillRect(0,0,w,h)
+    ctx.drawImage(source, 0, 0, w, h, x, y, w, h)
+  }
+  function render(){
+    encoder.reset()
+    encoder.addFrames(frames, delay)
+    status("encoding")
+    try {
+      encoder.encode()
+    }
+    catch (e) {
+      rendering = false
+      status(e)
+      throw e
+    }
+  }
+  function status(s){
+    document.getElementById("status").innerHTML = s
+  }
+  function encoded_frame(done,count){
+    status("encoded " + done + " / " + count)
+  }
+  function rendered_bytes(bytes){
+    status(filesize(bytes.length))
+  }
+  function rendered_url(url){
+    var image = new Image ()
+    lastGif = image.src = url
+    document.getElementById("preview").innerHTML = ""
+    document.getElementById("preview").appendChild(image)
+    rendering = false
+  }
+  function save(){
+  }
+})()
+</script>
+</body>
+</html>
+
author	jules <jules@okfoc.us>	2013-12-18 19:00:31 -0500
committer	jules <jules@okfoc.us>	2013-12-18 19:00:31 -0500
commit	0aff8a87124d7925172c40acfa65f7349f89d49b (patch)
tree	07ecfda9c606a5c06ae7b8330d4ce679345cbf60
parent	1af02407044e53bc6100a45ff6d31cf8cd22f439 (diff)