4290_FM_FINAL.

qxd 14/9/04 10:28 am Page i

FLASH MATH CREATIVITY Second Edition

DAVID HIRMES
JD HOOGE
KEN JOKOL
This is a sample extract from Chapter 2 of the PAVEL KALUZHNY
friends of ED book, "Flash Math Creativity: Second TY LETTAU
LIFAROS
Edition." See http://www.friendsofed.com/
JAMIE MACDONALD
books/1590594290/ for more details on this title. GABRIEL MULZER
KIP PARKER
This material is copyright 2005 Glenn Rhodes, and KEITH PETERS
PAUL PRUDENCE
not to be copied or redistributed without prior
GLEN RHODES
permission from the copyright owner and publisher. MANNY TAN
JARED TARBELL
BRANDON WILLIAMS
4290_02_FINAL 13/9/04 10:22 pm Page 19

When I walk down the street, lie in bed, drive my car,

stare at the city skyline or play piano my mind is
always running away in a crazy mathematical spiral.
Im always looking for patterns. No, Im not insane;
my mind just works like that.

So, in this particular mathematical quest, I found

myself looking for the patterns and beauty in
everything I saw. You know what I discovered? That
everything is beautiful in some way, or another. The
grid of window lights in the city skyline, the streak of
after-images left by looking at the sun, the rolling of
waves or the swaying of branches; theyre all
beautiful and theyre all driven by numbers.

Naturally, life isnt a plain grid, so I found myself

adding lots of randomization to the mix. Also, as the
experiments went on and I modified, shifted, and
adjusted the values, I found that I did stray somewhat
from the original idea, but thats because the beauty
left the real world, and entered the just-as-beautiful
digital, numeric, mathematical realm.

I started my mind going early in life when I was about

4 years old. At that age, I began playing the piano,
which was sitting unused in our house. Ive been
playing ever since then. Later, in 1997, I co-wrote a
full-length musical called Chrystanthia. Somewhere
along the way, I picked up game programming as a
hobby, and eventually ended up making games
professionally for home console systems. Then, in
1998, I discovered how I could take all my
experiences and combine them when I discovered
Flash. The rest is history. I share my ideas on my web
site, www.glenrhodes.com.

glen rhodes
www.glenrhodes.com
4290_02_FINAL 13/9/04 10:23 pm Page 20

Flowers
The Flowers experiment essentially consists very simply of the following code:

for(var i:Number=0; i<120; i++) {

var nm:MovieClip = attachMovie("petal", "petal" + i, i);
nm._x = Stage.width / 2;
nm._y = Stage.height / 2;
nm._rotation = Math.random() * 360;
nm._xscale = nm._yscale = Math.random() * 100 + 20;
}

This code is placed on the main timeline and attaches instances of a movie clip with the linkage name petal on the main timeline. The
instances are placed in a circle, much like the petals of a rose are arranged. This creates a simple virtual flower.

The key variables

i = The main counter variable that is used in a loop to count through the copies as theyre made
nm = A temporary string variable used to store the name of the new petal (petal1, petal2, petal3, and so on)
s = A counter used for scale (this will appear in flower3.swf)
rot = A counter used for rotation (this will appear in flower3.swf)
dr = A variable attached to each petal instance, which is used as an increment for increasing the
_rotation of the petal every frame (this will appear in flower6.swf)

Iterations
In flower2.swf, Ive added one line of code to the main loop:

nm.swapDepths(2000 - nm._xscale);

This will place petals that are smaller on top of the larger petals in the background. This is a more
accurate depiction of the way a real flowers petals are arranged.

[2]

In flower3.swf, instead of using random variables for scale and rotation, Im using a fixed set of
variables:

nm._rotation = rot += 15;

nm._xscale = nm._yscale = s;
nm.swapDepths(2000 - nm._xscale);
s++;

This creates a radial patterned effect, somewhat like a seashell.

[3]

In flower4.swf, the code is the same as flower3.swf, except rot is increased by 7 instead of
15 with each copy. In addition, the flower itself has been changed to a creamy gradient color,
creating another cool seashell look.

20 [4]
4290_02_FINAL 13/9/04 10:23 pm Page 21

glen rhodes flowers

In flower5.swf, s is increased by 2 with each copy instead of 1, and rot is increased by 14. The con-
tents of the petal image have been changed to a shape-tweened black-and-white gradient, so that when its
fully formed, the seashell has a cool color-scrolling effect.

flower6.swf is identical to flower5.swf, except that the shape tween is slightly different, and Ive
added the following code to the main loop:

nm.dr = Math.random() * 4 - 2;
nm.onEnterFrame = function(){
this._rotation += this.dr;
}
[5]
This will make each petal rotate on the spot by dr each frame.

