Part Ib – Butterfly intermezzo

In the previous post we talked about affine transforms and splitting rectangles into triangles. We only talked about one of the simplest scenarios: mapping a complete rectangular area of a bitmap into a drawn triangle/rectangle. The formulas for mapping an arbitrary triangle of a source bitmap into an arbitraty drawn triangle are a bit more involved and we will discuss them in the next post. But even with two triangles we can create something simple to create a feel of 3d. Far from being a correct implementation, this example experiments with a 3d butterfly based on two sources images (the front and back of a butterfly).

The 'model' exists of two triangles, one for each wing, which are folded and rotated using a couple of sinuses. The resulting coords are used to generate the transform matrices for the bitmap fills on the wings. Which bitmap is used to fill a triangle is decided using a cross product of the wing vectors, to check whether we are seeing the top or the bottom of the wing. Since there is no real perspective it is sometimes hard to see which side is in front, but nonetheless this opens up fun possibilities for a children's game where you can draw a butterfly and then have it fly off your paper into a garden or something like that (where 100% correct perspective wouldn't matter anyway).

One thing I've noted is that when you use smooth bitmapfills without explicitly closing the filled polygon the flash player will sometimes hang / lock up for seconds at a time. Not sure what causes this, and I hope closing the polygon is the 'real' fix.

Here is the complete example with sourcecode included: Butterfly2 (1260). It's a Flash IDE FlashDevelop project, meaning you can edit it in FlashDevelop but have to export it from the Flash IDE. If you don't have a flash ide, setup the butterfly swf as injection swf and specify another output.

Part I – Affine Transforms

Also known as:

  • fake 3d using bitmapfills
  • transforming bitmapfills

For a project I’m currently working on I have to create a textured cube with clickable hotspots (aka a panorama) that can light up. Easy enough in Papervision, if not for the fact that the performance needs to be very high and oh yes one minor detail it has to be in AS2.
The client will be able to load 6 cubesides in an editor, draw hotspots on each side and press render, which will result in a 3d panorama, in which hotspots are going to light up as you mouse over them. Ah yes did I mention this was AS2?

Although this provides us with a huge range of items to discuss and play with, in this post I want to focus on the basics of one single subject: rendering a textured plane in 3d. I’ll get to the rotating/projecting etc bits later, can’t have too much coolness in one post ;).

Read more

Flag effect in ActionScript 3

What better image to use for a flag effect than an image by Derek Riggs (which you already have on your living room wall right? Not?)

Click on the flag !

Anyway, in this example I've experimented with using perlin noise as a displacementmap, and overlaying the same displacement map for a lighting effect. The lighting effect was tweaked using a colortransform, and the falloff on the flag (the right side is much more affected by the wind than the left side) was realized by mixing the perlinnoise map with a gradient.Here is the complete example with sourcecode included: Flag Effect (3657). Note that to should be run from the flashdevelop project nummero uno, while this example (example5) should be run from project nummero duo. Example 1 - 4 just experiment with the basics, and the last example puts it all together with documentation.

Download sources: Flag Effect (3657)

Wrapping BitmapData in Actionscript 3

Sometimes you overlook the easiest solutions. I had implemented a wrapping bitmap in actionscript 2, by some complex copyPixels code, which would cut 1 to 4 pieces from the original image and put them together again, providing you with a bitmap that wraps.

Then I realized that there is a much easier solution, with more functionality as well (not only wrapping but tiling too). But surprised however that it performed much better too. Surprised because I would have thought that 4 copyPixel operations would have been faster than using the drawing API combined with beginBitmapFill.

I’ve wrapped (no pun intended) the idea into two utility classes, the first WrappingBitmap is a simple sprite which takes a bitmapdata as source and creates a tiling wrapping display object that you can scroll.
The second is a WrappingBitmapData class which subclasses BitmapData and overrides the scroll method to wrap.

Read more

Visual Reflections in ActionScript 3

I migrated the actionscript 2 version of my reflection class some time ago, but hadn’t gotten to posting it yet. I managed to whip up some examples of this new as 3 version. It’s not as feature rich as the as 2 version due to some changes between as 2 and as 3, but just as easy to use.

Some features:

  • simple setup, just do addChild (new Reflection (myContent)); and you are done
  • respects masks, scaling, etc and automatically adjusts to the correct position
  • allows you to grab (live) bitmap data of the reflection for those times you only need a bitmap
  • can be updated manually or automatically
  • simple samples included

Download the sources and examples here: As3 Reflection (585)

NOTE: the examples are FlashDevelop projects. The security is set to network, so they won't run locally unless you compile and run them once through flashdevelop (FlashDevelop will update your security settings while running).