displacement projHEAD master

author: Jules <jules@asdf.us> 2015-05-23 13:31:55 -0400
committer: Jules <jules@asdf.us> 2015-05-23 13:31:55 -0400
commit: 3d57fba4ae63fe996a3d10bf5e3e32c516933526 (patch)
tree: 9a8a81635c7f875d8da3c5d6698f8bf0bb1044a4 /index.html
1 files changed, 197 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2061c31
--- /dev/null
+++ b/index.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html>
+<head>
+<style>body{background:white}</style>
+</head>
+<body>
+<button id="clear">clear</button>
+<input type="text" id="url" placeholder="enter a url" style="width: 200px;">
+<a href="javascript:(function(a)%7Ba%3Ddocument.createElement(%22script%22)%3Ba.src%3D%22http://asdf.us/gif-recorder/js/record.min.js%22%3Bdocument.body.appendChild(a)%7D)()">screen record bookmarklet</a>
+<div id="buttons"></div>
+<div id="canvas"></div>
+<video id="vid" style="display: none"></video>
+</body>
+<script src="dat.gui.min.js"></script>
+<script src="canvasquery.js"></script>
+<script>
+
+/*
+var videos = "diesel1.mov.webm diesel2.mov.webm diesel3.mov.webm diesel4.mov.webm diesel5.mov.webm MVI_00245.mov.webm MVI_0026_17(23).mov.webm MVI_1671_2.mov.webm MVI_50545.mov.webm MVI_5054_16(21).mov.webm MVI_0026_1319.mov.webm MVI_0026_38.mov.webm MVI_1671_3.mov.webm MVI_5054_10(15).mov.webm smoke.webm MVI_0026_1420.mov.webm MVI_0026_915.mov.webm MVI_1671_4.mov.webm MVI_5054_12(17).mov.webm MVI_0026_1521.mov.webm MVI_1671.mov.webm MVI_1671_5.mov.webm MVI_5054_13(18).mov.webm MVI_0026_16.mov.webm MVI_1671_1.mov.webm MVI_5045.mov.webm MVI_5054_15(20).mov.webm".split(" ")
+videos.forEach(function(v){
+	var button = document.createElement("button")
+	button.innerHTML = v
+	button.onclick = function(){
+		video.src = v
+	}
+	document.getElementById("buttons").appendChild(button)
+})
+*/
+
+var video = document.getElementById("vid");
+video.addEventListener('loadedmetadata', loaded, false);
+function loaded () {
+	vw = video.videoWidth
+	vh = video.videoHeight
+	videoSrc = cq(vw, vh)
+	video.setAttribute("loop", "loop")
+	video.play()
+	loadImage( "http://www.carbonpictures.com/bucky/data/3160/Screen%20Shot%202015-05-06%20at%203.22.37%20PM.png" )
+
+}
+video.src = "smoke.webm";
+
+
+// video.src = "174708-1c2pRjKN-aI.mp4";
+// video.src = "ad.mp4";
+// video.src = "gopro.mp4";
+
+var imageData, imageDataData, imageCopy, imageCopyData, destCopy, logo
+
+url.addEventListener("keydown", function(e){
+  if (e.keyCode != 13) return
+  loadImage(url.value)
+})
+
+function loadImage(src){
+        src = "/cgi-bin/proxy?" + src
+	document.getElementById("canvas").innerHTML = ""
+	var image = new Image ();
+	image.addEventListener("load", function(){
+		w = image.naturalWidth
+		h = image.naturalHeight
+		dest = cq(w, h).drawImage( image, 0, 0, w, h, 0,0,w,vh ).appendTo("#canvas")
+		destCopy = cq(w, h)
+		imageData = dest.getImageData( 0, 0, w, h )
+		imageCopy = dest.getImageData( 0, 0, w, h )
+		imageDataData = imageData.data
+		imageCopyData = imageCopy.data
+		
+		for (var i = 0, len = imageCopyData; i < len; i++) {
+			imageCopyData[i] = 0
+		}
+		gray = new Array (imageCopyData/4|0)
+		for (var i = 0, len = imageCopyData/4; i < len; i++) {
+			gray[i] = 0
+		}
+
+	
+		}, false);
+	image.src = src;
+}
+
+var videoSrc, dest, mask, fill, imageData, gray;
+var ready = false;
+
+function go () {
+}
+
+(function animate(){
+	requestAnimationFrame(animate)
+	if (! videoSrc || ! imageData) return
+	render()
+})();
+
+function render(){
+	videoSrc.drawImage(video, 0, 0, vw, vh)
+	var videoData = videoSrc.getImageData(0, 0, vw, vh)
+	var videoDataData = videoData.data
+	var x, y, xx, yy, val, realVal
+	var j = 0
+
+	var rAvg = params.rAvg, gAvg = params.gAvg, bAvg = params.bAvg, valAvg = params.valAvg
+	var xfac = params.xFactor, yfac = params.yFactor, valfac = params.valFactor
+	
+	for (var i = 0, len = videoDataData.length/4 |0; i < len; i++) {
+		
+//	 	x = i % vw
+//	 	y = ~~(i/vw)
+//	 	
+//	 	xx = x % vw
+//	 	yy = y % vh
+		
+		xx = i % vw
+		yy = ~~(i/vw)
+
+		x = xx
+		y = yy
+
+		jj = (y*w + x) * 4
+	
+		realVal = videoDataData[ ((yy*vw + xx)*4) ]
+		val = gray[i] =  avga( valAvg, gray[i], realVal )
+
+		val *= valfac
+
+		x = clamp( ~~(x + val * xfac), 0, w-1 ) | 0
+		y = clamp( ~~(y + val * yfac), 0, h-1 ) | 0
+
+		j = clamp( (y*w + x), 0, len-1) * 4
+	
+		j = ~~ j
+		jj = ~~ jj
+	
+		imageCopyData[jj]	= avga(rAvg, imageDataData[j],	 imageCopyData[j])
+		imageCopyData[jj+1] = avga(gAvg, imageDataData[j+1], imageCopyData[j+1])
+		imageCopyData[jj+2] = avga(bAvg, imageDataData[j+2], imageCopyData[j+2])
+
+		imageCopyData[jj+3] = 255
+
+	}
+
+	destCopy.putImageData(imageCopy, 0, 0)
+
+//if (params.logoAlpha) {
+//	dest.context.globalAlpha = params.logoAlpha
+//	dest.context.globalCompositeOperation = 'destination-in'
+//	dest.drawImage(logo.canvas, params.logoX, params.logoY, w*params.logoScale,h*params.logoScale)
+//}
+
+	dest.context.globalAlpha = params.imageAlpha
+	dest.context.globalCompositeOperation = 'source-over'
+	dest.drawImage(destCopy.canvas, 0, 0, w,h)
+
+	dest.context.globalAlpha = 1.0
+// 	dest.context.globalAlpha = 0.2
+// 	dest.context.globalCompositeOperation = 'destination-in'
+// 	dest.drawImage(logo.canvas, params.logoX, params.logoY, w*params.logoScale,h*params.logoScale)
+}
+var params = {}
+// params.logoX = 166
+// params.logoY = 133
+// params.logoScale = 0.7
+// params.logoAlpha = 0.0
+params.imageAlpha = 1.0
+params.rAvg = 5
+params.gAvg = 5
+params.bAvg = 5
+params.valAvg = 2
+params.xFactor = 1
+params.yFactor = 1
+params.valFactor = 1
+
+window.onload = function() {
+	var gui = new dat.GUI();
+// 	gui.add(params, 'logoX', 0, w);
+// 	gui.add(params, 'logoY', 0, h);
+// 	gui.add(params, 'logoScale', 0.2, 1);
+// 	gui.add(params, 'logoAlpha', 0.0, 1);
+	gui.add(params, 'imageAlpha', 0.0, 1);
+	gui.add(params, 'rAvg', 2, 20);
+	gui.add(params, 'gAvg', 2, 20);
+	gui.add(params, 'bAvg', 2, 20);
+	gui.add(params, 'valAvg', 2, 20);
+	gui.add(params, 'xFactor', -5, 5);
+	gui.add(params, 'yFactor', -5, 5);
+	gui.add(params, 'valFactor', -20, 20);
+}
+
+document.getElementById("clear").onclick = function(){
+	dest.clearRect(0,0,w,h)
+}
+
+function avga(n,a,b) { return ((a*(~~n-1) + b)/~~n)|0 }
+function avgb(n,b,a) { return ((a*(~~n-1) + b)/~~n)|0 }
+function clamp(n,a,b) { return n < a ? a : n > b ? b : n }
+</script>
+</html>
+
author	Jules <jules@asdf.us>	2015-05-23 13:31:55 -0400
committer	Jules <jules@asdf.us>	2015-05-23 13:31:55 -0400
commit	3d57fba4ae63fe996a3d10bf5e3e32c516933526 (patch)
tree	9a8a81635c7f875d8da3c5d6698f8bf0bb1044a4 /index.html