Aug 14

Solved: Removing a big, huge, nasty file from git!

Disclaimer: BE VERY CAREFUL! you could delete everything if you use an asterisk!

Very simple really. This will go through ALL of your commits and remove all references to your big file you accidentally committed way back.

1. Go to your repository in terminal.
2. paste this line in, but substitute bigfile.psd to whatever you want to remove.

git filter-branch --index-filter 'git rm -rf --cached --ignore-unmatch bigfile.psd’ -- --all

Source: http://dangodesign.net/2014/02/remove-large-file-git/

Dec 13

Fix for Mail problem after migrating (OS X 10.9 Mavericks)

When I migrated to a new MacBook Pro running Mavericks, Mail was not setup properly. The fix was as simple as removing a plist file. See below:

Rename this file (or delete at your own risk)

Source: https://discussions.apple.com/message/23592655#23592655

Jun 13

AIR & Away3D 4.0, Dancing Monkeys, Retro Viruses and a Bubbling Flask

We were able to pull off silky smooth 3d animations and multi-marker AR with the help of Away3D 4.0 (which uses the Stage3D API in AIR for GPU accelerated graphics); FLARToolkit; the dab hand of a 3D artist and some upbeat disco music. Not forgetting days I spent working out a consistent workflow to get textured 3d models with skeleton animations from maya to Away3D. Fun times!

Jun 13

Android USB Browser Console Debugging (OSX)

How to get all your console.log output stream in terminal:
1. Get the Android SDK.
2. Navigate to the platform-tools directory in terminal.
3. Run this command:

adb -d logcat browser:V *:S

Make sure you open a tab and goto about:debug, to enable console debugging. Otherwise it may not work (well it didn’t on the Samsung Galaxy Tab 2).

Jun 13

Over The Air AdHoc Distribution with Xcode 4.6

At developer.apple.com

1. Create App ID (this may be wildcard, so you can use it for multiple apps with the same bundle prefix. e.g. com.wehaverhythm.* for all internal apps.)
2. Create an AdHoc provisioning profile using the above App ID. (More devices can be added later, but must be added before distribution export).

In Xcode
3. In Xcode’s organiser, refresh your provisioning profile. (make sure you refresh each time the profile has been amended online, like when you add more device id’s)
4. Click Product -> Build For -> Archiving.
5. Click Product -> Archive.

[When archive is complete, it will appear in Xcode's organiser under 'Archives'.]

6. Select the application, and archive for that application you want to distribute for AdHoc.

7. Click ‘Distribute’.

8. Select ‘Save for Enterprise or Ad-Hoc Deployment’

9. Click ‘Next’.

10. Select the correct provisioning profile from the ‘Code Signing Identity’ drop down.

11. Click ‘Next’, again.

12. …wait for as long as it takes…

13. MAKE SURE YOU CLICK ‘Save for Enterprise Distribution’! Even for AdHoc. This drove me insane.

14. Enter the URL where the application will be hosted. The absolute url, including the filename.

15. Give it a title. Fill in the image url’s if you need them.

16. Save the *.ipa somewhere you will find it.

[You will notice this will also save an accompanying *.plist file]

In a text editor
17. Create an html file like the one below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <title>Install AdHoc Distribution</title>
    <a href="itms-services://?action=download-manifest&url=http://example.com/MyApplicationName.plist">Install My AdHoc App</a>

17. Upload your *.ipa, *.plist files to the url specified in the export process, earlier. Upload your html file on a web server.

On your authenticated devices
18. In your web browser on one of the authenticated devices, goto the html page you created and click the hyperlink to your app.


Dec 12

LOVE Xmas 2012: Online Interactive Projection Mapping

This Christmas at LOVE we decided to take our 2D mural projection mapping a step further. LOVE commissioned an Ian Stevenson to come up with a new Christmas themed mural to cover our 5×3 metre wall by reception. My job was to develop a system that could enable us to projection map animations back onto the wall, and let people create, send and playback personalised greetings onto the wall via a live webcam stream. This was pretty tricky!

Here’s some more about it…

There were several show stoppers I had to overcome at the start. Firstly, where do I find a projector with a short enough throw; can cover a 5×3 metre wall; will stay on 24/7 without overheating; and will be bright and crisp enough to animate, light up and show personalised messages on the wall – bearing in mind users would also need to view these online, day and night (we have clients in China remember!). This took many phone calls, and professionals saying it couldn’t be done for under 4 grand. Well, we proved them wrong ;) We were projecting on top of a print, so we only needed it bright enough to light up what was already on the wall. I found a pretty descent one for the job in the end. I’m rather knowledgeable with portable projectors now!

Webcam & Live Stream
Another potential show stopper was the webcam. We were running OSX, and the only compatible cameras were Logitec, so we bought the best one only to find that the drivers weren’t fully compatible with Mac’s. We had to have control over auto-whitebalance and auto-focus, otherwise the camera wouldn’t focus on the projection. So we ended up installing windows 7 on bootcamp, to gain complete control. Job’s a good-en. These were the two main issues, plus we had to stream at a high enough bit-rate that the text would be legible after encoding for the live stream.

