Processing: Working With Images

In a workshop a few weeks ago (only getting around to writing about it) we learned how to import and use images in processing, a welcome change to using the basic shapes we started with. My first attempt playing around with images was experimenting with a for loop to get the image to shrink in each iteration of the loop.  The hight and width of the image are divided by the i number as it increases in the for loop, i.e. 1/1, 1/2, 1/3 etc. to make the image shrink. To get the image to stay in the bottom corner, the Y-coordinate uses an alteration of the same number to make sure it changes at the same time.

Screen Shot 2014-11-11 at 15.06.23

This is the result of the above code:dog2

In the workshop we did some stuff that was a bit more advanced. The basic principle of what we did was reading the colour for each pixel of the image, and then using that data to colour in a grid to create a pixelated version of the same image. In order to grab the colour from the pixels, we needed to know where that pixel was in the image. To do this we calculated a 1 dimensional coordinate to associate a number with the pixels in a 2 dimensional image.

Location = x + y*width

Below is the code used to create the image. When drawing the image, the x and y coordinates have a random value between 0-5 added on to is, so to add a shimmering effect to the image. When the mouse is pressed, the image is swapped with another one on top of it, to show how it is possible to have more than one image in processing. We also added text to the sketch which is swapped alongside the image.

The final result can be seen in .gif form below the code.
Screen Shot 2014-11-11 at 14.58.41ImageWorkshop

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: