Question

Please bear with me – I’m finding this very difficult to explain.

This is more of a trigonometry question but for what it matters, this is in JavaScript/KineticJS.

I have a series of ‘group’s which contain ‘line’s and ‘handle’s. The way this has to work, it works best for every group to have its own coordinate plane. The problem I’m asking for help on is the only instance where this solution is not ideal.

As these groups rotate, their coordinate plane also rotates. This allows the group object to be reused and its children can measure from the group’s origin without any concern about the parent group’s orientation. Up is always up… it doesn’t matter which way my group is facing.

I’m a new poster, so I cant add an image. However, I think seeing it is vital. Please see https://i.stack.imgur.com/QAzVH.png

The goal is to attach the unattached point of the red arc (‘handle’) to the black dot on the blue line (‘line’). I’ve set it to always draw 90 degrees just for demonstration purposes.

Despite convention, the API I’m using rotates clockwise, giving the red line an angle of 0, the yellow line an angle of 116, green 180, and blue 296 – all relative to the same origin in the top left of the screen. These angles change, so I’m looking for the formula to calculate the new end point of the red handle.

The X-axis always travels straight down the middle of each line. The line is 20px wide, so there are 10px above or below it the line that are “dead space”. The two correct points on the red handle are thus (10,10) and (30,10). Handles have a radius of 20px.

It is not possible to say red.arcEndX = blue.blackDotX, red.arcEndY = blue.blackDotY since the planes for the red and blue group are different. For instance, red’s (0,0) is always equal to blue’s (200,0). Think of each line as a chain that cannot be detached.

So, how do I calculate the red arc’s remaining point? It should attach seamlessly to the edge of the blue line, exactly where the center point of the black dot on the blue line is except translated in to red’s coordinate plane.

All of the measurements I may need are available, or can be calculated.

Handle.prototype.update = function() {

    /* if we are the red group, this.parent is our group and
       'prev' is the blue group. */

    var prev = this.parent.getPrev();  

    // somehow get the new (x,y) for point2 below:

    /* KineticJS SVG string.  this.origin and this.point1 never
       change. This (M)oves to 10,10, draws a (L)ine from
       this.origin.x, this.origin.y to this.point1.x, this.point1.y
       and (C)urves to this.point2.x, this.point2.y.  this.centerXY
       is the control point of that curve. */

    this.data = "M" + this.origin + "L" + this.point1 + "C" + this.point1 + "," + this.centerXY + "," + this.point2 + "L" + this.origin + "z";

    this.shape.setData(this.data);
}

Answer 1

In case anybody stumbles upon this – what I have is correct except I failed to accomodate the origin translation. If you move everything to (0,0) for each plane, do your sin/cos then you’ll be OK