Website Rebrand

Well my website has been fully rebranded and finished. It was a long hard task and i'm still not that happy with it but it will do for now until I work on it over the summer.

Take a look: http://www.tomsaundersmpt.co.uk/

The Data

And here is the data we collected and used in our sketch.

Click Here

The Processing Sketch

Thanks to Jon our sketch is now online to be viewed. It can be seen here. You may have to wait a while for the first balls to appear. The rate the balls appear is determined by when the bluetooth device was first detected.

So thats it we have transformed Stonehouse by importing activity from other areas and puting it into Stonehouse.

The Visual Element is Complete - Part 2

Continuing on from the last post here is some more code from our Processing Sketch and what it all does.

for (int r= 0; r < count; r++){
if((Fdetect[r] < metricTime)&&(metricTime < Fdetect[r]+3000)){
active[r] = "true";
}else{
active[r] = "false";
}

This checks to see if a particular device had been detected yet.

for(int z = 0; z < count;z++){
if(active[z] == "true"){
//BALL - WALL COLLISIONS
if((posX[z] < rad)||(posX[z] > width -rad)){
speedX[z] = -speedX[z] *loss;
}
if((posY[z] < rad)||(posY[z] > height)){
speedY[z] = -speedY[z] *loss;
}
if(posZ[z] < -10000 +rad){
speedZ[z] = -speedZ[z] *loss;
}
//balls that go beyond the camera are deactivated
if(posZ[z] > 1000){
active[z] = "false";
}

//BALL - BALL COLLISIONS
for(int others = 0; others < count;others++){
if(others != z){
if(ballSize > dist(posX[z],posY[z],posZ[z],posX[others],posY[others],posZ[others])){
TspeedX = speedY[z] *loss;
TspeedY = speedX[z] *loss;
TspeedZ = speedZ[z] *loss;
speedY[z] = speedY[others];
speedX[z] = speedX[others];
speedZ[z] = speedZ[others];
speedY[others] = TspeedY *loss;
speedX[others] = TspeedX *loss;
speedZ[others] = TspeedZ *loss;
}
}
}

//BALL - FLOOR COLLISIONS

speedY[z] = speedY[z] - gravity; //gravity

speedZ[z] = speedZ[z] - 0.2;

posX[z] = posX[z] - speedX[z] *drag;
posY[z] = posY[z] - speedY[z] *drag;
posZ[z] = posZ[z] - speedZ[z] *drag;


pushMatrix();
noStroke();
translate(posX[z],posY[z],posZ[z]);
fill(50,50,200);
sphere(ballSize);
sphereDetail(10);
popMatrix();
}
}

And all of this code controls the bouncing balls. It detects if they bounce of the sides, the ground or eachother and then acts accordingly.

PImage a = loadImage("stonehouse.jpg");
beginShape();
texture(a);
translate(500+width/2.0,650+height/2.0, -100);
fill(255);
scale(300);
vertex(-20, -20, -30, 0, 0);
vertex( 20, -20, -30, 1, 0);
vertex( 20, 20, -30, 1, 1);
vertex(-20, 20, -30, 0, 1);
endShape();
}

And finally this code is just to display the image of the street behind it all. Thats all folks the sketch has been complete.

The Visual Element is Complete - Part 1

Its taken a while but we have finally completed the Processing Sketch that visualises the data we have collected. I won't post up every bit of code that features in our sketch but here are a few of the important bits:

import processing.xml.*;

//DATA GATHERING
XMLElement xml;
XMLElement xmlGrandChild;
float FdetectLow = 9999999;
float LdetectHigh = 0;
int timer;
int LastTime;
int playtime = 600;
float metricTime;

String[] active = new String[1];
String[] address = new String[1];
float[] Fdetect = new float[1];
float[] Ldetect = new float[1];
String[] name = new String[1];
int[] times = new int[1];

This bit essentially parses our XML file and puts it into variables to use later on.

//First Detected
xmlGrandChild = xmlChild.getChild(5);
float temp[] = float(splitTokens(xmlGrandChild.getContent(), " :"));
Fdetect[i] = round(((temp[3]/86400)+(temp[2]/1440)+(temp[1]/24))*pow(10,6));
if(Fdetect[i] < FdetectLow){
FdetectLow = Fdetect[i];
}

