BLOG

Here is my latest experiment in Flash… this time its an app that takes a source image (jpg) and paints it giving it a very painterly look. You can tweak some of the settings such as brush size and blur. The image above was created using this. You can download the Air installer or source files below to have a play around with it. More examples below also!

[DOWNLOAD AIR] [SOURCE]

more examples:

Over the last week or two I have been playing around with particle systems and creating my own to learn all the maths equations behind them. Why? I was playing with Trapcode Particular and started wondering what all the maths behind it was. So I started creating my own particle system in Flash from the ground up – writing my own equations to move the particles. While they may not be the most efficient… they work pretty well and you can get some pretty cool results. The FLVs will save to the desktop as myParticles1.flv, myParticles2.flv etc.

Then I thought… man it would be cool if you could export the particle designs as videos, so I had a look around and found a FLV Recording class at http://code.google.com/p/flvrecorder/. For this this to work I had to be using Air, so I quickly moved it from Flash Player across to Air and incorporated the FLV recording. It might seem like it slows down and take while to save… but hell you can be waiting hours for AfterEffects to render.

This particle app was the reason I created the gradient slider (shown in the previous blog post). I wanted to be able to adjust the colour and alpha over time like in Trapcode Particular.  After creating the Gradient slider, my next issue was actually getting the particles to fade in the correct order and time. This was solved by using Greensocks TimelineLite and TweenLite.

Issues etc:

• The real-time render button currently does nothing except turn the quailty switch on or off, which also doesn’t work since Air currently only supports high quality (flash player supports low and medium quality as well)
• Currently FLVs won’t save with transparency (i think)
• the particles/sec slider is dodgey
• currently you can only export 1 swf per session ( i had problems with the FLVs playing back after saving more than one)
• no help screen

I could probly say more stuff but I shall end the post here. Click below to download the Air app and all the source files.

[DOWNLOAD]

examples:

Recently I starting working on a little project in Flash ( I will post on this later when I am ready to show it) which required some kind gradient slider like what you would see in the Flash IDE and Illustrator etc, where you can move colours around and add or remove them form the gradient. After a short search I couldn’t find any decent Flash examples, Avairy had a pretty good one although not quite what is was after and I would not be able to find out how it was done. So instead I learnt how to use the ‘beginGradientFill’ method of the drawing API and implemented my own version. I think I’ve come up with a pretty good solution, though not the easiest to incorporate into another project – but it can be done! You can download the source below to view it.

Source: [DOWNLOAD]

While at work today I didn’t have anything to do so I decided to learn how to use the Illustrator plug-in called Scriptographer. Scriptographer is a pulg-in which enables you to write custom brushes, filters or generative stuff using Javascript. The above image shows my first attempt at creating a generative brush. Basically it draws a thick branch when you drag the mouse with smaller branches randomly branching out. Some of the smaller branches have lollipop looking things on the end and some don’t. I’ve included the code below. You can edit the scale of the effect and the colours of the circles and branches. Feel free to use it anywhere or modify it.

///////////////////////////////////////////////////////////////
/////////////////////////EDIT THESE////////////////////////////
///////////////////////////////////////////////////////////////

var circleColours = ['#CD00FF','#7400EF','#0666FF'];  //colour of the repeating circles
var rootLineColour = '#FF0000';  //colour of the main line
var branchColour = '#CCCCCC';
var effectScale = 30;  //size of the pattern

///////////////////////////////////////////////////////////////
/////////////////////DON'T EDIT BELOW//////////////////////////
///////////////////////////////////////////////////////////////

var rootPath;

function onMouseDown(event) {
    rootPath = new Path();
    rootPath.strokeWidth = (effectScale/11);
    rootPath.stokeColor = rootLineColour;
    rootPath.add(event.point);
}

function onMouseDrag(event) {

    rootPath.add(event.point);

    var rootToCircle = new Path();
    var circlePosition = (event.point+Point.random() * (effectScale*4))-(effectScale*2);
    var circleSize = Math.random() * (effectScale/3*2);

    rootToCircle.stokeColor = branchColour;

    rootToCircle.add(circlePosition);
    rootToCircle.add(event.point);

    var openBranch = new Path();
    openBranch.stokeColor = branchColour;
    var openBranchEnd = (event.point+Point.random() * (effectScale*4))-(effectScale*2);
    var openBranchStart = (event.point+Point.random() * (effectScale/3))-(effectScale/7);

    openBranch.add(openBranchEnd);
    openBranch.add(openBranchStart);

    var circle = new Path.Circle(circlePosition, circleSize);

    for (var i=0;i<circleColours.length;i++)
    {
        circleSize -= (effectScale/6);
        var repeatCircle = new Path.Circle(circlePosition, circleSize);
        repeatCircle.strokeColor = circleColours[i];
    }
}

Recently I have been experimenting with WiiFlash – using a Wii remote to control Flash. Below is a video of my first test app. It is a spray painting app like the WiiSpray though obviously not at featured. I will make the Flash projector file available soon.

I decided to learn how to use WiiFlash after seeing the WiiSpray and a number of other videos a while ago. Turns out it is surprisingly easy! The only problem I had was trying to get a MovieClip to move around the stage as a mouse… I couldn’t find anything anywhere that clearly expained how to do this. Then I found that you can access the raw point data from the sensor bar through properties such as:

wiimote.p1.x; // x position between 0 and 1
wiimote.point1;  // Point object with x and y values

So below is what I came up with. Very simple although with no smoothing but it still seems to work pretty good. (I hope it works because I am writing this from memory!)

var myWiimote:wiimote = new wiimote();

//note: Box is a symbol in the library
var box:Box = new Box();
wiimote.connect();
stage.addEventListener(Event.ENTER_FRAME, onEnter);
function onEnter(e:Event):void
{
    //my x values were reversed so I multiplyed it by negative stageWidth and then 
    //subtracted from normal stageWidth to get a value on stage.
    Box.x = stage.stageWidth - (myWiimote.p1.x * stage.stageWidth;
    Box.y = myWiimote.p1.y * stage.stageHeight;
}

The main problem that I came across was Flash getting (i think) confused between the two points on the sensor bar, so I covered up one of the LEDs and it worked great.

Soon I will post up an example if a simple Wiimote Grafitti app I made, inspired by WiiSpray.

Last night I started building a shooting game in AS3 using tangible objects placed on my touch screen. This was inspired by the video I showed in the previous post. The video below shows my first test with directional shooting, though I havent added targets in yet. Since my set up uses FTIR technology I could not use fiducial markers, so I decided to build ‘active’ objects that have two IR LEDs in the bottom and a push button on top. The first LED is always on and provides location, and the second LED is controlled by the push button which triggers the gun provides the shooting angle relative to the first LED.

Found this cool video on the NUI Group forums showcasing an Asteroids game that Javier Marco has created, using actual objects placed on the screen as spaceships that shoot enemies. Very cool. Watch the video below. I think I might try something like this when I get some free time!

As some of you may know last year I built a multi-touch version of my visual synth. Well unfortunately I lost all the files after a reformat of my computer several months ago. So I have decided to rebuild since I never got to finish it, and it was lots of fun to play with and had much potential. At this point most of the functionality will be the same until I get it up to where the last version was, but I plan to add in the ability to mix in a webcam feed and image files. It’s been a while since I worked on the last version so I might be a while till this gets finished. But for now its a fun project for me to work on again. I have attached a screen shot of the refreshed UI I designed for it too. This is the first version of it so parts may change.

Below are two new videos showing a selection of new features that will be available in Photoshop CS5.

First is a video showing some of the minor user requested features…

Secondly is a a video showing some of the new painting features…