Articles

    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.

    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.

    by Andrew Benson on
    Jun 9, 2014 2:32 PM

    • Luca De Rosso's icon
      Luca De Rosso's icon
      Luca De Rosso
      Jun 13 2017 | 12:18 pm
      Has anyone experienced maxurl's connection timeouts sort of blocking any future connection? After the above mentioned fixes, this patch works great for the first two hours or so, then I get a connection timeout and the only way to make it work again is to quit Max. Thoughts?
      Share
    • Cleia Dantas's icon
      Cleia Dantas's icon
      Cleia Dantas
      Mar 29 2018 | 6:55 am
      I followed the instructions from Ryan (March 24, 2016) I still can't get it to work. Using Max 7.3.4 My Instagram account is on Sandbox
    • PereVicalet's icon
      PereVicalet's icon
      PereVicalet
      Dec 11 2018 | 1:50 am
      Hello guys, any progress with it? Does anybody know how to going into insta stories from max with jitter? Thank you very much.