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:

img = None

def setup():
    global img
    size(480, 120)
    img = loadImage("lunar.jpg")
    
def draw():
    image(img, 0, 0)

Optional fourth and fifth parameters to the image function 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.

Note that we’ve initialized the img variable in the preceding example to the value None, which is a special placeholder value in Python that allows us to create a variable but leave it “empty.” It’s only later, in setup, that we call the loadImage function and assign a real value to the img variable. (This variable assignment dance is necessary because the loadImage function—and many of the other functions for loading and creating media resources discussed in this chapter—can’t be called until after setup is called.)

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:

img1 = None
img2 = None

def setup():
    global img1, img2
    size(480, 120)
    img1 = loadImage("lunar.jpg")
    img2 = loadImage("capsule.jpg")
    
def 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:

img = None

def setup():
  global img
  size(480, 120)
  img = loadImage("lunar.jpg")

def 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”.) You can convert images to the JPEG, PNG, and GIF formats using programs like GIMP and Photoshop. Digital cameras typically 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

img = None

def setup():
  global img
  size(480, 120)
  img = loadImage("clouds.gif")
  
def draw():
  background(255)
  image(img, 0, 0)
  image(img, 0, mouseY * -1)

Example 7-5: Transparency with a PNG

img = None

def setup():
  global img
  size(480, 120)
  img = loadImage("clouds.png")
  
def draw():
  background(255)
  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():

font = None

def setup():
  global font
  size(480, 120)
  font = createFont("SourceCodePro-Regular.ttf", 32)
  textFont(font)

def 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:

font = None

def setup():
  global font
  size(480, 120)
  font = createFont("SourceCodePro-Regular.ttf", 24)
  textFont(font)

def 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:

font = None
quote = "That’s one small step for man..."

def setup():
  global font
  size(480, 120)
  font = createFont("SourceCodePro-Regular.ttf", 24)
  textFont(font)

def 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:

network = None

def setup():
  global network
  size(480, 120)
  network = loadShape("network.svg")

def 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:

network = None

def setup():
  global network
  size(240, 120)
  shapeMode(CENTER)
  network = loadShape("network.svg")

def draw():
  background(0)
  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(). Once this happens,  the shape can be used anywhere in the program with the shape() function:

dino = None

def setup():
  global dino
  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()

def 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.