View Full Version : Newbie - trig problem
zerosum
September 3rd, 2008, 11:03 AM
Hi there,
Please help a humanist lost in trigonometry!! :}
I am trying to do the following: a class that draws a triangle onscreen when the mouse is clicked. The starting point would be the mouseX, mouseY, and I will give the angle when the class is instantiated.
So, I want to draw a triangle on the fly, knowing the initial x,y, the angle, and the length of the sides - how do I do that?
Sorry for the really lame question - I know the solution is easy, but I haven't had math in 20 years (ghasp!) and a bit of the day has gone trying to figure this one out.
(oh, if it helps, the triangle will always be isosceles (I am trying to create a "radar" type of cone)).
Thanks!
SparK_BR
September 3rd, 2008, 12:00 PM
pitagoras
hip^2 = cat1^2 + cat2^2;
you make the fist line, get the length of it
then sqrt((length^2)/2) = cat length
add the 45º to the angle of the line, that would be
newAngle = Math.atan2(lineStart._y - lineEnd._y, lineStart._x - lineEnd._x) + 45;
then it would keep the angle valid
if(newAngle > 180){
newAngle -= 360;
}
if(newAngle <= -180){
newAngle += 360;
}
after calc the angle you try to convert from angle to position using the length we got with the other calc
Math.sin and Math.cos are your friends! use sin for X and cos for Y
put the position in the starting x and y then use:
lineTo(_x + catLenght * Math.sin(newAngle * Math.PI /180, _y + catLenght * Math.cos(newAngle * Math.PI /180);
or something like that
and TADA! there's only one line left! XD
same thing but the pos must be the end of the line and the angle must be -45
nothing to worry about...
I hope i didn't look nerdy :beam: :sc: :drool:
zerosum
September 3rd, 2008, 12:24 PM
Thanks for the reply, but man, I am still blank: should I use square triangles, and apply pitagoras? won't it be too heavy to use Math.sqrt and sin/cos?
Oh, and you didn't look nerdy at all :}
thanks!
SparK_BR
September 3rd, 2008, 12:53 PM
Math functions are ok, they are always defined at .swf startup, you simply don't use it
if you use there won't be any performance difference
:)
zerosum
September 3rd, 2008, 01:19 PM
Thanks for the information ... but I still don't get it - why should I add 45 degrees to the angle?
Sorry for the stupidity, and thanks for the patience!
The Game
September 3rd, 2008, 04:03 PM
When you say "the angle", what do you mean exactly?
Do you want an isosceles triangle, and the angle you're referring to is the top angle? Or do you want an equilateral or right triangle that is rotated to your specified angle?
zerosum
September 3rd, 2008, 04:17 PM
Right, good question, sorry for being imprecise: for some kind of visual reference - think about the kind of triangles we see in movies when they represent a radar/sonar.
But yes, I am talking about an isosceles triangle, and about the top angle.
Thanks!
The Game
September 3rd, 2008, 04:50 PM
OK, that's pretty simple then.
var triangles:Shape = new Shape();
triangles.graphics.lineStyle(2, 0x000000, 1);
addChild(triangles);
stage.addEventListener(MouseEvent.MOUSE_DOWN, drawTriangleAtMouse);
function drawTriangle($t:*, $x:Number, $y:Number, $l:Number, $a:Number, $o:Number = 180):void
{
try
{
var g:Graphics = $t.graphics;
}
catch(error:Error)
{
trace("Error in drawTriangle: The target, " + $t + " must have a graphics property (Shape, Sprite, MovieClip).");
return;
}
var r:Number;
var x:Number;
var y:Number;
g.moveTo($x, $y);
r = ($o - $a/2)*Math.PI/180;
g.lineTo(Math.sin(r) * $l + $x, -Math.cos(r) * $l + $y);
r = ($o + $a/2)*Math.PI/180;
g.lineTo(Math.sin(r) * $l + $x, -Math.cos(r) * $l + $y);
g.lineTo($x, $y);
}
function drawTriangleAtMouse($event:MouseEvent):void
{
drawTriangle(triangles, mouseX, mouseY, 100, 45);
}
This is coded on the timeline, so adjust for your class or create a new class for it. In the example, the 100 is the length and 45 is the angle.
For the trig, it's really simple. You need to work in radians for sine and cosine, so I'm first finding the angle of the bottom left corner of the triangle...
$o - $a/2
Then converting the angle to radians...
angle*Math.PI/180
Then do the same for the other corner by adding "$a/2" to "$0" instead of subtracting.
So to visualize it, think of $o as the angle of a straight line coming out of the mouse, and then I subtract/add half of the angle from that orientation to get the angles used for the bottom of the triangle.
zerosum
September 4th, 2008, 11:47 AM
Oh, great, that really works! Thanks a lot!
So simple - I feel a bit dumb!
Thanks again!
SparK_BR
September 5th, 2008, 07:37 PM
just a tip
in case of refactoring or anything else
you will have to guess what is $t $o $a &l &x and etc...
try to use java code convensions
use understandable variable names
Powered by vBulletin® Version 4.1.10 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.