trigonometry

[linedrivehitter]

i am trying to make a 5 point star rotate clockwise while pulling apart (as diamonds), and as it rotates, to have 5 more diamonds come out from behind the original 5. i want the new 5 points to start at about 20% opacity and end up at 100% by the time they fall into place and complete the new 10 point star. from there, i want to use alpha, scale and rotation to create a kaliedoscope effect which eventually settles back into the 10 point star at 100% opacity. i have figured out that the best way to do this is with trig, but i am having trouble getting started. ideas? suggestions? tutorials? i sincerely appreciate any help offered...

[jbum]

Here's a couple of scripts to get you started.

Everything you want to do can be done once you master the basic circular formula which looks like this:

cx,cy are the center of the cirlce
and radius is the radius of the circle

code:

---

kNbrPoints = 30; // number of segments to draw

cx = 100;

cy = 100;

radius = 50;

for (i = 0; i < kNbrPoints; ++i)

{

	var a = i*Math.PI*2/kNbrPoints; // angle from 0 - 2*PI

	var x = cx+Math.cos(a)*radius;

	var y = cx+Math.sin(a)*radius;

	// plot point x,y

}

---

I would take some time studying this loop to figure out what is going on here .

If you alternate between two radii, then you get a star shape. For example, if kNbrPoints is 10 and you alternate between two radii, you would get a 5 pointed star.

Here's some code which uses this formula to make a spinning & mutating 5 point star shape.

code:

---

kNbrPoints = 5;



kSpinFreq = .001;

kStarAmp = 30;

kExpandFreq = .0005;

kExpandRad = 20;

kHalfAngle = Math.PI*2 / (kNbrPoints*2);



_root.onEnterFrame = function()

{

	this.clear();

	this.beginFill(0xFFFF00,100);

	var d = Math.abs(Math.sin(getTimer()*kExpandFreq))*kExpand  Rad;

	for (var i = 0; i < kNbrPoints; ++i)

	{

		var a = (i/kNbrPoints + getTimer()*kSpinFreq) * Math.PI*2;

		trace(a);

		var xn = Math.cos(a);

		var yn = Math.sin(a);

		var xn1 = Math.cos(a-kHalfAngle);

		var yn1 = Math.sin(a-kHalfAngle);

		var xn2 = Math.cos(a+kHalfAngle);

		var yn2 = Math.sin(a+kHalfAngle);

		this.moveTo(xn*d,yn*d);

		this.lineTo(xn1*d*2,yn1*d*2);

		this.lineTo(xn*kStarAmp, yn*kStarAmp);

		this.lineTo(xn2*d*2,yn2*d*2);

		this.lineTo(xn*d,yn*d);

	}

	this.endFill();

}

---

For lots of kaleidoscopic effects - check out my website, link below.

[linedrivehitter]

thanks..this has been very helpful...i appreciate it. is it possible to do this starting with a movie clip symbol for each point/of the star, rather than actually drawing the shape with actionscript???

[jbum]

Yes... let's say you have a series of duplicate movieclips named star1 - star5.

You can use a loop like the following to arrange them in a circular manner.

code:

---

kNbrPoints = 5; // number of segments to draw

cx = 100;

cy = 100;

radius = 50;



for (i = 1; i <= kNbrPoints; ++i)

{

  var a = i*360/kNbrPoints; // angle from 0 - 360 (degrees)

  var ar = a*Math.PI/180;   // angle from 0-2PI (radians)

  var mc = _root["star"+i];

  mc._x = cx+Math.cos(ar)*radius;

  mc._y = cy+Math.sin(ar)*radius;

  mc._rotation = a;

}

---

You may need to add a fixed amount to the rotatation to correct it. The script assumes that your basic diamond shape is pointing to the right.

[linedrivehitter]

thanks again...this is really a HUGE help to me. just wondering though...do you think it is a good idea to put each individual "diamond" MC into another MC already positioned into the star shape? would it work to re-use one MC symbol (diamond shape) and just rotate it to form the star? or would that mess up the trig? also, i guess that is what is giving me the most trouble right now...how to actually organize the MCs and the movie as a whole.

