Loading Images#

So far, we were drawing everything we needed ourselves. That puts serious limitations on the things we could do with our projects. Drawing things from regular shapes remains useful, but for artwork, it is imperative that you know how to load images.

External Files

These examples here will require image files, they are not as easy to copy and paste as all the other examples in this course. I still encourage you to try all of these code examples yourself. You can either use your own files or try files from the Example Code repository on Gitlab.

Simple Example (Pixel Image like PNG)#

PImage cookie; // A new type! `PImage`
float cookieRotation = 0;

void setup() {
    size(500, 500);
    cookie = loadImage("cookie.png");
}

void draw() {
    cookieRotation += 0.01;

    background(255);
    translate(250, 250);
    rotate(cookieRotation);
    image(cookie, -195, -200);
}

This draws a PNG image to our canvas, and all the rules we learned about drawing still apply (notably, in this example the image is shown spinning). We have three things we need for our image to work:

We declare a new variable of type PImage (its reference page has a lot more info!). It is called cookie, but the as usual, you can call it whatever makes sense to you.
We use setup() to load the image from a file location with loadImage(). This takes one parameter, which is the filename. Normally, image files are stored in the same place where the code file is stored but in a data directory¹.
Now that we've declared and loaded the image, we can use it anywhere we want. Here we just draw it with a call to image(), which takes our cookie variable and then an x and y coordinate.

Illustration of a cookie with chocolate chips — turns out, this site **does** use cookies.

Simple Example (Vector Graphic from SVG)#

PShape cookie;

void setup() {
    size(500, 500);
    cookie = loadShape("cookie.svg");  
}

void draw() {
    background(255);
    shape(cookie, -195, -200);
}

This looks almost exactly like the first example (I just skipped the rotation). We're declaring a PShape variable, load our file with loadShape() and finally draw it with shape().

Going Beyond Just Drawing#

Once you have loaded an image, your computer has a lot of information about it. You can get the image size with .width and .height like this:

PImage cookie;

void setup() {
    cookie = loadImage("cookie.png");
    println(cookie.width, " X ", cookie.height);
}

The program correctly displays the size as 391 by 400 pixels.

Object Syntax

This way of writing stuff with a dot is another glimpse at "object oriented programming". We will learn more about that later, because this is really useful.

Another interesting thing is to get or set the color value of single pixels! This can be done with .get(), which returns a color - another neat type we haven't really talked about. Let's build a tiny color picker:

PImage cookie;

void setup() {
  size(400, 400);
  cookie = loadImage("cookie.png");
}

void draw() {
    background(0);
    image(cookie, 0, 0);
    color pickedColor = cookie.get(mouseX, mouseY);
    fill(pickedColor);
    circle(mouseX - 20, mouseY + 10, 22);
}

Assignment: Load an Image and Draw With it

Load an image and create an animation like this:

It is OK to use any image you want. Make sure it is a pixel graphic (PNG or JPG work great!). It is easier to debug when it has a lot of different colors. Also the image should not be HUGE (photos from your camera are thousands of pixels wide and high).

Hint 1

You do not need to draw the actual image itself for this to work! In fact, the example above does not draw the image, it is just loaded and uses .get() on it to get the correct color.

Hint 2

You do not need to draw the actual image itself for this to work!

Bonus Assignment: Experiment!

The previous assignment assumes "color dots", but instead of the color, you could vary any other thing as well. Try different things. StrokeWeight, Rotation, whatever you want!

Graphics Sources#

There are various ways to create or get graphics for your games. Please remember to always credit the author. Here are a few sources that I use myself:

Always Credit the Author

In a university context, all work you hand in is assumed to be yours, that includes any assets that you use. Credit authors of clip art even if their license does not require it.

you can store the file wherever you want, but then you need to supply the whole path, which we'll get into later. Also it's usually a good idea to store all related project files in a place together. ↩