connector curves

[treefrogman]

I'm building a node language of my own, and one thing that I've never been satisfied with in any node language I've used is the curvature of the connectors. I am not satisfied with what I have created either, but I do think it an improvement. I'm testing it on NoiseCraft because my node language is not in a usable state yet.

Here's how I'm calculating the path:

class Vector2D {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    add(v) {
        return new Vector2D(this.x + v.x, this.y + v.y);
    }
    sub(v) {
        return new Vector2D(this.x - v.x, this.y - v.y);
    }
    mul(s) {
        return new Vector2D(this.x * s, this.y * s);
    }
    length() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }
    angle() {
        return Math.atan2(this.y, this.x);
    }
    rotate(rad) {
        return new Vector2D(
            this.x * Math.cos(rad) - this.y * Math.sin(rad),
            this.x * Math.sin(rad) + this.y * Math.cos(rad)
        );
    }
    rotateAround(rad, v) {
        return this.sub(v).rotate(rad).add(v);
    }
    toString() {
        return `${this.x}, ${this.y}`;
    }
}
function v(x, y) {
    if (x instanceof Vector2D) return x;
    if (x.x !== undefined) return new Vector2D(x.x, x.y);
    if (Array.isArray(x)) return new Vector2D(x[0], x[1]);
    return new Vector2D(x, y);
}
function connectorCurve(p1, p2) {
    [p1, p2] = [v(p1), v(p2)];
    const diff = p2.sub(p1);
    const angle = diff.angle();
    const sweepRadius = Math.min(diff.length() * .2, 50);
    const handleRatio = .4;
    const arcEnd = v(0, 0).rotateAround(angle, v(0, (p2.y > p1.y ? 1 : -1) * sweepRadius));
    const bezierHandle = arcEnd.add(
        v(1, 0).rotate(angle).mul(
            Math.min(diff.sub(arcEnd.mul(2)).length() * handleRatio, 70)
        )
    );
    return `M${p1} A${sweepRadius},${sweepRadius} 0 0,${angle > 0 ? 1 : 0} ${p1.add(arcEnd)} C${p1.add(bezierHandle)},${p2.sub(bezierHandle)},${p2.sub(arcEnd)} A${sweepRadius},${sweepRadius} 0 0,${angle > 0 ? 0 : 1} ${p2}`;
}

[maximecb]

Can you explain how it works?

[treefrogman]

Happy to!
The curve is rotationally symmetrical, so we only have to calculate one half, which we can add or subtract from the endpoints.
Find the angle and distance between the two sockets we're connecting.
From the first socket, draw an arc with a radius one fifth the found distance, or 50px, whichever is smaller.
Draw the arc until it reaches the found angle.
Measure again the distance, this time from the tip of the arc.
Tangential to the arc at this point, create a bezier handle four tenths the new found distance, or 70px, whichever is shorter.
Rotational symmetry supplies the other handle of the cubic bezier.

[treefrogman]

I could find the angle of a line tangent to both arcs, use that instead, which would allow me to change the bezier to a straight line...

[treefrogman]

I did that, though I'm not sure I like it...

I added a couple methods to Vector2D:

class Vector2D {
    ...
    normalize() {
        let l = this.length();
        return new Vector2D(this.x / l, this.y / l);
    }
    reach(l) {
        return this.normalize().mul(l);
    }
    ...
}

I left the v function alone, and the major changes are here:

function connectorCurve(p1, p2) {
    [p1, p2] = [v(p1), v(p2)];
    const diff = p2.sub(p1);
    const dist = diff.length();
    const sweepRadius = Math.min(dist * .2, 50);
    const tanDiff = diff.add(v(0, sweepRadius * 2 * (diff.y > 0 ? -1 : 1)))
    const tanDist = tanDiff.length();
    const tanTerm = tanDist**2 - (sweepRadius*2)**2;
    const tanRad = tanTerm **.5;
    const numerator = tanTerm + tanRad**2;
    const x = numerator/(2*tanDist);
    const y = ((4*tanDist**2*tanRad**2 - numerator**2)/(4*tanDist**2))**.5 * (diff.y <= 0 ? -1 : 1);
    const tanP = tanDiff.reach(x).add(tanDiff.rotate(Math.PI/2).reach(y));
    const angle = tanP.angle();
    const arcEnd = v(0, 0).rotateAround(angle, v(0, (diff.y < 0 ? -1 : 1) * sweepRadius));
    return `M${p1} A${sweepRadius},${sweepRadius} 0 ${angle * diff.y < 0 ? 1 : 0},${diff.y > 0 ? 1 : 0} ${p1.add(arcEnd)} L${p2.sub(arcEnd)} A${sweepRadius},${sweepRadius} 0 ${angle * diff.y < 0 ? 1 : 0},${diff.y < 0 ? 1 : 0} ${p2}`;
}

This is nearly the same concept as described above, the only difference being the angle at which the arcs stop. This new angle causes the bezier to degenerate to a line, so it has been substituted accordingly.

Find the distance between the two sockets we're connecting.
Find the angle of a line tangent to both arcs on the sides where they will connect to each other.
Wolfram's Circle Tangent page reminded me that I could make one circle twice as big and then find the tangent that goes through the center of the other circle.
Then Cut the Knot's Tangent page excellently illustrated how to calculate that. I also needed Wolfram's Circle-Circle Intersection formulas.
From the first socket, draw an arc with a radius one fifth the found distance, or 50px, whichever is smaller.
Draw the arc until it reaches the found angle.
Draw a line to the tip of the opposite arc.

[treefrogman]

Uh oh, there's an edge case. I think it's one of the comparisons in the arc sweep directions needs an "or equal".

[treefrogman]

Yep, a few equal signs fixed it.

function connectorCurve(p1, p2) {
    [p1, p2] = [v(p1), v(p2)];
    const diff = p2.sub(p1);
    const rad = Math.min(diff.length() * .2, 50);
    const tanDiff = diff.add(v(0, rad * 2 * (diff.y > 0 ? -1 : 1)))
    const tanDist = tanDiff.length();
    const tanTerm = tanDist**2 - (rad*2)**2;
    const tanRad = tanTerm **.5;
    const numerator = tanTerm + tanRad**2;
    const x = numerator/(2*tanDist);
    const y = ((4*tanDist**2*tanRad**2 - numerator**2)/(4*tanDist**2))**.5 * (diff.y <= 0 ? -1 : 1);
    const angle = tanDiff.reach(x).add(tanDiff.rotate(Math.PI/2).reach(y)).angle();
    const arcEnd = v(0, 0).rotateAround(angle, v(0, (diff.y <= 0 ? -1 : 1) * rad));
    return `M${p1} A${rad},${rad} 0 ${angle * diff.y <= 0 ? 1 : 0},${diff.y <= 0 ? 0 : 1} ${p1.add(arcEnd)} L${p2.sub(arcEnd)} A${rad},${rad} 0 ${angle * diff.y <= 0 ? 1 : 0},${diff.y <= 0 ? 1 : 0} ${p2}`;
}