IDAT 102: Arch-OS bouncing ball visualisation

For my visualisation, I have decided to do a bouncing ball, which is influenced by the values of the first digit of the data captured from Arch-OS's Atrium A Heat Flow sensor in the Portland Square Building of the University. Because I wanted the illustration to represent the flow of the heat (hence the name of the sensor that I chose to use in my visualisation), I looked into pre-existing examples of data visualisations (http://vimeo.com/15088939) before deciding to go down the simpler route for my visualisation.

The data is first taken from the RSS feed using XMLElement in Processing, then the value of the data is taken from the 'description' child of the RSS using "value = xml.getChildren("channel/item/description");". The term 'child' in this context refers to a subsection within a 'parent', which in turn refers to the root of the RSS. The colour also varies according to the values of the RSS data, which varies between darker shades of red and grey depending on how high or how low either values are in each of the RGB attributes of the circle colour property.

The values are then parsed as floating-point integers, which is then used to create values which will be used for the random positioning and the colour properties by getting the content from value and then using charAt to obtain the indexes of the digits:

    float v = int(value[i].getContent().charAt(1));
    float v2 = int(value[i].getContent().charAt(2));
    float v3 = int(value[i].getContent().charAt(3));
    float v4 = int(value[i].getContent().charAt(4));

Then, the values are added to the attributes:

   fill(v,v2,v3);

   ellipse(ceil(random(0,v)) * 8, height/2 + 20, 50,50);

Note that the ellipse uses 'ceil' to round up a random number and the number obtained from the first index of the value (v) to the nearest whole integer, then it is multiplied by 8 to create the X value, and then the Y value is created by dividing the height by 2 and adding that by 20. The result, depending on the RSS value on a given day, is a ball that bounces left and right in rapid motions.

This is the entire source code of the project:


import processing.xml.*;

XMLElement xml;
XMLElement[] title;
XMLElement[] pubDate;
XMLElement[] value;

void setup(){
  size(600,100);
  background(0);
  smooth();
  String url = "http://x2.i-dat.org/archos/archive.rss?source=.AtriumA_heating_flow";
  XMLElement xml = new XMLElement(this, url);
  title = xml.getChildren("channel/item/title");
  pubDate = xml.getChildren("channel/item/pubDate");
  value = xml.getChildren("channel/item/description");

}

void draw(){
  background(255);
  for(int i=1; i<value.length; i++){
    float v = int(value[i].getContent().charAt(1));
    float v2 = int(value[i].getContent().charAt(2));
    float v3 = int(value[i].getContent().charAt(3));
    float v4 = int(value[i].getContent().charAt(4));
    fill(v,v2,v3);
   ellipse(ceil(random(0,v)) * 8, height/2 + 20, 50,50);
 }
}