mergin again

Merge branch 'master' of ghghgh.us:/home/git/dither into pepper
author: pepper <peppersclothescult@gmail.com> 2014-01-21 00:56:21 -0800
committer: pepper <peppersclothescult@gmail.com> 2014-01-21 00:56:21 -0800
commit: 6671e52efea7bf4ee8e45c500166fbc8d865bbdb (patch)
tree: edf17796610012a534e090c06ba7b83c9b4037d6
parent: f850411f437d3eb9cb1d37456d0eab29a9358918 (diff)
parent: 60a5e5581ccbf05170ccd6bab292562c460a42c2 (diff)
9 files changed, 605 insertions, 381 deletions
diff --git a/dither-localstorage.html b/dither-localstorage.html
new file mode 100644
index 0000000..5e9bff9
--- /dev/null
+++ b/dither-localstorage.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html>
+<head>
+<title>Dither</title>
+<style>
+  form { display: inline-block; }
+  #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; }
+</style>
+</head>
+<body>
+
+<div id="gallery">
+  <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 id="status"></span>
+  <div id="gallery-images"></div>
+</div>
+
+<div id="dither">
+<button id="random">random</button>
+<button id="pattern2">pattern2</button>
+<button id="pattern3">pattern3</button>
+<button id="pattern4">pattern4</button>
+<button id="pattern2Lite">pattern2lite</button>
+<button id="pattern3Lite">pattern3lite</button>
+<button id="pattern4Lite">pattern4lite</button>
+<button id="floydSteinberg">floyd-steinberg</button>
+<button id="right">right</button>
+</div>
+<div id="images"></div>
+
+
+</body>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/vendor/gif.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">
+
+var algo = 'random';
+var url = "img/abyss.png";
+var imgs = []
+var anim = []
+var complete = 0
+var viewport = cq(100, 100)
+$("#images").append(viewport.canvas)
+
+var ui = function(){}
+
+ui.init = function(){
+  gallery.choose = ui.choose
+  gallery.init()
+  ui.bind()
+  ui.animate()
+  asdf.random()
+}
+
+ui.bind = function(){
+  var buttons = $("#dither button")
+  for (var i = 0; i < buttons.length; i++) {
+    (function(n){
+      buttons[n].onclick = function(){
+        algo = buttons[n].id;
+        ui.build()
+      }
+    })(i)
+  }
+}
+
+ui.choose = function(){
+  status("loading image..")
+  loadImage( this.src, ui.ready );
+}
+
+ui.ready = function(){
+  status("ready")
+  loading = false
+  if (window.gif) {
+    frames = gif.frames
+  }
+  else {
+    fc = cq(img.width, img.height)
+    fc.drawImage(img, 0, 0)
+    frames = [ { ctx: fc.context } ]
+  }
+  w = viewport.canvas.width = frames[0].ctx.canvas.width
+  h = viewport.canvas.height = frames[0].ctx.canvas.height
+  ui.build()
+}
+
+ui.build = function (){
+  anim = []
+  for (var i in frames) {
+    anim.push( ui.dither(frames[i].ctx).context )
+  }
+}
+
+ui.animate = function(t){
+  requestAnimationFrame(ui.animate)
+  if (! anim.length) return;
+  
+  if (window.gif && window.gif.currentFrame) {
+    var idx = gif.currentFrame(t)
+    var frame = anim[idx]
+  }
+  else {
+    var frame = anim[0]
+  }
+  viewport.clearRect(0,0,w,h).drawImage(frame.canvas, 0, 0, w, h);
+}
+
+ui.dither = function (frame){
+  var cc = cq(w, h)
+  cc.drawImage(frame.canvas, 0, 0, w, h);
+  cc[algo + "Dither"]( )
+  return cc
+}
+
+function status(s){ $("#status").html(s); console.log(s) }
+
+$(ui.init)
+
+</script>
+</html>
+
diff --git a/cgi-bin/shader_api.js b/js/api/get.js
index dd43130..ae06dbd 100644
--- a/cgi-bin/shader_api.js
+++ b/js/api/get.js
@@ -31,6 +31,10 @@ ShaderAPI.range = function(limit, offset, cb){
 // latest - get the latest N shaders
 //   limit: number of shaders to fetch
 ShaderAPI.latest = function(limit, cb){
+	if (! cb) {
+		cb = limit
+		limit = ShaderAPI.limit
+	}
   ShaderAPI.fetch({
     f: "range",
     limit: limit || ShaderAPI.limit
@@ -66,7 +70,7 @@ ShaderAPI.username = function(username, cb){
 }
 
 // list_users - list all users
-ShaderAPI.list_users = function(list_users, cb){
+ShaderAPI.list_users = function(cb){
   ShaderAPI.fetch({
     f: "list_users"
   }, cb)
@@ -81,12 +85,17 @@ ShaderAPI.originals = function(cb){
 
 // fetch - AJAX wrapper
 ShaderAPI.fetch = function(params, cb){
-  $.getJSON("/cgi-bin/im/shader/view", params, function(data){
-    if (data.SUCCESS) {
-      cb(null, data.data)
-    }
-    else if (data.ERROR) {
-      cb(data.ERROR, data.data)
-    }
+  $.ajax({
+  	url: "http://asdf.us/cgi-bin/im/shader/view",
+  	data: params,
+  	dataType: "jsonp",
+  	success: function(data){
+			if (data.SUCCESS) {
+				cb(null, data.data)
+			}
+			else if (data.ERROR) {
+				cb(data.ERROR, data.data)
+			}
+		}
   })
 }
diff --git a/cgi-bin/javascript_example.js b/js/api/set.js
index 1e7e31f..1e7e31f 100644
--- a/cgi-bin/javascript_example.js
+++ b/js/api/set.js
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)
+    }
+  });
+}
diff --git a/js/render.js b/js/render.js
new file mode 100644
index 0000000..fdb0125
--- /dev/null
+++ b/js/render.js
@@ -0,0 +1,106 @@
+var frame, img_frame;
+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 choose (){
+  imageURL = this.src
+  loading = true
+  $("#url").val(imageURL)
+  loadImage(imageURL, ready)
+}
+function load(){
+  loading = true
+  var imageURL = $("#url").val()
+  loadImage(imageURL, ready)
+}
+
+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 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 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)
+}
+
+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)
+}
+
+function status(s){ $("#status").html(s); console.log(s) }
diff --git a/js/shader.js b/js/shader.js
index 2f5fda1..19c049b 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -1,6 +1,6 @@
 var shader_build = function(){
   var fn_str = document.getElementById('shader').value
-  if (!fn_str.length) return
+  if (!fn_str.length) fn_str = ""
   try {
     var fn = new Function('x','y','t','d', fn_str)
     shader = fn
diff --git a/shader-animate.html b/shader-animate.html
index 80d71aa..6591d6d 100644
--- a/shader-animate.html
+++ b/shader-animate.html
@@ -33,6 +33,8 @@ delay <input type="text" id="delay" value="60">
 <script type="text/javascript" src="js/canvasquery.dither.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/render.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript">
 
@@ -43,67 +45,22 @@ $(init)
 
 function init(){
   $("#url").change(load)
-  $("#demo").click(function(){ demo("#first") })
-  $("#dither-demo").click(function(){ demo("#second") })
-  demo('#first')
+  $("#demo").click(function(){ run("#first") })
+  $("#dither-demo").click(function(){ run("#second") })
+  run('#first')
+
   load()
-  draw()
-}
-function demo(el){
-  $el = $(el)
-  s = $el.html()
-  $("#shader").html(s)
-}
-function load(){
-  loading = true
-  var imageURL = $("#url").val()
-  loadImage(imageURL, ready)
-}
 
-var frame;
-function ready(){
-  loading = false
-  if (window.gif) {
-    frame = gif.frames[0]
-  }
-  else {
-    fc = cq(img.width, img.height)
-    fc.drawImage(img, 0, 0)
-    frame = { ctx: fc.context }
-  }
-  w = cc.canvas.width = frame.ctx.canvas.width
-  h = cc.canvas.height = frame.ctx.canvas.height
-}
+  document.getElementById('shader').addEventListener('input', shader_build);
+  shader_build()
 
-var timeout = null;
-function draw(t){
-  requestAnimationFrame(draw);
-  shade(frame, t)
+  requestAnimationFrame(animate)
 }
-function shade(frame, t){
-  try {
-    if (window.gif) frame = giveImage()
-    var f = $("#shader").val()
-    if (!f.length) return;
-    var shader = new Function('x','y','t', f)
-    var imageData = frame.ctx.getImageData(0,0,w,h)
-    var data = imageData.data
-    for (var x = 0; x < w; x++) {
-      for (var y = 0; y < h; y++) {
-        q = 4*(y*w+x)
-        r = data[q], g = data[q+1], b = data[q+2], a = data[q+3]
-        result = shader(x,y,t)
-        data[q] = r
-        data[q+1] = g
-        data[q+2] = b
-        data[q+3] = a
-      }
-    }
-    cc.putImageData(imageData,0,0)
-  }
-  catch (e){
-    console.log(e)
-  }
+function run(el){
+	$el = $(el)
+	s = $el.html()
+	$("#shader").html(s)
+	shader_build()
 }
 
 </script>
diff --git a/shader-api.html b/shader-api.html
new file mode 100644
index 0000000..9020136
--- /dev/null
+++ b/shader-api.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html>
+<head>
+<style type="text/css">
+#url { width: 300px; }
+#width,#height,#frames,#delay {width: 30px; }
+#shader { width: 400px; height: 247px; font-family: fixed; }
+div { float: left; padding: 10px;}
+form { display: inline-block; }
+#shader-api,#gallery { clear: right; width:100%; padding: 0; }
+#shader-gallery,#gallery-images { display: block; max-height: 210px; overflow-y: auto; width: 100%; }
+#shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; }
+.shader {
+	width: 100px;
+}
+#username { width: 40px; }
+a { color: #00f; }
+#shader-id { width: 40px; }
+</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="shader-api">
+	<input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button>
+	<button id="fetch-history" disabled>history</button>
+	|
+	<button id="fetch-originals" disabled>originals</button>
+	<button id="fetch-all">all</button>
+	<button id="fetch-latest">latest</button>
+	<button id="fetch-next-page" disabled>next page</button>
+	<select id="pick-user">
+		<option>fetching users..</option>
+	</select>
+	
+	<div id="shader-gallery">
+	</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>
+
+</div>
+
+<div id="workspace"></div>
+
+</body>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/vendor/gif.js"></script>
+<script type="text/javascript" src="js/util.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/gallery.js"></script>
+<script type="text/javascript" src="js/render.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/api/get.js"></script>
+<script type="text/javascript" src="js/api/set.js"></script>
+<script type="text/html" id="shader-gallery-template">
+<img src="{thumbnail_url}">
+{username}
+</script>
+<script type="text/javascript">
+
+var cc = cq(0,0).appendTo("#workspace")
+var w, h
+
+$(init)
+
+function init(){
+  $("#url").change(load)
+//   run('#first')
+
+// 	$("#shader-id")
+//	$("#fetch-info")
+	$("#fetch-all").click(function(){
+		ShaderAPI.all(load_shaders)
+	})
+	$("#fetch-latest").click(function(){
+		ShaderAPI.latest(load_shaders)
+	}).trigger("click")
+// 	$("#fetch-next-page")
+// 	$("#fetch-history")
+
+	function load_shaders(err, shaders){
+		var $el = $("#shader-gallery").empty()
+		var template = $("#shader-gallery-template").html()
+
+		for (var i in shaders) {
+			var $shader = $("<div>").addClass("shader")
+			$shader.data("shader", shaders[i])
+			var html = template
+			for (var field in shaders[i]) {
+				html = html.replace("{" + field + "}", shaders[i][field])
+			}
+			$shader.html(html)
+
+			$el.append( $shader )
+		}
+	}
+
+	ShaderAPI.list_users(function(err, users){
+		var $el = $("#pick-user").empty()
+		for (var i in users) {
+			var $option = $("<option>")
+			var username = users[i].username
+			$option.val(username).html(username)
+			$el.append( $option )
+		}
+	})
+	
+	$(document).on("change", "#pick-user", function(){
+		var name = $(this).val()
+		ShaderAPI.username(name, load_shaders)
+	})
+	$(document).on("click", ".shader", function(){
+		run( $(this).data("shader") )
+	})
+
+  load()
+
+  document.getElementById('shader').addEventListener('input', shader_build);
+  shader_build()
+
+  requestAnimationFrame(animate)
+}
+function run(shader_object){
+	console.log(shader_object)
+	$("#url").val( shader_object.image_url )
+	$("#shader").html(shader_object.script)
+	$("#shader-id").val(shader_object.id)
+	load()
+	shader_build()
+}
+
+</script>
+</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; }
 <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/frames.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/render.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>
@@ -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>")
-      $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 (){
-  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	pepper <peppersclothescult@gmail.com>	2014-01-21 00:56:21 -0800
committer	pepper <peppersclothescult@gmail.com>	2014-01-21 00:56:21 -0800
commit	6671e52efea7bf4ee8e45c500166fbc8d865bbdb (patch)
tree	edf17796610012a534e090c06ba7b83c9b4037d6
parent	f850411f437d3eb9cb1d37456d0eab29a9358918 (diff)
parent	60a5e5581ccbf05170ccd6bab292562c460a42c2 (diff)