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

Added img object inspection

Browse Source
This commit is contained in:
Lev
2021-07-28 20:18:44 -05:00
parent 40e1d0ead2
commit 02325f33ec
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
CM2030 Graphics Programming/Week 13/13.3.1 Pixels/sketch.js
View File

@ -15,18 +15,22 @@ function draw() {
// getting pixel information using get() // getting pixel information using get()
let c = img.get(mouseX, mouseY); let c = img.get(mouseX, mouseY);
fill(c); fill(c);
rect(mouseX, mouseY, 50, 50); rect(mouseX+10, mouseY+10, 50, 50);
// getting color values manually // getting color values manually
img.loadPixels(); // make the pixel array ready to be used with img.pixels[] loadPixels(); // make the pixel array ready to be used with img.pixels[]
let index = (img.width * mouseY + mouseX) * 4; //index of first value //img.loadPixels() // or we can load the pixel array form the image object instead of the canvas
let channelRed = img.pixels[index + 0]; let index = (width * mouseY + mouseX) * 4; // index of first value
let channelGrn = img.pixels[index + 1]; // let index = (img.width * mouseY + mouseX) * 4; // calculating the width from the image object
let channelBlu = img.pixels[index + 2]; let channelRed = pixels[index + 0];
let channelAlp = img.pixels[index + 3]; // let channelRed = img.pixels[index + 0]; // or read from the image pixel array instead of the canvas
let channelGrn = pixels[index + 1];
let channelBlu = pixels[index + 2];
let channelAlp = pixels[index + 3];
fill(channelRed, channelGrn, channelBlu, channelAlp);
// or
fill('rgba(' + channelRed + ',' + channelGrn + ',' + channelBlu + ',' + channelAlp + ')'); fill('rgba(' + channelRed + ',' + channelGrn + ',' + channelBlu + ',' + channelAlp + ')');
//fill(channelRed, channelGrn, channelBlu, channelAlp); rect(mouseX + 10 + 50, mouseY + 10, 50, 50);
rect(mouseX + 50, mouseY, 50, 50);
} }