Posts Tagged: JavaScript


27
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…

Projector
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.

Software
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


17
Jul 12

Spikey Audio Reactive Ball in WebGL

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


16
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!


16
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


20
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:

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

4. Create a helloworld app

1
$ express helloworld

5. Open in textmate!

1
$ mate helloworld

20
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: