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 last.fm feeds is extremely basic, but it does the job.

<?php
   header('Content-type: application/xml');
   echo file_get_contents('http://www.site.co.za/data.xml');
?>

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.

$.ajax({
    type: "GET",
    url: "getXML.php",
    dataType: "html",
    success: sendXMLToProcessing
});

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

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