slightlymore

I saw this picture today and I had a little chuckle to myself when I read this post on a roller coaster forum I read.

Not sure if it’s BREAKING NEWS, but…

We (the coaster nerds) have been following the construction of this since around this time last year, so “BREAKING NEWS” hardly fits. I remember watching the video of it being tested back in October – and I’ve been excited about riding it for longer than I should admit to.

Some of you may know that I was working on a side project over Christas with @onishiweb and @mrqwest called The 12 Devs of Xmas. It’s kind of like a reverse 24ways where we post a new article on each of the 12 days of Christmas (well, actually the 12 days starting from Boxing day).

We’ve had a great set of articles so far, and there are only two left to go! If you haven’t been there already, you should seriously check it out.

My article on data visualisation using d3.js went live last night. The screenshot below shows what you’ll be able to build if you follow the tutorial. Pretty sweet!

View my article →

I was lucky enough to: a) hear about a global movement called Random Hacks of Kindness; and b) live in a city where one of the events was taking place. Throughout the world on the weekend of the 3rd and 4th of December, there were rooms full of geeks, probably fuelled with pizza (we were, at any rate) who were given a set of problems to choose from which were for the greater good. You can kind of think of it as an incubator where new projects are born, and the aim is that the end of the weekend isn’t the end of the project – it’s merely the beginning.

In Oxford, we had a choice between six projects including: predicting floods based on old weather data, visualising humanitarian data, building an app for fair trade cities and helping to improve a disaster management application called Sahana. I chose to go with the humanitarian data project because it involved playing with a huge dataset and I love creating interactive things and wotsits.

The problem was put forwards by Oxfam (who helped to set up an run the event) – but the aim was to allow any charity using the IATI database to get a copy of it and start using it. Exciting stuff! The IATI format allows for loads of (or minimal) data to be entered for each activity, and the API provides a way to query for pretty much whatever you want.

We initially had the idea of being able to drill down into countries and have pins representing projects in their actual locations, then from there you could click on one to learn more about the activity. Unfortunately, Oxfam’s data is relatively new in IATI (I think only a week-or-so) so much of this data was missing. We decided that we should therefore use pins on the map where geolocation details were present, but use a list to display the projects for the rest.

The data also spans a huge timespan – so I started wondering how cool it would look if you could press a ‘play’ button and see how different kinds of projects moved in both funding value or other criteria (perhaps with growing/shrinking circles or bar charts) and in physical location. I really like what Hans Rosling does with data, and thought it would be cool if we could find a couple of animations which really tell a story about how times change and funding solves problems. If you haven’t seen Hans Rosling’s TED talk you should do so. You can see the evolution of the idea (maybe, if you look hard and squint) in our scribblings.

After setting up Heroku, a github repository and wrestling for what felt like hours getting websockets to communicate properly, we set about building something more interesting than sending messages using the javascript console and watching for the reply from the server. It was time to dig in and get our hands dirty.

Then it was time for presentations. Oh dear. We’ve only got an H1 tag (with RHOK spelt incorrectly), an input field, and an anchor tag with no href attribute. I had to present the project armed only with the shady sketches we’d drawn before.

After that, we realised that our choice of using d3.js because of it’s amazing capabilities of both drawing data and transitioning through states would fall over because it became clear that the data wasn’t clean or consistant enough for us to do this within such a short timeframe. This was turning into a disaster.

After pizza and beer, and with great thanks to Ben, we had a Google Geochart. From here, things would start to get better. We built a few queries, I finally got to grips with the IATI api, and came up with functions to methods to fill the Geochart with real IATI data. I hacked through the night and by the morning we had something which was beginning to not only work, but look pretty respectable too. It was hard at points, but seeing other RHOKers coding all night too was really encouraging and kept me going.

People began to arrive at around 10, we had breakfast and everyone got straight back into coding without a formal ‘now start hacking!’ prompt. Everyone was rearing to get back working on their projects and the vibe of the previous day fell back into place very quickly. You could hear the excited voices of people after they’d had a breakthrough.

