As it is inevitable that we will blog about the same projects and topics, we’ve decided to aggregate one another’s relevant posts. After some swish styling and RSS research you can now view said shared content being posted (almost literally) in the footer of my main site.

Now, what would be our first mission? Well, after the announcement that we would have to complete a second Pecha-Kucha presentation, on which timing would be scrutinised, everyone grumbled about the prospect of using a service called ’slideshare’. Slideshare.net is a service which allows you to upload presentations in multiple formats (such as .ppt and .pdf), but for the most-part has issues with timing, something which is key for Pecha-Kucha presentations. We thought it would be great if there was a specific web application we could use to deliver this specific type of presentation. Florian set to work and soon came up with a working concept going by the name of ‘phpechakucha’. A little styling and advice from me and things were well on their way.

All that is required from the user is a link to a directory containing 20 images (named 1 to 20) to be used as slides. The browser is then be put into full screen mode and the slide-show can be played. The 20 images scaled to fit the window and a timer system ensures each slide is on for 20 seconds, the window being redirected to the homepage once the cycle is complete.

A twitter based user system is in the works as well as some improved functionality. I’ll post a blog update soon to report on our progress!

The processing assignment is now complete and I have a working (and pretty) visualisation of the temperature in Lecture Rooms 1, 2, 3 in the Roland Levinsky Building and an external temperature. I decided to emphasise and further develop the idea of temperature being associated with kinetic energy and therefore speed. Opting for a random colour scheme on the basis of aesthetics as it just tends to produce more appealing combinations than ones which correspond to the data feed.

I’ve also added a new ‘moving graph’ made from ellipses and lines which crudely represents all 181 individual average temperatures, calculated from the 4 different feeds. I thought this looked rather like astronomical constellations and so placed it above the main elements and gave it a background which looked like a night-time sky (with no motive other than looks).

I’ve enjoyed working with Java (in a basic form) again and after a few teething problems with Processing as a programming style I’m confident in my ability to use it for further projects in the future. It’s a great tool for data visualisation and I look forward to exploring in more in coming years.

In the previous blog post I discussed the idea of abstract polygons shapes forming the basis of my Processing sketch and after experimenting with this idea and on the right you can see the fruits of my labour. I created 3 classes for each different type of shape, i) the polygons ii) the imitation ‘particle-spring’ iii) the wire-frame box/cube. I’d say this now looks suitably aesthetically pleasing (at least for Processing), but runs solely using randomly generated numbers and variables. Now I had to figure out a way to fuel the animation with data from the RSS/XML objects.

The colour is an obvious factor which can be altered using the varying temperature figures, with most people closely associating colour and temperature it seems logical to do so here as well. I always associate temperature with kinetic energy and therefore speed, so I had the idea of making cold readings move slow and hot readings move fast. This led to readings governing the speed of rotation of certain elements on the sketch (namely the polygons). Just to finish it off I also had the data effect the size of certain elements such as the wire-frame cube.

There are a few creases which need ironing out, but on the whole it seems close to completion. I’m happy with it so far and although some of the hard-coding has been nigh on fun, the realisation of a concept was slow and tedious. Alas, it will soon be embedded on my website for all to see.

NOTE: I’m also rather proud that I have used NO open-source code repositories for this sketch, as with all of my other code-based projects. I take pride in this!

After some uhming and ahhing I’ve decided that in order to produce a processing sketch which is not overly complicated, but looks aesthetically pleasing I’m going to toy around with some basic shapes. The interactions of said shapes and their behaviour relating to the feed data will, I hope, produce something a little abstract in nature. The best method I’ve found of creating shapes which are abstract in nature (i.e. polygons) is to use the beginShape() function. This allows you to manually specify the vertices of a polygon using coordinates, giving much more freedom when it comes to creating custom shapes.

Once again, back to the drawing board to see what processing magic I can whip up. I also need to do a little research into how I’m going to embed the processing applet onto my website, though I’m sure it’s simple and well documented.

To use Processing to visualise environmental data fed from either of the RSS feeds from the Arch-OS system, in an interesting and aesthetic way.

Sounds simple, right? You’d partially be wrong. Processing is a wonderful data visualisation tool, however I found at first that trying to do relatively complex animations and sketches is terribly time-consuming and brain-killing. I had some simple original ideas which I tried to develop, to no avail; due to the rather simple nature of Processing’s draw() function, I’d been struggling with animating multiple objects/scenes at a time.

In the end I just decided to return to the drawing board and start identifying which data feeds I was going to utilise in my visualisation. The most versatile, I think, are the temperature readings. Not only do we have the temperatures of the three main lecture theatres, but we also have the external temperature as a comparison. After having fed in the XML data, I’ve extrapolated the temperature readings into 4 separate float arrays named temps_out, temps_LT1, temps_LT2 and temps_LT3, see here:

