Transformation refers to the fact of manipulating a preexisting form to create something new - Form+Code

In this class we’ll look at pixel iteration in JavaScript.

Transformation in Graphic Design

Tomoko Miho, Architecture in Chicago

Adam Harvey’s Spam Art

Jonathan Puckeys graphic image filters

Bits and Bytes

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? Take a look at the color palette in Photoshop.

… or take a look at color values in Processing. It’s all 0-255.

It all comes down to the basic way a computer works. You’ve probably heard that a computer can only think in ones and zero’s. This means that all your data is just a bunch of zeros …

… and ones …

… saved on your harddisk. This is called a Bit. A computer will always group these bits into groups of 8, called a Byte.

You can count in the binary numeral system exactly like you can count in the Arabic number system. Here’s how.








… 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. If you want to test this for yourself, you can use the binary() function in Processing to convert a number to its byte representation.

When we manipulate pixels, we’re essentially pulling out these byte values from the image files and manipulating them by either changing them directly in the image pixels, or using the color values to draw something on the screen.

Pixel Iteration

Here’s how to loop over image pixels with Rune.js. Keep in mind that drawing images like this in SVG is very slow.

See example code

Pixel Manipulation

You can use .get(x, y) to get a color object and manipulate the color before drawing.

From Pixels to Shapes

Now that we have the ability to manipulate pixels form an image, let’s investigate what we can create if we don’t just update the pixel values, but use those values to draw shapes on the screen instead.

Here’s an example of using our basic tile pattern from last class, but extracting the pixel values from the image:

Pixel image

See example code