Colors of The Dark Knight trilogy

Screen Shot 2013-09-14 at 15.00.30 Screen Shot 2013-09-14 at 15.37.13 Screen Shot 2013-09-14 at 16.14.32

 

These three images above show the average color of every single second of The Dark Knight trilogy.

In order to create them, I used ffmpeg to split up the movie into separate PNG files at a speed of 1 fps – representing one file per second. For each film there were around 8000 of these files.

I then wrote a simple Go program that would read each of the image files and calculate the average RGB values across the entire image. Thanks to Go’s concurrency patterns I was able to easily run 1000 of these tasks at once before generating the final images – my computer started to struggle running more than 1000 go routines at once, so it made sense to split it up into 1000 second blocks instead.

The whole project was reasonably easy to do and only took a few hours, and most of the processing time seemed to be ffmpeg rather than Go.

From the final images, I would say it is reasonably easy to discern which scenes are going on where if you are reasonably familiar with the movies.

Cake Day for iOS

iOS Simulator Screen shot 7 Sep 2013 19.57.13

 

I launched Cake Day a couple of weeks ago, but chose not to mention it too much because I’m waiting on Apple approving the iOS 7 update (it will be out within a few days). The premise of the app is pretty simple: you get a reminder once a year on your reddit cake day and you can manage multiple accounts within the app – so you can add your friends’ usernames too and get reminders for their cake days. It also shows you a nice picture of some cake :).

You can get Cake Day on the App Store for free now.

My first Chrome extension

tumblr

My tumblr, visualized

After doing some data visualizations on reddit over the weekend based on using text to create ‘ASCII/word circles’ that show how each letter is connected to another I made my first Chrome extension. It is basically a visualization of Markov chains.

You can get the Chrome extension from the Chrome Web Store now. Simply click the button in your toolbar to view the visualization for any web page.

Introducing Multi Timer for iOS

iOS Simulator Screen shot 23 Aug 2013 16.58.07

Disappointed with the default Apple clock app I decided that it was high time to create a simple, easy to use app that allows you to run and save multiple timers at once.

Multi Timer makes it really easy to save timers for tasks you do regularly and allows you to run multiple instances of the same timer at once. Even if you haven’t got the app open, Multi Timer will notify you when a timer has finished. Multi Timer is especially useful in scenarios such as cooking where you might want to time individual components separately.

Once again I have used FMDB and FlatUIKit to create this app (I’m also using Crashlytics for the first time). I had considered using UI7Kit for the UI, and given that the app is so simple I probably could have done however I really like the look of FlatUIKit (especially the buttons and color schemes) and I think it provides a bit more back compatibility with previous versions of iOS. If, however, you run the app on iOS 7 it will default to normal UINavigationBars and UITabBars in order to avoid some rendering issues on iOS 7 with FlatUIKit.

When you create a timer you can optionally assign it one of 12 icons (I’m planning extra/custom icons for a future release). My normal workflow for this would have been to create the icons in Inkscape and render them to PNGs. PNGs for icons tend to be pretty small – especially when compressed with ImageOptim – however instead I created all of the icons in Opacity (which proved to be a lot nicer to use on OSX than Inkscape) and then export Quartz rendering code for the icons instead. The code isn’t super well optimised, however it kept the size of the app incredibly small (~1MB) and allows for completely resolution independent icons.

You can get Multi Timer now on iOS for $0.99/£0.69.

In-app purchase bug with ’1000 icons’ in Keep Calm

If you’ve tried to buy the 1000 icons upgrade in the latest version of Keep Calm on your iPhone you will find that you won’t be able to. If you’ve got an iPad you can buy it on there and then restore the purchase on your phone in order to active it.

TL;DR: I’m incapable of remembering to link up IBActions from both storyboards.

Free iOS app: When You’ve Got Swag

iOS Simulator Screen shot 20 Aug 2013 15.24.53

I first released When You’ve Got Swag on Android a few months ago and to my surprise it actually ended up getting around 30,000 downloads. Over the weekend I decided that I wanted to play around with FMDB so I decided to put together a simple iOS app, and it struck me as a good time to bring the wildly ridiculous ‘swag’ images commonly found on Instagram and Tumblr over to iOS.

After having written the model code (which really is pretty simple) FMDB proved to be really awesome and I see it as reasonably likely that I will use it as an alternative to Core Data in all my apps – it was really easy to get started with, I didn’t have to write 100 lines of boilerplate code and I don’t have to worry about issues between threads as much as I did with Core Data – when I wrote Keep Calm I actually ended up with a whole extra model layer on top of Core Data to handle rendering on a separate thread (I now know that this could be easily rewritten).

The UI was all created with FlatUIKit (well not quite all, I had to use a tiny bit of UIAppearance) which proved to be just as awesome and I plan on using FlatUIKit+FMDB a lot in the future :).

To customise which words are highlighted you enter the text in block capitals (case doesn’t matter, all of the pictures are rendered with capital text anyway). I had originally planned to try and detect #hashtags, @usernames and URLs however I realised that just detecting punctuation next to capital letters would be a lot easier and more customisable. The text rendering is done using a regular expression to find characters and then an attributed string rendered with Core Text for the highlighting. I intend to add text sizing in a future release along with iPad support (the app is so simple and because it was originally written as a test app I don’t really see the need for this).

When You’ve Got Swag on the App Store (free)

Parsing HTML easily in Objective-C with ObjectiveGumbo

Previously if you wanted to parse HTML on iOS/OSX using Objective-C you had to use an XML parser however I have now written an Objective-C wrapper around Gumbo, Google’s new C HTML5 parsing library, so that it is really easy to get parse HTML with minimum hassle.

To get started you will firstly need to download the Gumbo source code from their GitHub repo and follow their getting started instructions.

Once you have a working local copy of Gumbo (you can validate this by running one of the samples) you should download the source code forObjectiveGumbo from GitHub. To add ObjectiveGumbo to your Xcode projects do the following:

  1. Add the ObjectiveGumbo folder from the repository – this contains the source code for the framework, which is basically just a few classes
  2. Add the src folder from the Gumbo repo (only the .c and .h files)
  3. Ensure that Xcode is set to compile all .c and .m files (Xcode 5 doesn’t do this by default when adding files to a project
  4. Validate that the project builds correctly
  5. Import “ObjectiveGumbo.h” when you want to use it in your app

Usage for ObjectiveGumbo is pretty simple. You can either parse a whole document – which will gain you access to the DOCTYPE information – or just the root element (i.e. the body). These can be loaded from an instance of NSData, NSURL or NSString.

Simple example fetching the current top stories on Hacker News:

OGNode * data = [ObjectiveGumbo parseDocumentWithUrl:[NSURL URLWithString:@"http://news.ycombinator.com"]];
NSArray * tableRows = [data elementsWithClass:@"title"];
for (OGElement * tableRow in tableRows)
{
    if (tableRow.children.count > 1)
    {
         OGElement * link = tableRow.children[0];
         NSLog(@"%@", link.attributes[@"href"]);
    }
}

More detail is explained in the README and there is also a more developed Hacker News example (iOS) and simple Markdown to HTML parser (OSX – not complete) in the GitHub repo.