CP2: Reading Pixels and Colors – Image Filters

Опубликовано: 18 Июнь 2026
на канале: Jeff Thompson
1,125
17

Since our screens are made of up pixels, basically anything we do in computer graphics (type in a Word doc, watch a video, move a window) involves manipulating pixel values.

p5.js lets us read the values of all the pixels onscreen, which are stored in an array (aptly named "pixels"), extract their RGB values, and even change individual pixels, too!

👩‍💻 https://editor.p5js.org/jeffThompson/...

ALL THE VIDEOS IN THIS UNIT
🎥    • CP2: Week 03 (Image Filters)  

CHALLENGES
❓ While there's a lot of science to understanding our visual perception, the red value of a pixel is a good approximation of brightness. Can you calculate the average brightness of the image?
❓ Can you find a better average brightness of the image?
❓ Can you implement any of the p5.js drawing commands (like rect or line) using the pixel array?