[HN Gopher] Show HN: RoughNotation - create and animate hand-dra...
___________________________________________________________________
Show HN: RoughNotation - create and animate hand-drawn annotations
on a web page
Author : shihn
Score : 310 points
Date : 2020-05-28 16:31 UTC (6 hours ago)
(HTM) web link (roughnotation.com)
(TXT) w3m dump (roughnotation.com)
| GordonS wrote:
| 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?
| sixQuarks wrote:
| would be awesome as part of a scroll story
| shihn wrote:
| 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.
| tumblen wrote:
| Love it! Looking forward to using it in future projects!
| Axsuul wrote:
| This is great!
|
| Does anyone know if there's a similar library that can do rough
| notations like this within Sketch?
| jwilber wrote:
| 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/
| m88m wrote:
| nice. going to think on ways to use it!
| 29athrowaway wrote:
| This could be the blink + marquee of this generation.
| benatkin wrote:
| 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)
| 29athrowaway wrote:
| I cannot wait for zalgo and these things are combined with
| text effects to create the ultimate abomination.
| dpeck wrote:
| 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 wrote:
| Thanks!
| NickBusey wrote:
| This may be one of the best 'product' landing pages I've ever
| seen. Kudos.
| chadlavi wrote:
| This is neat but I totally thought it was going to let me doodle
| on the page myself
| shihn wrote:
| Ah sorry, should have titled the post better. :/
| chadlavi wrote:
| 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.
| heyhihello wrote:
| 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
| grizzles wrote:
| 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 wrote:
| 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.
| voz_ wrote:
| Woah this site is something else. I'm having a really hard
| time following. What does it do? What is a token?
| egfx wrote:
| 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.
| talkinghead wrote:
| a text popover feature would be super useful!
| shihn wrote:
| Definitely. Please add an issue with what you'd like to see.
| Thanks.
| yarone wrote:
| Displays are really wide today. Most web pages are relatively
| narrow, content-wise.
|
| Opportunity to use the empty space for markup.
| julianeon wrote:
| 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).
| yurry wrote:
| I advise you to learn Javascript/DOM before learning high level
| 'magic' frameworks. You clearly are missing the fundamentals.
| shihn wrote:
| 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
| julianeon wrote:
| Wow, thanks! That's exactly what I want, with a demonstration
| code example. I'll be using this.
| 49531 wrote:
| You can use querySelectors in React, it's just normal
| JavaScript. You can also use refs if you don't want to use
| querySelector.
| julianeon wrote:
| I'll look into this, thanks.
| onemoresoop wrote:
| This is really cool. I like that it brings a bit of human touch
| to webpages. How does it work?
| netvarun wrote:
| A technical post on that by the author:
| https://shihn.ca/posts/2020/roughjs-algorithms/
| baddox wrote:
| 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).
| alixanderwang wrote:
| 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 wrote:
| Good idea. I had thought of adding text to annotations but
| didn't want to complicate the first draft of this.
| alixanderwang wrote:
| I just realized you're the creator of RoughJS too. Great job
| on these awesome extensions!
| howmayiannoyyou wrote:
| Should be a Chrome Extension. Would absolutely kill as one.
| mohap2 wrote:
| how?
| kkotak wrote:
| For your personal note taker for content based sites like
| NYTimes. It can store them in localstore or on the cloud.
| Jackim wrote:
| I could see it being used for screenshots of text to draw
| attention to certain points. Tweets, facebook posts, etc.
| agustif wrote:
| 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...
| webel0 wrote:
| Check out hypothesis [0]. No fun styling but the same
| functionality.
|
| [0] https://github.com/hypothesis
| XCSme wrote:
| 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 wrote:
| 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 wrote:
| 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
| Ptrulli wrote:
| Great job on this! What made you think of this product and how
| long did it take you to make?
| shihn wrote:
| 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 :/
| wes-k wrote:
| 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.
| cosmotic wrote:
| I agree, the double pass is pretty distracting and frustrating
| with the delay
| shihn wrote:
| 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
| benatkin wrote:
| 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
| shihn wrote:
| Thanks. the idea behind rough was to provide primitives to draw
| anything. maps and dataviz are definitely one of the main use
| cases.
___________________________________________________________________
(page generated 2020-05-28 23:00 UTC)