WebGL Raytraced Eye

WebGL raytraced eye

This WebGL eyeball looks amazing, it's so cool that this is possible in the browser now.

Fill Murray

Bill Murray

Placeholder images of Bill Murray by Dave Cowart.

(Via Marc Lloyd)

Build with Chrome

A Lego Viking Tour Bus in Dublin

Today I've been playing with this amazing toy from Lego and Chrome that lets you build Lego models on Google Maps. I found this great rendition of a Viking Tour Bus/Boat in Dublin's Grand Canal Quay. (For the record this is what they actually look like).

So cool!

(Via Kill Screen)

Chineasy

Image of the Chinese phrase for 'dormant volcano'

Above is the Chinese phrase for dormant volcano.

Chineasy’s goal is to allow people to learn to read Chinese easily by recognising characters through simple illustrations. The magical power of the Chineasy method is that by learning one small set of building blocks, students can build many new words, characters, and phrases.

(Via Wesley)

Blog Redesign

Recently I've felt like writing again, but I've felt frustrated with the way that my blog is designed, both in terms of how it looks and how it functions.

I started paulboxley.com in 2010 as a link dump – almost all posts were very short, usually consisting of just a link to another website, an image and a line or two of text.

I chose a 'masonry' style layout as it fitted the kind of content that I tended to post – a kind of personally hosted Pinterest.

There could be any number of columns depending on the width of the user's browser, and individual posts would span either one, two or three of these. Smaller posts would be nestled in around the larger ones.

The design was adequate when I only had shorter posts, but problems arose when I wrote longer blog posts – the smaller posts laid out around the edges would distract from the content of the main post.

New columns

I decided it would make more sense to switch to a new layout, and after a few experiments I opted for a three-column layout (degrading to two or one columns on smaller browser windows, but only ever three columns maximum).

Blog posts that I want the reader to focus on now take up all three columns, and link posts take up a single column.

Aside from the layout, the design of the website also needed refreshing, and I have to thank Jonathan Belton for his expert advice in this area! If there are any elements of this site that you think look great then please presume that they were Jonny's idea, and you can likewise presume that any parts that look less good are ones in which I did not listen to Jonny's advice. ;)

I've also made some other changes under the hood. Previously blog posts were stored in files in the git repo which kept things simple, but meant that I couldn't write new posts unless I was near a terminal. Now I'm using a database so I can write and edit posts in a browser (wow, it's like I'm in 2001)!

I'm also toying with the idea of adding comments to the site with something like Disqus. I would prefer if there were a straightforward way to integrate tweets-as-comments, but I'm not sure if such a solution exists. If you know of anything then please tweet me @baxt3r.

I hope you like the new design! Please let me know if you encounter any bugs or problems, and I hope to write again soon. :)

An angle bug

I discovered a bug in my previous Boids post. To rotate a boid I was doing this:

If current direction angle < target direction angle
  Increase current direction angle
If current direction angle > target direction angle
  Decrease current direction angle

Which seemed reasonable enough, but I hadn't considered the way that angles are calculated.

In javascript all angles use radians. You may remember that there are 2π radians in a circle. Within HTML5's <canvas>, radians have the following meanings:

  • 0 radians means you are pointing East
  • ½π radians means you are pointing South
  • −½π radians means you are pointing North
  • π or −π radians means you are pointing West

Examples of all the angles

