Displaying Images

Processing has a class called PImage that allows you to easily load and manipulate images. Processing can display .gif, .jpg, .tga, and .png images.

Before you can work with images in Processing, you need to add the image to your Processing file. Please read carefully through these instructions for creating a data file - you will need them very soon!

Creating a data file

Open the Processing editor and create a new Sketch. Save it to your computer with a program name so you can find it easily.
From the menu click on Sketch and choose add File. Find the picture you want to add to the file, click on it and click open.
Go to the folder that contains the sketch program and open it. You should now see a data folder. Click to open the data folder. You should see the image you added. Make sure the image is saved as one of these file types: .gif, .jpg, .tga, or .png

To create a PImage object you would do the following:

PImage img; declares a new PImage reference variable called img

There are different methods in the PImage class. To load an image and assign it to a PImage reference variable you use a method in the PImage class called

loadImage("String picture file path").

An example would be:PImage img;

public void setup()

{

img = loadImage("eye.jpg");

}

You will not be able to see your image yet. You need to use another method in the PImage class to display the image.

image(PImage image, x, y, width, height);

This will draw the image at the x and y location and the width and height specified. The completed code is below. Remember in Processing if you use setup() you must have the draw() function even if it has no code.

Eye1 PImage img;

public void setup()

{

img = loadImage("eye.jpg");

image(img, 0, 0, width, height);

public void draw()

{

}

If you want to make your image display the size of the frame create variables for width and height and include the size function in setup.

Pimage img; enlarged Eye2 PImage img;

int width = 400;

int height = 400;

public void setup()

{

img = loadImage("eye.jpg");

size(width, height);

image(img, 0, 0, width, height);

}

public void draw()

{

If you want to specify the size and position of the image, change the x, y and width and height in the image() function.

Eye3 PImage img; decreased PImage img;

int width = 400;

int height = 400;

public void setup()

{

background(0, 0, 0);

img = loadImage("eye.jpg");

size(width, height);

image(img,0,0, 200,200);

}

public void draw(){}

PImage Video

The PImage video below demonstrates how to use code to display and load an image in the Processing IDE.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION