oF + flosc = MIDI in Flash

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.

U+270D: Dear Diary

We’ve just done another interactive projection for DOROTHY / LOVE at Ctrl.Alt.Shift’s Dear Diary event at Hoxton Hall.

We set up a Mac for people to write there darkest (not so secret) secrets on. The movements were recorded and sent to another Mac near the projector. This was running the projection app which randomly picked the secrets and drew them back out on the big screen. It made a few people laugh.

Here’s some secrets:
U+270D: Dear Diary

Arduino with Flash

I had a great day on Friday at MadLab with Palmerama, Mr Baldry , Matt Booth and Chris Wilson getting to grips with a bit of Arduino programming. It mostly involved switching LED’s on and off, but it was a simple way to learn how to use the Arduino hardware. Some of us were hoping to get Flash talking to the hardware by the end of the workshop, but we ran out of time. So I had a mess about with it today.

I made a couple of circuits to control various properties of a rectangle in Flash. The first potentiometer is to control scale, the second potentiometer is to rotation and the button alters the y position when the push button is pressed or released. Also, to demonstrate Flash talking back to the hardware, the green LED fades according to the value of the first potentiometer (which Flash sets).

Arduino with Flash

PS3 The Game

Most people enjoy a summer holiday, but I had the pleasure of spending my summer building games and other bits for the PS3 The Game campaign alongside many other talented people at LOVE.

The Game is a competition between two teams (Team A and Team B), you choose a side. Beat the opposition by playing as many challenges as possible, and scoring as many points as you can. The Game is translated into 22 different languages and consists of over 40 mini-games and thousands of questions.

Play The Game!

Watch The Game Video

A selection of minigames from PS3 The Game

The Challenge Creator


I’ve written a simple particle system that abandons the use of display objects. A typical particle system in Flash would often use Sprites or MovieClips that have their properties updated by a single enter frame. This can usually result in performance issues if they are not removed properly afterwards. The particles in this example are drawn to a sprite (off stage) every frame, then the container is drawn to a bitmap. I’ve had about 5000 particles being drawn each frame, effortlessly.

Flash 10 Circles

Circles in 3D Space

Ok, this post is a bit random. I was playing about with animating circle outlines using trig, then just went overboard making it scale and stuff. Then I remembered Seb Lee-Delisle wrote a simple drawing api for Flash 10, so then I made made a similar thing in 3D space.

Be patient with the 3D version, It does this cool wavy effect when it finishes.

Flash 10 CirclesWeird 2D Circles

private var _startPoint:Point = new Point(0, 0); // The centre point of the circle.
private var _circleTween:TweenMax; // Tween used for drawing the circle.
private var _canvas:Sprite; // The container for the graphics.
private var _maxLines:int = 400; // The maximum number of lines to draw.
private var _lineCount:int = 0;

public function WierdCircles():void
_canvas = new Sprite();
_canvas.x = stage.stageWidth/2;
_canvas.y = stage.stageHeight/2;

TweenMax.to(_startPoint, 30, {x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight, ease:Quad.easeIn, overwrite:2});
TweenMax.to(_canvas, 10, {scaleX:.2, scaleY:.2, yoyo:true, repeat:-1, ease:Quad.easeInOut, overwrite:2});

_drawCircle(120, 150, .2, 80);

private function _drawCircle($angle:int, $rad:int, $increment:int, $totalFrames:int):void
_circleTween = TweenMax.to(_canvas, $totalFrames, {rotation:-360, useFrames:true, onUpdate:_circleStep, onUpdateParams:[$angle, $rad, $increment], onComplete:_circleComplete, onCompleteParams:[$angle, $rad, $increment, $totalFrames], ease:Linear.easeNone});

private function _circleStep($angle:int, $rad:int, $increment:int):void
if(_lineCount < _maxLines)
var nextX:Number;
var nextY:Number;
var angle:Number;
var theta:Number = 0 * Math.PI/180;

nextX = _startPoint.x + (Math.cos(theta) * ($rad + _lineCount));
nextY = _startPoint.y + (Math.sin(theta) * ($rad + _lineCount));

if(_lineCount == 0) _canvas.graphics.moveTo(nextX, nextY);
else _canvas.graphics.lineStyle(3, 0xFF0000, 1);

angle = 360 * (_circleTween.currentProgress);
theta = angle * Math.PI/180;

nextX = _startPoint.x + (Math.cos(theta) * ($rad + _lineCount));
nextY = _startPoint.y + (Math.sin(theta) * ($rad + _lineCount));

_canvas.graphics.lineTo(nextX, nextY);


public function _circleComplete($angle:int, $rad:int, $increment:int, $totalFrames:int):void
_drawCircle($angle, $rad, $increment, $totalFrames);

Floating PV3D Planes

Here is something I made a while back. I was mimicking a sequence from a TV ad which meant splitting up a 2D image and mapping them onto 3D planes for animation. This idea was abandoned in the end for something more substantial. It was cool to accomplish it, at least.

So here’s how its done:

  • Get the size of the image and break it up into segments depending on the number of rows and columns you want.
  • Apply each segment of the bitmapdata onto its own bitmap material, then apply it to a primitive plane.
  • Calculate the target x/y position depending on where the top left corner of the image should sit.
  • Cue all 3D planes from scale 0, and the start xy position.
  • Create a bezier path for the tween on the XYZ axis.