(Radians weren't the problem here, I would have had the same problem if javascript had used degrees)

The problem that I was seeing was that sometimes a boid would be travelling South West and its target would be North West of it, but rather than turning clockwise it would turn anti-clockwise.

Here is a boid being told to rotate to and from a direction in the South West and a direction in the North West, because an example is often more helpful than an explanation:

As you can see, this boid is taking the long way around.

What's going on?

The boid stores its direction as a number which reflects the angle in radians that it should be facing. If it starts at +3.0 radians and we instruct it to move towards −3.0 radians then it will follow its simple instructions:

If +3.0 > −3.0
  Decrease current direction angle

+3.0 is greater than −3.0, so the boid decreases its current direction angle, moving from +3.0 to +2.9 to +2.8 to +2.7, which turns it anti-clockwise, going through the zero point and sending it the long way around.

What we'd expect to see is the boid taking the short route between the two points, through π (remember +π and −π mean the same thing in this situation).

Why is this a problem?

As far as bugs go this isn't the end of the world, but it results in some undesirable behaviour.

If there are two boids, A and B, with directions of +3 and −3 respectively, when they come close to each other we would expect them to match directions, averaging to +π/−π (remember that +π and −π mean the same thing). What will actually happen is that the two boids will change direction away from each other, trying to average at 0, which is almost the opposite to the direction they're currently travelling in.

In a more general sense it makes it far less likely that a flock of boids will end up moving in a Westward direction.

How do we fix this problem?

We need to treat the direction more intelligently. Rather than just treating it as a number we have to recognise that it's an angle and that +3.0 is actually closer to −3.0 than it is to 0.

In order to find the difference between one angle and another we can say:

difference angle = end angle − start angle

But this only works if the two angles are either both North of 0 or both South of 0. If the two numbers are on opposite sides, say +2.0 and −2.0, then the result would be beyond either π or −π, in this case −4.0.

We can easily fix this though: we know that a circle has 2π radians, and that in HTML 5 canvas the semi-circle from East to South to West goes from 0 to +π, and the semi-circle from East to North to West goes from 0 to −π, so once we go beyond either π or −π we can just subtract or add 2π to that number to get a more reasonable number.

difference angle = end angle − start angle
if difference angle > π
  difference angle = difference angle − 2π
if difference angle < −π
  difference angle = difference angle + 2π

Now the result of passing in +2.0 and −2.0 will return around 2.28

Find difference between current direction and target direction
If the difference < 0
  Increase the current direction
If the difference > 0
  Decrease the current direction

Replacing this part of the code leads to the following behaviour:

Which looks much better. Problem solved!

Boids

I've always been fascinated by emergent behaviour, there's something cool about simple rules resulting in a complex outcome. I think that Boids is a really good way of demonstrating emergent behaviour.

Boids is an artificial life program, developed by Craig Reynolds in 1986, which simulates the flocking behaviour of birds.

I decided to put together a 2D version of Boids using HTML5 canvas. Click the "Start" link below to see them start moving.

StartStopReset

The boids above follow three very simple rules (that you can switch on and off):

(This isn't a rule, it just helps visualise who's a neighbour!)

What's going on here

I start by creating 30 boids, each with a random starting position and direction.

On each frame, each boid investigates its neighbours and figures out the average directions of those that are reasonably close (within 100px) and those that are too close (within 30px).

If the first rule is enabled then the boid will rotate itself slightly towards the average direction of the reasonably close boids.

If the second rule is enabled then it will rotate itself slightly away from the average direction of the very close boids.

If the third rule is enabled then it will also survey all the boids on the canvas, figure out where the highest population of boids is and rotate slightly in that direction. This is useful for the boids that occasionally disappear off on their own and would otherwise fly off in a straight line forever (which isn't a huge problem in this example, since boids reaching the edge will wrap around to the opposite edge).

It's quite fun disabling the 2nd rule, watching the boids squish up close to each other, and then enabling it again to see them all fly away from each other.

Source code

The source code is available on my github page. It's written in coffeescript and is hopefully fairly self explanatory. I tried making some docco docs but that didn't go very well. Hopefully I'll get them up soon.

Let me know if you have any questions or suggestions @baxt3r

Update

There was a bug in the way that I was rotating boids, check out An angle bug for more information.

An explanation of the IceCube Neutrino Observatory

I stumbled across this lovely explanation of the IceCube Neutrino Observatory via Reddit.

2,048 Tweets

211 tweets! Hooray!

It's been about a year since I hit 1,024 tweets. In that time a few things have changed; after four years working for the Forestry Commission I left to join the guys at ASMALLWORLD building and maintaining a huge Rails app.

I wondered what my mood had been within this period. One extremely unscientific indicator of mood is emoticons.

Emoticons

As you can see, I have been mostly :), occasionally :D, sometimes :( and hardly ever D: which is exactly how things should be, so that's good.

Retweets

Over the past year I've averaged 2.61 tweets a day.

229 of those tweets (about 22%) have been retweets. That's higher than I thought it would be, so I had a look at who I'd been retweeting:

Of the 229 retweets that I've made, 128 of those, or 55%, were retweets from users that I've only retweeted once. I don't even follow most of them. I wasn't aware how often I retweeted retweets, but the data suggests I do it quite a lot!

Of the people that I've retweeted three times or more, here's who I've retweeted the most:

I've colour coded the charts to group people together.

  • In red are the people that I know through the Scottish Ruby Users Group.
  • In blue are the people that I work with.
  • In green are the people that I know through my time spent helping with the Guild Wars Wiki.
  • In grey are people that don't fall into any of the other groups!

At the top of the retweets is @saveourforests. This is actually an account I registered myself during my time assisting in the Save Our Forests campaign while at the Forestry Commission, so there is a little bit of self-promotion going on here, but since its creation the account has been updated almost exclusively by Tony, a former colleague, so I don't feel too guilty! And it was (and is) for a good cause!

Following on from that there's a good mix of people from ScotRUG and work who tend to say amusing or interesting things, and of course my girlfriend Lindsey, aka @Daily_Madness, who I am obliged to retweet from time to time to stay in her good books ;)

My @notch retweets are due to my recent Minecraft addiction. The less said about that the better.

Mentions

Mentions are more varied than retweets, probably because I'm more likely to have a conversation with most people than retweet them.

My colleagues @mungler and @mr_urf top the mentions chart, followed almost exclusively by members of ScotRUG and the Guild Wars Wiki, the only notable exceptions being my friend @mikos who is not a ruby developer (shock horror) and @Daily_Madness.

Hashtags

I feel like I have to mention hashtags since they're an important part of Twitter, but it would be pointless creating a chart for them since I only tend to use them as jokes.

The only two that I seem to have used seriously are #yaypril 3 times and #scotruby 7 times.

Language

My most used word is "I". I'm so egocentric. This hasn't changed from last year.

But short words aren't very interesting, so instead I examined my most used longer-than-four-letter words:

My most used words actually seem really positive! In fact you can almost read that last chart as a sentence.

I tend to say thanks a lot in real life, but I didn't realise this had carried over into Twitter.

I also probably say "awesome" a little too much. I am trying to replace this with "splendid".

Summary

I'm not sure if analysing my tweets is a normal thing to do. I'm pretty certain it isn't. But it's quite fun to look closely at something that you've been doing almost absent-mindedly – like reading too much into people's doodles or trying to predict the future by examining the remnants of a cup of tea.

Thank you to my Twitter followers/followees for a year full of :), here's hoping for another 2,048 mostly happy tweets!

If this then that

Ifttt is a website that lets you set up tasks of the form "If this then that" where "this" is a trigger and "that" is an action. Some popular tasks include:

  • If I am tagged in a photo on Facebook then save it to Dropbox.
  • If tomorrow's weather forecast is rainy then send me a text message telling me about it.
  • If I star a tweet on Twitter then save it to Instapaper.
  • If an RSS feed is updated then post a tweet about it.

Ifttt has managed to simplify the interface between a number of popular web apps so that you can set up a whole host of tasks with the minimum of configuration. And even better, once you've created a cool task you can turn that into a "recipe" and share it with other people.

Really good stuff.