Extended circle packing script

Here you can download a script with more properties of the circle class:

http://www.contrechoc.com/crosslab/creativeDatabase.zip

The circles also have an image attached, which can be found in the datafolder of the sketch.
Also a sound is associated with the circles, also in the datafolder.

There is more interactivity:
clicking on the circles plays the sound and enlarges the circle, for 3 seconds, and the keyboard 1,2,3,4,5 etc are active the same way.

Circle packing scripts

For datavisualization you need some nice examples to start coding on:

http://www.cricketschirping.com/processing/CirclePacking1/ is certainly a nice one!
 as can be read in the script, here is an explanation:
http://wiki.mcneel.com/developer/sdksamples/2dcirclepacking

The example file has to be modified a bit, the noc library is deprecated and you can replace it with PVector:

PVector v = new PVector(); // instead of   Vector3D v = new Vector3D();

The circles have a random radius, you can change this in: ArrayList createRandomCircles(int n) .....

float myRadius = 30;//this was 10 + random (30)
Circle c = new Circle(random(width), random(height), myRadius);

The radius is chosen for all the circles which are put in the arraylist (the return of this function)
So here you can make the link between an array with data (for instance from the NYTimes Api examples).

With
text( "hello", (int)x, (int)y ); 


in the circle class:
  public void draw() {
    fill(myColor);
    stroke(myColor);
    strokeWeight(3);
    ellipse((int)x, (int)y, (int)radius*2, (int)radius*2);
    text( "hello", (int)x, (int)y );
  }


you can add a text to the circles. This text is static at the moment, but could come from an array of names of countries...

Here is this modified version of the script:
http://www.contrechoc.com/crosslab/circlePacking.zip

(Thx to Martijn, who found this script.)



other circle scripts can be found here:
http://www.openprocessing.org/visuals/?visualID=11727

Processing XML example

Working with XML is not too difficult if you know how to handle this format. To study here a simple example:

A XML is constructed and is read in the sketch.
You can follow the tree structure easily. More elaborate XML files are in principle the same.

This is the xml file:



/*
the xml file can be found in the link and is situated in the sketch folder
*/

XMLElement xml;

void setup(){

//loading the file

xml = new XMLElement(this, "xmlExample.xml");

//printing: look at the file structure


println( xml );


//get the first part of the upper branch


XMLElement myChannel = xml.getChild(0);

println( myChannel );

//now we will look at all the parts of the upper branch

int childCount = xml.getChildCount();

for (int i=0; i< childCount ; i++ ){
XMLElement countPart = xml.getChild(i);
println( countPart );
}



//we will print the text parts, but these are still xml elements


for (int i=0; i< childCount ; i++ ){
XMLElement countPart = xml.getChild(i);
XMLElement insidePart = countPart.getChild(0);//this is still inserted between text tags
println( insidePart );
}

//to get the text itself we have to ask for the content:

for (int i=0; i< childCount ; i++ ){
XMLElement countPart = xml.getChild(i);
XMLElement textPart = countPart.getChild(0);//you see that this can also be an array
String insidePart = textPart.getContent();

println( insidePart );
}
}
void draw(){
}





download this project as a sketch: http://www.contrechoc.com/crosslab/xmlExample.zip

Processing NYTimes API and JSON

Ok, just when you think you know XML, there is an API using JSON.
This is always so sad! But luckily some people have compassion and solved our problems:
http://blog.blprnt.com/blog/blprnt/processing-json-the-new-york-times

Following this blogpost, we can extract numbers from articles, and there is even a simple way to visualize the data.

Analyzing the JSON String:

when we get the full JSON file we see these parts:

{"body" : "Music CITY HALL COFFEE HOUSE The \"Rockin' the Courtroom\" musical series kicks off with Scott E. Moore, singer and guitarist, and Frank Bango, singer. Friday at 7 P.M. Tickets: $5. Next week, Caren Belle and Happy Boy. Hoboken City Hall, 94 Washington Street, Hoboken. (201) 420-2207. CLUB BENE Female impersonators take the stage in \"Boys Will Be" , "date" : "19951231" , "title" : "ON THE TOWNS" , "url" : "http:\/\/www.nytimes.com\/1995\/12\/31\/nyregion\/on-the-towns-050180.html"}

