Jamie White

Doodlr – Instant Smartphone Interaction

Jamie — Wed, 21 Mar 2012 20:27:28 +0000

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.

Node.js + Express + TextMate

Jamie — Tue, 20 Mar 2012 15:59:09 +0000

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

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

Jamie — Tue, 20 Mar 2012 10:21:43 +0000

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

Jamie — Tue, 20 Mar 2012 10:08:02 +0000

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

Jamie — Thu, 01 Mar 2012 13:10:07 +0000

The socket.io.js file is big. If you want to use Socket.IO in a production environment, I strongly suggest you read this…
https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO

Here is the recommended setup for a production environment

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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)
'websocket'
, 'flashsocket'
, 'htmlfile'
, 'xhr-polling'
, 'jsonp-polling'
]);
});

run the following in terminal:

1	$ NODE_ENV=production node app.js

Interactive Vogel Spiral

Jamie — Thu, 23 Feb 2012 22:37:38 +0000

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

Please upgrade your browser

WinAnt: Unable to locate tools.jar (solved)

Jamie — Thu, 16 Feb 2012 17:49:27 +0000

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.

http://forums.devshed.com/showpost.php?p=2472542&postcount=9
http://stackoverflow.com/questions/7697044/ant-and-eclipse

PlayStation Unwrapped!

Jamie — Thu, 22 Dec 2011 01:16:19 +0000

Here’s a little something we put together for SCEE this Christmas. They have been having a free gift givaway. No catch! Pure free gifty goodness! There were some amazing prizes to win, and a big juicy present to throw about to give you a clue to what’s inside!!!!

~~Hurry, it ends in two days!!~~

Oh well! It’s all finished now. According to our stats 311,377 people unwrapped 474,436 layers!! Not bad going.

Merry Christmas!

http://unwrapped.eu.playstation.com/

Installing npm on OSX

Jamie — Mon, 19 Dec 2011 14:14:00 +0000

I needed to install npm to setup socket.io. This actually works.

1 2	$ sudo su $ curl http://npmjs.org/install.sh \| sh

Easy.

Targeting Flash Player 11 & AIR3 for Flash Builder 4.5

Jamie — Fri, 14 Oct 2011 10:02:23 +0000

Step-by-step for overlaying AIR3 into Flex 4.5.1, and targeting FP11. Unfortunately it’s a little bit complicated at the moment. So here’s what I’ve learnt.

1. First download these:

Adobe AIR3 SDK

PlayerGlobal.swc

2. In finder go to “Mac HD > Applications > Adobe Flash Builder 4.5 > sdks” and duplicate “4.5.1″, rename it to “4.5.1-FP11″ or something.

3. Create a folder 4.5.1-FP11/frameworks/libs/player/11.0/ and paste the downloaded playerglobal.swc inside (make sure you rename it to playerglobal.swc)

4. Place the Adobe AIR3 sdk .tbz2 file in the root of the sdk: “4.5.1-FP11/air3.tbz2″.

5. Mac OS: In Terminal, cd to the root directory of the new “4.5.1-FP11″ and run this command:

1	tar jxvf air3X.tbz2

6. Run Flashbuilder.

7. Create a new ActionScript project, then click “configure flex sdks…” then add your new one targeting FP11.

8. Create a new project, then edit html-template/index.template and add this after line 48:

1	params.wmode ='direct';

9. Right-click on your project in FB navigate to “Properties > ActionScript Compiler”, then add the following compiler argument:

1	-swf-version=13

You should be good to go!

Other resources:

http://kb2.adobe.com/cps/495/cpsid_49532.html

functionToString: Return function name as String in AS3

Jamie — Thu, 13 Oct 2011 09:34:34 +0000

As simple as this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import flash.utils.describeType;

function functionToString(target:*, f:Function):String
{
var functionName:String = "error!";
var type:XML = describeType(target);
for each (var node:XML in type..method) {
if (target[node.@name] == f) {
functionName = node.@name;
break;
}
}

return functionName;
}

function foo():void {
}

function bar():void {
}

trace(functionToString(this, foo)); // returns "foo"
trace(functionToString(this, bar)); // returns "bar"

Ableton Live to Flash (AS3)

Jamie — Sun, 18 Sep 2011 17:14:00 +0000

