Normals to a drawn line at runtime (incorrect math)?

[markerline]

Hello.

I have an equation which seemingly gives back Normals (line segments) to a line drawn with ActionScript and the mouse.

If I go from lesser mouseX position to greater mouseX position it seems to work fine.

line1Arr.rotation=45*Math.atan2(mouseYArr-mouseYArr[i-1], mouseXArr-mouseXArr[i-1]);

line1Arr is the instance of the line segment Normal that is being attached to the line and mouseXArr and mouseXArr[i-1] is the most recent point and the one before it.

The problem is that after having done a web search I think my math is not correct to calculate the normal.  I have found a thread somewhere which mentions to use derivative of x and derivative of y to calculate the normals.  Another member in the thread posted that one can also use sine and cosine to calculate this.

This is the problematic equation that I tried when going mouseX in the opposite direction

line1Arr.rotation=(-45)*Math.atan2(mouseXArr[i-1]-mouseXArr[i-0], mouseYArr[i-1]-mouseYArr[i-0]);

Any help with this math problem is greatly appreciated.

[kglad]

are you trying to find a normal to a line or a curve?

do you have the equation for the line or curve?  if yes, is that a standardized (eg, y=..) or parametric or something else equation?

[markerline]

Hi and thanks for looking at my question.  I am trying to find the normal to a line segment which is created by an array of points, which themselves are the mouseX and mouseY positions of someone drawing a curve on the canvas or stage.  I don't have an equation I just have an array of points.  The most recent point and the one just before it (i-1) are being analyzed with the arctan2 method.  I think I am not using the correct method though.  I have decided to use atan2 because I know in another application this will return a rotational information based on provided x and y cartesian coordinates.

[markerline]

Here's an image of my incorrect math....

[kglad · Accepted solution]

because you're using a series of lines, there's no need to use trig: basic cartesian geometry is sufficient.

for example, if you have an array of [x,y] points used in your drawing, calling normalsF will add perpendiculars to the midpoint of those segments.  (for an example, http://www.kglad.com/Files/forums/normals.fla)

function normalsF():void{

    for(var i=0;i<curveA.length-1;i++){

        normalF(curveA,curveA[i+1]);

    }

}

function normalF(p1:Array,p2:Array):void{

    m = -(p1[0]-p2[0])/(p1[1]-p2[1]);

    b = (p1[1]+p2[1])/2 - m*(p1[0]+p2[0])/2;

    drawnormalF(m,b,[(p1[0]+p2[0])/2, (p1[1]+p2[1])/2]);

}

function drawnormalF(m:Number,b:Number,pt:Array):void{

    len = Math.sqrt(400/(4+4*m*m));

    with(curveParent.graphics){

        moveTo(pt[0]-len,m*(pt[0]-len)+b);

        lineTo(pt[0]+len,m*(pt[0]+len)+b);

    }

}

[markerline]

Hi and many thanks kglad.

I see it looks as though you are just using a(squared) plus b(squared) equals c(squared).  Is that right?  Is that what you mean by using basic cartesians?

[kglad]

that is the pythorean theorem (which is part of euclidean geometry and which can be used in cartesian geometry).  but i just use that to make the normals the same length.

in normalF, i use cartesian geometry to determine the slope (m) and y-intercept (b) of the normal through the line segments midpoint and pass the slope, y-intercept and midpoint to drawnormalF where those params are used to draw the normal.

[markerline]

ah yes the slope intercept formula. y equals mx plus b .  I never thought that could be a solution and i should have known since it is a fact that i know the values of two given points to be able to draw the line segment automatically with the graphics class using mouseX and mouseY and returning a trace.

[kglad]

the only other thing you need to know is that the normal of a line with slope m is -1/m.

[markerline]

The only thing I will have to relearn is how the slope intercept formula applies exactly.  I recognize the formula in the code somewhat but have a look at my diagram from Illustrator.  Where in the code is the normal exactly if you are using x and y as the black line segments and the slope as the hypotenuse?

[kglad]

[markerline]

Thanks amillion for this handy bit of math in the image above.

There's only one caveat.  In your example you are drawing the normal at runtime using the graphics class whereas I would like to place a MovieClip on the stage that is placed at the normal point as well as rotated in the direction of the normal.  I tried somehow applying your math to my original code where the red lines are movie clips but could be any type of 2D DisplayObject that is a MovieClip Class object.

How to go about this using what you have taken the time to develop thus far?

Thanks in advance.

[kglad]

use the following to convert the slope to a rotation:

function slopeToRotationF(m:Number):Number{

-(180*Math.atan(m)/Math.PI);

}

[markerline]

Yup, it works!!  Is there a way to apply a "helpful answer" or a secondary "correct answer"?

[markerline]

also, with the slope equation it is possible to evaluate to 0 which means the normal will be undefined.  -1/0.   and if the slope is undefined then the normal would be too or it would evaluate to 0.

[kglad]

if you see 'Actions' at the lower left of a message, you can mark up to 4 helpful answers:

[markerline]

I don't get any such options when I click on the Actions button.  It just says MANAGE but I can't click on it.

[kglad]

i don't know why that happens, but i know it does happen.  it might be related to whether you start your original post as a question or not.

[markerline]

I see.  Strangely enough it does state that my question has been answered and it did allow me to mark a correct answer.  I know that in older versions of this discussion software you only had 15 minutes to reverse a decision such as marking a correct answer or retracting the question at hand... or something to that effect.  In any case you have multiple helpful responses here including answering the question about rotating the Movie Clip object and your most recent post about dividing by zero or having an undefined result.

[kglad]

glad to help!

[kglad]

if a slope is 0, the rotation is 0.

if the slope is NaN (ie, vertical), the rotation will be NaN.  to remedy, use:

function normalF(p1:Array,p2:Array):void{

    if(p1[1]-p2[1]!=0){

        m = -(p1[0]-p2[0])/(p1[1]-p2[1]);

    } else {

        return;

    }

    b = (p1[1]+p2[1])/2 - m*(p1[0]+p2[0])/2;

    drawnormalF(m,b,[(p1[0]+p2[0])/2, (p1[1]+p2[1])/2]);

}

[markerline]

Hi again.

I came across this website tutorial.

http://code.tutsplus.com/tutorials/the-math-and-actionscript-of-curves-gradients-and-normals--active...

But I don't quite know how to make sense of it just yet.  Yes I am a very very slow learner.