I developed the openFrameworks application on top of the previous quad warp projection mapping tool we developed, and added functionality for fading between several videos; connecting to the node.js backend; queuing messages (prioritising clients over users); and elegantly displaying messages on the projection. Nice text in openFrameworks was a bit of a nightmare to begin with. I had to build my own text-align and word wrapping functionality in.

The node.js backend handles all of the message creation and hosts the html/js. I hash the messages so they are gibberish in the query string when someone is sent a link, otherwise it’ll spoil the fun if they’ve seen the message already!

We are using a Flash front-end which uses external interface calls and callbacks to trigger and recieve events from Socket.IO

Dec 12

Goodbye LOVE. Hello Rhythm.

After four wonderful years, I have left LOVE. to embark on a new journey over with my good, and extremely talented, friends at newly formed Rhythm. An exciting start to the new year for sure!

Oct 12

Projection Mapping

It’s about time I gave this a go. So with the help of a talented motion graphics guy and openFrameworks, we got a nice demo going on the LOVE. Mural. We want to make this a permanent installation, and add some interactivity later on.

Sep 12

Playing with Create.js

This is me messing with create.js. Slightly bizzare.

Top notch graphics, incredible gameplay. :p

Keepy Uppy’s with Lionel Messi

Jul 12

Spikey Audio Reactive Ball in WebGL

Another audio visualisation in HTML5, but this time it’s using three.js / WebGL

Jul 12

TURN UP THE VOLUME: An Audio Visualisation in HTML5 – it works on iPad’s and things!

I had a bit of time spare, so I made a simple audio visualisation in HTML5. Enjoy. This will probably hypnotise you.

See it in action!

Or see it in action without going anywhere!

Jun 12

ARTR for Salford Uni at MediaCityUK

At LOVE I spent the last few weeks developing an art installation for Salford University at MediaCityUK, where people can add their brush strokes to a huge digital canvas using their smartphone and tablet. This involved three massive screens, three rack-mounted Mac’s, a laptop, Socket.IO, node.js, a mobile web app and four AIR apps (using Stage3D & the Starling Framework).

The big screens were all running on separate machines, so I was tossing shapes about over the network which made it even more exciting to build. I used Stage3D and the Starling Framework to leverage GPU accelerated graphics, giving me a clean 60fps on a 1920×1080 viewport.

Read more on the LOVE blog.

The art gets continuously uploaded to Flickr

May 12

Cow Cannon Physics (HTML5 / Box2D / JavaScript)

Here’s me tinkering earlier this year with a JavaScript port of the Box2D physics engine. What can I say – it wasn’t planned.

Cow Cannon Physics

Mar 12

Doodlr – Instant Smartphone Interaction

Here is an installation we did over the last month at LOVE. No apps, just go to the website on your smartphone over 3G, and join in! We pulled this off using socket.io & node.js, Adobe AIR and HTML5.

It got a nice bit of PR too:
makezine.com / Creativity Online / how-do.co.uk / The Drum / psfk

Here’s Doodlr in action outside of MadLab.

Mar 12

Node.js + Express + TextMate

This assumes you already have npm installed.

1. make sure there is a bin folder in /users/yourname/ (create one if not)
2. open terminal and run:

$ npm install express -g
$ ln -s /Applications/TextMate.app/Contents/Resources/mate ~/bin/mate
$ export PATH="$HOME/bin:$PATH"

4. Create a helloworld app

$ express helloworld

5. Open in textmate!

$ mate helloworld

Mar 12

Protected: Cinema4D r12 to Three.js workflow (in note form)

This post is password protected. To view it please enter your password below:

Mar 12

Protected: Cinema4D Texture Baking for Away3D / WebGL (in note form)

This post is password protected. To view it please enter your password below:

Mar 12

Setting up Socket.IO for production (It’s important!)

The socket.io.js file is big. If you want to use Socket.IO in a production environment, I strongly suggest you read this…

Here is the recommended setup for a production environment

io.configure('production', function(){
        console.log(doodlr + " set config for production");
        io.enable('browser client minification');  // send minified client
        io.enable('browser client etag');          // apply etag caching logic based on version number
        io.enable('browser client gzip');          // gzip the file
        io.set('log level', 1);                    // reduce logging
        io.set('transports', [                     // enable all transports (optional if you want flashsocket)
          , 'flashsocket'
          , 'htmlfile'
          , 'xhr-polling'
          , 'jsonp-polling'

run the following in terminal:

$ NODE_ENV=production node app.js

Feb 12

Interactive Vogel Spiral

I’ve been tinkering with RaphaelJS, got a nice interactive vogel spiral going on. Click on the circles to morph them into a full screen rectangle. (click again to minimise).

Feb 12

WinAnt: Unable to locate tools.jar (solved)

I thought I’d post this to save some time for people.

I was setting up WinAnt to run the build script for HTML5 Boilerplate and was thrown an error. It said ‘unable to locate tools.jar…”. I found out that I needed to point the JAVA_HOME path in windows, to the JDK I had just installed. It was pointing at JRE, which was the problem.

SOLUTION: Set JAVA_HOME to the correct path:

C:\>set JAVA_HOME=C:\Program Files\Java\{JDE folder name}

Problem solved.