Play


18
Sep 11

Ableton Live to Flash (AS3)

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


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.

Remote Arduino


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.


26
Mar 10

What the Duck?!

Well, it is Friday. So, why not play with some ducks.

What the Duck?!


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.

Are You Fox or Chicken?

Are You Fox or Chicken?


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.

Flash 10 Circles


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.

Flash 10 CirclesWeird 2D Circles

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.