Smooth out lines and Round Corners about two.js

[jonobr1]

Thanks for your questions. This is a big one to unpack. Hopefully this can get our conversation pointed in the right direction:

Drawing Slow vs Fast
You have the right idea. When you draw slowly, there are more vertices (or Two.Anchors) added to the line. The closer together these points are, the less "curvy" or "flow" the line will be. There are a couple of ways to address.

1. You could keep track of the distance between the the latest point in the vertices array and the current dragX dragY. Then only append Two.Anchors when the distance crosses a threshold, like 25px.
2. The way that Photoshop and Illustrator do this is by having a line drawn at runtime like you do, but making it 1px wide so that the user can see where they're drawing. Then when you release your line (or at some delayed time from the drag event) you update the another line that is the smoothed line. This one would calculate the slope between a cluster of points and use that to determine what Two.Anchors are added.

Example 1. snippet would look like this:

const onDrag = (dragX: number, dragY: number) => {
    x = dragX;
    y = dragY;

    if (!line) {
        const v1 = new Two.Anchor(mouse.x, mouse.y);
        const v2 = new Two.Anchor(x, y);

        line = makeCurve([v1, v2]);
        line.noFill().stroke = "#333";
        line.linewidth = 10;
        line.cap = "round";
        backgroundGroup.add(line);

        line.vertices.forEach((vertex: Vector) =>
            vertex.addSelf(line!.translation),
        );
        line.translation.clear();
    } else {
        const v1 = new Two.Anchor(x, y);
        if (line.vertices[line.vertices.length - 1].distanceBetween(v1) > 25) {
            line.vertices.push(v1);
        }
    }

    mouse.set(x, y);
};

Corners
This occurs because, again when drawing slowly vs fast, there are more points close to each other. The closer the points are to each other, the more information the browser has to infer the miter of the line. More information about how that works in this blog post: https://www.kirupa.com/canvas/modifying_how_corners_look.htm

Changing your code from above should make it more consistent, but also adjusting the line.miter and line.join property can give you different effects. Much of the projects I make in Two.js I set line.join = 'round'; which softens corners like that.

Hope this helps!

[robertcorponoi]

Ah yeah that makes a lot of sense, thank you for the explanation!

Your second point Photoshop and Illustrator is really interesting, I'm going to start with the modifications in code snippet you provided but I like the idea of the temporary line with the smoothing applied at the end so I'll pursue that longer term.

As for the corners, I'm not sure how I missed line.join but setting it to round solves most of my problems.

Thanks again for the guidance and the code snippet and whenever I get the Photoshop/Illustrator line smoothing effect I'll submit it as a community example.