shihn

I implemented MathML as web components a few years ago as a work around. It wasn't super hard, but a native implementation provides so much better accessibility (and, likely, perf) https://github.com/pshihn/math-ml

Actually there is some connection in rough.js' sketchy curve rendering and the way excalidraw smooths the hand-drawn shape. That is the Ramer–Douglas–Peucker algorithm https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93...

The way excalidraw does it, it collects all the points from mouse-move events, then uses the algorithm to take those points and reduce the number of points. The reduction is done by a 'distance' parameter in the algorithm. So instead of `n` points, you now have `m` points. m < n. Then excalidraw fits a rough curve through those `m` points. This fitting is automatically done in roughjs. Fewer points and curve fitting gives the effect you mentioned.

(The reduction algorithm is implemented and used from this package: https://github.com/pshihn/bezier-points) p.s. thanks for the shoutout @swyx

Definitely. Please add an issue with what you'd like to see. Thanks.

I wrote roughjs a couple of years ago and had always thought it would be nice to use it in all the ways people draw hand-drawn shapes. Annotation is one of them. I never got around to implementing it. Since roughjs does most of the heavy lifting, implementing this was not a lot of time. I did it in a day (~4-6 hours). Actually it took longer to make the website for the project and writing the readme :/

People have created framework wrappers for this:

Rect: https://github.com/linkstrifer/react-rough-notation Svelte: https://github.com/dimfeld/svelte-rough-notation Vue: https://github.com/Leecason/vue-rough-notation

I did implement a version of this in Houdini a couple of years back, that and a short thread of what Houdini was lacking in this case: https://twitter.com/preetster/status/1265679970006757376

Ah sorry, should have titled the post better. :/

Yes definitely possible. It just looks more sketchy with two passes. And it should be easy to configure. Perhaps add to the issues with any thoughts? Thanks https://github.com/pshihn/rough-notation/issues

Thanks. the idea behind rough was to provide primitives to draw anything. maps and dataviz are definitely one of the main use cases.

Thanks. Online tutorials, presentations, editing, Direct attention of the reader to something specific.

I was thinking anything that you'd do such annotations on physical paper.

Good idea. I had thought of adding text to annotations but didn’t want to complicate the first draft of this.

Thanks!

I used OpenCV in WASM to create a RoughJS version of an image a couple of years ago. https://pshihn.github.io/rough-draw/

RoughViz is awesome, and it also used RoughJS for rendering.

wired-elements could be adapted to v4.0 of roughjs, which supports random number seeding. Causing the shape to remain the same, once generated.

It's an artifact of how Rough.js renders sketchy lines. It does that by creating some random offsets. For some random values, it may create this effect for long lines, which is not ideal. This is less pronounced in shorter lines. The latest release has tried to reduce this effect, but there is a small probability that it may still happen: https://roughjs.com/posts/release-4.0/

Here's a clock made with LegraJS: https://legra-click.glitch.me/

Source: https://glitch.com/edit/#!/legra-click

btw Legra does the offscreen canvas trick when rendering images, but not when drawing primitives

True but having raw parts would give it more flexibility when animating or changing sections of the image. Especially when the canvas size is large, it won't be as optimal

These are really cool! The goal of legra was to provide primitives though and not just for images so one can draw dynamic, charts, shapes, animations.

It doesn't redraw the whole canvas. The optimizations are really needed when 'filling' a shape. If you draw a large polygon, it may take a little longer to fill it with bricks. Optimizations can be made by using WebGL instead.

That's the goal. Missing the 2d path api mainly. There are some interesting technical limitation for fill vs stroke. But for a fun hobby project, only limited time. :)

no it does not, but that would be a nice feature to add.

Thanks for the input. Next on my list :)

You're right. The goal of Legra is to provide all basic drawing primitives not just image rendering. So one can create dynamic charts, animations etc.

Here's demo using some complex equations: https://pshihn.github.io/math-ml/examples/torture.html

On desktop, right click -> save image

Hi, I created rough.js (https://roughjs.com/) earlier this year and was curious if I could use it to turn any image to a hand drawn, sketchy image in the browser.

Using a web assembly build of OpenCV, I extract the shapes out of an image and feed it to rough.js which draws them and fills them with colored hachure lines.

Comments/suggestions welcome. Cheers.

The "tutorial" seems to be just copy/paste from the project's github wiki

This is Chrome only for now. For more on CSS Houdini Paint worklets: https://developers.google.com/web/updates/2018/01/paintapi