and other pieces that start with "body".

We also see that \" is used for quotes, and inside the body the main text is seperated from the date by a comma.

So we can use some String functions to extract the text from the results like this:

String request = baseURL + "?query=O.J.+Simpson&begin_date=19940101&end_date=19960101&api-key=" + apiKey;

String result = join( loadStrings( request ), "");

//println( result );

String[] resultList = split(result, "body");

for (int i = 0;i< resultList.length;i++){
//remove 5 front chars
String removeFrontSpaces = resultList[i].substring(5, resultList[i].length() );
//search for date and stop the string in front
int dateIndex = removeFrontSpaces.indexOf("date");
String resultWithoutDate = removeFrontSpaces.substring( 0, max ( dateIndex - 2, 0) );
//println (resultList[i] );// has " : " in front
//println (removeFrontSpaces );
println( resultWithoutDate );
println ("------------------------------");
}

Looking at the text, you can see "byline" as an indicator, this can be removed (if you want to) in the same way as date. You could also start the splitting at date and get the date out.

Here are the first few results:

------------------------------
Music CITY HALL COFFEE HOUSE The \"Rockin' the Courtroom\" musical series kicks off with Scott E. Moore, singer and guitarist, and Frank Bango, singer. Friday at 7 P.M. Tickets: $5. Next week, Caren Belle and Happy Boy. Hoboken City Hall, 94 Washington Street, Hoboken. (201) 420-2207. CLUB BENE Female impersonators take the stage in \"Boys Will Be" ,
------------------------------
They have sportcoats, E-mail and no suntan. Northwestern will not be playing its look-alike in the Rose Bowl; Harvard isn't eligible. The Wildcats are here for the first time in a half-century, thanks to either running back Darnell Autry or their longtime alum, Moses. A year ago this week, one of their leading tacklers was giving Penn State a" , "byline" : "By TOM FRIEND" ,
------------------------------
and so on...

Remark, often running the sketch, you get a NullPointerException, the request is not returned. This happens even if you use try catch structures. Just try a few times, the API must be very busy!

Roxane Torre has made this pdf with very useful info and exmples:
http://crosslabminor.files.wordpress.com/2011/04/dag32.pdf

Twitter XML structure

If we want to get the tweets from the twitterrequest we have to understand the structure of the XML twitter is sending us.
Here is an example of a "live" xml: http://api.twitter.com/1/statuses/user_timeline.xml?user_id=111370674

This is one XML request saved: user_timeline.xml

Processing reference: http://processing.org/reference/XMLElement.html

Referring back to the processing script in one of the former posts we see this:


XMLElement xml = new XMLElement(this, "http://twitter.com/statuses/user_timeline/8138312.rss");

//we can dive into the XML tree with the getChild();

XMLElement myChannel = xml.getChild(0);

//with getChild you can count the "nodes"

XMLElement[] tweets = myChannel.getChildren("item");

/*
with getChildren , you can search on the "name" of the t
ag, getting back an array: XMLElement array, for this you have to know the name of the array. In this case the name is "item" .

Then you get the node 0 of this "item", and ask for the content:
tweets[i].getChild(0).getContent();

(which are the tweet texts) these are Strings, so pieces of text.

*/



Remark, you can only do 150 request an hour to get tweets from one client (say a computer) So real time twitter streaming, showing new tweets immediately is not possible. Also gaming with extracting commands from tweets is too slow now.

Processing Twitter update

See the post about twitter.

We would like to put the XML inside the draw function, to get fresh tweets and do something with these tweets. The problem is the request rate: if you exceed the limit of 150 an hour (on a computer, called the client) you get an error:

<hash>
<request>/1/statuses/user_timeline.xml?user_id=111370675</request>
−
<error>
Rate limit exceeded. Clients may not make more than 150 requests per hour.
</error>
</hash>

So 2 times a minute should be possible?
Which means steering something around using tweets is too slow.