
Show HN: RoughNotation – create and animate hand-drawn annotations on a web page - shihn
https://roughnotation.com/
======
jwilber
Love this (and all of Preet’s work).

Made a statistics visual awhile back using roughjs[0], seems like the perfect
setting with which to add roughnotation :)

[0]
[https://www.jwilber.me/permutationtest/](https://www.jwilber.me/permutationtest/)

~~~
throwaway77384
You know, it's funny that presumably this explanation of the permutation test
is intended for people with very little / no knowledge of statistics.

And yet, I still don't get it. Like, at all. I feel like I'd make a very bad
data scientist ;)

~~~
sleepychu
The first measurement made (between the red and blue groups) shows a
difference between the average wool quality of the two groups. Since the
members were selected at random, you might conclude that the new shampoo is
working because, what are the odds that you just picked all the good alpacas
at random? That's what we're checking.

For several permutations of different groups (each group is a new random
slection of alpacas so a mix of blue and red alpacas) take the same
measurement (average of group a - average of group b)

Count the number of times that the difference was as good or better as your
original measurement and you will find out the odds that being in your
treatment group made a difference. (If random groupings show similar
measurements then it means it's more likely that your specific
treatment/control group did nothing).

~~~
throwaway77384
And now I get it. That's all the explanation I needed. Thank you :)

------
heyhihello
Amazing! There are many cool libraries now thanks to author.

