First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: Mr10 | Website: http://www.mr10.net

In-depth: The Math

We'll have to calculate a number of things:

  • the angle of the facets on the z-axis
  • the angle of the facets on the xy-axis
  • the angle of the light source on the z-axis - the light source has a fixed distance: the radius of the sphere
  • the angle of the light source on the xy-axis
  • the whiteness of each facet - depending on both angle (50%) and distance (50%) of the light source
  • the path the light source will follow in 'automatic' mode

What was the deal with these trigonometric functions again?
trigonometrics
 sin(a) = B / C  cos(a) = A / C  tan(a) = B / A 
 sin(b) = 1 (deg)  cos(b) = 0 (deg)  tan(b) = endless 
 sin(c) = A / C  cos(c) = B / C  tan(c) = A / B 

And this pythagoras thingy?

 C = sqrt(A*A + B*B) 

Important! - Flash works in radians! The formula for calculating degrees from radians is:

 radian = math.PI/180 * degree 

Calculating the facet angles

To save me some serious paper filling calculations I've built in an angle detector (it's the lower left button). Just drag point1 and point2 parallel with the desired angle ;-)
The front and side view can be accesed with the top right button.
The use of atan is discussed in the next topic. The formula code is on the angle detection line mc:

onClipEvent (enterFrame) {
	//place the line between mcs point1 and point2
	//notice the width and height of this line are 100
	this._x = _root.angledetect.point1._x;
	this._y = _root.angledetect.point1._y;
	this._xscale = (_root.angledetect.point2._x-_root.angledetect.point1._x);
	this._yscale = (_root.angledetect.point2._y-_root.angledetect.point1._y);

	// Math.atan for angles
	xa= this._width;
	ya= this._height;

	_parent.angle=(Math.atan(ya/xa))/(Math.PI/180);
	// -------------------------------

	// make less decimals and calculate angle2
	_parent.angle=(int(_parent.angle*100))/100
	_parent.point1.angle= _parent.angle
	_parent.point2.angle= 90 - _parent.angle
	// -------------------------------

}

The light source angle on the xy-axis

We'll use Math.atan to calculate this angle: we know A and B (distance base to light source on x and on y):

xt= xm - xb;
yt= ym - yb;

xb and yb are the base coordinates, xm and ym the coordinates of the light source.

_root.DgrMouseX=int(Math.atan(yt/xt) / _root.convrad);

  • convrad= math.PI/180
  • This function gives a flash angle, further on we'll recalculate this angle to an angle between 0 and 360 degrees.

    The light source angle on the z axis

    The fixed distance of the light source lets us calculate the angle it has. We know that side (C) will be the radius of the sphere, in this case 180. We calculate A (DeltaX) by using pythagoras on xt and yt.

    _root.DeltaX=Math.sqrt(xt*xt+yt*yt);

    Then we use the Math.acos on A and C to calculate the z-angle:

    _root.DgrMouseZ=(Math.acos(_root.DeltaX/180))/_root.convrad);

    Flash and angles

    Flash treats degrees a little different than we're used to, so we'll re-calculate them to something more handable:

    if(xt < 0 && yt > 0){
    	_root.DgrMouseX += 270;
    } else if(xt < 0 && yt <= 0){
    	_root.DgrMouseX += 270;
    } else if(xt >= 0 && yt <= 0){
    	_root.DgrMouseX += 90;	
    } else if(xt >= 0 && yt >= 0){
    	_root.DgrMouseX += 90;	
    }
    

    This'll return any angle to one between 0 and 360 degrees counting from 0 at the top clockwise to 360.

    On to the whiteness!

    Each facet calculates it's own whiteness. The whiteness is done by setting the _alpha of a white facet MC over the background of the object.
    Each facet has 2 variables: FacetX (its xy-angle) and FacetZ (its z-angle).
    We'll use the Math.cos function so that one side of the object is lit (cos(x)=1) and the other side is not (cos(x)=-1).

    function SinMouseX(AngleX) {
    	return Math.cos(Math.PI/180 * (_root.DgrMouseX - AngleX));
    }

  • AngleX= FacetX

  • This function sets the most fierce point at FacetX and the less fierce point at (FacetX - 180) degrees.
    Then we set the _alpha. The ratio is 50% so z-angle and xy-angle have an equally strong influence:

    function AlphaMouseX(Z,X) {
    	return ((_root.DgrMouseZ/Z) * _root.ratio + X * (100 - _root.ratio));
    }

  • Z= FacetZ
  • X= FacetX
  • » Level Advanced

    Added: 2001-11-06
    Rating: 8 Votes: 204
    (10 being the highest)
    » Author
    Mr10 stands for Maarten van de Voorde, Graphic Design student from Holland. Being in his forth year he hopes to be employed by January, but for now he has some sparetime to do some free-lance assignments while graduating.
    » Download
    Download the files used in this tutorial.
    » Forums
    More help? Search our boards for quick answers!

    Comments

    • There are no comments yet. Be the first to comment!

    • You must have javascript enabled in order to post comments.

    Leave a Comment
    • Your email address will not be published. All fields are required.
    Featured Flash FLA
    » Author: work2survive
    » Title: Girl Walking 1kb
    » Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
    Featured Sound Loops
    Image for equalize

    Audio Player

    » Author: BoxCat
    » Title: CPU Talk
    » Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
    Latest Font
    » Author: Fábio FAFERS
    » Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
    Featured Sound Fx
    Image for equalize

    Audio Player

    » Author: nathan
    » Description:

    A recorded sound of the Dimensional Fork Gate.