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

Add completed pixel array testing

Browse Source
This commit is contained in:
Lev
2021-07-28 20:12:31 -05:00
parent a3711c3c7a
commit 40e1d0ead2
6 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
CM2030 Graphics Programming/Week 13/13.3.1 Pixels/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.1 Pixels/libraries/.DS_Store vendored Normal file
View File

Binary file not shown.

3
CM2030 Graphics Programming/Week 13/13.3.1 Pixels/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.1 Pixels/libraries/p5.sound.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
CM2030 Graphics Programming/Week 13/13.3.1 Pixels/rockets.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

32
CM2030 Graphics Programming/Week 13/13.3.1 Pixels/sketch.js Normal file
View File

@ -0,0 +1,32 @@
let img;
function preload() {
img = loadImage('rockets.png');
}
function setup() {
createCanvas(640 * 2, 400);
pixelDensity(1);
}
function draw() {
background(150);
image(img, 0, 0);
// getting pixel information using get()
let c = img.get(mouseX, mouseY);
fill(c);
rect(mouseX, mouseY, 50, 50);
// getting color values manually
img.loadPixels(); // make the pixel array ready to be used with img.pixels[]
let index = (img.width * mouseY + mouseX) * 4; //index of first value
let channelRed = img.pixels[index + 0];
let channelGrn = img.pixels[index + 1];
let channelBlu = img.pixels[index + 2];
let channelAlp = img.pixels[index + 3];
fill('rgba(' + channelRed + ',' + channelGrn + ',' + channelBlu + ',' + channelAlp + ')');
//fill(channelRed, channelGrn, channelBlu, channelAlp);
rect(mouseX + 50, mouseY, 50, 50);
}