shader-pepper

author: Jules <jules@asdf.us> 2014-01-29 10:24:21 -0500
committer: Jules <jules@asdf.us> 2014-01-29 10:24:21 -0500
commit: 7c5471a15b608f8ed1b3ae8f79cb383696e6c2dc (patch)
tree: 377c994cad4054de4feb4f0b113f0f3bcb6c7bb8
parent: eb8ecd371955adaa45feec7b902ac16af75319ef (diff)
1 files changed, 558 insertions, 0 deletions
diff --git a/shader-pepper.html b/shader-pepper.html
new file mode 100644
index 0000000..6e22dc1
--- /dev/null
+++ b/shader-pepper.html
@@ -0,0 +1,558 @@
+<!doctype html>
+<html>
+<head>
+<title>Shader</title>
+<style type="text/css">
+html,body { margin: 0; padding: 0; }
+#url { width: 450px; }
+#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; }
+#shader { width: 100%; height: 247px; font-family: fixed; }
+#controls { width: 450px; }
+#frames { width: 435px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
+#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
+.dragging { cursor: -webkit-grabbing !important; }
+.ui-sortable-helper { cursor: -webkit-grabbing !important; }
+#frames canvas { display: block }
+#frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+.paused { background: black; color: white; border-width: 1px; padding: 1px 3px 2px 4px; outline: 0 !important; }
+.active { background: black; color: white; border-width: 1px; padding: 1px 4px 2px 4px; outline: 0 !important; }
+div { display: inline-block; padding: 10px;}
+#gallery,#controls,#workspace,#rendered{ float: left; }
+#rendered img { display: block; }
+#render,#save, #save_shader { font-weight: bold; }
+#render { float: right; }
+#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#instructions.dragging iframe { pointer-events: none; }
+#instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+.close,.remove { cursor: pointer; }
+#uploaded-url { display: none; width: 300px; }
+form { display: inline-block; }
+#gallery { clear: right; width:100%; padding: 0; }
+#gallery-images { display: block; max-height: 210px; overflow-y: auto; }
+#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; }
+#username { width: 40px; }
+a { color: #00f; }
+</style>
+</head>
+<body>
+<div id="gallery">
+  <div id="gallery-form">
+    <form id="gallery-search">
+      <input type="text" id="dumpfm-search-query" value="duck bill">
+      <button id="gallery-search">DUMP SEARCH</button>
+    </form>
+    <button id="gallery-random">IM RANDOM</button>
+    <span class="status"></span>
+  </div>
+  <div id="gallery-images"></div>
+</div>
+
+<div id="controls">
+
+  <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
+  <br>
+  <br>
+
+  <textarea id="shader"></textarea>
+  <br>
+  <br>
+
+  frames <input type="text" id="framecount" value="1">
+  interval <input type="text" id="frameinterval" value="0.1s">
+  <button id="add-frame">+add frame</button>
+  <button id="remove-all-frames">clear</button>
+  <button id="render" disabled>render</button>
+  <br>
+  reorder:
+  <button id="weave-frames">weave</button>
+  <button id="shuffle-frames">shuffle</button>
+  <button id="reverse-frames">reverse</button>
+  <button id="sort-frames">sort</button>
+  
+  <div id="frames"></div>
+  <br>
+  <br>
+
+  gif delay <input type="text" id="framedelay" value="0.06s">
+  background <input type="text" id="background" value="#fff">
+  your name here &rarr; <input type="text" id="username" value="">
+  <br>
+  <br>
+  <button id="help">help</button>
+  &nbsp;
+  <button id="add-shader">+</button>
+  <button id="remove-shader">&times;</button>
+  &nbsp;
+  <span id="shaders"></span>
+  <br>
+  <br>
+  <a href="http://asdf.us/im/gallery/?tag=shader" target="_blank">Photoblaster Gallery</a>
+</div>
+
+<div id="workspace"></div>
+
+<div id="rendered">
+  <button id="reset">reset</button>
+  <button id="pause">pause</button>
+  <button id="step-forward">&gt;&gt;</button>
+  <span class="status"></span>
+  <button id="save" disabled>save</button>
+  <button id="save_shader" >save shader</button>
+  <button id="upload" disabled>upload</button>
+  <br>
+  <input type="text" id="uploaded-url">
+</div>
+
+<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
+</body>
+<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" src="js/vendor/gif.js"></script>
+<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
+<script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
+<script type="text/javascript" src="js/color.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/user.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
+<script type="text/javascript">
+
+var cc = cq(0,0).appendTo("#workspace")
+var w, h
+var lastGif
+
+$(init)
+
+var mousex, mousey
+
+function init(){
+  $("#url").change(load)
+  $("#reset").click(reset)
+  $("#pause").click(pause)
+  $("#step-forward").click(step_forward)
+  $("#add-frame").click(add_frame)
+  $("#frames").sortable({
+    start: drag_start,
+    stop: drag_stop
+  });
+  $(document).on("mousemove", function(e) {
+    mousex = event.pageX
+    mousey = event.pageY
+  })
+  $(document).on("click","#frames .remove",remove_frame)
+  $("#framecount").change(function(){
+    var val = $(this).int()
+    if (val < 1 || isNaN(val)) $(this).val(val = 1)
+    if (val == 1) $("#add-frame").html("+add frame")
+    else $("#add-frame").html("+add frames")
+  })
+  $("#background").change(function(){
+    document.body.style.backgroundColor = $("#background").string()
+  })
+  $("#frames").disableSelection();
+  $("#remove-all-frames").click(remove_all_frames)
+  $("#weave-frames").click(weave_frames)
+  $("#shuffle-frames").click(shuffle_frames)
+  $("#reverse-frames").click(reverse_frames)
+  $("#sort-frames").click(sort_frames)
+
+  $("#render").click(render)
+  $("#save").click(save)
+  $("#save_shader").click(save_shader)
+  $("#upload").click(upload)
+  $("#help,#instructions .close").click(function(){ $("#instructions").toggle() })
+  $("#instructions").draggable({
+    start: drag_start,
+    stop: drag_stop
+  })
+  $("#instructions").disableSelection();
+
+  load()
+  $(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
+
+  gallery.choose = choose
+  gallery.init()
+
+  user.init()
+  if (user.username.length) {
+    console.log("signed in as", user.username)
+  }
+
+  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>")
+      $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 = $("<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_shader(){
+    typeof shader_id_root == 'undefined' ? shader_id_root = "" : shader_id_root
+    var params = {
+      script : $("#shader").val(),
+      image_url : $("#url").val(),
+      username : user.username,
+      shader_id : shader_id_root 
+    }
+    
+    console.log(params)
+    $.post("/cgi-bin/im/shader/save", params, function(resp){
+      console.log(resp);
+      data = JSON.parse(resp)
+      if (data.ERROR ){
+        alert(data.ERROR)
+        return false
+      }
+      if (! shader_id_root) {
+        shader_id_root = data.id;
+      }
+      var blob = dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png"))
+      var form = new FormData();
+  
+      form.append("id", data.id);
+      form.append("qqfile", blob);
+      $.ajax({
+        url: "/cgi-bin/im/shader/thumbnail_upload",
+        type: "POST",
+        data: form,
+        processData: false,
+        contentType: false,
+      }).done(function(resp){
+        if (! resp) { console.log("nope") }
+        console.log(resp);
+      });
+
+    })
+    //maintain the shader_id_root...
+    return shader_id_root; 
+}
+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)
+    }
+  });
+}
+
+</script>
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</script>
+<script type="text/javascript-shader" id="first">
+
+u = x + t/10
+v = y * sin(b/100)
+
+rgbpixel(d,u,v)
+
+</script>
+<script type="text/javascript-shader" id="second">
+xx = x, yy = y
+
+var d = ((x % 2) + 2 * (y % 2)) - 2
+
+x += w/2
+y -= h/2
+t/=-200
+y/=96
+x/=50
+v = (Math.sin(t+x*y) + 1.0) / 2
+v = (0.6) * v - 0.4 + Math.random()
+
+v = clamp( v*64 + 128 , 0, 255)
+v += d*32
+if (a == 0) r = g = b = xx/w * 255
+a = v > 128 ? v:0
+
+</script>
+</html>
+
author	Jules <jules@asdf.us>	2014-01-29 10:24:21 -0500
committer	Jules <jules@asdf.us>	2014-01-29 10:24:21 -0500
commit	7c5471a15b608f8ed1b3ae8f79cb383696e6c2dc (patch)
tree	377c994cad4054de4feb4f0b113f0f3bcb6c7bb8
parent	eb8ecd371955adaa45feec7b902ac16af75319ef (diff)