1\. Roughjs - rough primitives [https://roughjs.com/](https://roughjs.com/)

2\. roughViz - rough data visualization
[https://github.com/jwilber/roughViz](https://github.com/jwilber/roughViz)

3\. Wired-elements - rough wireframes [https://github.com/wiredjs/wired-
elements](https://github.com/wiredjs/wired-elements)

------
antibland
Amazing examples. Great library. Coupled with the Intersection Observer
API[0], this software could add a lot of value to an instructive app or
website. Imagine these beautiful annotations tastefully animating as various
elements are observed as the user scrolls.

[0] [https://developer.mozilla.org/en-
US/docs/Web/API/Intersectio...](https://developer.mozilla.org/en-
US/docs/Web/API/Intersection_Observer_API)

------
grizzles
This is cool. Slightly OT but I saw the word animate and I got excited because
I'm in the market for some easy to use animation software. Krita & Synfig just
aren't doing it for me.

The best one I ever used was a web app built a decade ago by an iirc ~12 year
Korean American kid. It seems to have disappeared off the web but it was just
amazing for usability. Anyone remember it / the name of it?

~~~
egfx
Hi there. Please check out [https://gif.com.ai](https://gif.com.ai)

You probably haven’t heard of it because it’s a bit under the radar and not
really being promoted to the outside yet.

~~~
voz_
Woah this site is something else. I'm having a really hard time following.
What does it do? What is a token?

~~~
okamiueru
Your comment is so weird to me. Did we check the same page? Are you and alt
account that is trying to promote that page?

~~~
voz_
I am not an alt of whoever that person is. Which page did you check? Why is my
comment weird?

~~~
okamiueru
I kinda don't want to put it into words, since speaking ill of anyone's
project isn't my thing. But, you're looking at someone pricing basic gif
interactions and integration behind a "token"-money system a'la mobile games.
It's not adding anything special either, it's literally using the 1996 GIF
format with some js stuff. You'll find this and it's like without much
trouble, or be able to code it yourself if you really like wrong solutions.

So tl;dr: It's a tech that's a couple of decades too late, with an egregious
pricing method, and throwing in the word "intelligence" for who knows why.

If someone want's to do this, hey, I don't want to stop them. Go for it. But
looking at that, and going "Woah this site is something else." and asking
about the tokens? You can probably see how I can think you might have
something to do with that page?

Unless. "Woah this site is something else." as in... this looks like a parody
of something, or otherwise a joke, then yeah. It totally does look like
something else.

So, anyways. You did ask. I know it makes me seem like an ass for putting it
into words.

~~~
voz_
Yeah, "Woah this site is something else" -> This is hot garbage, why the eff
would you make it?

------
benatkin
This is really cool, but after looking at your twitter account and ROUGH.JS,
so far I've been most impressed by this [0], which only had one retweet since
I got to it. I'm a sucker for interesting maps.

0:
[https://twitter.com/preetster/status/1250862620103438336](https://twitter.com/preetster/status/1250862620103438336)

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

------
alixanderwang
Being able to add small text between margins would enable the ability for an
app/extension to let person A markup an article with their thoughts and
emphasis, and share it with person B. That's something I'd personally use.

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

~~~
alixanderwang
I just realized you're the creator of RoughJS too. Great job on these awesome
extensions!

------
NickBusey
This may be one of the best 'product' landing pages I've ever seen. Kudos.

------
GordonS
Not sure what I'd use this for, but I love the look of it so much I feel like
I need to find an excuse!

Can I ask what use case you had in mind when creating this?

~~~
shihn
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.

------
howmayiannoyyou
Should be a Chrome Extension. Would absolutely kill as one.

~~~
mohap2
how?

~~~
Jackim
I could see it being used for screenshots of text to draw attention to certain
points. Tweets, facebook posts, etc.

~~~
agustif
Code-annotated screenshots would be rad, a bit like LogRocket logs a session,
but static, so you can receive feedback and immediately act on it.

Killer features also as GitHub Action/App

Generate a shareable/anotable link on every branch/pr

Make annotations back to GitHub issues, so they can be tracked/resolved there,
and added back to the annotation UI as such.

And I could keep going...

------
XCSme
This is cool. I wonder if this could just be a CSS library instead, where you
just add the class "annotate-circle" to an element and it will use pseudo-
elements (:before, :after) to draw the lines.

~~~
tiborsaas
With CSS Houdini it's possible.

To draw these irregular lines / shapes with normal CSS it's really hard, maybe
if you inline some SVG.

~~~
shihn
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](https://twitter.com/preetster/status/1265679970006757376)

------
airstrike
As someone who lives and breathes in a hand-annotated world every day, this is
incredibly helpful. I can't believe it exists for free. Thank you

------
29athrowaway
This could be the blink + marquee of this generation.

~~~
benatkin
People certainly want to add extra oomph to posts. I could picture it being
used either instead of or in addition to some of the emoji in a typical emoji-
heavy pieces of content like this:
[https://twitter.com/MetroUK/status/1266078167590219776](https://twitter.com/MetroUK/status/1266078167590219776)
(Not on twitter unless twitter implements this, but on the web)

~~~
29athrowaway
I cannot wait for zalgo and these things are combined with text effects to
create the ultimate abomination.

------
onemoresoop
This is really cool. I like that it brings a bit of human touch to webpages.
How does it work?

~~~
netvarun
A technical post on that by the author: [https://shihn.ca/posts/2020/roughjs-
algorithms/](https://shihn.ca/posts/2020/roughjs-algorithms/)

------
wes-k
Looks wonderful! Anyway to get it to only draw the annotation once? Looks like
everything gets two passes which adds to the roughness but also adds a bit of
noise and delay to the animation.

~~~
shihn
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](https://github.com/pshihn/rough-notation/issues)

------
dpeck
That is beautiful and very well done. I might drop this onto my personal
homepage today for a nice emphasis underline in the header.

Bravo!

~~~
shihn
Thanks!

------
ta1234567890
Looks really cool. Does anyone know of something like this but that works with
the iPad's pencil?

Would love to have something like a mix between the Notes app and Etherpad, so
that I can take notes using the Apple Pencil, then "replay" the writing
process, and hopefully be able to post it online as well.

------
thadk
This can be used in an ObservableHQ notebook as demonstrated here:
[https://observablehq.com/@thadk/rough-notation-
example](https://observablehq.com/@thadk/rough-notation-example)

------
chadlavi
This is neat but I totally thought it was going to let me doodle on the page
myself

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

~~~
chadlavi
That's cool, this is still a neat thing! And I think it could probably be
fairly simply hooked up to respond to user input as part of a markup tool.

------
tumblen
Love it! Looking forward to using it in future projects!

------
julianeon
I'd love to use this, but I don't see an easy way how to using the frameworks
I know, React (well) and Svelte (a bit).

~~~
shihn
People have created framework wrappers for this:

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

~~~
julianeon
Wow, thanks! That's exactly what I want, with a demonstration code example.
I'll be using this.

------
yarone
Displays are really wide today. Most web pages are relatively narrow, content-
wise.

Opportunity to use the empty space for markup.

------
Axsuul
This is great!

Does anyone know if there's a similar library that can do rough notations like
this within Sketch?

------
Ptrulli
Great job on this! What made you think of this product and how long did it
take you to make?

~~~
shihn
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 :/

------
d33d33
really nice - would be great if there would be a tufte-style feature (animated
info box next to the highlighted text) or sth. similar

------
m88m
nice. going to think on ways to use it!

------
talkinghead
a text popover feature would be super useful!

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