[jbum]

Personally, I would use copies of one MC and rotate each copy. There are numerous examples of this kind of thing on my website, for example:

http://krazydad.com/bestiary/bestiar...ang_scope.html

http://krazydad.com/bestiary/bestiary_bubbles.html

http://krazydad.com/bestiary/bestiary_buttons.html

Each of these movies have source code that you can download.

Most of these kaleidoscopes actually make 10 copies of each object, in order to make a 5-pointed shape - each copy occupies a wedge corresponding to a 'half-diamond'. To get each half of the diamond I turn one of the copies around by setting the _xscale to -100.

However, using whole diamonds, as you've described will work as well.

The best way to learn this stuf is to do a lot of experiments and play with it until you have a better understanding of the math involved.

[linedrivehitter]

ok, that makes sense...so, in the first actionscript you posted, how would i modify that to not draw the segments but rather to act on the MCs with the images? the motion of that script is exactly what i am trying to do...

i sincerely appreciate your help!

[jbum]

Here's a sample .fla to start you off.

There is a single movieclip in the library which is exported as 'diamond' which looks like a diamond on it's side.

Here's the script:

code:

---

kCenterX = Stage.width/2;

kCenterY = Stage.height/2;



kSpinSpeed = .0005;  // controls speed of rotation

kPulseSpeed = .001;  // controls speed of expansion/contraction

kMinAmplitude = 50;  // controls minimum contraction distance

kMaxAmplitude = 200; // controls maximum contraction distance

kDiamondSize = 50;   // controls overall diamond size



moveDiamond = function()

{

     // a (angle) is the position on the circle

	a = this.phase + getTimer()*kSpinSpeed;

    // rad is the distance the diamond will be drawn from the center

	rad = kMinAmplitude + Math.sin(getTimer()*kPulseSpeed)*(kMaxAmplitude - kMinAmplitude);



	this._x = kCenterX	+ Math.cos(a)*rad;

	this._y = kCenterY	+ Math.sin(a)*rad;

        // we set our rotation to corespond to our angle

	this._rotation = a*180/Math.PI;

}



// this is the loop where we setup the diamonds



for (i = 0; i < 5; ++i)

{

	var mc = _root.attachMovie('diamond', 'diamond_' + i, i);

        // each diamond is given a phase offset corresponding to 1/5 if the circle - so they spread out around the circle

	mc.phase = i*2*Math.PI/5;

        // this assigns the animation function for each diamond - it is called each frame

	mc.onEnterFrame = moveDiamond;

        // i drew my diamonds too large, so here I reduce their size

	mc._xscale = mc._yscale = kDiamondSize;

}

---

You can also create additional sets of 5 diamonds which have different colors, and an offset added to the phase, to cause them to be interleaved with the others.

[linedrivehitter]

thanks again for your help...this is really close to what i am trying to do with this thing. just wondering...how do i control alpha and scaling in the actionscript? and looping? the end result is going to have text fading in and out around the star and eventually settle into the 10 point star with no further animation. about 15 seconds worth of animation total. i have attached a rough animated gif to show you what i am trying to accomplish. i guess once i understand how to handle scaling and alpha, i would just layer several instances of the MCs to create the movie? i really appreciate your input.

[jbum]

You can also animate _alpha, _xscale and _yscale in the movement function.

For what you want to do, you can do a tween in the movement function where each component you are animating has a start value and a stop value.

A useful way to structure the movement function is like so:

code:

---

moveFunction = function()

{

  var r = (getTimer() - this.startTime)/this.duration;

  // r is an animation variable which will go from 0 to 1 during the animation

  if (r > 1) {

    r = 1;

    delete this.onEnterFrame;

  }

  // use r here to control each the various things such as _alpha, _rotation, _xscale and _yscale

  // for example, if you want _alpha to go from 50 - 100, you would use this:

  this._alpha = this.beginAlpha + r * (this.endAlpha-this.beginAlpha);

  // similar for _xscale...

  this._xscale = this.beginScale + r * (this.endScale - this.beginScale);

  this._yscale = this.beginScale + r * (this.endScale - this.beginScale);

  // also animate rotation and _x and _y

  // using sin,cos,r,amplitude and phase, as I have shown above...

}



