Skip to content

Commit 7eab817

Browse files
GeorgeGallyGeorgeGally
committed
pixelation
1 parent b0e53e6 commit 7eab817

14 files changed

+843
-62
lines changed

‎js/creative_coding.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -365,8 +365,9 @@ return 'rgba('+clamp(Math.round(r),0,255)+', '+clamp(Math.round(g),0,255)+', '+c
365365
function hsl(h, s, l) { return 'hsl('+h+', '+clamp(s,0,100)+'%, '+clamp(l,0,100)+'%)';};
366366
function hsla(h, s, l, a) { return 'hsla('+h+', '+clamp(s,0,100)+'%, '+clamp(l,0,100)+'%, '+clamp(a,0,1)+')';};
367367

368-
function brightness(r, g, b){
369-
return Math.floor(rgbToHsl(r, g, b)[2]*100);
368+
function brightness(r, g, b, sz){
369+
var sz = sz || 100;
370+
return Math.floor(rgbToHsl(r, g, b)[2]*sz);
370371
};
371372

372373
function rgbToHsl(r, g, b){

‎js/quicksettings.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/video.js

+73-60
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,53 @@
11

2-
3-
function Video(_w, _h){
4-
var imgData;
52
var video;
3+
var hidden_ctx;
4+
var showBgImg = false;
5+
var showVideo = false;
6+
67
document.addEventListener("DOMContentLoaded", function() {
8+
hidden_ctx = createHiddenCanvas("hidden_canvas");
9+
video = document.createElement('video');
10+
document.body.appendChild(video);
711

8-
video = document.createElement('video');
9-
document.body.appendChild(video);
12+
video.autoplay = true;
13+
video.loop = true;
14+
video.setAttribute("id", "videoOutput");
15+
video.setAttribute("style", "display:none;");
16+
video.width = 320;
17+
video.height = 240;
1018

11-
video.autoplay = true;
12-
video.loop = true;
13-
video.setAttribute("id", "videoOutput");
14-
video.setAttribute("style", "display:none;");
15-
video.width = _w || 320;
16-
video.height = _h || 240;
1719

18-
// check if browser supports getUserMedia - yes we are looking at you Safari!
19-
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
20-
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
20+
// check if browser supports getUserMedia - yes we are looking at you Safari!
21+
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
22+
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
2123

22-
if (navigator.getUserMedia) {
24+
if (navigator.getUserMedia) {
2325

24-
// Set the source of the video element with the stream from the camera
25-
if (typeof MediaStreamTrack === 'undefined' ||
26-
typeof MediaStreamTrack.getSources === 'undefined') {
27-
alert('This browser does not support MediaStreamTrack.\nTry Chrome.\n\nAlterntatively you may need to be serving this page using https');
28-
} else {
29-
MediaStreamTrack.getSources(gotSources);
30-
}
26+
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
27+
console.log("enumerateDevices() not supported.");
28+
return;
29+
}
3130

32-
} else {
31+
// List cameras and microphones.
3332

34-
alert('Native web camera streaming (getUserMedia) not supported in this browser.');
33+
navigator.mediaDevices.enumerateDevices()
34+
.then(function(devices) {
35+
gotSources(devices);
36+
})
37+
.catch(function(err) {
38+
console.log(err.name + ": " + err.message);
39+
});
3540

36-
}
41+
}
3742

38-
//doing this so that can use another camera
43+
//CHOOSE WHICH CAMERA TO USE
3944

4045
function setupCamera(cameras){
4146

42-
console.log(cameras)
47+
//console.log(cameras)
4348

44-
var videoSource = cameras[cameras.length-1].id;
45-
//var videoSource = cameras[0].id;
49+
//var videoSource = cameras[cameras.length-1].id;
50+
var videoSource = cameras[0].id;
4651

4752
var constraints = {
4853
// audio: {
@@ -61,68 +66,76 @@ function Video(_w, _h){
6166

6267
}
6368

64-
65-
6669
function successCallback(stream) {
6770

71+
6872
if (video.mozCaptureStream) {
6973
video.mozSrcObject = stream;
7074
} else {
7175
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
7276
}
73-
video.play();
77+
video.play();
78+
this.video = video;
7479
}
7580

7681
function errorCallback(error) {
7782
alert('Unable to get webcam stream.');
7883
}
7984

8085

81-
// hacky loop to make sure video is streaming
86+
// hacky loop to make sure video is streaming
87+
88+
video.addEventListener('loadeddata', function() {
89+
var attempts = 50;
90+
function checkVideo() {
8291

83-
video.addEventListener('loadeddata', function() {
84-
var attempts = 50;
85-
function checkVideo() {
92+
if (attempts > 0) {
8693

87-
if (attempts > 0) {
94+
if (video.videoWidth > 0 && video.videoHeight > 0) {
8895

89-
if (video.videoWidth > 0 && video.videoHeight > 0) {
96+
video.available = true;
97+
98+
} else {
99+
100+
// Wait a bit and try again
101+
window.setTimeout(checkVideo, 100);
102+
103+
}
90104

91-
video.available = true;
92105

93106
} else {
94107

95-
// Wait a bit and try again
96-
window.setTimeout(checkVideo, 100);
108+
// Give up after 10 attempts
109+
alert('Unable to play video stream. Is webcam working?');
97110

98111
}
99112

100-
} else {
101-
// Give up after 10 attempts
102-
alert('Unable to play video stream. Is webcam working?');
113+
attempts--;
114+
103115
}
104-
attempts--;
105-
}
106116

107-
checkVideo();
117+
checkVideo();
118+
119+
}, false);
108120

109-
}, false);
110121

122+
function gotSources(devices) {
111123

112-
function gotSources(sourceInfos) {
113124
var cameras = [];
114-
for (var i = 0; i !== sourceInfos.length; ++i) {
115125

116-
var sourceInfo = sourceInfos[i];
117-
console.log(sourceInfo);
118-
if (sourceInfo.kind === 'video') {
119-
console.log(sourceInfo.label);
120-
cameras.push(sourceInfo);
121-
}
122-
}
126+
devices.forEach(function(device) {
127+
128+
// console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
129+
130+
if (device.kind === 'videoinput') {
131+
//console.log(device.deviceId);
132+
cameras.push(device);
133+
}
134+
135+
})
136+
123137
setupCamera(cameras);
124-
}
125138

126-
});
139+
};
127140

128-
}
141+
})

‎part16d_pixelation.html

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<script language="javascript" src="js/creative_coding.js"></script>
77
<script language="javascript" src="js/canvas.js"></script>
88

9+
910
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
1011
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
1112

‎part17a_motion_detection.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<script language="javascript" src="js/creative_coding.js"></script>
7+
<script language="javascript" src="js/canvas.js"></script>
8+
<script language="javascript" src="js/video.js"></script>
9+
10+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
11+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
12+
13+
</head>
14+
<body>
15+
16+
<script>
17+
18+
var ctx = createCanvas("canvas1");
19+
ctx.background(235);
20+
21+
function draw(){
22+
ctx.drawImage(video, 0, 0, w, h);
23+
}
24+
25+
26+
27+
</script>
28+
29+
</body>
30+
31+
</html>

‎part17b_motion_detection.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<script language="javascript" src="js/creative_coding.js"></script>
7+
<script language="javascript" src="js/canvas.js"></script>
8+
<script language="javascript" src="js/video.js"></script>
9+
10+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
11+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
12+
13+
</head>
14+
<body>
15+
16+
<script>
17+
18+
var ctx = createCanvas("canvas1");
19+
var sample_size = 20;
20+
21+
22+
function draw(){
23+
ctx.drawImage(video, 0, 0, w, h);
24+
var data = ctx.getImageData(0, 0, w, h).data;
25+
26+
for (var y = 0; y < h; y+= sample_size) {
27+
for (var x = 0; x < w; x+= sample_size) {
28+
var pos = (x + y * w) * 4;
29+
var r = data[pos];
30+
var g = data[pos+1];
31+
var b = data[pos+2];
32+
ctx.fillStyle = rgb(r, g, b);
33+
// flip the image by subtracting x position from the width
34+
ctx.fillRect(w - x, y, sample_size, sample_size);
35+
}
36+
}
37+
38+
}
39+
40+
41+
42+
</script>
43+
44+
</body>
45+
46+
</html>

‎part17c_motion_detection.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<script language="javascript" src="js/creative_coding.js"></script>
7+
<script language="javascript" src="js/canvas.js"></script>
8+
<script language="javascript" src="js/video.js"></script>
9+
10+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
11+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
12+
13+
</head>
14+
<body>
15+
16+
<script>
17+
18+
var ctx = createCanvas("canvas1");
19+
var sample_size = 50;
20+
var old = [];
21+
var threshold = 10;
22+
23+
function draw(){
24+
ctx.drawImage(video, 0, 0, w, h);
25+
var data = ctx.getImageData(0, 0, w, h).data;
26+
27+
for (var y = 0; y < h; y+= sample_size) {
28+
for (var x = 0; x < w; x+= sample_size) {
29+
30+
var pos = (x + y * w) * 4;
31+
var r = data[pos];
32+
var g = data[pos+1];
33+
var b = data[pos+2];
34+
35+
if(old[pos] && Math.abs(old[pos].red - r) > threshold) {
36+
ctx.fillStyle = rgb(r, g, b);
37+
ctx.fillRect(x, y, sample_size, sample_size);
38+
}
39+
40+
old[pos] = { red: r, green: g, blue: b};
41+
42+
}
43+
}
44+
45+
}
46+
47+
48+
49+
</script>
50+
51+
</body>
52+
53+
</html>

0 commit comments

Comments
 (0)