After seeing Surya Buchwald (http://www.mmmlabs.com) demoing Ableton Live to Flash at Flash on the Beach 2011, I had to find out how it was done. So I got in touch and was led to a link to download their ‘Music Event Description System’. It is a ‘Max for Live’ addon that enables Ableton Live to output OSC messages. I then recieve this data in Flosc which converts the OSC messages from UDP to XML so the data can be used in AS3 via an XML Socket. The rest is magic, and a couple of MovieClips

Get Building – Flash Builder 4.5 / Molehill / Incubator / Broomstick

Jamie — Thu, 23 Jun 2011 14:30:09 +0000

All you Interactive Developers out there – get your free 60 day trial of FlashBuilder, the most recent version of Flex Hero SDK, the accompanying playerglobal.swc, and FlashPlayer 11 and start playing…

Theres a load of info here about how to setup everything up.

Set Properties Function AS3

Jamie — Thu, 26 May 2011 08:53:41 +0000

Here’s a simple, but very useful function that sets the properties of a specified target, with properties of an object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/**
* Set properties from object
*/
function setProps($target:Object, $props:Object):void
{
for(var p:String in $props)
{
$target[p] = $props[p];
}
}

// Example use
import flash.text.TextFormat;

var props:Object = {leading:12, color:0xFF0000, size:24};
var tf:TextFormat = new TextFormat();

setProps(tf, props); // Set the properties of tf with props object

trace(tf.leading + ", " + tf.color + ", " + tf.size); // check the result

YouTube Player API – Sound but No Video (AS3 Gotcha)

Jamie — Thu, 07 Apr 2011 12:13:15 +0000

Here is a gotcha for the YouTube Player AS3 API . I was trying to use the chromeless player, hearing sound, but not seeing any video. The player was added to the display list, alpha=1, visible=true and it was the only display object.

Solution…

If you use the embedded player, you can call the player.resize() method before the video is playing because the video has already been cued. But if you want to use the chromeless player, you can only call player.resize() after you have cued/loaded a video, not just when the player has dispatched the ‘ready’ event.

Hope this helps someone!

Umbro 1350

Jamie — Wed, 16 Feb 2011 20:03:56 +0000

Here is a site I’ve been developing over the past couple of months at LOVE. It’s for Umbro’s global campaign for 1350. The custom module has been built to run on the existing Umbro Flash site.

umbro.com/1350

Bed Peace Installation at the Bluecoat

Jamie — Sat, 25 Dec 2010 22:43:08 +0000

This installation was setup by DOROTHY and LOVE to mark the anniversary of what would have been John Lennon’s 70th birthday and the 30th anniversary of his death in 1980. It was then screened onto Ocean’s media screen outside Liverpool Lime Street Station. It is using software similar to our Two Fingers to War installation, except with the additional challenge of capturing the content to be displayed on the big screen.

Android Controlling Arduino Motor via TCP

Jamie — Sun, 05 Dec 2010 23:53:48 +0000

Here’s the result from one Sunday. I haven’t had much time recently, so I have bundled a load of different things I’ve been wanting to experiment with, into one. So it is slightly random, but was fun to make.

To put it simply, this is a motor which is being controlled remotely by my phone over the Internet.

LOVE LED Board

Jamie — Thu, 25 Nov 2010 20:20:24 +0000

After hours of decoding and cross-referencing hexadecimal numbers with an Ascii table, and studying the LED boards 20-odd page communication protocol – I was able to create a Processing library to communicate with our LED board via the RS-232 protocol. Sound easy? You should have seen the document! Working that out was the hardest part. Once I got past this bit, I used a Java Twitter library to retrieve the latest tweets to send to the LED Board.

We are streaming the camera at 20 fps so you can see the text scrolling. Oh, and it can do crazy blinking and sparkling transitions, but the strings of text are always too large for them to work!

oF + flosc = MIDI in Flash

Jamie — Sun, 12 Sep 2010 17:48:10 +0000

I spent a day working out the workflow of getting openFrameworks talking to Flash. So as a test project I decided to attempt to get MIDI messages from my MIDI controller into Flash. This was something I wanted to do a few years ago but didn’t have the technical know-how.

For this setup I am using Flosc, openFrameworks and Flash. Flosc is a Flash gateway for sending and receiving OSC (Open Sound Control) messages. The visuals were thrown together in a couple of minutes so aren’t great.

The circles sizes change according to the velocity of a specific key on the MIDI controller.