Skip to content

Instantly share code, notes, and snippets.

@chrisdelbuck

chrisdelbuck/index.html

Created February 20, 2013 23:58
Show Gist options
  • Save chrisdelbuck/5000821 to your computer and use it in GitHub Desktop.
Save chrisdelbuck/5000821 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Chris Delbuck. Face Trails 2
Raw
index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<style>
body {
font-family: "Helvetica Neue", Arial, sans-serif;
color: white;
background-color:#000;
}
#source {margin:0 auto;}
#video {display:none;}
#buffer {display: none;}
</style>
</head>
<body>
<div id="message">Press Space to request Camera</div>
<video id="video" muted loop autoplay></video>
<canvas id="source" width="640" height="480"></canvas>
<canvas id="buffer" width="640" height="480"></canvas>
</body>
</html>
Raw
script.js
var video = document.getElementById('video');
var source = document.getElementById('source').getContext('2d');
var bufferEl = document.getElementById('buffer');
var buffer = bufferEl.getContext('2d');
//var output = source;
var cW = source.canvas.width;
var cH = source.canvas.height;
var settings = {
'sampleLight': 0.4,
'whiteCutoff': 0.08,
'blackoutAlpha': 0.33,
'drawAlpha': 0.095,
'rangeCenter': 0.5,
'rangeGive':0.1,
}
var gui = new dat.GUI();
gui.add(settings, 'sampleLight', 0.05, 0.95);
gui.add(settings, 'whiteCutoff', 0.05, 0.1);
gui.add(settings, 'blackoutAlpha', 0.0, 1);
gui.add(settings, 'drawAlpha', 0.05, 0.1);
video.addEventListener('loadedmetadata', function () {
if (video.videoWidth) {
cW = source.canvas.width = video.videoWidth;
cH = source.canvas.height = video.videoHeight;
}
draw();
});
function requestStream() {
navigator.webkitGetUserMedia(
{video: true},
streamSuccess,
streamFail
);
}
function streamSuccess(stream) {
console.log('stream success');
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}
function streamFail() {
console.log('not working');
}
function draw() {
buffer.drawImage(
video,
0, 0,
video.videoWidth, video.videoHeight,
0, 0,
source.canvas.width, source.canvas.height
);
var pixels = buffer.getImageData(0, 0, source.canvas.width, source.canvas.height);
for (var i = 0; i < pixels.data.length; i+=4) {
var newPixel = transformPixel(
'sineRange',
{ r: pixels.data[i],
g: pixels.data[i+1],
b: pixels.data[i+2],
a: pixels.data[i+3],
});
pixels.data[i] = newPixel.r;2
pixels.data[i+1] = newPixel.g;
pixels.data[i+2] = newPixel.b;
pixels.data[i+3] = newPixel.a;
delete newPixel;
}
buffer.putImageData(pixels, 0, 0);
source.globalCompositeOperation = 'source-over';
source.fillStyle = "rgba(0,0,0," + settings.blackoutAlpha + ")";
source.fillRect(0,0,source.canvas.width,source.canvas.height);
source.globalCompositeOperation = 'lighter';
source.drawImage(bufferEl, 0, 0, cW, cH);
webkitRequestAnimationFrame(draw);
}
function transformPixel(type, pixel) {
var r, g, b, a;
var transformers = {
'grayscale':
function(p) {
var avg = (p.r + p.g + p.b) / 3;
if (avg < 128) avg = 0;
r = avg; g=avg; b=avg; a=p.a;
},
'stripe':
function(p) {
var avg = (p.r + p.g + p.b) / 3;
var l = avg/255;
if (l < settings.sampleLight) {
l = 0; a = 255;
} else {
l%=.1;
if (l > settings.whiteCutoff) { l = settings.drawAlpha; }
else { l = 0; }
l *= 10;
}
avg = Math.floor(255*l)
r = avg; g=avg; b=avg; a=255;
},
'sineRange':
function(p) {
var avg = (p.r + p.g + p.b) / 3;
var l = avg/255;
var min = Math.max(0.0, settings.rangeCenter-settings.rangeGive);
var max = Math.max(1.0, settings.rangeCenter+settings.rangeGive);
avg = Math.floor(255*l);
r = avg; g=avg; b=avg; a=255;
},
};
transformers[type](pixel);
return {r:r, g:g, b:b, a:a};
}
$('body').keypress(function() {
requestStream();
$('#message').remove();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment