Improve lib/sketching.js

[lf94]

The current sketching capabilities are very basic. We must expand them to include beziers and arcs.

[lf94]

The goal would be to achieve being able to at least sketch a gear: https://www.youtube.com/watch?v=dxtq_sy7Gw0 .

[lf94]

This is a good place to start: https://www.shadertoy.com/view/3dtBR4, look at the comment's too for more samples.

This has been promoted to hard because it's not trivial to add sdArc. See https://iquilezles.org/articles/distfunctions2d/ for sdArc.

Additionally, whomever attempts this will need to learn some wizardry around using pure math to simulate if/then/else and other comparators.

[lf94]

I was able to derive a suitable Arc from sdPie by Inigo!

float sdArcOpen( in vec2 p, in vec2 c, in float r )
{
    p.x = abs(p.x);
    float l = length(p) - r;
    float m = length(p - c*max(dot(p,c),0.0));

    return min(l, m*-sign(c.y*p.x-c.x*p.y));
}

I spent some time going over Inigo's nice explanation about SDFs https://www.youtube.com/watch?v=62-pRVZuS5c to get in the right head-space, then I looked at their list of SDFs again. To me it appears to have been a mistake to try and use sdArc to start. sdPie was actually more appropriate. Breaking down the original sdPie (maybe 30 minutes), and understanding what was going on was enough to derive what I needed. This is essentially a circle, which is then unioned with essentially an "inverted circle" that's only visible from a particular angle.

Now sketching can be completed! :D

[lf94]

I've actually found a better example to use from IQ. Will peck away at it in a few.