Use MaxURL to Create a Realtime Instagram Collage

New with Max 6.1.7, the maxurl object gives you the ability to easily connect Max with the web using HTTP messages. If you've been thinking about creating a crowd-sourced multimedia patch or a data-driven interactive work, now is a good time to give it a shot. To demonstrate one possible direction, in this tutorial we'll look at creating a Jitter collage with Instagram photos.

• Download the Max Project and place it in your Max/Projects folder to get started.Important note: You must have Max 6.1.7 (or later) installed.

Diving In

If you haven't looked inside the maxurl help patch, I recommend you start there and familiarize yourself with the different tabs. There's a lot there and lots of practical examples that will give you an idea of how to use this object in a Max patch. For this tutorial, we'll be using the Javascript version of the object, XMLHttpRequest (should be familar to anyone doing Web development). The easy text manipulation in Javascript and built-in JSON parsing are a huge help for this sort of stuff.

Since we're using the Instagram API to run this, you will need to visit the Instagram developer site to get your own API client ID. If you already have an Instagram account, it's really simple. Keep the client ID handy because you'll need it later.

Setting up the XMLHttpRequest

The "bang" function in our Javascript will be used to create and send our HTTP messages.
function bang()
{
    //create a XMLHttpRequest object
    ajaxreq = new XMLHttpRequest();
    //set the HTTP message to be sent (usually a special formatted URL)
    ajaxreq.open("GET",api_string);
    //set the callback function
    ajaxreq.onreadystatechange = getPictures;
    //send the request
    ajaxreq.send();
}
The message that gets sent in this function is defined by the "api_string" variable. In order to have a valid request, we're going to need to set up a proper request string. By reading over the Instagram API reference, I found that we can get recent popular images by sending the string "https://api.instagram.com/v1/tags/"+tag+"/media/recent?client_id=client-id" Knowing this, we can make this simple function to grab recently popular images:
function popular(){
    api_string = "https://api.instagram.com/v1/media/popular?client_id="+clientID;
    bang();
}

Handling the Response

Back in our bang() function, we need to set up a callback function that gets triggered when the API response comes back. In our case, we are going to get a JSON object describing a collection of images. There's a lot of data that comes in there, but we are only focusing on the source URL of the images themselves. Here is what our callback function looks like:
function getPictures()
{
    payload = JSON.parse(ajaxreq.response);
    imageurl = new Array();
    for (i=0;i < payload.data.length;i++){
        imageurl[i]= payload.data[i].images.standard_resolution.url;
        getImageURL(i);
    }
}
In there we convert the response JSON to a Javascript object (JSON.parse), and for each image in the response we save the names of the image into an array and then call a function that downloads the image to the /media folder of the project.
function getImageURL(image){
        var pname = imageurl[image].replace(/^.*(\\|\/|\:)/, '');
        var pp = new XMLHttpRequest();
        pp.open("GET",imageurl[image]);
        pp._setRequestKey("filename_out",imagepath+pname);
        pp.onreadystatechange= filewriteCallback;
        pp.send();
        outlet(0,pname);
}

Back in the Patcher

Once we've got the image files downloaded we can just take advantage of the auto-populate feature of umenu in our Max patcher to create an easy interface to randomly load those image files in jit.qt.movie. To try a search, you'll want to go in the Max patcher and send a message to the Javascript that sets the client ID (remember that?). Once that is set, you can try sending the "popular" message to trigger the search and download process. Once that is going, you can turn on the qmetro to the right and watch the images accumulate. Try using the "offset" attrui to animate the collage.

Now that you've got the basics in place to start pulling in and using photos, try exploring the API and doing other types of image search. There are also lots of different web APIs that you can explore to connect your Max patch.