Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 724a46dcbc
Fetching contributors…

Cannot retrieve contributors at this time

267 lines (231 sloc) 6.111 kB
<!DOCTYPE html>
<html>
<head>
<title>Webcam Swiper</title>
<style>
body {
background-color: black;
}
.control {
font-size: 90px;
width: 96px;
color: white;
font-family: sans-serif;
font-weight: bold;
cursor: pointer;
vertical-align: middle;
display: inline-block;
text-shadow: 4px 6px 3px #777;
}
.pic {
height: 600px;
width: 800px;
}
.cropper {
height: 600px;
width: 800px;
overflow-x: hidden;
display: inline-block;
vertical-align: middle;
}
.content {
margin: 42px auto;
width: 1000px;
}
.allPics {
height: 600px;
width: 2400px;
font-size: 0;
-webkit-transform: translateX(0px);
-webkit-transition: all .7s;
-webkit-animation-duration: .7s
}
.right {
text-align: right;
}
@-webkit-keyframes bumpLeft {
from {
border: 10px solid green;
-webkit-transform: translateX(0px);
}
35% {
border: 10px solid red;
-webkit-transform: translateX(100px);
}
to {
border: 10px solid blue;
-webkit-transform: translateX(0px);
}
}
@-webkit-keyframes bumpRight {
from {
-webkit-transform: translateX(-1600px);
}
35% {
-webkit-transform: translateX(-1700px);
}
to {
-webkit-transform: translateX(-1600px);
}
}
video {
display: none;
}
canvas, input {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<span class="control left">&lt;</span>
<span class="cropper">
<div class="allPics">
<img src="pumpkins2.jpg" class="pic" />
<img src="peppers2.jpg" class="pic" />
<img src="pineapple2.jpg" class="pic" />
</div>
</span>
<span class="control right" >&gt;</span>
</div>
<canvas width="400px" height="300px" id="cnvs"></canvas>
<canvas width="400px" height="300px" id="deltas"></canvas>
<input type="button" value="Stop">Stop</input>
<video autoplay></video>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var PIXEL_CHANGE_THRESHOLD = 30;
var FRAME_THRESHOLD = 30000;
var imageNumber = 0;
var imageCount;
var greyscaleCtx = $("#cnvs")[0].getContext("2d");
var deltasCtx = $("#deltas")[0].getContext("2d");
var previousImageData;
var currentImageData = deltasCtx.createImageData(320, 240);
var originalWeight = 0;
var currentWeight = 0;
var horizontalResolution;
var verticalResolution;
var isActive = false;
var remainingFrames = 8;
navigator.webkitGetUserMedia({video: true}, function(stream) {
var video = $("video")[0];
video.src = window.webkitURL.createObjectURL(stream);
setTimeout(function() {
$("input").click(function() {
stream.stop();
clearInterval(refreshInterval);
});
horizontalResolution = video.videoWidth;
verticalResolution = video.videoHeight;
// if we see a frame above the frame threshold...
var refreshInterval = setInterval(function() {
greyscaleCtx.drawImage(video, 0, 0, horizontalResolution, verticalResolution, 0, 0, horizontalResolution / 2, verticalResolution / 2);
previousImageData = currentImageData;
currentImageData = deSaturate(greyscaleCtx.getImageData(0, 0, horizontalResolution / 2, verticalResolution / 2));
greyscaleCtx.putImageData(currentImageData, 0, 0);
deltasCtx.putImageData(getDeltas(previousImageData, currentImageData), 0, 0);
if (!isActive) {
if (Math.abs(currentWeight) > FRAME_THRESHOLD) {
isActive = true;
remainingFrames = 8;
originalWeight = currentWeight;
}
}
if (isActive) {
if (remainingFrames <= 0) {
isActive = false;
}
else {
remainingFrames--;
if (originalWeight > 0) {
if (currentWeight < -FRAME_THRESHOLD) {
previous();
isActive = false;
}
}
else {
if (currentWeight > FRAME_THRESHOLD) {
next();
isActive = false;
}
}
}
}
}, 1000/15);
}, 1000);
});
function getDeltas(previous, current) {
currentWeight = 0;
var deltas = deltasCtx.createImageData(previous);
var previousData = previous.data;
var currentData = current.data;
var dataLength = previousData.length;
var deltasData = deltas.data;
for (var i = 0; i < dataLength; i += 4) {
if (Math.abs(previousData[i] - currentData[i]) > PIXEL_CHANGE_THRESHOLD) {
var pixelPlace = ((i / 4) % horizontalResolution) - (horizontalResolution / 2);
currentWeight += pixelPlace;
deltasData[i] = deltasData[i+1] = deltasData[i+2] = 255;
}
deltasData[i+3] = 255;
}
console.log(currentWeight);
return deltas;
}
$(function() {
$(".left").click(previous);
$(".right").click(next);
imageCount = $(".pic").length;
});
function next() {
if (imageNumber <= (imageCount - 2)) {
imageNumber++;
$(".allPics").css("-webkit-transform", "translateX(" + imageNumber * -800 + "px)");
}
else {
bumpRight();
}
}
function previous() {
if (imageNumber >= 1) {
imageNumber--;
$(".allPics").css("-webkit-transform", "translateX(" + imageNumber * -800 + "px)");
}
else {
bumpLeft();
}
}
function doAnimation(element, animationName) {
element.css({
"-webkit-animation-name": animationName
});
element[0].addEventListener("webkitAnimationEnd", function() {
element.css({
"-webkit-animation-name": ""
});
}, false);
}
function bumpLeft() {
var allPics = $(".allPics");
doAnimation(allPics, "bumpLeft");
}
function bumpRight() {
var allPics = $(".allPics");
doAnimation(allPics, "bumpRight");
}
function deSaturate(imageData) {
var newImageData = greyscaleCtx.createImageData(imageData);
var theData = imageData.data;
var newData = newImageData.data;
var dataLength = theData.length;
for (var i = 0; i < dataLength; i += 4) {
var average = (theData[i] + theData[i + 1] + theData[i + 2]) / 3;
newData[i] = newData[i+1] = newData[i+2] = average;
newData[i+3] = 255;
}
return newImageData;
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.