Source Code. Projects. Nerd Stuff. Art Stuff.

Lesson 4: Media

Processing uses a folder named data to store such files, so that you never have to think about their location when making a sketch that will run on the desktop, on the Web, or on a mobile device. There are three ways to save files to your data folder:

  1. After creating a new sketch, select “Add File” from the Sketch menu. The message “1 file added to sketch” should appear in the message area.
  2. Dragging files to the editor area of the Processing window. The data folder will be created automatically, and the confirmation message should appear.
  3. Manually: after creating a new sketch, open the sketch’s folder and create a folder called data. Any images saves into this folder will be found when you run your sketch. Note that doing it this way will not give you confirmation in the message area.

Images

After adding your image to the data folder, there are two steps to follow before you can draw an image to the screen:

  1. Create a PImage variable to store the image.
  2. Load the image into the variable with loadImage().

For example, to load the image “radImage.jpg” from your data folder, you would write

PImage img;

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

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

 

This creates a variable called img and stores your image there, so that you can manipulate it. For instance, you can substitute x- and y-coordinates with mouseX and mouseY so that its size varies depending on the mouse’s position. Read more about how to set image properties here.

You can add multiple images by repeating this process, keeping in mind that images loaded after others (lines further down in the code) will place them on top of those that came before.

GIF and PNG images support transparency, which means that pixels can be invisible or partially visible. 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. When possible, I prefer to use PNG files because of this 8-bit transparency, which generally results in smoother images that have more levels of control for manipulation.

Fonts

Processing can display text in many fonts other than the default. Before you display text in a different typeface, you need to convert one of the fonts on your computer to the VLW format, which stores each letter as a small image (bitmap). To do this, select Create Font from the Tools menu to open the dialog box. Specify the font you want to convert, as well as the size and whether you want it to be smooth (anti-aliased).

When you click the OK button in the Create Font tool, the VLW font is created and placed in the sketch’s data folder. Now it’s possible to load the font and add words to a sketch. This part is similar to working with images, but there’s one extra step. After adding the font to the sketch’s data folder:

  1. Create a PFont variable to store the font.
  2. Load the font into the variable with loadFont().
  3. Use the textFont() command to set the current font.

Now you can draw these letters to the screen with the text() function, and you can change the size with textSize(). There are many things you can do with text after you have loaded it. See the reference and find the Typography section for more info. Note that the characters you want to show on screen are placed between quotation marks.

Sometimes, many 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. Instead of:

PFont font;

void setup() {
  size(480, 120);
  font = loadFont("andaleMono-24.vlw");
  textFont(font);
}

void draw() {
  background(102);
  text("This is a large chunk of text", 26, 30, 240, 100);
}

 

try

PFont font;
String quote = "This is a large chunk of text";  // create String

void setup() {
  size(480, 120);
  font = loadFont("andaleMono-24.vlw");
  textFont(font);
}

void draw() {
  background(102);
  text(quote, 26, 30, 240, 100); // replace text here
}

 

Strings can be really useful for manipulating characters and you should get comfortable with using them.

Shapes

If you make vector shapes in a program like Inkscape or Illustrator, you can load them into Processing directly. This is helpful for shapes you’d rather not build with Processing’s drawing functions. As with images, you need to add them to your sketch before they can be loaded. These will be SVG images, and the parameters for shape() are similar to image(). Unlike raster images, vector shapes can be scaled to any size without losing resolution. View the references for shape() and PShape to learn more.