Processing Workshop #4

In our fourth workshop we were introduced to the PImage datatype and explored some of the ways we can manipulate images.

Firstly we told processing that we wanted to display images and where the location of those images were. The PImage variable is used when images are the value, sort of like when intergers are the value we use the int datatype and when we are using a boolean value we use the ‘boolean’ datatype.


In the setup we assign a value to the PImage named img1 which we declared globally. We then set te size of the canvas to the width and height of ‘img1’. And Finally we draw the im1 in the draw section which allows the image to be outputted to the screen.


Images are stored in the data directory within the directory of the processing directory, when a PImage is used processing automatically looks in the data directory for the image.


What we did next was learn how to change the sizes of images with processing. We can manipulate the size and the position of the images in the parameters of the image() method. The first part of parameter declares what PImage to find (in this case img2). The 2nd and 3rd parts of the parameters define the position of the image (in this case the image will follow the mouseX and mouseY coordinates). And the 4th and 5th declare the size of the image, in this case 200 by 200 pixels.


What we then did was use the tint() method to manipulate the colour of the image. Here we have randomised the tint colour so that each new image has a different colour between 0 and 255, the 3 parmaters of the tint method are RGB. So if you wanted random green colours you could have tint( random(255), random(255), random(255));


This code results (in this case) a series of multi coloured Gary Numans.

Opacity of Gary Numan

Adding a fourth parameter introduces opacity to the tint.

What we then did was manipulate each pixel of the image. We did this by firstly using the load pixels method. This method allows you to call each individual pixels and stores them in an array. This means that you could manipulate any pixel within the image by using the pixels[] array.

We then created 2 for loops, which we had done previously, for the images width and height, and then assigned the local for loop variables x and y to a global variable called ‘loc’ we then used the fill method and assigned it the value img2.pixels.[loc] which tells processing to take the pixels from img2 and place them in an array with the values assigned to the variable ‘loc’.


a pixel gary

This is the result of the code; a pixelated Gary Numan.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s