shader-cam

author: jules <jules@okfoc.us> 2014-07-30 09:34:57 -0400
committer: jules <jules@okfoc.us> 2014-07-30 09:34:57 -0400
commit: b2375e11e2c9eee9d09bf30fd5ec8e900023c46f (patch)
tree: 999a1d4b1a7df077ae7f1ba0e4e29033ed38114d
parent: 28b6a443dd5760829fced2fae54ef8e02566ba7d (diff)
4 files changed, 258 insertions, 1 deletions
diff --git a/js/camera.js b/js/camera.js
new file mode 100644
index 0000000..3a0c8b4
--- /dev/null
+++ b/js/camera.js
@@ -0,0 +1,61 @@
+var camera = (function(){
+	var loaded = false, video
+
+	navigator.getMedia = ( navigator.getUserMedia ||
+												 navigator.webkitGetUserMedia ||
+												 navigator.mozGetUserMedia ||
+												 navigator.msGetUserMedia);
+
+  if (! navigator.getMedia) {
+    $("#camera").hide()
+    return
+  }
+
+	$("#camera").click(load)
+	function load(){
+		if (! loaded) {
+			build()
+		}
+		else {
+			ready()
+		}
+		window.gif = window.img = null
+	}
+
+	function ready(){
+		cc.canvas.width = actual_w = w = min(video.videoWidth, 400)
+		cc.canvas.height = actual_h = h = video.videoHeight / (video.videoWidth/w)
+		video.setAttribute('width', video.videoWidth)
+		video.setAttribute('height', video.videoHeight)
+		window.gif = window.img = null
+		window.cam = video
+	}
+	
+	function build(){
+		video = document.createElement("video")
+		navigator.getMedia({
+				video: true,
+				audio: false
+			},
+			function(stream) {
+				if (navigator.mozGetUserMedia) {
+					video.mozSrcObject = stream;
+				} else {
+					var vendorURL = window.URL || window.webkitURL;
+					video.src = vendorURL.createObjectURL(stream);
+				}
+				video.play();
+			},
+			function(err) {
+				console.log("An error occured! " + err);
+			}
+		)
+
+		video.addEventListener('canplay', function(ev){
+			if (! loaded) {
+				loaded = true
+				ready()
+			}
+		}, false);
+	}
+})()
diff --git a/js/image.js b/js/image.js
index 27b5c2c..d02673e 100644
--- a/js/image.js
+++ b/js/image.js
@@ -5,7 +5,7 @@ function loadImage(imageURL, callback) {
   var imageURL = proxify( imageURL );
   window.imageURL = imageURL
 
-  window.gif = window.img = null
+  window.gif = window.img = window.cam = null
 
 	if (! imageURL) {
 		window.gif = null
diff --git a/js/render.js b/js/render.js
index e77711e..a589efc 100644
--- a/js/render.js
+++ b/js/render.js
@@ -74,6 +74,9 @@ function giveFrame(t){
 	if (window.img) {
 		return img_frame
 	}
+	else if (window.cam) {
+		return camera_frame()
+	}
 	else {
 		return empty_frame()
 	}
@@ -90,6 +93,11 @@ function feedback_frame(){
 	return { ctx: cc.context, cloneData: cc.getImageData(0,0,w,h) }
 }
 
+function camera_frame(){
+	var cx = cq(w, h).drawImage(cam, 0, 0, w, h)
+	return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
+}
+
 function reset(){
 	start_t = old_t
 	pause_t = 0
diff --git a/shader-cam.html b/shader-cam.html
new file mode 100644
index 0000000..1bf34e0
--- /dev/null
+++ b/shader-cam.html
@@ -0,0 +1,188 @@
+<!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 { font-weight: bold; }
+#render { float: right; }
+#commands { 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; }
+#commands iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#commands.dragging iframe { pointer-events: none; }
+#commands .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>
+		<button id="camera">CAMERA</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="show-commands">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="upload" disabled>upload</button>
+	<br>
+	<input type="text" id="uploaded-url">
+</div>
+
+<div id="commands"><iframe src="commands.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/acorn.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/api/localstorage.js"></script>
+<script type="text/javascript" src="js/error.highlight.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/camera.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/save.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="js/help.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
+
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</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)
+	$(document).on("mousemove", function(e) {
+		mousex = e.pageX
+		mousey = e.pageY
+	})
+
+	$("#background").change(function(){
+		document.body.style.backgroundColor = $("#background").string()
+	})
+	
+	frame_editor.init()
+	help.init()
+	load()
+
+	gallery.init(choose)
+
+	user.init()
+	if (user.username.length) {
+		console.log("signed in as", user.username)
+	}
+
+	local_shaders.init()
+	local_shaders.loadLastAccessed()
+
+	document.getElementById('shader').addEventListener('input', shader_build);
+	shader_build()
+
+	requestAnimationFrame(animate)
+}
+
+</script>
+</html>
+
author	jules <jules@okfoc.us>	2014-07-30 09:34:57 -0400
committer	jules <jules@okfoc.us>	2014-07-30 09:34:57 -0400
commit	b2375e11e2c9eee9d09bf30fd5ec8e900023c46f (patch)
tree	999a1d4b1a7df077ae7f1ba0e4e29033ed38114d
parent	28b6a443dd5760829fced2fae54ef8e02566ba7d (diff)