Professional Documents
Culture Documents
Flash Math Creativity: Second Edition
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
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:
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.
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:
[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
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;
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;
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;
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
[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.
24
4290_02_FINAL 13/9/04 10:24 pm Page 25
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
this.r = 0;
[6]
this.g = 250 - (this._y / 2);
this.b = (this._x / 2);
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.
26
4290_02_FINAL 13/9/04 10:24 pm Page 27
27