Home

Awesome

ImageLoader

ImageLoader is an library for the Processing Development Environment (PDE).

ImageLoader is an simple to use API to load images from either Instagram, Flickr, Google, Giphy, Tumblr or your file system.

The API uses thread based loader task to fetch the images. It's possible to set an delay so that the task will run several times in the background and checks for new images. All images are stored in a list and can be accessed by several methods.

Keep in mind that GIFs can consume quite a lot of memory. So you might want to use the lazy load mode and clear the memory after some time. To decode the GIF files the Loader uses the gifAnimation library.

Example (Flickr)

ImageLoader loader;
ImageList list;
Image img;

void setup() {
  size(800, 450);

  loader = new FlickrLoader(this, apiKey, apiSecret);
  list = loader.start("sunset beach", false, 60 * 1000);
}

void draw() {
  if (img == null) {
    img = list.getRandom();
  } else {
    image(img.getImg(), 0, 0, width, height);
  }
}

void mousePressed() {
  img = list.getRandom();
}

Example (Giphy)

GifLoader loader;
GifList list;
PImage[] imgs;
int index;

void setup() {
  size(800, 450);
  frameRate(25);

  loader = new GiphyLoader(this, apiKey);
  list = loader.start("cat funny", false, 60 * 1000);

  index = 0;
}

void draw() {
  if (imgs == null) {
    if (list.size() > 0) {
      imgs = list.getRandom().getGifFrames();
    }
  } else {
    image(imgs[index], 0, 0, width, height);
    index++;
    if (index > imgs.length - 1) {
      index = 0;
    }
  }
}

void mousePressed() {
  imgs = list.getRandom().getGifFrames();
  index = 0;
}

API

To connect to the APIs from Flickr, Instagram, Tumblr, Giphy and Google the ImageLoader uses other libraries.

Instagram

First you need to register your application on the [Instagram developers page] (https://www.instagram.com/developer/). Afterwards you get your client id and some other information. Every new client application starts in sandbox mode and therefore has some [restrictions] (https://www.instagram.com/developer/limits/).

Client ID

ImageLoader loader = new InstagramLoader(this, clientId);

Be aware that the clientId wont work as long as you are in sandbox mode.

Access Token

ImageLoader loader = new InstagramLoader(this, accessToken, "");

To generate your access token, just follow these few steps:

Flickr

Get your Flickr API key and API secret by following the steps on the [Flickr developers page] (https://www.flickr.com/services/developer/api/).

ImageLoader loader = new FlickrLoader(this, apiKey, apiSecret);

Google

Get your Google API key by following the steps on the [Google developers page] (https://console.developers.google.com/start).

ImageLoader loader = new GoogleLoader(this, apiKey);

Giphy

Get your Giphy API key from the [Giphy Homepage] (https://api.giphy.com/).

GifLoader loader = new GiphyLoader(this, apiKey);

Tumblr

Get your Tumblr API key from the [Tumblr Homepage] (https://www.tumblr.com/docs/en/api/v2).

TublrImageLoader loader = new TublrImageLoader(this, apiKey, apiSecret);

How to install

Download ImageLoader library from here.

Unzip and copy it into the libraries folder in the Processing sketchbook. You will need to create this libraries folder if it does not exist.

To find (and change) the Processing sketchbook location on your computer, open the Preferences window from the Processing application (PDE) and look for the "Sketchbook location" item at the top.

By default the following locations are used for your sketchbook folder:

The folder structure for library Console should be as follows:

Processing
  libraries
    ImageLoader
      examples
      library
      reference
      src
      library.properties