The Coder's Handbook

Images

IMAGES

Saving An Image

Find an image and put it inside your project folder.


A note on image formats:

  • .png is strongly recommended as an image format

  • .jpg works, but it won't support transparency (lots of white backgrounds).

  • .gif works and supports transparency, but it won't be animated

Sticking to one image format will make your life a lot easier, since you won't need to keep checking file extensions.

Loading an Image

An image is stored on your computer's hard drive. To use it, we first need to load it into the program's memory. This is a relatively slow process - you don't want to load an image every time you draw it.


In general, we'll use setup() to load our images then draw them later.


Code:

PImage capybara; // Declaring the image variable


void setup()

{

capybara = loadImage("capybara.png"); // Loads image into memory

}

This is an image of a capybara, also known as the
Coconut Doggo, the most noble of all creatures.

Drawing an Image

  • Once you have loaded an image, you can draw it by referencing the variable storing that image. It has two versions:



Version #1 - Fixed Size

void image(PImage name, int x, int y)

  • Draws an image at x, y


Code:

image(capybara, 50, 50);



Version #2 - Scaling Size

void image(PImage name, int x, int y, int w, int h)

  • Draws an image at x, y and resizes it to be sized w x h


Code:

image(capybara, 50, 50, 200, 200)

Be careful when resizing images. It can caused images to become blurry or stretched - and tends to take a lot of runtime.

IMAGE FEATURES

Tint


void tint(int r, int g, int b)

  • Changes the image to be the specified color


Code:

tint(255, 0, 0);

image(capybara, 50, 50);


RESOURCES

Chapter 15 - Images

Shiffman 10.1 - Intro to Images

Shiffman 10.5 - Image Procesing with Pixels

Shiffman 10.6 - Pixel Neighbors
(Advanced)

Shiffman 10.7 - Painting with Pixels