From b2375e11e2c9eee9d09bf30fd5ec8e900023c46f Mon Sep 17 00:00:00 2001 From: jules Date: Wed, 30 Jul 2014 09:34:57 -0400 Subject: shader-cam --- js/camera.js | 61 ++++++++++++++++++ js/image.js | 2 +- js/render.js | 8 +++ shader-cam.html | 188 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 258 insertions(+), 1 deletion(-) create mode 100644 js/camera.js create mode 100644 shader-cam.html 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 @@ + + + +Shader + + + + + +
+ + +
+
+ + +
+
+ + frames + interval + + + +
+ reorder: + + + + + +
+
+
+ + gif delay + background + your name here → +
+
+ +   + + +   + +
+
+ Photoblaster Gallery +
+ +
+ +
+ + + + + + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3-70-g09d2