The presentation in the morning was much better (starting at 3:32 in the video below) – I was feeling so excited about what we’d achieved that I even opened with an impromptu joke at the beginning about our H1 tag. How cool to be in a room where people would not only get it, but would laugh at it :). We got some good questions and suggestions at the end which we still need to (remember) and look into.

As the afternoon moved on, time faded away and final presentation approached people started winding down and exploring what other people had been doing.

So without further ado, I will present you with the fruits of my team’s labour: The Humanitarian Project (IATI) Data!

It is of course very much still a work in progress. There will be bugs, there will be browser issues, there will be times where it simply won’t work. It’s all open source and hosted on github so please get involved, report or fix bugs and spread the word.

This is going to sound awfully cheesy, but this is not the end, this is the beginning. I’m going to continue working on this project and I hope that others will be excited by this project and want to join in. It’s not only got the potential to both be pretty damn cool, but also to help charities explain the stories of their projects in a visually compelling way.

Thanks to White October for hosting the event, Oxfam for helping to organise it, and all of the sponsors (One, Incuna, Practical Participation and Guardian Open Platform) for providing pizza, beer, cakes & coffee, and to everyone there for providing the atmosphere for such a great time.

rhok-iati.herokuapp.com →

• Oxford’s page on the RHOK wiki.
• Visualising Programme Data on the RHOK wiki.
• Interactive display of humanitarian and development project data page.
• github repository.
• The actual thing.

I also got the opportunity to go into a shed with a hefty 3D printer in it. Next to it was a 3D print of a 3D printer in a shed while I was there. True story.

Quickly threw this together when I got home from work. Pretty impressive (if you ask me!) considering I’m a novice with both Processing and Arduino.

Demo

The LEDs on the Arduino let you read out the light level (read as an 8-bit binary number) so that the more light that the photosensor receives, the higher the number represented on the LEDs will be. It then spits the number down a serial connection which controls the background colour and the starting position of the particles with Processing.

I see lots of weird and wonderful interactive art projects on the horizon… I’ve clearly got loads of Processing to learn to make something awe-inspiring, but I already have interesting ideas for the Arduino part including getting it to update with a Wii controller or based on your proximity to it. Maybe hook up a couple of sensors so that you can wave your arms around to generate the art?

Also, it’ll be fun to find out what kinds of thing can be generated – particles, fractals, trees. Let’s see just how creative I can get with this stuff :D

Arduino code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

int data = 2; 
int clock = 3;
int latch = 4;
 
int sensor = A0;
 
int ledState = 0;
const int ON = HIGH;
const int OFF = LOW;
 
 
void setup()
{
  pinMode(data, OUTPUT);
  pinMode(clock, OUTPUT);  
  pinMode(latch, OUTPUT); 
  Serial.begin(9600); 
}
 
void loop()
{
    int colour = map(analogRead(sensor), 0, 1023, 255, 0);
    Serial.print(colour);
    Serial.print(",");
    updateLevel(colour);
}
 
void updateLevel(int value){
  digitalWrite(latch, LOW);
  shiftOut(data, clock, MSBFIRST, value); 
  digitalWrite(latch, HIGH);
}

Processing code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

import processing.serial.*;
ParticleSystem ps;
 
 
Serial port;
PFont font; 
String inString = "0";
 
void setup () {
  size (1280, 800);
  port = new Serial(this, Serial.list()[0], 9600);
  font = loadFont ("SansSerif-48.vlw");
  ps = new ParticleSystem(1, new PVector(width/2,height/2,0));
  textFont (font, 48);
  port.bufferUntil(44);
}
 
void draw () {
  Float f = Float.valueOf(inString).floatValue();
  background(f, 255 - f*2.0, f*5.0);
  text("light level: " + inString, 10, 50);
  ps.run ();
  ps.addParticle(map(f, 0, 255, 0, width), map(f, 0, 255, 0, height));
}
 
void serialEvent (Serial port) {
  inString = port.readString();
  inString = inString.substring(0,inString.length()-1);
}
 
 
 
// Particle system from the prototype documentation page: // http://processing.org/learning/topics/simpleparticlesystem.html
class ParticleSystem {
 
