PROCESSING
LESSON 03 – IMAGES

LESSON NOTE/GUIDE

PROGRAM 1 – BASIC IMAGE DISPLAY

PROGRAM 2 – IMAGE RESIZING

PROGRAM 3 – RANDOM IMAGES

PROGRAM 2 – CYCLING THROUGH IMAGES

PROGRAM 4 – IMAGE TINT

PROGRAM 5 – PIXEL BY PIXEL

PROGRAM 1 – BASIC IMAGE DISPLAY

· This program demonstrates how to display an image on the screen.

THE CODE

PImage img;

void setup()

{

size(600, 400);

surface.setTitle("Image Displaying");

img = loadImage("javaMeme.png");

image(img, 0, 0);

}

void draw()

{

}

RESULT

The image is displayed at (0,0).

EXPLANATION

IMAGE FILE

The image file must be saved in the sketch folder.

PIMAGE OBJECT

The PImage object holds the information about an image file. The object is created using the loadImage method.

DRAWING THE IMAGE

The image method draws a PImage object in the window. One specifies the x and y location of the top left corner of the image.

PROGRAM 2 – IMAGE RESIZING

· This program demonstrates how to resize an image and display it at different locations on the screen.

THE CODE

PImage img;

void setup()

{

size(950, 500);

surface.setTitle("Image Resizing");

img = loadImage("smiley.png");

background(255,255,255);

image(img, 0, 0);

image(img, 500, 200, img.width/2, img.height/2);

image(img, 750, 300, img.width/4, img.height/4);

image(img, 875, 350, img.width/8, img.height/8);

}

void draw()

{

}

RESULT

The same image is displayed at different sizes.

EXPLANATION

The only new concept here is in the image method. There are five parameters. The first parameter is the img object to be drawn. The next two are the x and y location that the top left corner of the image should be at. The fourth and fifth parameters refer to the size of the image where we can enter an amount of pixels.

PROGRAM 3 – RANDOM IMAGES

· This program loads 4 image files. Then, it randomly selects one file and displays it at a random location on the screen. It continues to add another random image every frame.

THE CODE

PImage img1;

PImage img2;

PImage img3;

PImage img4;

void setup()

{

size(600, 400);

surface.setTitle("Images – Random Images");

frameRate(1);

img1 = loadImage("A.png");

img2 = loadImage("B.png");

img3 = loadImage("C.png");

img4 = loadImage("D.png");

}

void draw()

{

//Select an image randomly and draw it

//at a random location.

int rn = (int)random(4)+1; //1to4

if (rn == 1)

{

image(img1, random(width), random(height));

}

if (rn == 2)

{

image(img2, random(width), random(height));

}

if (rn == 3)

{

image(img3, random(width), random(height));

}

if (rn == 4)

{

image(img4, random(width), random(height));

}

}

RESULT

Each frame, an image is randomly selected and displayed at a random location on the screen.

EXPLANATION

At the top, there are four datafields that will hold the PImage objects.

In the setup, we create the window and set a slow 1FPS frame rate. We also initialize each datafield to its image file.

In the draw, we randomly select one of the four images and draw it. Inside the image method, the second and third parameters specify the location where the image will be drawn. We use the random method to generate a random number between 0 and the width or height of the window.

PROGRAM 4 – CYCLING THROUGH IMAGES

· This program loads 4 image files and then cycles through them one after the other.

THE CODE

PImage img1;

PImage img2;

PImage img3;

PImage img4;

int current;

void setup()

{

size(200, 200);

surface.setTitle("Images - Cycling Images");

frameRate(1);

img1 = loadImage("A.png");

img2 = loadImage("B.png");

img3 = loadImage("C.png");

img4 = loadImage("D.png");

current = 1;

}

void draw()

{

//CLEAR THE SCREEN

background(255,255,255);

//DRAW CURRENT IMAGE

if(current == 1)

{

image(img1,0,0);

}

else if(current == 2)

{

image(img2,0,0);

}

else if(current == 3)

{

image(img3,0,0);

}

else if(current == 4)

{

image(img4,0,0);

}

//UPDATE CURRENT

current++;

if (current > 4)

{

current = 1;

}

}

RESULT

The program cycles through all of the loaded images.

EXPLANATION

In the draw section, the program displays the image based on the value of current. Current is always updated at the end of the frame.