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
Play
18
Sep 11
Ableton Live to Flash (AS3)
5
Dec 10
Android Controlling Arduino Motor via TCP
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.
12
Sep 10
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.
17
Aug 10
My First iPhone App
I’ve just started learning Cocoa Touch / Objective-C. I’ve also been playing with Cocos2d for the iPhone and made a simple game. It’s not very exciting though.
11
Mar 10
Are You Fox or Chicken?
I made an AIR app for LOVE. for a guerilla projection for Umbro outside of the office, promoting the new Umbro’s Stealth football boot.
Everyone in the video thought the projection was coming from the street behind, when in fact it was out of the building to the left. Which was quite funny.
1
Feb 10
Fireworks
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.
21
Jan 10
Circles!
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.
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 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; addChild(_canvas); 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); _lineCount++; } } public function _circleComplete($angle:int, $rad:int, $increment:int, $totalFrames:int):void { _drawCircle($angle, $rad, $increment, $totalFrames); } |
17
Jan 10
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.
28
Nov 09
openFrameworks
I’ve taken a leap into C++ and setup openFrameworks in Xcode (on mac) and Code::Blocks (on pc). openFrameworks is great for producing offline material for installations, such as this. So far I have got my head around a few addons including Box2D and some basic openCV bits.


