So it’s Movember again, the time of year when men all over the world grow ridiculous moustaches to raise money and awareness for men’s health, specifically prostate cancer and other cancers that affect men.

I’m really happy to work at an agency that supports Movember and lets us do work to promote the cause.
Last year, we made a site called Mo’s Wanted – a 3D flash based, police line-up showing all our team members, their donations and most importanlty, the progress of their mustaches!

It was a great project to work on and I wrote a blog post about it here. We had a nice surprise this week too, as due to the strange cycles of award ceremonies, it has just picked up a couple of Cream Yorkshire Awards – Best Digital work and the Chairman’s Award.

The Cream Yorkshire Awards are all about celebrating and rewarding creativity in Yorkshire.

Open exclusively to those based in Yorkshire and The Humber, these awards provide the opportunity for those in this region to compete with others in their area.

Open to those working in the advertising, design and digital sector as well as clients and in-house teams.

A couple of days ago, a guy called Alfonso posted a comment on the Flash Midi Server page asking if the app could pass data from a midi controller to flash. FMS had always been designed to send out data – as I was originally interested in using Flash as the driving force for generative audio apps. But adding Midi input to the setup should open some more interesting possibilities.
I spent a couple of hours setting up an Input version last night – and got a demo version working.

In the image, the controller positions on the Novation Nocturn are mirrored in the swf.

I need to add the new input functions to the current FMS server app – but expect an Input / Output Flash Midi Server to come in the next few days.

So I finally got around to checking out the brillaint Three.js, the 3D JavaScript Engine, by the incredible Mr Doob. It’s really easy to pick up, even for a JavaScript novice like me – and the performance (WebGL in chrome) is absolultey astounding.
Three JS has a few different renderers –

Canvas Renderer

DOM Renderer

SVG Renderer

Sound Renderer

WebGL Renderer

In these demos, I’ve been using the Canvas Renderer and the WebGL Renderer.

Here’s a brief wikipedia defintion of each –

The Canvas Element

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.

WebGL

“WebGL is a Web-based Graphics Library. It extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser.”

Canvas is nice – but WebGL is fast. Really fast. Here’s a video of my first Three.js experiment – InParticular.

Note – The screncapture software I used caps the video at 22fps – it actually runs faster – usually at around 35 odd FPS and is much smoother than the video appears. I’ve also optimised a little since I recorded the video.

Here’s a few stills i’ve taken from the app –

I really enjoyed using WebGL – but a major drawback is varying browser support and speed. WebGL should be supported by all the latest browsers – although for me, the only browser that ran it at a good framerate was Chrome.

The first version you see in the video is a demo file included with Three.js. Not being overly familiar with JS, I used this as my starting point. I’ve put the demo up for you to see too – it’s the “Original Mr Doob demo version”.
In the demo – canvas_lines.html – white particles are placed in a 3d scene and connected by a line.

I built upon this, to set the particle positions using some basic 3d maths, adding some varibles, a GUI and some colour options.
The basic maths used for positioning the particles is based on a question from stackoverflow.com – Plotting points round a sphere

Right hand side – What’s DAT

For a nice, quick interface for altering varibles and calling functions, I used the brilliant DAT.GUI.
It’s a brilliant tool that will sit in with other UI frameworks I love using, such as MinimalComps (for Flash) and ControlP5 for Processing).

I also added in some keyboard shorcuts – indicated by a letter in brackets on the GUI menu.

Pro tips

Q decreases the radius

W increases the radius

A decreases the color variable

S increases the color variable

Notes

You have to redraw the scene for changed varibale to take effect.

Randomising the scene clears any current objects.

“Redrawing” draws the scene again over the top of the current scene. So you can try decreasing the radius and color values, then redrawing, to add another copy of the structure inside itself!

The canvas version offers a ghosting effect – deselect “clear canvas” and select “ghosting” to see it in action. It gives the nice smooth, blur images seen in the Flickr Set. For some reason though, it removes the particles. I’d love to get the ghosting to work in the speedy WebGL version – but that’s still a work in progress.

The canvas version’s image export does not include the solid black background color.

TIP TOPS – Further development links

Phew! That turned out to be a rather long post – by my standards anyway.
If you get any nice screenshots, I’d love to see them. Or if you have any requests, or optimisation suggestions – get in touch.
Cheers!

Another quick – post. I’ve been playing with the great SION AS3 sound library lately, but couldn’t find a list of all the instruments available. So here they are – all the ones that worked for me at least –

For a couple of audio projects, I needed some nice musical scales, in midi note format (0-127). I couldn’t find a good list online, so had to knock together a quick script to trace some out. Here’s some that I’m using in a current project, and also the AS source to find any other ones you may want.

Using this PDF as a guide - http://8.brm.sk/Scales_Chords.pdf – enter the scale name, and the notes which are active in that scale. For example, the first scale in the image below, the Adonai Malakh (Israel), we would set the code as –