Improve free-hand drawing

By request from @vjeux, this week I’ll be working to implement perfect-freehand in Excalidraw to improve the free drawing experience.

Lines are hard

Like many vector tools, Excalidraw’s pencil tool leaves something to be desired when it comes to writing words or glyphs. While it’s fine for drawing shapes, annotation marks often lines with varying widths caused by pressure. This pressure can be real, if a device supports that type of input, or else simulated based on the movement of the pointer. In any case, when this part of the story is left out, lines can look a little bland.

A few months ago I got hooked on this problem of drawing pressure-sensitive freehand lines, which to my surprise lacked an open source solution. After a few weeks of experimentation, I released the result as perfect-freehand and have spent the last few months doing gradual improvements. Still not quite “perfect” but there’s lots to like and plenty of knobs to turn.

How would this look in Excalidraw?

Because the pencil tool was never really meant for freehand drawing, adding in this feature raises some interesting product questions. I’d like to use this thread to discuss how improved free drawing will best fit in with the rest of the product, and to keep track of the progress.

I’ll kick things off with how I imagine it could work.

Leave the pencil tool as it is

In our case, I don’t believe that we should change or replace the pencil tool. While not ideal for writing notes or annotations, Excalidraw’s pencil tool is quite good at its other tasks, such as drawing lines or closed shapes that can be adjusted point-by-point or extended.

Introduce the pen tool

Instead, I would propose creating a new tool: the Pen tool. (I imagine this as more of a gel-pen than a fountain pen, though that’s up for discussion.) This tool would have some significant differences when compared with the Pencil tool:

Separate marks made within a certain time frame would be considered the same mark, for purposes of selection. I’ve worked this out on another project telestrator, where such a system prevented letters at the beginning of a word from fading while a user was still writing letters at the end of a word. In our case, a user would probably want to select / move / delete an entire annotation that may be built of many separate marks.

The marks made by a pen tool would not be editable in the same was as lines drawn with the pencil. There’s no reason why this must be the case, but again the types of user behaviors around annotations are different than shape-making. You’re more likely to undo and re-write a typo or poor line than adjust it.

The visuals of pen marks vs pencil lines are up for debate. I’ll have to see how it looks to be sure, but my guess is that marks made with the pen tool would look a bit different from the rest of the rough.js family. That library approximates free-drawn shapes; this tool would support free-drawing directly (or at least more closely). Such differences may be removing sloppiness property and supporting only solid fills.

As mentioned above, the perfect-freehand library has a lot of knobs to turn if you want to customize the way that pressure is used or simulated. In fitting with the rest of the app’s approach to tools, I suggest we expose exactly none of these options, and instead have one line style with three widths.

Beyond those, I think these types of shapes would behave just as any other in Excalidraw.

What do you think?

[steveruizok]

Wrapping up my second day on this project: say hello to stroke shapes.

There are three stroke shapes, each with its own configuration for the perfect-freehand algorithm.

• Gel is streamlined but has no thinning. It is rendered as a stroked line rather than a polygon.
• Fountain produces a thicker line as pressure increases.
• Brush produces a thinner line as pressure increases.

The differences between the brush shapes are most noticeable when using a stylus.

I’d like to have one perfect line, however different people tend to write in different ways. Depending on how you tend to push your mouse or stylus, you’ll prefer one over another. Many annotation tools allow greater customization: adjusting the pressure curve, tapering, etc—my hope is that having three good shapes should be enough.

Thicker lines?

I’ve gone with a slightly thicker line for the pen tool, as compared to the other tools. I’m hoping this provides the right contrast between hand-drawn lines and regular lines, but I’m happy to continue tweaking. (I have a hunch that the line width should really be based on zoom level, rather than strictly stroke width, and may experiment a little there).

[solarkraft]

Never mind, it appears to behave much like the freehand demo, just without all of the options. Unfortunately this is a problem because the excessive smoothing eats up a lot of details.

It looks fine in the recordings because of the relatively low speed, but the smoothing makes the feature near unusable for hand writing on a tablet emitting events at 60 Hz, while it’s quite usable with the smoothing turned off (side note: getCoalescedEvents seems to have little to no effect on my device).