Images

tutorial processing basic image

Now we know how to use objects and create our own classes. We know how to create an instance of a class, store it in a variable, and then call functions belonging to that instance.

For example, we’ve seen the PVector class, and we can use it like this:

PVector point = new PVector(100, 100);
point.add(25, 50);
ellipse(point.x, point.y, 10, 10);

Another class that Processing offers is the PImage class. This class allows you to load, display, and manipulate image files.

Adding Files to Your Sketch

Before you can use an image file in your sketch, you have to add it. From your Processing editor, go to Sketch > Add File, and then choose the image file you want to add. That will copy the file into your sketch’s data directory (which you can view by going to Sketch > Show Sketch Folder).

You could also simply drag the file onto the Processing editor, and it’ll do the same thing.

The loadImage() Function

The most common way to create an instance of the PImage class is by calling the loadImage() function. The loadImage() function takes a String parameter with a value that represents the name of the file to load. For example, if we have an image file named butterfly.jpg, we could create an instance of PImage like this:

PImage butterflyImage = loadImage("butterfly.jpg");

The image() Function

Now that we have an instance of PImage stored in a variable, we can display that instance by calling the image() function. The simplest version of the image() function takes three parameters: an instance of PImage and x and y coordinates.

size(300, 250);
PImage butterflyImage = loadImage("butterfly.jpg");
image(butterflyImage, 50, 25);

butterfly

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The image() function is just like the other drawing functions you’ve already seen (like the rect() or ellipse() functions). That means we can use it from the draw() function just like anything else:

PImage butterflyImage;

void setup(){
  size(300, 250);
  butterflyImage= loadImage("butterfly.jpg");
}

void draw(){
  background(200);
  image(butterflyImage, mouseX, mouseY);
}

butterfly

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Note that we’re declaring the butterflyImage variable at the sketch level, then initializing it inside the setup() function, and then just using it in the draw() function. This is how you should all your images! If you loaded your image from the draw() function, you’d be reading the same file 60 times every second, which could slow your program down or even cause it to crash. Remeber: declare your images at the sketch level, load them from setup(), and display them in draw().

The resize() Function

The PImage class contains several useful functions that let us manipulate images. For example, the resize() function lets us resize an image after we load it. This is useful if we’re loading a large image and want to display it smaller. Here’s an example that resizes the image whenever the user clicks the mouse:

PImage butterflyImage;

void setup() {
  size(300, 250);
  butterflyImage= loadImage("butterfly.jpg");
}

void mouseClicked() {
  butterflyImage.resize(mouseX, mouseY);
}

void draw() {
  background(200);
  image(butterflyImage, 0, 0);
}

butterfly

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Note that this only changes the size of the instance, not the file itself.

The get() Function

We can also get the color of a specific pixel in an image by calling the get() function.

This program uses the PImage#get() function to get the color at the cursor’s position, then displays a box showing that color. Think of it like a magnifying glass that shows you the pixel under the mouse.

void setup() {
  size(300, 250);
  butterflyImage= loadImage("butterfly.jpg");
  butterflyImage.resize(width, height);
}

void draw() {
  background(200);
  image(butterflyImage, 0, 0);
  
  //get the color at the mouse position
  color c = butterflyImage.get(mouseX, mouseY);
  
  //change the fill to that color
  fill(c);
  
  //draw a rectangle with that color
  rect(mouseX, mouseY, 50, 50);
}

butterfly

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The set() Function

Just like we can get the color of a specific pixel using the get() function, we can also set the color of a specific pixel using the set() function. Here’s an example that sets the pixel under the mouse position to red:


PImage butterflyImage;

void setup() {
  size(300, 250);
  butterflyImage= loadImage("butterfly-2.jpg");
  butterflyImage.resize(width, height);
}

void draw() {

  color c = color(255, 0, 0);
  butterflyImage.set(mouseX, mouseY, c);

  background(200);
  image(butterflyImage, 0, 0);
}

butterfly

Manipulating Images

You can create things like image filters by looping over the pixels in the image, calling the get() function, doing some logic with that color, and then calling the set() function to change the color of that pixel.

Here’s an example that inverses the color of the image:

PImage butterflyImage;

void setup() {
  size(300, 250);
  butterflyImage= loadImage("butterfly-2.jpg");
  butterflyImage.resize(width, height);
  
  for(int y = 0; y < butterflyImage.height; y++){
   for(int x = 0; x < butterflyImage.width; x++){
     color in = butterflyImage.get(x, y);
     color out = color(255-red(in), 255-green(in), 255-blue(in));
     butterflyImage.set(x, y, out);
   }
  }
  
}

void draw() {
  image(butterflyImage, 0, 0);
}

butterfly

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

This might seem complicated, but just take it one line at a time.

This line loops over every row in the image:

  for(int y = 0; y < butterflyImage.height; y++){

For each row, this line loops over each column in that row:

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

Given a row and a column (in other words, an x and a y), this line gets the color of that pixel:

     color in = butterflyImage.get(x, y);

This line applies some logic to the current color of the pixel to create a new color. This logic just subtracts each red, green, and blue value from 255 to get the inverse of that color. If this part is confusing, try writing down some example colors and doing this math to see how it creates the inverse!

     color out = color(255-red(in), 255-green(in), 255-blue(in));

Finally, this line sets the color of the pixel to the newly calculated color:

     butterflyImage.set(x, y, out);

Other Image Functions

The PImage class contains several other useful functions. Check out the reference for more info about them. Don’t be afraid to experiment!

Homework

Go back up