From e3f9a2a3b385382ae72258c216b068a53717c224 Mon Sep 17 00:00:00 2001 From: jules Date: Mon, 20 Jan 2014 22:05:27 -0500 Subject: pull out frames editor, main render loop --- shader-picker.html | 324 ++--------------------------------------------------- 1 file changed, 9 insertions(+), 315 deletions(-) (limited to 'shader-picker.html') diff --git a/shader-picker.html b/shader-picker.html index 59b3e27..d482a6b 100644 --- a/shader-picker.html +++ b/shader-picker.html @@ -119,8 +119,10 @@ a { color: #00f; } + + @@ -139,15 +141,16 @@ function init(){ $("#reset").click(reset) $("#pause").click(pause) $("#step-forward").click(step_forward) + $(document).on("mousemove", function(e) { + mousex = e.pageX + mousey = e.pageY + }) + $("#add-frame").click(add_frame) $("#frames").sortable({ start: drag_start, stop: drag_stop }); - $(document).on("mousemove", function(e) { - mousex = e.pageX - mousey = e.pageY - }) $(document).on("click","#frames .remove",remove_frame) $("#framecount").change(function(){ var val = $(this).int() @@ -158,6 +161,7 @@ function init(){ $("#background").change(function(){ document.body.style.backgroundColor = $("#background").string() }) + $("#frames").disableSelection(); $("#remove-all-frames").click(remove_all_frames) $("#weave-frames").click(weave_frames) @@ -188,329 +192,19 @@ function init(){ user.shaders.init() user.shaders.loadLastAccessed() - - $("#test-js").click(function(){ - var script = $("#shader").val() - var params = {script: script, verbose: 1} - $.post("/cgi-bin/js/test_javascript.py", params, function(data){ - $("pre").remove() - $("#rendered").show() - var $pre = $("
")
-      $pre.html(data)
-      $("#rendered").append($pre)
-      console.log(data)
-    })
-  })
-  
+
   document.getElementById('shader').addEventListener('input', shader_build);
   shader_build()
 
   requestAnimationFrame(animate)
 }
-function choose (){
-  imageURL = this.src
-  loading = true
-  $("#url").val(imageURL)
-  loadImage(imageURL, ready)
-}
-function load(){
-  loading = true
-  var imageURL = $("#url").val()
-  loadImage(imageURL, ready)
-}
-
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
 function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
 
-function reset(){
-  start_t = old_t
-  pause_t = 0
-  pause(false)
-  $("#rendered img").remove()
-  draw(0)
-}
-function pause(state){
-  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
-}
-function step_forward(){
-  var step = $("#framedelay").float() * 1000 || 100
-  old_t += step
-  draw(old_t)
-  pause(true)
-}
-var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
-var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null;
-var fps = 30;
-function animate(t){
-  raf_id = requestAnimationFrame(animate);
-
-  var step_t = t - old_t
-  old_t = t
-  
-  if (paused || dragging || rendering || scrolling || deferring) {
-    pause_t += step_t
-    if (scrolling) {
-      scrolling = false
-      deferring = true
-    }
-    else {
-      deferring = false
-    }
-    return
-  }
-
-  // var timing = +(new Date())
-  draw(t)
-  // timing = +(new Date()) - timing
-  fps = avg(fps, 1000/step_t, 4)
-  status(~~(fps) + " fps")
-}
-function draw(t) {
-  t -= start_t
-  t -= pause_t
-  frame = giveFrame(t)
-  shade(frame, t)
-}
-
-var frame, img_frame;
-function giveFrame(t){
-  if (window.gif) {
-    if (gif.currentFrame) {
-      return gif.frames[gif.currentFrame(t)]
-    }
-    else {
-      return gif.frames[0]
-    }
-  }
-  else if (window.img) {
-    return img_frame
-  }
-  else {
-    return cq(w, h)
-  }
-}
-
-function ready(){
-  loading = false
-  if (window.gif) {
-    frame = gif.frames[0]
-    w = cc.canvas.width = frame.ctx.canvas.width
-    h = cc.canvas.height = frame.ctx.canvas.height
-    for (var i=0, f; f=gif.frames[i]; i++){
-      f.cloneData = f.ctx.getImageData(0,0,w,h)
-    }
-  }
-  else {
-    fc = cq(img.width, img.height)
-    fc.drawImage(img, 0, 0)
-    frame = img_frame = { ctx: fc.context }
-    w = cc.canvas.width = frame.ctx.canvas.width
-    h = cc.canvas.height = frame.ctx.canvas.height
-    frame.cloneData = frame.ctx.getImageData(0,0,w,h)
-  }
-}
-
-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 = $("
")
-  $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)
-    }
-  });
-}
-
 
 
-
-
 
 
-- 
cgit v1.2.3-70-g09d2