Stable strokes for shapes

Hey there! Great tool 😃

Currently, the strokes are not stable when creating o resizing a shape:

Looks like Rough.js first draws the fill using a variable number of Math.random calls, so the stroke starts at a different seed even after using withCustomMathRandom. If you use Solid Fill this issue disappears, the first Math.random call is used for the stroke directly in that case.

It would be great as was discussed before if Rough.js would support stable strokes, in the meanwhile a possible workaround is to draw the fill and the stroke separately. I think the improved user experience makes the extra calls worthy. The only way I found to only draw the fill for the first call is to pass a stroke: "rgba(0,0,0,0)" though.

You can play with this approach in this forked code sandbox: https://codesandbox.io/s/currying-architecture-8f7nt

This would be the result:

[pshihn]

There are a couple of issues here that are on my list in roughjs that address this to some extent:

1. Seeding randomness
2. Update roughness and bowing variability based on the size of the shape - this issue is particularly visible for non-linear shapes like ellipses. The reason is that for ellipses, for example, I estimate n number of points on the perimeter of the ellipse and fit a curve through them. the value of n is configurable here but I had planned roughjs to automatically computer the value of n based on the size of the shape. This is not hard to do, I just never got around to doing it.

I have some time this week, and will implement these appropriately.

As for the reordering of stroke/fill random calculations, it is a bit tricky because the number of points to randomize is a function of the size of the shape. I’ll give it some more thought.

Also, note that the shape of the sketched line can be preserved when the aspect ratio stays the same, It gets complicated when it’s not.

[patak-dev]

Great @pshihn! Doing the stroke calculation first would at least keep some of the shapes stable without a more involved change.

But I see your point, this should be an implementation detail to let you add later features like dynamic fitting for curves so a more careful solution is needed.

If seeding is implemented in Rough.js, maybe you could allow the user to pass two seeds for the shape: one for the fill and one for the stroke. If you want users to provide only one seed to simplify the API, then the same seed could be used for both the stroke and fill. Or the seed may be used for the stroke, and then modify it in a fixed way to do the fill.

Thanks for such an awesome lib by the way 😃