// For each movieclip, set up the starttime & duration of the animation

// And the minimum and maximum value of each component

mc.startTime = getTimer();

mc.duration = 15*1000; // 15 seconds



// and set up begin and end values for each parameter you are animating

mc.beginAlpha = 50;

mc.endAlpha = 100;



mc.beginScale = 75;

mc.endScale = 120;



mc.onEnterFrame = moveFunction;

---

One other thing, this statement:

var r = (getTimer() - this.startTime)/this.duration;

Gives you linear animation in that r smoothly travels from 0 - 1 in a straight line without easing. If you want easing, add the following line:

r *= r*(3-2*r);

Which'll give you ease-in and ease-out.

[linedrivehitter]

ok...i have modified diamonds.fla to use my diamond symbol appropriately sized and to rotate and expand/contract as i need it to in the first set of diamonds. i am confused about how to implement the "movement" script you posted last into diamonds.fla...played with it almost all night and couldn't get it to work. do i include everything in moveFunction (new) into moveDiamond (old)? or do i keep 2 separate functions? also, each individual diamond symbol is a movie clip...should i assemble the rest of the diamonds i need (20+) in the same layer or should i create a new layer for each set of 5 to control stacking?

you rock.

[jbum]

i am confused about how to implement the "movement" script you posted last into diamonds.fla...

If you got one set of diamonds to work exactly as you need it to, then you probablyo don't need my movements script. You just need to make a few more sets of diamonds. The purpose of the movement script is to provide a general purpose way of getting any variable (or set of variables) to change from A to B over time. It's a useful tool to have in the arsenal, but if you don't need it, you don't need it.

do i include everything in moveFunction (new) into moveDiamond (old)? or do i keep 2 separate functions?

I was hoping you would be able to incorporate the ideas in the movement script into movediamonds (not two separate functions), but it's probably not easy.

For me, the key to doing this kind of animation is a) thoroughly understanding what the sin/cos functions do (the earlier scripts) and b) being able to manipulate variables over time using a value that goes from A to B over time (the movement script). Understanding both of these things is crucial for successfully combining the scripts.

played with it almost all night and couldn't get it to work.

It's tempting for me to just hand this one to you on a plate, but I'm gonna try to resist, cause you'll get more out of it if you accomplish it yourself.

When I was learning to use a very complicated analog synthesizer years ago (the Buchla 200 system), my teacher said something very useful about experimentation. He basically said that it's good to play & experiment, as it often leads to interesting sounds. But it's also good to alternate this with another method, in which you start with an exact idea of what you want, and you work towards getting there in a very systematic way.

Experimentation is good, if it leads to understanding, but blind experimentation can just needless complicate things and make them harder to understand. The best experimenation is systematic experimentation.

The key to playing with a script is to make sure you understand as well as you can before you start tweaking it. Then, if you don't understand one variable, play with just that one variable until you understand it. Always make small changes and if the results are counterintuitive, figure out why, rather than changing it.

also, each individual diamond symbol is a movie clip...should i assemble the rest of the diamonds i need (20+) in the same layer or should i create a new layer for each set of 5 to control stacking?

Either method works. It depends on how you created your first set of 5. If you are using attachMovie or duplicateMovieClip in a loop, then you can create a few more loops and just keep incrementing your depth numbers.

If you started with all 5 diamonds on the stage, then it's probably easier to create new layers (but don't fall into the trap of putting a different script on each layer - keep your script on a single 'script' layer).

[linedrivehitter]

well, i got the first 2 sets to work as i need them to, but those sets do not have alpha changes or scaling. after playing with this over the past 2 days or so, i am still having trouble "seeing" how to lay out the scripts and layers in my head...huge learning curve for me. can you maybe take a step back and give me a "bigger picture" explanation in terms of symbols and layers and actionscript??? thanks!