//Last Detected
xmlGrandChild = xmlChild.getChild(6);
float temp2[] = float(splitTokens(xmlGrandChild.getContent(), " :"));
Ldetect[i] = round(((temp2[3]/86400)+(temp2[2]/1440)+(temp2[1]/24))*pow(10,6));
if(Ldetect[i] > LdetectHigh){
LdetectHigh = Ldetect[i];
}

}
float duration = LdetectHigh - FdetectLow; //duration in metric time

All of this works out when a device was first detected and when it was last detected so we can then work out how long a device has been active.

//initial positions and speeds
for(int x = 0; x < count;x++){
posX[x] = random((width/2)-250,(width/2)+250);
posY[x] = random(20,200);
posZ[x] = random(-10000,-9800);
speedX[x] = random(-10,10);
speedY[x] = random(-10,10);
speedZ[x] = random(10);
}
}

This code works out where each ball starts off in our sketch and how fast it is going. This was done manually using random numbers rather than using the data we collected otherwise they would all be doing something similar!

Thats all for now I will explain more later.

The Street

Here is a photo of the street that we may use in our Processing Sketch.

The Visual Element And Processing

We have decided on our visual element once again. Now that we are using Processing we've been inspired by something that I did for IDAT102 in Processing. It was a simple 2D bouncing ball idea but the idea now is to use our data to produce bouncing balls in 3D. Jon has been working on something in his spare time using 3D bouncing balls and we will look to implement that into our project by making them bounce down an image of a street in Stonehouse. This fits in with the Transforming Stonehouse theme because our aim is to use some of the activity that occurs in other parts of the city (ie. collecting our data in the Drake Circus Shopping Centre which is in town) and then injecting that into the Stonehouse area because at the moment it is not as lively as it could be.

The Switch to Processing

Today, we can confirm that Jon and I are switching software from Flash to Processing. We think it will prove easier for the visual side of our project and also I am defintely more confident in using Processing that I am with Flash so it will be easier for both of us to understand and get it to work. Jon will port and translate the current actionscript over to Processing so we can start work on that. We have since decided against the bars idea however and will come up with something new soon.

Collecting The Data

Today Jon and I collected our data. We used a bluetooth adapter and stood in the middle of the mall and waited for people to walk past who had bluetooth devices turned on. When someone walked past the adapter picked up the device's name, the time it was picked up, the type of device it was and gave each one an individual ID. We managed to pick up 400 devices in just an hour and then exported it as an XML file which we can then parse.

Processing Sketch - Evaluating

Overall I must say that I am mostly pleased with my sketch. Despite me not having the skill set to write the code for some things I wanted to implement I still managed to get a half decent looking processing sketch.

I am most pleased that I managed to get it to read the XML and then put the data into floats for me to use because this was a part I thought I would struggle with but once I found the correct code this was not that difficult. Another bit I am pleased with is that the balls bounce around all over the stage as originally I struggled to get them to do anything but bounce from the left to the right.

Things I am not too happy about is that I was not able to get the balls to bounce off eachother, it seems that collision detection is more than a bitch in processing than in flash! Also I was a bit upset, but not overly, that I was not able to use XML data to determine how many balls appeared on stage. This was purely because I had no idea what code to write that would achieve this. However I think 8 balls are more than enough for this sketch. Also some may say that its a little bland looking which I can understand as I am not too happy about the white background but there is little I could do really because white truely is the best colour to display things.

So to summarise, I am happy with this because despite enjoying processing I did find some parts difficult and also was not able to get some parts of my idea to work. But overall I am pleased with my sketch and I believe that it is far more interesting to look at than the ArchOS feed!

Processing Sketch - Final Touches

Now that I had the code that would get the data I wanted and the code for the balls I had to do was setup the draw function and create the balls. Unfortunately I could not work out a way to get the balls to bounce off one another and neither could I find out how to use a number to generate objects randomly so I had to create the balls manually as such:

ball1 = new Ball(LT1_Hum);
ball2 = new Ball(LT1_Temp);
ball3 = new Ball(LT2_Hum);
ball4 = new Ball(LT2_Temp);
ball5 = new Ball(LT3_Hum);
ball6 = new Ball(LT3_Temp);
ball7 = new Ball(AtriumA3rd_Temp);
ball8 = new Ball(AtriumA5th_Temp);

And once that was done I entered the float name into the brackets and if you remember from an earlier post the number in the brackets would be the radius.

And here is my draw function that displays the balls:

