Pixels

Programming Design Systems, Week 4.

In this class we will look at the concept of pixels and how to manipulate existing images into new things. This means looking at the concept of binary, as well as the P5.js functions that allow you change pixels in the canvas.

Pixel manipulation in graphic design

Tomoko Miho, Architecture in Chicago

Adam Harvey - Spam Art

Adam Harvey - Spam Art

Jonathan Puckey - Delaunay raster algorithm

Instagram filters are basically pixel manipulation.

Binary

Before diving into pixel iteration, we have to know a little bit about pixel color values. Have you ever thought about why color values always go to 255?

Both in Photoshop and in P5.js, RGB color values go between 0 and 255.

0

1. This is called a bit. A bit is only capable of expressing a number of 0 or 1.

If you group 8 bits together, you get a byte. This byte can hold much more information by stringing together the 8 bits into a binary number system. You can count in the binary numeral system exactly like you can count in the Arabic number system. Here’s how. This is 0

1

2

3

4

5

6

… and so on. If you count all the up, so you fill the byte with 1’s, you’ll end up with the number 255. That’s why you see the number 255 used for colors. It’s the highest number that can fit in one byte.

The pixels array

Understanding how P5.js stores pixels is crucial in order to be able to manipulate them. Let us take a look at the pixels array and how to access pixel color data.

Let us use this 5x5 pixel image as an example. How do we represent the pixel color values in a programming language?

P5.js will store an image like this in a flat array, with each row of pixels next to each other.

But that is not the entire truth. As a color is made up of 4 numbers (R, G, B, alpha), P5.js will store this image as a long array of numbers where each pixel is represented by 4 numbers. On top of that, some computers with Retina screen will have a higher pixel density than other screens. So if you're on a Retina Mac, your color array will be twice as big as on a normal computer.

Code examples

Accessing a single pixel
Updating the screen
Photo filter
Photo pattern