New Showreel!

I have just uploaded my new showreel to Vimeo. A couple weeks ago I was listening to TripleJ in the car and I heard this amazingly bizarre, vintage, sci-fi, horror metal song come on. Unfortunately I missed what it was called or who the artist was so I spent ages trying to figure it out. READ MORE

Paint mixing with PixelBender

In my post yesterday I was demonstrating my attempt to create a drawing app using Stage3D for graphics acceleration. As it turns out Stage3D is not built for this kind of ‘per pixel’ manipulation on a drawing canvas. I mentioned at the end of the article that I might explore PixelBender as an alternative for the number crunching. So here it is, my first attempt at building my own Shader in PixelBender for paint mixing.

As you may already know, PixelBender is a a shader language built by Adobe that can be universally used between applications such as Flash Player, Photoshop and After Effects. It is based on the OpenGL Shading Language (GLSL) and is similar to C++. It can be used with Flash to create custom bitmap filters, effects or even to hand off some complex calculations. The great thing about using Pixel Bender is that it runs in a separate thread to Flash Player and can use multiple threads and even multiple cores. So the heavy lifting doesn’t lock up the Flash Player and can run parallel. This makes for some much, much faster processing.

READ MORE

Painting with Stage3D using Starling

I’ve been trying to find ways to improve the performance of paint mixing with Flash and I though I could try using Stage3D for hardware accelerated graphics. But then I realised that Stage 3D is optimised for polygons and 3D models so it was probably not the best solution. I wanted to see if it was possible anyway and thanks to the Starling Framework and a bit of help from Thibault Imberts book it turns out its possible using the RenderTexture on an Image object, but it’s not really possible to do any complex drawing. Starling’s Image object is the equivalent of the Bitmap class, which is using to display any BitmapData. I made an example which you can see below.

By creating a RenderTexture for an Image object, you can use the RenderTexture’s draw() method to draw another Image’s texture onto it. This is similar to using BitmapData and draw() to draw one bitmap onto another.  But Stage3 doesn’t use pixels, it uses textures mapped to triangles instead therefore at this stage  it’s not possible to use something like getPixel() for get colour data from the ‘canvas’.
READ MORE

Spray Paint Stencils in Flash – V2

Well, here we are with version 2 of my Flash spray paint stencils. I’ve been meaning to do a post on this for a while now! This time the paint is rendered much quicker by doing away with an embedded for loop that was in V1. This time instead of looping through each pixel on the canvas, I am drawing using copyPixels utilising an alpha bitmap as an alpha channel and matrices to transform them correctly based on the scale, rotation and position of the stencil movieclip. Another cool feature I added was a ‘muck’ layer on the stencil. Now paint that was on top of the stencil stays on the stencil – just like in real life!

READ MORE

Jackson Pollock – From AS2 to AS3

I found a Jackson Pollock style painting example written in AS2 called ‘Splatter’ over at stamen.com. I wanted to include a Pollock style brush in my painting application so I converted it into AS3. Just copy and past the following code into a new AS3 document in Flash.

Get Adobe Flash player

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import flash.events.MouseEvent;
import flash.display.MovieClip;

//set up some vars
var new_size_influence:Number = 0.5;
var mid_point_push:Number = 0.75;
var max_line_width:Number = (Math.random() * 50) + 50;

//vars for line colour and alpha
var _colour:uint = 0x000000;
var _alpha:Number = 1;


//create var to hold all mouse position data
var obj:Object = new Object();
obj.x = 0;
obj.y = 0;
obj.start_x = obj.mid_x = obj.end_x = (stage.stageWidth / 2);
obj.start_y = obj.mid_y = obj.end_y = (stage.stageHeight / 2);
obj.size = 0;

//add mouse down event listener
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);


function onDown(e:MouseEvent):void
{
    //create random colour
    _colour = Math.random()*0xFFFFFF;
   
    //set all line data to current mouse position
    obj.start_x = obj.mid_x = obj.end_x = mouseX;
    obj.start_y = obj.mid_y = obj.end_y = mouseY;
   
    //add mouse up and mouse move event listeners
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
    stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
}

function onUp(e:MouseEvent):void
{
    //remove mouse up and mouse move event listeners
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
    stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
}