  ArrayList particles;    // An arraylist for all the particles
  PVector origin;        // An origin point for where particles are born
 
  ParticleSystem(int num, PVector v) {
    particles = new ArrayList();              // Initialize the arraylist
    origin = v.get();                        // Store the origin point
    for (int i = 0; i < num; i++) {
      particles.add(new Particle(origin));    // Add "num" amount of particles to the arraylist
    }
  }
 
  void run() {
    // Cycle through the ArrayList backwards b/c we are deleting
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = (Particle) particles.get(i);
      p.run();
      if (p.dead()) {
        particles.remove(i);
      }
    }
  }
 
  void addParticle() {
    particles.add(new Particle(origin));
  }
 
    void addParticle(float x, float y) {
    particles.add(new Particle(new PVector(x,y)));
  }
 
  void addParticle(Particle p) {
    particles.add(p);
  }
 
  // A method to test if the particle system still has particles
  boolean dead() {
    if (particles.isEmpty()) {
      return true;
    } else {
      return false;
    }
  }
 
}
 
 
 
class Particle {
  PVector loc;
  PVector vel;
  PVector acc;
  float r;
  float timer;
 
  // Another constructor (the one we are using here)
  Particle(PVector l) {
    acc = new PVector(0,0.05,0);
    vel = new PVector(random(-1,1),random(-2,0),0);
    loc = l.get();
    r = 10.0;
    timer = 100.0;
  }
 
  void run() {
    update();
    render();
  }
 
  // Method to update location
  void update() {
    vel.add(acc);
    loc.add(vel);
    timer -= 1.0;
  }
 
  // Method to display
  void render() {
    ellipseMode(CENTER);
    stroke(255,timer);
    fill(100,timer);
    ellipse(loc.x,loc.y,r,r);
    displayVector(vel,loc.x,loc.y,10);
  }
 
  // Is the particle still useful?
  boolean dead() {
    if (timer <= 0.0) {
      return true;
    } else {
      return false;
    }
  }
 
   void displayVector(PVector v, float x, float y, float scayl) {
    pushMatrix();
    float arrowsize = 4;
    // Translate to location to render vector
    translate(x,y);
    stroke(255);
    // Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate
    rotate(v.heading2D());
    // Calculate length of vector & scale it to be bigger or smaller if necessary
    float len = v.mag()*scayl;
    // Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)
    line(0,0,len,0);
    line(len,0,len-arrowsize,+arrowsize/2);
    line(len,0,len-arrowsize,-arrowsize/2);
    popMatrix();
  } 
}

Schematic

(Ummm, anyone know of a decent programme to draw these with?!)

I’m going to use it to make crazy art like things. I started off by making this rather pointless contraption to test it out:

I’m not really sure where the inspiration came from, but today I woke up wondering how you might be able to visualise time in a new and weird way.

Perhaps it was the recent binary day, the last of my lifetime, which made me think of the idea for HexClock. Maybe it was just because I’m a geek and so it had to involve programming in some way. Whatever it was, I decided to turn the time into a hexadecimal number and use that to visualise the time of day.

Each second is represented by a unique colour which no other time takes. The hours control how much red is in the colour, the minutes affect the green and the seconds change the blue, so each minute slowly fades through two colours before jumping back to a slightly different shade of where it was a minute ago.

You can click anywhere on the page to switch between the time and its hexadecimal representation. Take a look at the screenshot below for proof if you don’t believe me.

I set up a twitter account for it – @hexclock – no idea what I’ll put on there yet, but that’s just what you do when you make a new site now, right? Oh, and it’s on github too, for exactly the same reason. I’m just that damn cool.

Go to HexClock →

Just sent this email around to the team at work:

If you don’t know what that means, roll your eyes and think to yourself “bloody nerds”

If you do, convert 11/11/11 11:11:11 binary into hex.

(If you didn’t and you’re still reading this, it’s probably time to roll your eyes again.)

I saw that they were selling them in Tesco for £1.97. £1.97!! (If you could type capital numbers, those last ones would have been).

It would have been rude not to.

Especially as I already owned this guy from the first series:

I’m sorely tempted to go crazy and collect the whole set.