In flower7.swf, the petal has been changed to be long, slim, and oval in shape, and the code used for
the petals onEnterFrame handler has been changed to include the following:

nm.onEnterFrame = function(){
this._xscale += 2;
this._yscale += 2;
this._rotation++;
if (this._xscale > 300){
this._xscale = 10;
} [6]
};

This will make the flower grow toward us every frame, and eventually, when the petal gets too big to be
seen, it will become small again and reappear in the center of the flower with a really cool and strange
effect. I also changed the _rotation line in the main loop back to Math.random() * 360 to make
the flower more random again.

In flower8.swf, everything is the same, except the petal is now purple/blue and when _xscale is
greater than 300, Im now taking the petal and setting its _xscale and _yscale to be 10. This creates a
perpetual sinking effectlike were flying into the flower or the petals are flying toward us.

flower9.swf looks very much like fireworks. All the petals start out at a random _xscale and _yscale [7]
between 0 and 10, and then they expand out quickly from the middle. As it expands, each petals _alpha
is being decreased, so its fading out. When the petals have faded out, theyre moved back to the middle
and shrunk. The process then repeats. To achieve this, I changed s in the main loop to

s = Math.random() * 10;

And I changed the code in petals onEnterFrame handler as follows:

nm.onEnterFrame = function() {
this._xscale += 2;
this._yscale += 2;
this._alpha; [8]
if (this._xscale>200) {
this._alpha = 100;
this._rotation = Math.random()*360;
s = Math.random() * 20;
this._xscale = s;
this._yscale = s;
}
};

[9] 21
4290_02_FINAL 13/9/04 10:23 pm Page 22

In flower10.swf, the effect is almost that were flying through space, and stars are streaking past us.
Its just like flower9.swf, except that the _xscale and _yscale of each petal begins at a random
value between 0 and 100, instead of 0 to 10.

In flower11.swf, Im using the same code as flower10.swf, except the graphic has been changed
to be a single tear-shaped white dot. This is near where the end of the petal would have been, so now
it really looks like stars streaking toward us.

Ive taken the star-field angle to its logical conclusion, so Ill return to the roots of this experiment.
flower12.swf takes us back to the original code, creating static flower images. The petal image has
been changed to be a smooth red gradient with a white tip and a purple base.
[10]
flower13.swf is identical to flower12.swf, except that in the main loop, s is being calculated like this:

s = Math.random() * 5;

and the _xscale/_yscale of each petal is being calculated like this:

nm._xscale = nm._yscale= s * s * s + 10;

This creates an exponential separation of petals as they move outwardthe inner petals are much closer
together than the outer petals. This is more consistent with the way real flowers look.

flower14.swf is identical, except the shape of the petal has been changed slightly.
[11]
In flower15.swf, rather than calculate a random s, s is incremented like this:

s+=0.04;

and the rotation of the instance is calculated like this:

nm._rotation = r += 6;

This creates an exponential spiral, which fades from red to black in the middle and is lined with a white
edge.

In flower16.swf, s is incremented by 0.02 with each copy, and _rotation = r+=27. Also added [12]
is this line:

nm._alpha = a -= 0.5;

This creates a tight spiral of copies, which fade as they go outward. The effect here looks like an elec-
tron micrograph of a pollen spore, with digital coloring.

flower17.swf uses the same code, except each petal has an onEnterFrame handler, with one line
of code in it:

nm.onEnterFrame = function(){
this._xscale;
[13]
}

This creates a pollen spore, which implodes and then expands in a cool way. Ive also added a spike to
the tip of the petal graphic itself. When it implodes, it then expands slowly in the opposite direction and
looks like some sort of headless blowfish.

In flower18.swf, the code is identical to flower16.swf, except the image of the petal has changed,
and rather than staying black at the inner end of the petal, it fades to a creamy white. When run, this
SWF generates another flowerlike image with a glowing light at the center.

flower19.swf uses the same code as the previous iteration, just with a slightly different image for the
flower, and therefore a different-looking final image. The effect is somewhat like an alien tropical flower
of unknown origin. [14]
22
4290_02_FINAL 13/9/04 10:23 pm Page 23

glen rhodes flowers

[15]

[16]

[17]

[18]

[19]

The effects of this experiment, and its various iterations, can be further expanded to make better use
of the random functions, to create wilder and more varied-looking flowers. Perhaps the flowers could
be combined with the tree effect to produce completely organic, computer-generated images. 23
4290_02_FINAL 13/9/04 10:23 pm Page 24

Trails
This code is attached to frame 1 of the main timeline in trails.fla:

