CP1: Collage in P5JS – Reading Pixel Colors
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 in our sketch (or in an image, a frame of video, etc). These values are stored in an array aptly named "pixels." We can also extract their RGB values and even change individual pixels, too!
This is how most image filters work as well – if you take CP2 we'll build lots of cool filters together, but for now see the challenges below if you want to try it yourself!
RASTER vs VECTOR IMAGES
The graphics we've drawn in previous projects make 'vector' images. They're made of math, with shapes defined by coordinates and formulas. File formats like PDF and Illustrator files are meant for vector graphics. The benefit is you can scale them up and down (from the size of a postage stamp to a billboard) with no loss in quality!
Raster images are made of pixels: little squares with a single color value. Photographic images are usually raster images, as are the images captured by your phone's camera and frames of videos. Since the image has a finite number of pixels, if you blow them up too big they lose quality.
🖥 https://editor.p5js.org/jeffThompson/...
ALL THE VIDEOS IN THIS UNIT
🎥 • CP1: Week 06 (Collage)
CHALLENGES
❓ While there's a lot of science to our visual perception, the red value in an image is a good approximation of brightness. Can you calculate the average red value for the image?
❓ A better measure of brightness uses this formula: brightness = (0.2126 * r) + (0.7152 * g) + (0.0722 * b). Try using it to find a better value for the average brightness?
❓ Can you implement any of the p5.js drawing commands (like rect() or line()) using the pixel array?