Initial commit

PrasannaVenkadesh · Sep 6, 2012 · 2e9af40 · 2e9af40
1 parent 66da277
commit 2e9af40
Show file tree

Hide file tree

Showing 4 changed files with 266 additions and 0 deletions.
diff --git a/peppers2.jpg b/peppers2.jpg
diff --git a/pineapple2.jpg b/pineapple2.jpg
diff --git a/pumpkins2.jpg b/pumpkins2.jpg
diff --git a/swiper.html b/swiper.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<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>