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.




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

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

– Create your scene in Cinema4D
– Make sure all of the normals are correct (to prevent having to double side everything)
– Select all of the objects to bake
– Replace items after bake
– Export as *.3ds
– Open Blender
– Import *.3ds
– Export as Wavefront (.obj)
– Get this python script by AlteredQualia
– Make sure python is installed
– Run python convert_obj_three.py -i myscene.obj -o myscene.js
– Make sure your texture is in the same folder as myscene.js when you load in THREE.js.

(Still to work out: how to import full scenes (with lights & cameras), and use the scene loader in THREE.js)

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

– Make sure all lights have ‘ambient illumination’ checked. (maybe ‘show illumination’ too).
– Select Objects to bake
– Select render > bake object.
– Check illumination, Single texture. (also replace objects for final version).
– Apply baked jpeg / png in cinema4d as the color texture, and not luminosity of the material.

Import to Away3D 4 (Dark Texture Issue – Solution)
– Open the image in photoshop and re-save, then import the texture. This fixes the issue.

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