Atom Cuts 2

Sticky Elemental Snow

The goal of this piece is to create an illusion; that a block of color is sliced into smaller and smaller squares. These squares then fall away, revealing another block beneath, which is also sliced and diced to reveal another block ...again and again, each layer reveals what's hidden beneath.


The math behind this is very simple.

1. find the width and height of the block.

wMax = targ.width;

hMax = targ.height;

2. To draw a line that cuts the block in half, we start by dividing the maximum width by 2.

w1 = wMax/2;

the starting point for our bisecting line is at

p1 = [ w1, 0];

and the end point is at

p2 = [w1, hMax];

Drawing a horizontal line across the block is very similar. Get half of the block's height, and that's the y value for your line.

3. Now, we want to draw lines that divide these squares. We calculate the points for the new lines in a similar manner.


Each round of division is a generation, and depends on the properties of the previous generation to calculate it's own properties.

When a generation is complete, a counter increments so that we can keep track of which generation we're currently working on. This is very handy, since we can decide how to proceed, based on which generation we're in.

For instance, once we've reached the maximum number of generations we want, we can switch gears completely and make our squares drop from the grid we've just drawn, and reveal the new block that's been hiding underneath.

Actually, the new block is just the old one...we just change it's color to match the color of the lines drawn on the "previous" block. Just a little ActionScript slight-of-hand, along with changing it's visibility at key moments.

Moving Parts

There are three main structures involved:

1. The symbol on the stage. Reference to this symbol is passed to the Box class, in the actions panel of the main timeline of the fla. It serves as our "block, and we hide, reveal, and change it's color.

2. The grid, is a container for drawing the lines into. It's created in the Box class.

3. The boxes, is a container for the cell instances. The Cell class instances control their own movement, once once the Box class creates and triggers them to move.


A link to download source files is near the bottom of this page.



--> Download Source Files <--