1
2
3
4
5
6
7
8
9
10
11
12
13

  // Storing temperature values in float arrays.  
  for(int i = 0; i < xml_temps_out.length; i++){
    temps_out[i] = parseFloat(xml_temps_out[i].getContent());
  }
  for(int i = 0; i < xml_temps_LT1.length; i++){
    temps_LT1[i] = parseFloat(xml_temps_LT1[i].getContent());
  }
  for(int i = 0; i < xml_temps_LT2.length; i++){
    temps_LT2[i] = parseFloat(xml_temps_LT2[i].getContent());
  }
  for(int i = 0; i < xml_temps_LT3.length; i++){
    temps_LT3[i] = parseFloat(xml_temps_LT3[i].getContent());
  }

After some more experimenting with the PImage and PVector classes I hope to have a decent framework into which I can feed this data. Back to the sketching board -.-

With a little more development this could track multiple pedestrians and even (using some rather advanced algorithms) calculate the number of events where social interaction was possible and the amount of times it actually took place. This would give us what could be described as medium through which a social experiment could be conducted. If we were to combine this with the speaker-tower (here) and the personal interaction devices (here), I think we would be well on our way to improving both the awareness of the lack of social interaction in Stonehouse and also giving people the right motivation and technology to start engaging in it.

I also spoke before about this idea that people do not only interact in the physical realm any more, but instead thanks to the internet they are able to contact almost anyone, any where, at any time. This adds an extra element to our project and essentially it brings in the concept of Hertzian space. We’ve already done quite a bit of visualising, so I thought why not make use of another sensory device such as audio. I made a small auralisation of the wifi data in the area to represent this opportunity for social interaction over the web (much like Hertzian space istelf it’s there, but not necessarily visible). The volume of the wi-fi SSIDs corresponds to their signal strength:

This would also be broadcast over the area and embedded into the flash object on the website with the 1984 style motivational phrases to bring together the whole project.

If we were going to mass produce our device to improve the social interaction of our Stonehouse subjects, we would need to sell it right. Before, I dropped the old ‘1984′ bomb and brought good, old George Orwell into the picture. This can tend to make some people a little uneasy, what with the suggestion of a nanny-state and Big Brother. However, what we are trying to do is gently persuade our specific neighbourhood in Stonhouse that they need to start forming a community.

In order to do this I designed the poster above, there’s nothing like an 80s style poster to lure you into a false sense of security. The specific workings of the device are below, it’s essentially a better-made and well-packaged version of the Arduino Board, infra-red sensor and speaker from my previous post. Possible ‘Conversation Instigating’ phrases would be (you’ll have to entertain me here):

-Nice weather we’re having Today.
-Hi, I’m …
-How are you Today?

This was a rather basic application of the Arduino board and its sensors, techies and hackers all of the world are now starting to see the advantage of working with these devices. Above is a cracking little example of how it can be applied to detect a secret knock on a door, I’m in awe! It can even be used in a more environmentally beneficial, home-eco-warrior fashion, like this homemade sun-tracking solar-panel:

As well as broadcasting messages to the public to make them aware of the importance of social interaction, society and community, we have also designed a ‘Personal Interaction Device’ which will assist the everyday Stonehouse occupant in being more sociable! The main crux of this device is an Arduino Board (B) with an infra-red sensor (C) which detects the proximity of passers-by and when it deems them to be close enough, triggers the Arduino Board to play a customisable ‘Conversation Instigating’ audio clip.

This processing/arduino code snippet shows how the arduino board detects the infra-red sensors state as being on or off (high or low) and then sets off the buzzer. If we had an .mp3 sensor shield (they unfortunately cost above £50) .mp3 files stored on an SD card would be played through a speaker, instead of just a buzzer making a sound. The primitive setup of the device can be seen below:

var mcBall:mcCircle = new mcCircle();
addChild(mcBall);
mcBall.addEventListener(Event.ENTER_FRAME, hit);
 
var blocks:Array = new Array();
for(i = 0;i < 5;i++){
     var mcBlock:mcRectangle = new mcRectangle();
     mcBlock.name = "mcBlock" + i;
     addChild(mcBlock);
     blocks[i] = mcBlock;
}
 
function hit(e:Event) :void{
     for(i = 0;i < 5;i++){
          if(mcBall.hitTestObject(blocks[i]) && blocks[i] != null && blocks[i].stage){
               removeChild(blocks[i]);
          }
     }
}

The main aim of this tutorial is to explain the throwing of error #2025 in this scenario, so I won’t go into too much detail about the function of the rest of the code. It might sound a little obvious (but believe me it’s not), in order to remove a movie clip object from the stage, it must not be null and also has to be present on the stage, if not, the above error is thrown. To check that the object is not null and is present on the stage before removing it, add this code && blocks[i] != null && blocks[i].stage into the ‘if’ parentheses (as above). Hopefully that’ll fix your flash creation up nicely!