Draw Circle Svg Orthogonal Projections

I need to get the svg path of a circle projected in a orthogonal space. Example What I want to do is create a function(in js) that has the following parameters: the position of th

Solution 1:

I'm pulling something from an unpublished project and hope it makes sense for you.

Suppose you have two tupples of three points, describing two triangles, find the transform matrix between the two. - They could describe the square enclosing a circle, like this:

Generate the transformation matrix from two point lists:

varsource= [s0, s1, s2];//eachpointascoordinates {x, y}
vartarget= [t0, t1, t2];functiongenerate(source,target) {
    vartransform= [
        {
            a:1, b:0, c:0, d:1,
            e:target[2].x,
            f:target[2].y
        },
        {
            a:1, b:0, c:0, d:1,
            e:-source[2].x,
            f:-source[2].y
        }
    ];source.forEach(point=> {x:point.x-source[2].x, y:point.y-source[2].y});target.forEach(point=> {x:point.x-source[2].x, y:point.y-source[2].y});vardiv=source[0].x*source[1].y-source[1].x*source[0].y;varmatrix= {
        a:(target[0].x*source[1].y-target[1].x*source[0].y)/div,
        b:(target[0].y*source[1].y-target[1].y*source[0].y)/div,
        c:(target[1].x*source[0].x-target[0].x*source[1].x)/div,
        d:(target[1].y*source[0].x-target[0].y*source[1].x)/div,
        e:0,
        f:0
    };transform.splice(1, 0, matrix);returntransform.reduce(function(m1, m2) {
        return {
            a:m1.a*m2.a+m1.c*m2.b,
            b:m1.b*m2.a+m1.d*m2.b,
            c:m1.a*m2.c+m1.c*m2.d,
            d:m1.b*m2.c+m1.d*m2.d,
            e:m1.a*m2.e+m1.c*m2.f+m1.e,
            f:m1.b*m2.e+m1.d*m2.f+m1.f
        }
    }, { a:1, b:0, c:0, d:1, e:0, f:0 });
}

Now, if you have an absolute arc command described as an object arc

{ rx, ry, rotation, large, sweep, x, y }

the transformation could be applied like this:

function arc_transform (transform, arc) {
    var co = Math.cos(arc.rotation/180*Math.PI),
        si = Math.sin(arc.rotation/180*Math.PI);
    var m = [
        arc.rx * (transform.a * co + transform.c * si),
        arc.rx * (transform.b * co + transform.d * si),
        arc.ry * (transform.c * co - transform.a * si),
        arc.ry * (transform.d * co - transform.b * si),
    ];
    var A = (m[0] * m[0]) + (m[2] * m[2]),
        B = 2 * (m[0] * m[1] + m[2] * m[3]),
        C = (m[1] * m[1]) + (m[3] * m[3]),
        K = Math.sqrt((A - C) * (A - C) + B * B);

    if ((transform.a * transform.d) - (transform.b * transform.c) < 0) {
        arc.sweep = !arc.sweep;
    }

    return {
        rx:  Math.sqrt(0.5 * (A + C + K)),
        ry:  Math.sqrt(0.5 * Math.max(0, A + C - K)),
        rotation: Math.abs((A - C) / B) < 1e-6 ? 90 : Math.atan2(B, A - C)*90/Math.PI,
        large: arc.large,
        sweep: arc.sweep,
        x: transform.a * arc.x + transform.c * arc.y + transform.e,
        y: transform.b * arc.x + transform.d * arc.y + transform.f
    };
};