void draw() {
background(255);
ball1.move();
ball2.move();
ball3.move();
ball4.move();
ball5.move();
ball6.move();
ball7.move();
ball8.move();
ball1.display();
ball2.display();
ball3.display();
ball4.display();
ball5.display();
ball6.display();
ball7.display();
ball8.display();
}

That is it, that is how my processing sketch was made. I will evaluate it properly at some point in the future.

Processing Sketch - Getting The Data

Now that my balls were practically finished I thought I would get onto writing the code that would collect the data I was going to use.

First of all I setup the floats that I was going to use:

float outsidetemperature;
float windspeed;
float windvane;
float humidity;
float LT1_Hum;
float LT1_Temp;
float LT2_Hum;
float LT2_Temp;
float LT3_Hum;
float LT3_Temp;
float AtriumA3rd_Temp;
float AtriumA5th_Temp;

I will state later on why I chose these particular bits of data.

Then I wrote these lines of code to get the numbers that I wanted.

outsidetemperature = float(description[21].getContent());
windspeed = float(description[37].getContent());
windvane = float(description[36].getContent());
humidity = float(description[20].getContent());
LT1_Hum = float(description[14].getContent());
LT1_Temp = float(description[15].getContent());
LT2_Hum = float(description[16].getContent());
LT2_Temp = float(description[17].getContent());
LT3_Hum = float(description[18].getContent());
LT3_Temp = float(description[19].getContent());
AtriumA3rd_Temp = float(description[23].getContent());
AtriumA5th_Temp = float(description[24].getContent());

I worked out that the XML feed was sort of like an array and thus by entering a number between the square brackets I could select what data I wanted using getContent. Now these were stored into the variables all I would have to do is type the float name and that number would be used.

Processing Sketch - The Bouncing Balls

Now that I have written the code that will read the XML I thought I would make a start on the balls which will appear in my sketch. I opened up a brand new tab and wrote the code to get the balls to bounce off the walls. I decided to leave the complicated collision detection stuff until later.

class Ball {

float r; //this is the circle's radius
float x,y;
float xspeed,yspeed;
color c;

Ball(float tempR) {
r = tempR;
x = random(width);
y = random(height);
xspeed = random( -5,5);
yspeed = random( -5,5);
}

void move() {
x += xspeed;
y += yspeed;

if (x > width || x < 0) {
xspeed *= - 1;
}

if (y > height || y < 0) {
yspeed *= - 1;

void display() {
stroke(0);
fill(c);
ellipse(x,y,r*2,r*2);
c = color(100,50);//using a basic grey colour for now

This code creates the Ball class and it sets it speed and colour (for now, later I will look to making these data from the XML feed). I have also set up for the ball to bounce of the sides of the stage.

Processing Sketch - The Start

I have chosen to go with the bouncing balls idea and have just started work on it today. First off I have written my code that will read the XML data I will need and the setup.

import processing.xml.*;

XMLElement xml;
XMLElement[] title;
XMLElement[] pubDate;
XMLElement[] description;

void setup()
{
size(500,500);
background(255);
smooth();
frameRate(60);
String url = "http://arch-os.scce.plymouth.ac.uk/bms_data.rss";
XMLElement xml = new XMLElement(this, url);
title = xml.getChildren("channel/item/title");
pubDate = xml.getChildren("channel/item/pubDate");
description = xml.getChildren("channel/item/description");

And thats all for today folks. In the next view posts I will describe the process in making my sketch.

Processing Sketch - First Thoughts

Ah processing I was actually enjoying it during the sessions but now theres an assignment I think may begin to hate it. As always with assignments I go through the initial ideas stage. However it seems that I am stuck for ideas with this one. Currently I've only got these 2 ideas:

Bouncing Balls: I will have balls bouncing off the sides of the stage and off eachother changing colour and/or size based on the XML data. I will also hopefully be able to use some data to determine how many balls appear on the stage at one time.

Falling Objects: There will be objects falling from the top of the stage and falling through the bottom. Again I would use the data to change the colour/size and also determin how many objects appear.

I will post again soon stating which idea I have chosen or if I come up with a better one! (highly unlikely)

Issues with Flash

So we discovered that there are issues with Flash when it comes to using it for what we wanted to use it for. In Jon's Post he mentions issues with combining XML streams. If we continue to struggle we may have to change the software we using and at the moment we are considering using Processing. We will however continue to attempt to get stuff working in Flash before.