Posts Tagged ‘bitmapdata

02
Mar
10

AS3 Magnifying Glass Class :: Pixelbender Lense Refraction

The AS3 Magnifying Glass is a lense refraction class employing PixelBender. The class is an encapsulated method that takes a source image, a position and radius and returns a refracted result in sprite form.

I needed to represent a spy glass in my current project, and was looking for a very efficient method to achieve this. PixelBender seemed the obvious route and I’m pretty impressed by the speeds I am getting. I have max-ed out the frame rate and am still getting full (120) fps.

The MagnifyingGlass effect is the resultant class. The class embeds a pixelbender filter that spherizes it’s input and returns this as a sprite.

When using the class, the source image should be sent to the MagnifyingGlass full size, and be displayed to the user at a reduced size. This helps to preserve the integrity of the refracted image.

Usage:


//refraction: 0=Lots, 1 =None
//radius: The radius of the magnifying glass
//position_point: The position of the magnifying glass on the source image
//source_pic: BitmapData of the source picture
magnifying_glass = new MagnifyingGlass(refraction,radius, posn_point, source_pic)

magnifying_glass.magnifyingGlassPosition=posn_point
magnifying_glass.update()

AS3 Magnifying Glass Class

The AS3 MagnifyingGlass Class

I have set up a quick demo that shows the class at work on 3 different images. Press any key to change the image.

Image#1: Have a look around a bit of England & Wales. Enjoy.
Image#2: Hundreds of cartoon characters. See if you can find Quagmire! – Gigity.
Image#3: There is a sheep in there somewhere.

NOTE: The PixelBender filter used here is based on Joa Ebert’s Spherize Filter originally built in Hydra – the forerunner of PixelBender.

NOTE: This requires Flash Player 10 and above.

Demo: Magnifying Glass Class Demo
Source: MagnifyingGlass.zip

25
Feb
10

AS3 Flamer Class :: Setting things on fire

The Flamer Class is a quick and easy method to set things on fire. Throw some fuel (any display object) at the class and make it burn.

While working on another project I needed to make some lightweight flames. I looked around, tried a bit of perlin noise, some convolution filters – then some PixelBender filtering – I wasn’t really happy with the results.

I found the excellent Saqoosha’s Fire on Wonderfl.
This demo had nearly the flicker and colour mapping that I was looking for. Rendering the perlin noise on each frame was causing a bit too much processor overhead for my purposes.
Instead of rendering two perlin octaves and moving the layers against each other, I took two separate single octave perlin noise bitmaps and rotated one against the other while blending.
This gives a nice effect and is very lightweight. With the Saqoosha method I was clocking at a steady 26fps, with my lightweight method I could get 90fps.

To get the flame hues I set up a gradient box, threw some colours at it, loaded those colours into an array which I then pushed to a palette map.

So how to use the Flamer class:


import swingpants.effect.Flamer

var flamer:Flamer=new Flamer(display_object)
addChild(flamer)

addEventListener(Event.ENTER_FRAME, enterFrameHandler)
function enterFrameHandler(event:Event):void
{
flamer.update()
}

Your object will now be on fire. Feel naughty?

You can set the render width and height and also set the direction of the flames by setting a point vector.


var flamer:Flamer=new Flamer(display_object,render_width, render_height, flame_direction_point)
addChild(flamer)

//The colour of the flames can be set with one of the presets (There are 4 at the moment – ORANGE_FLAME, BLUE_FLAME, YELLOW_FLAME, GREEN_FLAME – but I will be adding more)
flamer.setFlameColour(Flamer.BLUE_FLAME)

//Direction can be set on the fly:
flamer.setFlameDirection(direction_point)

Here is a demo of a pure code use of the Flamer: The Flaming Vortex. You can click on the flash to initiate an explosion, and pressing space will change the colour. Have a play:

Flaming Sun

Flamer Class. The flaming vortex demo

This next demo is an example of throwing a movieclip/sprite at the Flamer class. Don’t laugh, I quite literally spent 10 minutes putting the anims together then threw them at the Flamer. Click on Flash to change colour and object.

Flaming Car

Flamer Class Demo. Help, my car is on fire

Lots of fun can be had by throwing different animations at the Flamer. Control some with your mouse/keys. Become a twisted fire starter.

The Flamer class could do with a few more features, but is a pretty good start. The speed is pretty good, I’m happy to receive any improvement recommendations.

I have packed the Flamer class and demos up in a zip if you want to have a play:
DOWNLOAD: Flamer Class and Demos

DEMO #1: Flaming Vortex
DEMO #2: Burning Movieclips

13
Feb
09

Global Game Jam – The Deep – Capture Detection

ii) In ‘The Deep’ game we have a string membrane that can contort into many shapes both concave and convex. I needed to be able to detect if a ‘plankton’ (or many) is within the membrane when the digest mechanism is triggered (the creature’s orbs touching together).

My method was to draw a shape using the membrane as a template. Fill the shape, then test the plankton to see if their coordinates are over the fill colour.

The Deep: Plankton Capture Detection

The Deep: Plankton Capture Detection

1) The creature’s orbs touch triggering the digest mechanism.

2) Using the vertices on the rope chain draw a shape.

3) Colour fill the shape.

4) Find the extents of the shape. Calculate the bounding box. Now check to see which plankton are within the bounding box. Take the coordinates of each of these plankton and test whether they have the fill colour at that coordinate. If so, then the plankton must be inside and is therefore digested. Points scored.

Again the source of the game can be found here.




Categories

Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates


Follow

Get every new post delivered to your Inbox.