Tuesday, August 02, 2005

The Flash Math Creativity published by FriendsOfEd has a lot of neat procedurally created arts, but the authors often time did a very poor job at explaining the code, especially the equations used.

Here is one example by David Hirmes on Spring: http://www.friendsofed.com/fmc/davidhirmes/index.html#

Most of the math code for movement are usually simplified version of physics, if you take the time to understand it, you will realize they are in fact very easy to understand and derive. Often times it's the code the obscures the simplicity of things (bad coding that is).

onClipEvent (load) {
xHome = _x;
yHome = _y;
zHome = 100;
springiness = .2;
decay = .8;
}
onClipEvent (enterFrame) {
y = ((yHome-_y)*springiness)+(y*decay);
_y += y;
x = ((xHome-_x)*springiness)+(x*decay);
_x += x;
z = ((zHome-_xscale)*springiness)+(z*decay);
_xscale += z;
_yscale += z;
_alpha = z+100;
}
onClipEvent (keyDown) {
_x = random(550)-225;
_y = random(400)-200;
z = random(200)-100;
}
onClipEvent (mouseDown) {
_x = random(550)-225;
_y = random(400)-200;
z = random(200)-100;
}

The only code that might be confusing to you are these: (and if you are not confused, you should be reading something else now)
y = ((yHome-_y)*springiness)+(y*decay);
_y += y;
x = ((xHome-_x)*springiness)+(x*decay);
_x += x;
z = ((zHome-_xscale)*springiness)+(z*decay);

What is it trying to do here? the equation for x and y are pretty much the same. They both represent the x and y component of the velocity. A velocity is a vector that has a direction and a magnitude (the speed). It basically tells us how fast something moves in a particular direction (signifies by x, y)

In the code above, _y is the new position has been assigned to your movieclip when you mousedown, yHome is the position (the target position). yHome - _y forms a vector (if you remember your vector math), which is basically gives the direction for the movieclip to move toward and how fast it should move -- the further away it is from the dest, the faster it moves. It's then scaled down by a factor called the springiness. The springiness component is what will cause an overshoot. If springiness is 1, then you will get an oscillation around the yHome location.
And you should remember form your highschool physics that v = u + at, meaning velocity at time t equals the sum of the initial velocity and the acceleration (assuming constant) over a period of time t. So in the above equation, you see v = at, but where is the time t? The time t is inherent in the equation because this code is being executed every frame. Assuming your movie always plays at 10fps, then the time t is 1/10 = 0.1 msec. In other words the movement code is frame dependent.

What about the second component y*decay? That's to make sure the velocity will get slower and slower as time goes by a factor of "decay". If you don't have this component, things will continue to oscillate between the destination point and never slow down.

Once you figure out the velocity, it's then time to add it to the current location _y, this corresponds to your highschool physics equation: s(t) = ut (where u is the average velocity)

y = ((yHome-_y)*springiness)+(y*decay);
_y += y;

The above code might be easier to understand if written like this:

vy = (ynew - _y) * factor; // gets the current velocity, slow it down by a certain factor since it's executing every 100msec
_y += vy; // gets the new location
vy *= decay; // reduces vy as time goes

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home