At some point you’ll probably want to load xml from another domain into a sketch but because of javascript cross-domain restrictions, you can’t simply add the url to your processing sketch if you want it to work with processing.js. You need to create a proxy. Simply put, a proxy allows you to request resources from another domain. The php proxy I used to request one of my feeds is extremely basic, but it does the job.

   header('Content-type: application/xml');
   echo file_get_contents('');

I was having some trouble getting the data back to my processing sketch because I had been trying to handle the data as xml, but found that it needed to be passed to processing as a string, ie. the return datatype for my jquery request needed to be ‘html’ and not ‘xml’, and the data then needed to be passed back to a function that was expecting a string, rather than an XMLElement.

    type: "GET",
    url: "getXML.php",
    dataType: "html",
    success: sendXMLToProcessing

function sendXMLToProcessing(data)
    var pjs = Processing.getInstanceById('dataViz');

To communicate with the sketch, the canvas container needs to be assigned an id. Now to call a function inside the sketch, we simply create a variable to hold a reference to that canvas, and from there, it’s plain sailing.

<canvas id="dataViz" data-processing-sources="sketch.pde"></canvas> 

last fm data visualization

Download files