pull out frames editor, main render loop

1 files changed, 170 insertions, 0 deletions

diff --git a/js/frames.js b/js/frames.js
new file mode 100644
index 0000000..0ae256c
--- /dev/null
+++ b/js/frames.js
@@ -0,0 +1,170 @@
+
+function add_frame(){
+  var frame_count = $("#framecount").int()
+  if (frame_count < 2) {
+    add_single_frame()
+  }
+  else {
+    add_frames(frame_count)
+  }
+}
+function add_single_frame(){
+  var $el = $("<div>")
+  $el.html( $("#frame-template").html() )
+  $el.attr('index', $("#frames div").length)
+  var frame = cc.clone().appendTo($el.find(".frame")[0])
+  frame.canvas.className = "fullsize"
+  frame.canvas.style.display = "none"
+  var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0])
+  $("#frames").append($el)
+  $("#render").enable()
+}
+function add_frames(frame_count){
+  rendering = true
+  var t = old_t - start_t - pause_t
+  var frame_delay = $("#frameinterval").float() * 1000
+  var frame
+  for (var i = 0; i < frame_count; i++) {
+    frame = giveFrame(t)
+    t += frame_delay
+    shade(frame, t)
+    add_single_frame()
+  }
+  rendering = false
+}
+function remove_frame(){
+  $(this).closest("div").remove()
+  if ($("#frames div").length == 0) {
+    $("#render").disable()
+  }
+}
+function remove_all_frames(){
+  $("#frames").empty()
+}
+function shuffle_frames(){
+  var shuffled = []
+  var $frames = $("#frames div")
+  $("#frames").empty().append(shuffle($frames))
+}
+function reverse_frames(){
+  var $frames = $("#frames div")
+  $("#frames").empty().append(reverse($frames))
+}
+function weave_frames(){
+  var $frames = $("#frames div")
+  $("#frames").empty().append(weave($frames))
+}
+function sort_frames(){
+  var $frames = $("#frames div")
+  var sorted = $frames.map(function(i,el){ console.log(i,el); return [[ el.getAttribute('index'), el ]] })
+                     .sort(function(a,b){ return a[0]-b[0] })
+                     .map(function(i,e){ console.log( e ); return e[1] })
+  $("#frames").empty().append(sorted)
+}
+
+function render (){
+  if (rendering) return
+  rendering = true
+  encoder.reset()
+  var delay = $("#framedelay").float() * 1000 || 100
+  $("#frames canvas.fullsize").each(function(){
+    var frame = cq(this.width, this.height).fillStyle($("#background").string()).fillRect(0,0,this.width, this.height).drawImage(this,0,0)
+    encoder.addFrame(frame.canvas, delay)
+  })
+  $("#pause,#render,#add-frame").disable()
+  $("#rendered").find("img").remove()
+  $("#rendered").show()
+  // really bad results with neuquant?
+  // status("quantizing")
+  // encoder.quantize()
+  status("encoding")
+  try {
+    encoder.encode()
+  } catch (e) {
+    $("#pause,#render,#add-frame").enable()
+    rendering = false
+    status(e)
+    throw e
+  }
+  $("#render").html("rendering")
+}
+
+function status(s){ $(".status").html(s) }
+
+var encoder = new GifEncoder()
+
+encoder.on("quantized", function(url){
+  status("encoding")
+  encoder.encode()
+})
+
+encoder.on("encoded-frame", function(done,count){
+  status("encoded " + done + " / " + count)
+})
+
+encoder.on("rendered", function(bytes){
+  status(filesize(bytes.length))
+})
+
+encoder.on("rendered-url", function(url){
+  var image = new Image ()
+  lastGif = image.src = url
+  $("#rendered").append(image)
+  $("#uploaded-url").hide().val("")
+  $("#save,#upload,#rendered").show()
+  $("#pause,#render,#add-frame,#save,#upload").enable()
+  $("#render").html("render")
+  rendering = false
+  pause(true)
+})
+
+function get_filename(){
+  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
+  var username = user.username
+  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
+  return filename.replace(/ /g,"_").replace(/-+/g,"-")
+}
+function save (){
+  if (! lastGif) return;
+  var filename = get_filename()
+  var blob = dataUriToBlob(lastGif)
+  saveAs(blob, filename);
+}
+function saveJSON (data, filename) {
+  var bytes = JSON.stringify(data)
+  var buf = new ArrayBuffer(bytes.length);
+  var arr = new Uint8Array(buf);
+  for (var i = 0; i < bytes.length; i++) {
+    arr[i] = bytes.charCodeAt(i);
+  }
+
+  var blob = new Blob([arr], { type: "text/json" });
+  blob.slice = blob.slice || blob.webkitSlice;
+  
+  saveAs(blob, filename);
+}
+
+function upload(){
+  var filename = get_filename()
+  var username = user.username
+  var blob = dataUriToBlob(lastGif)
+  uploadImage({
+    blob: blob,
+    filename: filename,
+    username: username,
+    success: function(data){
+    
+      // data.url
+      // data.filesize
+      // data.success
+
+      console.log(data);
+      status("uploaded");
+      $("#uploaded-url").show().focus().val(data.url)
+    },
+    error: function(data){
+      console.log(data)
+      status("error uploading: " + data.error)
+    }
+  });
+}