Finding 3rd point in Triangle using JavaScript

Viewed 1914

Ok so I need to figure out in JavaScript how to plot a third point on a triangle. See diagram below.

A and B will be randomized points (may be positive or negative depending on where they fall relative to the 0,0 origin.)

thus A and B are known points (x and y).

I already figured out how to plot C based on A and B.

The distance between C and D I want control over. for example I want to say "The distance between C and D is now 20px... where is D?"

So I guess for example purposes we can say that the distance between C&D will be 20px. That means I have CD and CB, but not DB. I also know C(x,y) and B(x,y).

I need to find D now... I'm not a math mind so please explain it to me like I'm 5. I've googled it multiple times, attempted to use multiple examples, and I'm still lost... For example: I saw some equations with phi mentioned.. what is phi? How do I use phi in JavaScript terms, etc...

summary:

A(x,y) is known (randomized)
B(x,y) is known (randomized)
C(x,y) is known (midpoint of AB)
CB is known (using distance formula)
CD = 20 pixels (or whatever I set it to).
DB = ???
D(x,y) = ???

Here's what I have so far, but it's probably wrong..

var Aeh = {x:50, y:75};
    var Bee = {x:300, y:175};
    var Cee = {x:0, y:0};
    var Dee = {x:0, y:0};

    window.onload = function(){ 
         refreshPoints();
         solveForC();
    } 
    function refreshPoints(){
        TweenLite.set("#pointA", {x:Aeh.x, y:Aeh.y});
        TweenLite.set("#pointB", {x:Bee.x, y:Bee.y});
        TweenLite.set("#pointC", {x:Cee.x, y:Cee.y});
        TweenLite.set("#pointD", {x:Dee.x, y:Dee.y});
    }
    function solveForC() {
        Cee.x = (Bee.x + Aeh.x)/2;
        Cee.y = (Bee.y + Aeh.y)/2;
        refreshPoints();
        solveForD();
    }
    function solveForD() {
        // Dee.x = AB * Cos(Φ) + x_1
        // Dee.y = AB * Sin(Φ) + y_1

        Dee.x = (Cee.x+Bee.x/2) * Math.cos((1 + Math.sqrt(5)) / 2) + Cee.x;
        Dee.y = (Cee.y+Bee.y/2) * Math.sin((1 + Math.sqrt(5)) / 2) + Cee.y;

        refreshPoints();
    }

diagram

2 Answers
Related