From e3f9a2a3b385382ae72258c216b068a53717c224 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Mon, 20 Jan 2014 22:05:27 -0500
Subject: pull out frames editor, main render loop

---
 js/render.js | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 js/render.js

(limited to 'js/render.js')

diff --git a/js/render.js b/js/render.js
new file mode 100644
index 0000000..9d3ab04
--- /dev/null
+++ b/js/render.js
@@ -0,0 +1,103 @@
+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)
+}
-- 
cgit v1.2.3-70-g09d2


From ced1db8df6c73f7bd0a4debd3f20b5570b99e7b4 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Tue, 21 Jan 2014 01:18:36 -0500
Subject: shader loader demo

---
 js/api/get.js   |   6 ++-
 js/render.js    |   5 +-
 shader-api.html | 155 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 164 insertions(+), 2 deletions(-)
 create mode 100644 shader-api.html

(limited to 'js/render.js')

diff --git a/js/api/get.js b/js/api/get.js
index ec269b0..ae06dbd 100644
--- a/js/api/get.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)
diff --git a/js/render.js b/js/render.js
index 9d3ab04..fdb0125 100644
--- a/js/render.js
+++ b/js/render.js
@@ -93,11 +93,14 @@ function animate(t){
   draw(t)
   // timing = +(new Date()) - timing
   fps = avg(fps, 1000/step_t, 4)
-  status(~~(fps) + " fps")
+  // 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/shader-api.html b/shader-api.html
new file mode 100644
index 0000000..284d1a4
--- /dev/null
+++ b/shader-api.html
@@ -0,0 +1,155 @@
+<!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"><button id="fetch-info">info</button>
+	<button id="fetch-all">all</button>
+	<button id="fetch-originals">originals</button>
+	<button id="fetch-latest">latest</button>
+	<button id="fetch-next-page">next page</button>
+	<button id="fetch-history">history</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)
+
+	load()
+	shader_build()
+}
+
+</script>
+</html>
-- 
cgit v1.2.3-70-g09d2