Transformation
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.
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. 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.
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:
