Processing #4

In this weeks Processing workshop, we were going to be looking at images and pixels. This meant that we were going to use different functions to manipulate an image. An image is nothing more than data. It is made up of numbers indicating different variations of colours and pixel values. With this, images can be manipulated in Processing in various ways. The first thing we learnt was using a class for loading and displaying an image as well as looking at its pixels. This class is called PImage. This means we declare the image data type to be called img. So the first line of code in the Processing sketch would be:

PImage img;

Now we have the image declared as a PImage, we made the standard setup for the rest of the sketch. I have now learnt the basic setup for Processing sketches thanks to the past workshops we have done. Although, for this workshop we were taught a new line of code to put in the void setup() {. This code was img = loadImage(“img.jpg”);. As we have declared PImage as ‘img’, using img = loadImage(“img.jpg”); it will find the image file under the name put in the speech marks. Consequently, once it has found the image that you are trying to load, it will load it. This function is helpful as we haven’t learnt how to load images into Processing and now that we have been taught how to, we can use this in many projects in the future. Now we know this, the basic setup for the Processing sketch looked like this:

void setup() {
img = loadImage("Edward_Snowden.jpg");
size(img.width, img.height);

Instead of loadImage loading “img.jpg” we are using a picture of Edward Snowden to manipulate in this workshop. From this, we have the image of Edward Snowden, now it’s time to use different functions to manipulate the image. There are many different ways you can alter an image using Processing. In this workshop, we focused on pixel manipulation. This was one of the main reasons we used PImage as we could see the values of the pixels and change them easily. The code for changing the pixels in the image looked like this:

void draw() {
int n = 30;
for (int y = 0; y < img.height; y+=n ) {

for (int x = 0; x < img.width+n; x+=n) {

int loc = x + y*img.width;

This code makes this image:


Look like:

Screen Shot 2015-01-21 at 17.54.28

So what’s happening here? The code is essentially making every pixel in the image blurred. This creates an interesting effect as it is vastly different from the original image. This manipulation of images has been helpful in understanding how pixels work when being used in code. Instead of a user seeing the normal image, the user can view an image in a completely different way due to Processing.

Although not related to manipulating images, we were then taught how to use different functions such as: adding the date and time and adding letters that appear then disappear after a certain amount of time. We were taught how to use these functions as we had a bit of time left over from finishing the image manipulation. The code we used to make these functions possible was:



void someImage(){
image(img,mouseX,mouseY, img.width/10,img.height/10);
void someTextyThing(){
String[] snowden={"S","N","O","D","E","N"};
String ye= str(year());
String mo= str(month());
String d= str(day());
String h= str(hour());
String m= str(minute());
String s= str(second());
String time = ye +"/"+ mo + "/" + d + " " + h +":" + m + ":" + s;

if (mouseX > width/2) fill(255,60);
else fill(255,0,0,60);

sn = (sn+1) % snowden.length;
text(snowden[sn],random(200, img.width-200),random(200,img.height-200));


This code made:

Screen Shot 2015-01-21 at 18.28.45

As you can see, the date and the time is displayed and also the letters appear and fade out. In this sketch, we made the letters spell out Edward Snowden.

This workshop has been extremely helpful in teaching us the basics of image manipulation and also, teaching us a few functions that could be useful in future projects. As there is so much more image manipulation we can do in Processing, this is just the tip of the ice berg. I am excited to do more image manipulation.



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