_quality = "LOW";
var fade:Number = 0.9;
var counter:Number = 1;
attachMovie("master", "master", 0);
master.dx = 4;
master.dy = 4;
master.dr = 1;
master.onEnterFrame = function() {
this._x += this.dx;
this._y += this.dy;
this._rotation += this.dr;
if (this._x > 550) {
this._x = 550;
this.dx *= -1;
}
if (this._x < 0) {
this._x = 0;
this.dx *= -1;
}
if (this._y > 400) {
this._y = 400;
this.dy *= -1;
}
if (this._y < 0) {
this._y = 0;
this.dy *= -1;
}
var copy:MovieClip = attachMovie("master", "copy" + counter, counter++);
copy._x = this._x;
copy._y = this._y;
copy._rotation = this._rotation;
copy.onEnterFrame = function() {
this._alpha *= _root.fade;
if (this._alpha <= 3) {
this.removeMovieClip();
}
};
};

In the Library is a movie clip exported with the linkage name master, which is a white, rounded square. Now, the master code basically attach-
es a copy of master on the stage, and assigns it a few properties and an onEnterFrame handler. This handler moves master around the
stage and bounces it off the walls. As master moves, it spawns copies of itself every frame, with the instance names copy1, copy2, copy3,
etc. When a copy is created, its given the current properties (_rotation, _x, _y, _alpha) of master. Finally, the copy is given its own
onEnterFrame handler, which will cause it to stay exactly where it is and fade out. This creates a very smooth set of trails behind the bounc-
ing master movie clip. These effects are based on a motion effect.

The key variables

dx = The horizontal speed at which master is moving
dy = The vertical speed at which master is moving
dr = The speed at which master is rotating every frame
fade = The rate at which the copies fade out
counter = A variable that keeps track of which copy of master youre creating (so that unique names are given to each copy)

24
4290_02_FINAL 13/9/04 10:24 pm Page 25

glen rhodes trails

Iterations
For trails2.swf, I decided to change the motion of master to sine and cosine formulas, like so:

this._x = 275 + Math.cos(2 * this.ang) * 200;

this._y = 200 + Math.sin(3.2 * this.ang) * 170;
this.ang += 0.05;

The fading copy is the same, except that I set _yscale to be equal to _alpha, so that the copy will fade out and squash vertically as it does
so. With the position now being set by sine and cosine, Im able to remove all of the code that checks to see if the movie clip has left the
screen.

trails3.swf is identical to trails2.swf, except when the copy fades out, it now squashes horizontally and rotates away as it fades by
adding _rotation += 5 to the onEnterFrame handler. The image has also been changed to a rainbow box.

trails4.swf is identical to trails3.swf, except I have two movie clips on the main timeline, master and master2. These move with
the same sine and cosine formulas, except that Math.sin(3.2*ang) is on _y on master and on _x on master2. Theyre opposite so that
the two master movie clips (and their trails) will dance about in mirroring curves.

[2]

[3]

[4]

25
4290_02_FINAL 13/9/04 10:24 pm Page 26

trails5.swf uses the same motion, except the master

object is rotating as it moves, and its moving faster. Ive also
changed the image to be a dumbbell shape, which creates a
trail that looks like a DNA strand. I also incorporated code to
create a Color object and dynamically change the color of the
master (and hence the copy) based on its _x and _y position,
like so:

this.r = 250 - (this._x / 2);

this.g = this._y / 2;
this.b = 80;
var col:Number = (this.r << 16) +
(this.g << 8) + this.b; [5]
this.c.setRGB (col);

I added the Color object definition to the actions on frame 1:

master.c = new Color(master);

trails6.swf is identical to trails5.swf, except that the

center point of the master movie clip has been moved to the
left circle on the dumbbell, which creates a cool lopsided
swinging effect as it moves around. I also changed the color
algorithm a bitnothing special:

this.r = 0;
[6]
this.g = 250 - (this._y / 2);
this.b = (this._x / 2);

trails7.swf is identical to trails5.swf, except the rota-

tion of master is now a function rather than a fixed amount:

this._rotation += Math.cos(this.ang) * 5;

This has the effect of making master look like its swooping
like a bird, rather than just spinning haphazardly. I also changed
ang to 0.03.

trails8.swf uses the same motion as trails7.swf, but

the image in master has been changed to look like some sort [7]
of strange dragon or bird. When run as a trail, it looks like a
long flying dragon swooping around the screenvery cool. It
also moves slower than trails7.swf.

Finally, trails9.swf (opposite page) looks like trails8.swf,

except it uses the Color object to make the dragon all black,
evil, and ominous-looking. The copies also scale away on x and y
to look like the tail is receding into the distance. To enhance this
effect, I added in a background of mountains and an orange sky.

You could easily make the dragon keyboard- or mouse-controlled

and create a game of some sort, or perhaps create a fleet (flock?)
of dragons.
[8]

26
4290_02_FINAL 13/9/04 10:24 pm Page 27

glen rhodes trails

[9]

27