CHAPTER 15: IMAGES

SECTIONS 1, 2, 3

GETTING STARTED

4 steps to draw an image to the screen.

1. Add file to data folder
2. Create the PImage variable
3. Load the image into the variable with loadImage()
4. Draw the image image() function

PImage is a class for loading and displaying an image.

​

PRACTICE ACTIVITY

• Example 15-1. �Use different image from the textbook.�
• Next, control the height & width with the mouse.

To get the image:

• Drag file into Processing window, or
• Click SKETCH>Add file, or
• Create the data folder and add file manually.

Other considerations

• Accepted files are GIF, JPG, PNG & TGA
• Spaces are OK, but file name is case sensitive.

RESIZING AN IMAGE

• Problem: �Using a 4th & 5th parameter to resize an image does not work consistently. e.g. image(img, 0, 0, width/2, height/2)
• Solution: There is a consistency issue with how images are rendered when sized that way.
• Ideally, should resize in image editor.
• A workaround is to calculate by using image dimensions. e.g. �image(img, 0, 0, 240/2, 190/2)
• The proper function is with resize()�https://processing.org/reference/PImage_resize_.html

ANIMATE - This is what we’ll do in Example 15-2

• Use translate and rotate to animate an image
• Increment or decrement going across.
• Remember that rotate is measured in radians
• Change mode if desired:�rectMode(CENTER)

ANOTHER PRACTICE EXERCISE

• Open your Example 15-2 and let’s examine code.
• Use your own picture, or get one from pngpix.com, www.pngimg.com, cleanpng.com, or freepngimg.com
• For a remix, add JPG picture as background()

SYNTAX OF TINT AND ALPHA

1 argument: tint(brightness)

2 arguments: tint(brightness, alpha)

3 arguments: tint(r, g, b)

4 arguments: tint(r, g, b, alpha)

Alpha is from 0-255, where:

0 is completely transparent

255 is completely opaque

About Alpha

Tint

First Example

Original

tint(255, 100);

Shows rainbow row behind waterfront pineapple.

Brightness and alpha

Another Example:

tint(255, 0, 0);

Or

tint(#FF0000);

​

Shows a red tint with no transparency

Another Example:

background(0);

tint(0,200,255 );

…blue/green with no transparency

background(0);

tint(0,200,255,50);

…blue/green with high transparency against black background.

INTERESTING COMPARISON TO “THE BOUNCING BALL”

//see page 86. Reverse polarity

PImage img;

float transparency = 255;

float speed = 1;

void setup() {

size(400, 400);

img = loadImage("flower_red.png");

}

void draw() {

background(0);

transparency = transparency - speed;

tint(255, transparency);

image(img, 100, 80);

if ((transparency < 0) || (transparency >255) ){

speed = speed * -1;

}

println(transparency);

}

​

Install Video Library

• Like the book says on pg 226, go to Sketch>Import Library.
• But instead of Add Library, choose Manage Library
• Search for video

​

​

• Choose “Video Library for Processing 4”
• Click Install at bottom-right of screen.
• After installed, a checkmark will show at the left of Video Library for Processing 4.
• You may close the Contribution Manager.
• Follow page 335 (section 16-2) to display your video

​

​