function onMove(e:MouseEvent):void
{
    //find the mid point between current and last mouse position
    obj.mid_x = ((obj.end_x - obj.start_x) * (1 + mid_point_push)) + obj.start_x;
    obj.mid_y = ((obj.end_y - obj.start_y) * (1 + mid_point_push)) + obj.start_y;
   
    //set start to last point
    obj.start_x = obj.end_x;
    obj.start_y = obj.end_y;
   
    //set end to current point
    obj.end_x = mouseX;
    obj.end_y = mouseY;
   
    //get distance between start and end point
    var distance:Number = Math.sqrt(Math.pow((obj.end_x - obj.start_x), 2) + Math.pow((obj.end_y - obj.start_y), 2));
   
    //set size depending on distance
    var new_size:Number = max_line_width / distance;
    obj.size = (new_size_influence * new_size) + ((1 - new_size_influence) * obj.size);
   
    //draw the line
    graphics.lineStyle(obj.size,_colour,_alpha);
    graphics.moveTo(obj.start_x, obj.start_y);
    graphics.curveTo(obj.mid_x, obj.mid_y, obj.end_x, obj.end_y);
   
    // splotch
    var dd:Number = Math.sqrt(Math.pow((obj.end_x - obj.start_x), 2) + Math.pow((obj.end_y - obj.start_y), 2));

    for (var i:int = 0; i<Math.floor(5*Math.pow(Math.random(), 4)); i++)
    {  
        // positioning of splotch varies between ±4dd, tending towards 0
        var splat_range:int = 1;
        var x4:Number = dd * 1 * (Math.pow(Math.random(), splat_range) - (splat_range/2));
        var y4:Number = dd * 1 * (Math.pow(Math.random(), splat_range) - (splat_range/2));
       
        // direction of splotch varies between ±0.5
        var x5:Number = Math.random() - 0.5;
        var y5:Number = Math.random() - 0.5;
        var d_:Number = obj.size*(0.5+Math.random());
       
        //draw the splotches
        graphics.lineStyle(d_, _colour, _alpha);
        graphics.moveTo((obj.start_x+x4), (obj.start_y+y4));
        graphics.lineTo((obj.start_x+x4+x5), (obj.start_y+y4+y5));
    }
}

Spray Paint stenciling in Flash

After seeing the Wii Spray demo videos a year or so ago I have since been wondering how they did the stencils. I couldn’t find any information on how to achieve an effect like paint stenciling so today I decided to give it a shot myself. Below is a small demo where you can have a go and spraying some stencils. Instructions are in the bottom left corner. Here is how it works:

Layers (top to bottom):

  1. Draw Layer Bitmap – contains BitmapData where the spray paint is drawn
  2. Stencil MovieClip – the stencil you see on screen containing artwork with transparency
  3. Stencil BitmapData – stencil is drawn to this bitmap data (not added to display list)
  4. Canvas Bitmap – where final artwork is drawn to

The process

  1. when stencil is moved and placed somewhere, the Stencil BitmapData is filled with red, then the Stencil MovieClip is drawn on top.
  2. you then paint with the mouse – paint is drawn to Draw Layer Bitmap
  3. on mouse up a Temporary BitmapData is created
  4. it then loops through all pixels in Stencil BitmapData – if pixel is Red: copy corresponding pixel from Draw Layer Bitmap to Temporary BitmapData
  5. when the loop is complete draw the Temporary BitmapData to the Canvas BitmapData
  6. Draw Layer Bitmap is then cleared

Get Adobe Flash player

Some more Flash Generative Art

Here are some more generative art pieces I have created in Flash. I am slowly getting better at it. Now that I have figured out how to get high res bitmaps exported from flash I can get much better quality images. These were created at about 2500 x 3000px.

Download the Hi-Res images here (ZIP, approx 22mb)

Generative Art in Flash

Recently I have been inspired to create generative art using Flash thanks to Erik Natzke who creates stunning images… all created by ActionScript. I did a fair bit of digging around the net and managed to find a few code examples and video demonstrations on how the images were generated. So as you can see above and below, using some of Erik’s code and modifying some of the maths I was able to create my own abstract painterly images. I shall continue to develop this and I was thinking about making a cool Multitouch generative art app using one hand to paint and the other to adjust parameters. Could be interesting!