Loading images or fonts to your code can be done in a similar way:

Images:

• You will use the PImage data type.
• Save your sketch first. Then either drag the image file onto your the Processing IDE and see it automatically create a data folder containing the image inside of the sketch folder. Or manually add the data folder with the image file inside.

• Declare, load and display an image as follows:

PImage photo;

void setup() {
  size(100, 100);
  photo = loadImage("laDefense.jpg");
}

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

• Note that in the image(photo,x,y) function above. x, y are the coordinates where the image will be drawn.
• If the image function is called with 5 arguments eg.

  image(img, 0, 0, width/2, height/2);

  Then the first parameter is the variable containing the image eg. img. The next two are the x and y location of where the image is to be displayed. The 4th and 5th arguments are the custom width and height of the image eg. width/2, height/2.

To use this effectively, you are likely to want to take an image, remove its background and then save it as a png which is an image file format that can preserve transparency. In this way you can then move the image around your screen and you will only see it, and not the background.

Options to remove a background from an image and save as a png:

• Remove background in photoshop. There are many tutorials online on how to do this. Here is one.
• Don’t have photoshop, here is a way to remove an image background using Powerpoint: https://youtu.be/6ZqpH3cMZMg

Add Fonts to your sketches:

Follow the instructions here:

https://processing.org/reference/PFont.html