Just like most web developers we like to play with our code. Sometimes it's an aspect of a project that didn't make the final cut, sometimes we play around to see what we can do. Here are some of our experiments.

Going South: Time-lapsed travel

Sunday, June 14, 2009 1 comments

In a few weeks we will be meeting up with a fellow geek and long-time friend Ben Duncan in the of the middle of Australia.

Ben and I both went to primary and high school together and both created jobs for ourselves in the IT industry. While I develop websites, Ben has built an online email management product.

I'm taking the family on a 2 week break, driving from Alice Springs to Darwin.

On the other hand, Ben has been travelling down the east coast since January on a journey planned to take him right around the edge of Australia. On the roof of his 4WD he has setup a webcam to take a photo every 5 minutes and upload it to a server on the internet (the server is nick named "the borg"). Read more about his trip and car setup on his blog.

THEN: The Website

When Ben dropped into Bathurst on his way south, he showed me his setup; roof-top tent, luggage compartments, solar panels, batteries, inverters, NextG modem, wi-fi router, laptop and webcam. All that he had about the trip online was a domain name pointing to his blog post. He hadn't even linked to all the images already uploaded. While Ben caught up on some business emails on my ADSL 2 connection, I grabbed a free designer template, Google My Maps, his company twitter feed and wrote a script to link to the latest image uploaded within less than an hour we had the domain pointed at a mashed-up portal for Ben's Mobile Office adventure around Australia.

TODAY: The Production

With iTunes pumping out some Sunday morning beats and Skype running (in preparation for Ben to come online and abuse me for hammering his server) Firefox struggled through a quickly-whipped up 3 line jQuery script (only 2 lines really do anything, the other is syntax) to gleam the URL of the images and display them on the same page.


$('a').each(function() {
	$(this).after('<img src=' + $(this).attr('href') + '>');
});

Then I used the Save Web Page, Complete option in Firefox to grab all the rendered files. While that was saving (took about 10 minutes) I was in Apple's drop-and-drag scripting editor Automator creating a workflow to rename all the images downloaded with filenames of consecutive numbers based on their timestamp. For some reason (I guess the nature of being on the road without a constant 'net connection or power supply) the image file names were not consecutive. They were all over the place! The file creation date was the only way to put the files in chronological order.

Unfortunately when the files saved to my desktop the original creation date was reset to today's date (and the files don't have an EXIF info), so I had no data to re-order the files. I thought about writing a PHP script to fetch the files and save them directly to my local web server with a file name based it's position in the borg's Apache listing (sorted by date). Or I could just ask Ben for the FTP details and download them directly from the server. I shot him an email requesting the connection details, I even sent him a 30 frame grab of the un-ordered images in a mpg format to entice him that this would be cool. About 10 seconds after the email was sent I decided I was up for the challenge and got started on a PHP script to fetch the files and save them locally. I modified the jQuery (my current JavaScript library of choice, so I use it where I can) to build an array of the filenames, which I then copy and pasted into a PHP script to fetch the files and save them locally. I added a 2 second pause between each fetch to give the server a break. With 4017 image files it took over 2 hrs to get all the images, but now they are neatly ordered.


var array = [];
$('a').each(function() {
	array.push( $(this).attr('href') );
});
$('body').prepend('["' + array.join(',') + '"]');


$array = array('050101003114001.jpg', … '050101050728001.jpg');
$count = 0;

foreach ($array as $file) {
	$count++;
	$remoteFileContents = file_get_contents('http://theborg.calacode.com/carcam/' . $file);
	$newFileHandle = fopen('/atmailmobileoffice/' . $count . '.jpg', 'w');
	fwrite($newFileHandle, $remoteFileContents);
	fclose($newFileHandle);
	sleep(2);
}

RESULT: The Movie

From there it was a cinch to use the Quicktime "Import Image sequence" option to build a time-lapsed movie of 3983 frames (removed 34 corrupted images) which at 15 frames a second resulted in a movie just over 4:25 min long. I added some copyleft music, compressed it and uploaded it to Vimeo (which, to me, have better HD compression than other hosted social video services).

And here it is:

I like pausing it and scanning each frame/image one at a time when I see something interesting.

The Extras

Things I noticed from watching the video:

  • Ben likes to camp in view of water
  • The path they are taking is a hit with travellers (lot of time they are driving behind a caravan)
  • the camera get's turned off at night (to save power, plus there is nothing to look at)
  • it rained a lot! (and the camera enclosure gets condensation)
  • the camera is slowly falling to the right (might need to fix that Ben)

From flicking through 143 Mb of raw files here are some of the snaps that grabbed my attention:

  • Thumbnail of seagull over car
  • Thumbnail of dog on leash
  • Thumbnail car with break lights
  • Seagull flying over a car

The seagull was caught in mid-flight.

  • Segull flying near the beach

Probably not the same seagull, but almost snapped on the same angle. And a dog on a leash.

  • Car break light reflected in water on lens

When I first watched the video and only saw this for a split-second it looked like the car was on fire.

Rowan W

Why does this site look like this? Your browser has become outdated and does not support recent web standards. You're welcome to use this page as is, although we suggest upgrading your browser. This page is designed to look it's best in Firefox although it will work as intended in the latest version of most popular browsers.