Show HN: RoughNotation – create and animate hand-drawn annotations on a web page | Hacker News Reader

Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

roughnotation.com

696 pointsshihn74 comments

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/

I like your work too!

That's beautiful.

awesome

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 ;)

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).

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

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

1. Roughjs - rough primitives https://roughjs.com/

2. roughViz - rough data visualization https://github.com/jwilber/roughViz

3. Wired-elements - rough wireframes https://github.com/wiredjs/wired-elements

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

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?

Hi there. Please check out 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.

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

in short, it let's you create logic to gif animations. And secondary lets you automate unique gif animations at a large scale. A token is a unit that equates to one token per second to use on your recordings. So if you had 50 tokens, you could create about 50 seconds worth of gif animations depending on the FPS.

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?

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

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.

^ more evidence I'm doing it right

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

Haha wow is this a parody?

I was in same boat. Looking for easy vector animation tool without subscription. https://www.svgator.com/ was closest I found in terms of ease of use but is subscription based. Open Toons supports what I need but is too complex. Ended up using Google Web Designer and recording HTML playback to video. Still not what I wanted but best I could come up with. Blender is probably the best option now I reckon.

After surveying the available options (including both free programs and non-subscription paid ones like Cartoon Animator 4), I’ve just been getting started with OpenToonz. It seems very good so far. It’s by no means simple software—it’s capable of a lot and has the UI complexity to match, so it takes some time investment to learn what it’s capable of; but for my own purposes at least I reckon that investment (which has been maybe ten hours) is worthwhile.

Was it any of these? http://antimatter15.com/ajaxanimator/wave/ or https://antimatter15.com/ajaxanimator/stick2/stick2.html

I made it about 10 years ago when I was 12. If it was me, I'm actually Chinese-American. If not, I'd love to meet whoever the /other/ 12 year old writing animation software was.

Sorry I should have said asian. I can't believe that it's still online and that you responded. So happy. Thanks!

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

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

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.

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

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

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

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?

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.

would be awesome as part of a scroll story

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

how?

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

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

For your personal note taker for content based sites like NYTimes. It can store them in localstore or on the cloud.

Check out hypothesis [0]. No fun styling but the same functionality.

[0] https://github.com/hypothesis

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.

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.

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

Couldn't that be achieved with gradients?

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

This could be the blink + marquee of this generation.

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 (Not on twitter unless twitter implements this, but on the web)

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

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

https://youtu.be/fix2-SynPGE?t=421

Starting at 7:01 in this video, Christopher discusses how some of the hand-drawn effects work in Rough.js (and Excalidraw, which uses Rough.js).

A technical post on that by the author: https://shihn.ca/posts/2020/roughjs-algorithms/

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.

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

I agree, the double pass is pretty distracting and frustrating with the delay

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!

Thanks!

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.

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

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

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

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.

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

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).

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

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

You can use querySelectors in React, it's just normal JavaScript. You can also use refs if you don't want to use querySelector.

I'll look into this, thanks.

I advise you to learn Javascript/DOM before learning high level 'magic' frameworks. You clearly are missing the fundamentals.

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

Opportunity to use the empty space for markup.

This is great!

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

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

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

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

nice. going to think on ways to use it!

a text popover feature would be super useful!

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

Reply on news.ycombinator.com