1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!doctype html>
<html>
<style>
html,body{width:100%;height:100%;margin:0;padding:0; background: #000}
canvas {
position: absolute;top:0;left:0;width:100%;height:100%;
}
#state{display:none}
#stuff { opacity: 1.0; position: fixed; z-index: 2; }
#dither {
position: absolute;top:0;left:0;width:100%;height:100%;
z-index: 2;
background: url(http://dump.fm/static/img/bg.dither.gif);
opacity: 0.5;
}
#enable {
position: absolute;
top:20px;right:30px;
background:white;
padding:10px;
font-family:sans-serif;
}
</style>
<body>
<div id="enable">click allow to enable your webcam! <img src="http://www.your3dsource.com/images/colorchangearrowup.gif" width="20"></div>
<div id="dither"></div>
<div id="stuff">
<div id="state"></div> frames: <input type="text" id="frameCount">
<div id="buttons"></div>
<video id="vid" style="display: none"></video>
<button id="camera" style="display:none">camera</button>
</div>
</body>
<script src="/js/jquery.js"></script>
<script src="canvasquery.js"></script>
<script src="http://asdf.us/dither/js/camera.js"></script>
<script>
var images = "gradient_top.png gradient_bot.png gradient_left.png gradient_right.png gradient_radial.png gradient_bands.png gradient_radial_bands.png swoosh.png swoosh_blur.png louisvuitton.jpg".split(" ")
var state = document.getElementById('state')
for (var i in images) {
button(images[i]);
}
function button (src) {
var el = document.createElement("button");
el.innerHTML = src;
el.onclick = function(){ loadImage(src) }
document.getElementById("buttons").appendChild( el );
}
var frameCountEl = document.getElementById("frameCount");
var frameCount = frameCountEl.value = 255
frameCountEl.addEventListener("keyup", function(){
var _this = this;
setTimeout(function(){
frameCount = parseInt( _this.value.replace(/[^0-9]/g,"") )
});
}, false)
var cc = cq(1,1)
min = Math.min
$("#camera").trigger("click")
var checker = setInterval(function(){
if (window.cam) {
clearInterval(checker)
video = cam
loaded()
}
}, 200)
function loaded () {
$("#enable").html("loading...")
src = cq(w, h)
dest = cq(w, h).appendTo("body");
loadImage( images[4] )
video.play()
}
state.innerHTML = "loading";
function loadImage(src){
var image = new Image ();
image.addEventListener("load", function(){
var iq = cq(w, h)
.drawImage( image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, w, h )
imageData = iq.getImageData( 0, 0, w, h )
mask = iq.grayscaleToMask()
console.log('got it')
}, false);
image.src = src;
}
var src, dest, mask, fill, imageData;
var frames = [];
var ready = false;
(function animate(){
requestAnimationFrame(animate);
if (! src || ! mask) return;
storeFrame();
if (ready) render();
})();
function storeFrame(){
src.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, w, h)
var data = src.getImageData(0, 0, w, h)
if (frames.length > frameCount) {
frames.shift()
if (! ready) {
ready = true;
state.innerHTML = "playing"
}
}
else {
state.innerHTML = "buffering " + frames.length;
}
frames.push(data.data)
}
function render(){
data = imageData.data
buffered = frames.length - 1
for (var i = 0; i < mask.length; i++) {
var j = i * 4;
var n = Math.min(buffered, Math.floor( frameCount * mask[i] / 255 ))
data[j] = frames[n][j]
data[j+1] = frames[n][j+1]
data[j+2] = frames[n][j+2]
}
dest.putImageData(imageData, 0, 0)
}
</script>
</html>
|
