Processing: How to Load All Images in a Sketch Folder

Did you know you can create an array of images?! I just learned this. And the really exciting part is that you can rig up Processing to look through your Sketch folder to get the names of images to load into that array.

Whoa, wait. How you do that?

The listFileNames function comes courtesy of Daniel Shiffman in this Processing example. You can use sketchPath() to get the file path of your sketch. Plug that into listFileNames, and it’ll push the file names into an easy access string array, below creatively named “filenames.”

Here’s what my Timeline Sketch file looks like now. I’ve formatted the file names to be YEAR – Description of Event.jpg.

And presto. When you printArray(), you can see the file name and associated index. It goes alphabetical. Keep in mind, it’ll also add the name of your .pde file.

And how do you push those into an image array?

The syntax is just like any other array, except with PImage as the data type. Note that you’ll need to run the listFileNames function to load the image names into the filenames array. The for loop below will take those and put them into an image array called imgs.

PImage[] imgs= new PImage[NumberOfItemsInArray]
void setup() {
String path = sketchPath();
String[] filenames = listFileNames(path);
for (int i = 0; i < imgs.length; i++) {
imgs[i] = loadImage(filenames[i]);
}

String[] listFileNames(String dir) {
File file = new File(dir);
if (file.isDirectory()) {
String names[] = file.list();
return names;
} else {
return null;
}
}

When you go to display those images, you can run them through a loop and reference them by index, as you would any other type of array.

image(imgs[i],150,70);

That's the bones of it.

Let's integrate it into an example. My timeline sketch, for instance. The goal with that was to have a scrolling timeline that would populate images from certain ages as you go through it.

To make that work, I’m actually going to require a few different arrays. The image array, yes, but also a string array with the year they’re associated with so that Processing will know when to display them. I’m also creating a separate array for the names of the images, which are going to be the descriptions displayed at the top.

An Example

When you initially set this up, you’ll need to set the number of elements in the arrays (for the images, the dates, and their descriptions). I’ve started up with 11 images.

After the setup() brackets, you can throw in the listFileNames Function, the empty Draw block, and the keyPressed block which makes the timeline interactive.

The last piece loops through the array containing the dates associated with the images. If the date happens to fall within the currently active quarter century (represented by the variable “year” and “year +25” below), it’ll display the image and its description.

When you run it, this is what you’ll see as you scroll through the timeline.

The complete sketch is over at Gist.