Example 7-1: Load an Image

After all three steps are done, you can draw the image to the screen with the image() function. The first parameter to image() specifies the image to draw; the second and third set the x and y coordinates:

PImage img;

void setup() {
  size(480, 120);
  img = loadImage("lunar.jpg");
}

void draw() {
  image(img, 0, 0);
}

Optional fourth and fifth parameters set the width and height to draw the image. If the fourth and fifth parameters are not used, the image is drawn at the size at which it was created.

These next examples show how to work with more than one image in the same program and how to resize an image.

Example 7-2: Load More Images

For this example, you’ll need to add the capsule.jpg file (found in the media folder you downloaded) to your sketch using one of the methods described earlier:

PImage img1;
PImage img2;

void setup() {
  size(480, 120);
  img1 = loadImage("lunar.jpg");
  img2 = loadImage("capsule.jpg");
}

void draw() {
  image(img1, -120, 0);
  image(img1, 130, 0, 240, 120);
  image(img2, 300, 0, 240, 120);
}

Example 7-3: Mousing Around with Images

When the mouseX and mouseY values are used as part of the fourth and fifth parameters of image(), the image size changes as the mouse moves:

PImage img;

void setup() {
  size(480, 120);
  img = loadImage("lunar.jpg");
}

void draw() {
  background(0);
  image(img, 0, 0, mouseX * 2, mouseY * 2);
}

Processing can load and display raster images in the JPEG, PNG, and GIF formats. (Vector shapes in the SVG format can be displayed in a different way, as described in “Shapes” later in this chapter.) You can convert images to the JPEG, PNG, and GIF formats using programs like GIMP and Photoshop. Most digital cameras save JPEG images that are much larger than the drawing area of most Processing sketches, so resizing such images before they are added to the data folder will make your sketches run more efficiently.

GIF and PNG images support transparency, which means that pixels can be invisible or partially visible (recall the discussion of color() and alpha values in Example 3-17). GIF images have 1-bit transparency, which means that pixels are either fully opaque or fully transparent. PNG images have 8-bit transparency, which means that each pixel can have a variable level of opacity. The following examples show the difference, using the clouds.gif and clouds.png files found in the media folder that you downloaded. Be sure to add them to the sketch before trying each example.

Example 7-4: Transparency with a GIF

PImage img;

void setup() {
  size(480, 120);
  img = loadImage("clouds.gif");
}
void draw() {
  background(255);
  image(img, 0, 0);
  image(img, 0, mouseY * -1);
}

Example 7-5: Transparency with a PNG

PImage img;

void setup() {
  size(480, 120);
  img = loadImage("clouds.png");
}

void draw() {
  background(204);
  image(img, 0, 0);
  image(img, 0, mouseY * -1);
}

Example 7-6: Drawing with Fonts

Now you can draw these letters to the screen with the text()  function, and you can change the size  with textSize():

PFont font;

void setup() {
  size(480, 120);
  font = createFont("SourceCodePro-Regular.ttf", 32);
  textFont(font);
}

void draw() {
  background(102);
  textSize(32);
  text("That’s one small step for man...", 25, 60);
  textSize(16);
  text("That’s one small step for man...", 27, 90);
}

The first parameter to text() is the character(s) to draw to the screen. (Notice that the characters are enclosed within quotes.) The second and third parameters set the horizontal and vertical location. The location is relative to the baseline of the text (see Figure 7-1).

Figure 7-1. Typography coordinates

Example 7-7: Draw Text in a Box

You can also set text to draw inside a box by adding fourth and fifth parameters that specify the width and height of the box:

PFont font;

void setup() {
  size(480, 120);
  font = createFont("SourceCodePro-Regular.ttf", 24);
  textFont(font);
}

void draw() {
  background(102);
  text("That’s one small step for man...", 26, 24, 240, 100);
}

Example 7-8: Store Text in a String

In the previous example, the words inside the text() function start to make the code difficult to read. We can store these words in a variable to make the code more modular. The String data type is used to store text data. Here’s a new version of the previous example that uses a String:

PFont font;
String quote = "That's one small step for man...";

void setup() {
  size(480, 120);
  font = createFont("SourceCodePro-Regular.ttf", 24);
  textFont(font);
}

void draw() {
  background(102);
  text(quote, 26, 24, 240, 100);
}

There’s a set of additional functions that affect how letters are displayed on screen. They are explained, with examples, in the Typography category of the Processing Reference.

Example 7-9: Draw with Shapes

After following these steps, you can draw the image to the screen with the shape() function:

PShape network;

void setup() {
  size(480, 120);
  network = loadShape("network.svg");
}

void draw() {
  background(0);
  shape(network, 30, 10);
  shape(network, 180, 10, 280, 280);
}

The parameters for shape() are similar to image(). The first parameter tells shape() which SVG to draw and the next pair sets the position. Optional fourth and fifth parameters set the width and height.

Example 7-10: Scaling Shapes

Unlike raster images, vector shapes can be scaled to any size without losing resolution. In this example, the shape is scaled based on the mouseX variable, and the shapeMode() function is used to draw the shape from its center, rather than the default position, the upper-left corner:

PShape network;

void setup() {
  size(240, 120);
  shapeMode(CENTER);
  network = loadShape("network.svg");
}

void draw() {
  background(0);
  float diameter = map(mouseX, 0, width, 10, 800);
  shape(network, 120, 60, diameter, diameter);
}

Example 7-11: Creating a New Shape

In addition to loading shapes through the data folder, new shapes can be created with code through the createShape() function. In the next example, one of the creatures from Example 3-21 is built in the setup() function. Once this happens, the shape can be used anywhere in the program with the shape() function:

PShape dino;

void setup() {
  size(480, 120);
  dino = createShape();
  dino.beginShape();
  dino.fill(153, 176, 180);
  dino.vertex(50, 120);
  dino.vertex(100, 90);
  dino.vertex(110, 60);
  dino.vertex(80, 20);
  dino.vertex(210, 60);
  dino.vertex(160, 80);
  dino.vertex(200, 90);
  dino.vertex(140, 100);
  dino.vertex(130, 120);
  dino.endShape();
}

void draw() {
  background(204);
  translate(mouseX - 120, 0);
  shape(dino, 0, 0);
}

Making a custom PShape with createShape() can make sketches more efficient when the same shape is drawn many times.