Koali blog

When using the flash drawing api to create drawings on the stage, after many lines/shapes you will experience a significant slowing of the system. This is because flash has to draw each line every frame. Flash 8, provided a solution to this problem. You can now render your vector drawing to a bitmap.

Many of the examples of how to do this a quiet complex because they have a lot of pretty drawing code in them. The system is pretty easy once you understand it, so I’ve put together a really simple Actionscript 3 example. (note that AS2 is a bit different but the theory is the same)

Code comments provide explanation in the the source code.

Source: bitmapexample.as
Example: Bitmap_Example.swf

My bright and shiny toy for today is displacement maps. I’ve been meaning to actually understand exactly how they work so that I can be in control of what I create with them instead of just applying others’ examples.

I have a few weird experiments, but thought I would post a nice clear simple example for others to learn from.

Demo: displacementexample.swf
Source: displacementexample.as

The displacement filter, takes a look at the colour value of relevant pixel in the displacement map. It then uses this to calculate an offset and pulls the relevant pixel from the image and sets it as the output. I have tried to place clear comments in the code so you can follow.

For something interesting, you can put a gradient fill on the circle starting at the top with white and at the bottom with black. This creates a flipped effect for the pixels in the circle.

var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFFFFFF,0x000000];
var alphas:Array = [1, 1];
var ratios:Array = [0x00, 0xFF];
var matr:Matrix = new Matrix();
matr.createGradientBox(radius*2, radius*2, Math.PI/2, width/2-radius, height/2-radius);
var spreadMethod:String = SpreadMethod.PAD;
this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod)

Note: Going from white to black won’t get only the pixels in the circle flipped but also pixels from the surrounding area. To get exactly the pixels in the circle you will have to work out the colour values with the radius of the circle in the calculation to exactly get the right offset. I will let you do that 🙂

Last weekend I did some playing with the Kuler API. It was just a quick experiment to see what the API was about, I have future plans for this but for the moment have been distracted with other things so I figured I would share the code.

The code connects to kuler (which has a reasonable delay) with the search string of “Australia” and then draws all the colour sets that are returned.

The code is all in one file and not in a package. If this was going to be used for something, I would recommend seperating the service out etc, but as it was just an experiment… 🙂

Source: kuler.as
Demo: fullpage.html

If your going to use the Kuler api, then  make sure you read the kuler licence agreemen available from the kuler labs page.

I’ve been mucking about with others’ Hydra examples since I saw the movies of it at max. Basically its a language based on C designed to perform image processing tasks. Eventually Hydra will be implemented into after effects, photoshop and a subset of the specs into the flash player.

Here are the results of my experiments:

—————————————————————

1. MASK

The following code takes two images, gets the grayscale of the mask and then the alpha of the base image to the grayscale.

kernel mask{void evaluatePixel(in image4 src,in image4 mask, out pixel4 dst)

{

float4 maskImage = sampleNearest(mask, outCoord());

float4 outputImage = sampleNearest(src, outCoord());

float grayscale = (maskImage.r + maskImage.g + maskImage.b) / 3.0;

outputImage.a = grayscale;

dst = outputImage;

}

}

The following two input images (the hello as the mask)

Produce:

Grey is the default background colour so the image is transparent over that.

———————————————————–

2: WIGGLE

I also created a wiggle filter

kernel morph

{parameter float xangle<

    minValue: 0.0;

    maxValue:10.0;

    defaultValue:5.0;

>;

parameter float yangle<

    minValue: 0.0;

    maxValue:10.0;

    defaultValue:0.0;

>;

void evaluatePixel(in image4 src, out pixel4 dst)

    {

        float2 coord = outCoord();

        float xcoord = coord.x - sin(coord.y)*xangle;

        float ycoord = coord.y - sin(coord.x)*yangle;

        dst = sampleNearest(src,float2(xcoord,ycoord));

    }

}

This filter takes inputs of the wiggle size of the x and y and produces the following examples:

Wiggle on both the x and the y

a wiggle just on the x

—————————————————————–
3. FLIP
And an flip filter. In the documentation there is a referenceFrame parameter to get the bounds of the input image. However after experimenting with it I couldn’t get it to work. I posted on the adobe forums and found out that it has not been implemented yet, so having a parameter with the width will have to do for now.

kernel flip

   parameter float width< minValue: 100.0;
        maxValue: 200.0;
        defaultValue:500.0;
        description: "Width of image";
   >;

    void  evaluatePixel(in image4 src, out pixel4 dst)
    {
        float2 coord = outCoord();
        float2 newcoord = float2(width-coord.x,coord.y);
        dst = sampleNearest(src,newcoord);
    }
}