The Lawrie Cape Blog

It’s Movember again!

In: Flash|General|Javascript|Mustaches

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.

Our office is doing another excting project for Movember this year – The Gallery of Mo!

As well as the obvious, raising money and awareness for Movember and highlighting all the fab work the charity does, we want to give something back to all the loyal and generous donators.

SO, this year for every £1 you donate our skilled team of designers will spend 1 minute creating a portrait of you based on the image you supply, with one minor addition – a Mo of our choice.

So get on over to the page, make a donation and you can be supporting a great cause and also getting a really cool portrait. Here’s a few of my favourites so far –

• No Comments

Flash Midi Server – I/O version. Work in progress

In: Actionscript|Audio|Flash|Flash Midi Server|Processing

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.

• (4) Comments
• Tags: Actionscript, Audio, Flash Midi Server

InParticular – Three JS WebGL test

In: Classes and Functions|Experiments|Javascript|WebGL

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.

Table from – findmebyip.com/litmus

Try it out for yourself – lawriecape.co.uk/threejs

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

The forula given was –

x = r * cos(s) * sin(t)
y = r * sin(s) * sin(t)
z = r * cos(t)
here, s is the angle around the z-axis, and t is the height angle, measured ‘down’ from the z-axis.

I gave this a go, but I’m not great with maths. I ended up assigning a variables to the following –

• The initial T-Angle
• The initial S-Angle
• A step variable by which to increase the T-Angle by for each step in the loop
• A step variable by which to increase the S-Angle by for each step in the loop

It’s probably terrible, ActionScript style JS but here’s the loop code I used to lay out the particles -

for ( var i = 1; i < = _numBalls; i ++ ) {
	particle = new THREE.Particle( material );
 
	_tAngle += _tStep;
	_sAngle += _sStep;
 
	particle.position.x = _radius * Math.cos(_sAngle) * Math.sin(_tAngle)
	particle.position.y = _radius * Math.sin(_sAngle) * Math.sin(_tAngle)
	particle.position.z = _radius * Math.cos(_tAngle)
 
	particle.position.normalize();
	particle.position.multiplyScalar( Math.random() * 10 + _radius );
	particle.scale.x = particle.scale.y = 5;
 
	geometry.vertices.push( new THREE.Vertex( particle.position ) );
	lGeometry.vertices.push( new THREE.Vertex( particle.position ) );
 
}

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

https://github.com/mrdoob/three.js/
www.aerotwist.com/lab/getting-started-with-three-js/
www.aerotwist.com/lab/ten-things-i-learned/
dataarts.github.com/dat.gui/

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!

• (2) Comments
• Tags: InParticular, Javascript, ThreeJS, WebGL

SION AS3 Sound library instruments

In: Actionscript|Audio|Classes and Functions

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 -

var waveArray:Array = ["sine","saw","triangle8","triangle","square","noise","snoise","konami","ma1","beep","ramp","valsound.bass1","valsound.bell1","valsound.brass1","valsound.guitar1","valsound.lead1","valsound.percus1","valsound.piano1","valsound.se1","valsound.special1","valsound.strpad1","valsound.wind1","valsound.world1","midi.piano1","midi.chrom1","midi.organ1","midi.guitar1","midi.bass1","midi.strings1","midi.ensemble1","midi.brass1","midi.reed1","midi.pipe1","midi.lead1","midi.pad1","midi.fx1","midi.world1","midi.percus1","midi.se1","midi.drum24"];

More details on SION here – sites.google.com/site/sioncenter/

And here’s a great Wonderfl demo of what you can do with SION –

SiON SoundObject Quartet – wonderfl build flash online

• No Comments

Musical Scales as midi note numbers.

In: Actionscript|Audio|Classes and Functions|Experiments|Flash|Flash Midi Server|Source Code

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

//Enter scale name - 
var scaleName:String="AdonaiMalakh(Israel)";
//Enter the notes in each octave to use - see - 8.brm.sk/Scales_Chords.pdf
var acceptedArray:Array = [0,1,2,3,5,7,9,10];

Which would give us the output -

var AdonaiMalakh(Israel):Array =[48,49,50,51,53,55,57,58,60,61,62,63,65,67,69,70,72,73,74,75,77,79,81,82,84,85,86,87,89,91,93,94];

//Enter scale name - 
var scaleName:String="Zirafkend";
//Enter the notes in each octave to use - see - 8.brm.sk/Scales_Chords.pdf
var acceptedArray:Array = [0,2,3,5,7,8,9,11];
 
var octaveStep:int=0;
var finalArray:Array = [];
 
//You can limit the scales to any length - it will retrieve the middle section of the scale.
var limitArray:int = 32;
 
for(var i:int=0;i<12;i++){
	for(var j:int=0;j<acceptedarray .length;j++){
		finalArray.push(acceptedArray[j]+octaveStep)
	}
	octaveStep+=12;
}
 
function limitTo(A:Array):Array{
	if(A.length==limitArray){
		return A;
	}
	else{
		var aLength:int =A.length;
		var diff:int = A.length-limitArray;
		var diff2:int = Math.round(diff/2);
		var ARR2:Array = A.slice(diff2,diff2+limitArray);
		return ARR2;
	}
}
 
trace("var "+scaleName+":Array =["+limitTo(finalArray)+"];");
//This should trace - 
//var Zirafkend:Array =[48,50,51,53,55,56,57,59,60,62,63,65,67,68,69,71,72,74,75,77,79,80,81,83,84,86,87,89,91,92,93,95];

And here’s some scales. These are chopped to the middle 32 notes in each sequence.

var BiYu:Array =[24,27,31,34,36,39,43,46,48,51,55,58,60,63,67,70,72,75,79,82,84,87,91,94,96,99,103,106,108,111,115,118];
var Blues:Array =[41,42,43,46,48,51,53,54,55,58,60,63,65,66,67,70,72,75,77,78,79,82,84