andre/UoL
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add completed the mirror using color theory and this article

Browse Source 
https://css-tricks.com/converting-color-spaces-in-javascript/
This commit is contained in:
Lev
2021-07-28 20:53:42 -05:00
parent 02325f33ec
commit 0e31a5b491
5 changed files with 89 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
CM2030 Graphics Programming/Week 13/13.3.5 Software Mirror/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>graphicsProgramming - Coursera</title>
<script src="libraries/p5.min.js" type="text/javascript"></script>
<script src="libraries/p5.sound.min.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>

BIN
CM2030 Graphics Programming/Week 13/13.3.5 Software Mirror/libraries/.DS_Store vendored Normal file
View File

Binary file not shown.

3
CM2030 Graphics Programming/Week 13/13.3.5 Software Mirror/libraries/p5.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

28
CM2030 Graphics Programming/Week 13/13.3.5 Software Mirror/libraries/p5.sound.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

43
CM2030 Graphics Programming/Week 13/13.3.5 Software Mirror/sketch.js Normal file
View File

@ -0,0 +1,43 @@
var video;
function setup() {
createCanvas(640 * 2, 480);
pixelDensity(1);
video = createCapture(VIDEO);
video.hide();
noStroke();
angleMode(DEGREES);
}
function draw() {
background(0);
image(video, 0, 0);
video.loadPixels();
translate(640, 0);
var arcSize = 10;
translate(arcSize / 2, arcSize / 2);
for (let x=0; x<width/2; x+=arcSize) {
for (let y=0; y<height; y+=arcSize) {
let index = (video.width*y + x) * 4;
let red = video.pixels[index + 0];
let blu = video.pixels[index + 1];
let grn = video.pixels[index + 2];
// rgb to hsl
let cmin = Math.min(red, blu, grn);
let cmax = Math.max(red, blu, grn);
let pixelBrightness = (cmin + cmax)/2;
push();
translate(x, y);
var theta = map(pixelBrightness, 0, 255, 0, 360);
rotate((180 - theta) / 2);
arc(0, 0, arcSize, arcSize, 0, theta);
pop();
}
}
}