makin a gif from a canvas animation

1 files changed, 14 insertions, 3 deletions

diff --git a/noisia.html b/noisia.html
index 3e474e9..39168ac 100644
--- a/noisia.html
+++ b/noisia.html
@@ -168,7 +168,7 @@ decay = function(context, x, y, w, h, r) {
 <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;">
+<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;cursor:default;">
   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>
@@ -246,6 +246,7 @@ decay = function(context, x, y, w, h, r) {
     dragging = false
     controls.style.display = "block"
     enable("record")
+    document.getElementById("record").focus()
   }
   function enable(id){ document.getElementById(id).removeAttribute("disabled") }
   function disable(id){ document.getElementById(id).setAttribute("disabled","disabled") }
@@ -290,14 +291,14 @@ decay = function(context, x, y, w, h, r) {
     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)
+    ctx.drawImage(source, x, y, w, h, 0, 0, w, h)
   }
   function render(){
     encoder.reset()
     encoder.addFrames(frames, delay)
     status("encoding")
-    try {
       encoder.encode()
+    try {
     }
     catch (e) {
       rendering = false
@@ -323,6 +324,16 @@ decay = function(context, x, y, w, h, r) {
   }
   function save(){
   }
+  function filesize(n) {
+    if (n < 1e3) return n + " bytes"
+    if (n < 1e6) return decimalString(n/1e3) + " kb"
+    if (n < 1e9) return decimalString(n/1e6) + " mb"
+    return "WAY TOO BIG DUDE"
+  }
+  function decimalString(n){
+    var m = Math.floor(n);
+    return m + "." + Math.round((n-m)*10)
+  }
 })()
 </script>
 </body>