[HN Gopher] Rough.js: Create graphics with a hand-drawn, sketchy...
___________________________________________________________________
Rough.js: Create graphics with a hand-drawn, sketchy, appearance
Author : edward
Score : 316 points
Date : 2023-12-22 08:06 UTC (14 hours ago)
(HTM) web link (roughjs.com)
(TXT) w3m dump (roughjs.com)
| oniony wrote:
| Reminds me of https://excalidraw.com/
| rompic wrote:
| Excalidraw supports that library according to this page, so I
| assume that they use it.
|
| Update: indeed see e.g.
| https://github.com/excalidraw/excalidraw/issues/362
| Veuxdo wrote:
| Reminds me of paper and pencil
| andygeorge wrote:
| is that open source?
| IshKebab wrote:
| I think that's what they use.
| asb wrote:
| Also see RoughNotation <https://roughnotation.com/>, which uses
| RoughJS to support underlines, highlights etc.
|
| I took some inspiration for my website (mouse over any
| highlighted title) <https://muxup.com/>. The write-up here aims
| to summarise how it works https://muxup.com/2022q3/muxup-
| implementation-notes#randomly... - if you click through you'll
| see it's really very little code.
| JNRowe wrote:
| I enjoy the general effect, but on your site the highlights are
| redefined as elements take focus which causes a bunch of off-
| putting flickering for me as I find the article I want to read.
| Perhaps, it is intended behaviour but I figured I'd report it
| in case it is not. (chrome/linux)
| asb wrote:
| Yes, redrawing on hover was a desired effect - sorry if you
| find it offputting.
| chatmasta wrote:
| Also I can't see it at all on mobile. (And based on your
| comment, I don't know if I'm missing some informational
| context or just some presentational razzle dazzle.)
| joeframbach wrote:
| On mobile, at least on Android, you can long-press on a
| title then dismiss the "open in" modal, but the hover
| effect remains.
| asb wrote:
| On https://muxup.com/ you should see pastel-coloured
| randomly drawn 'roguh' highlights for the site title and
| for the titles of individual articles. If you mouse over,
| they'll be redrawn while your mouse is hovering. If
| you're on mobile, you won't see that, and that's fine. It
| worked just fine on Android (FF or Chrome) and iPhone
| last time I checked, but do let me know if you're not
| seeing that.
|
| It's really very simple, just thought the distillation of
| the 'rough' drawing technique to a couple of dozen lines
| of code for this use case might be of interest to some.
| k__ wrote:
| That looks really cute, I like it!
| PsyNyde wrote:
| i like the onclick rotating doodle art more.
| robbiejs wrote:
| Rough.js is very charming. I use it to draw a data grid on
| https://www.vanillacomponents.com/.
| davidthewatson wrote:
| Does anyone know if the libs discussed here can do a basic 3
| circle Venn diagram with the intersection highlighted? I didn't
| see any Venn diagrams in the examples.
|
| Thanks!
| JKCalhoun wrote:
| Looks like they support SVG paths, so you could roll your own
| with a wrapper function.
| chrisweekly wrote:
| Yes, Excalidraw can do that
| kasbah wrote:
| I use this with https://wiredjs.com for creating interactive
| mockups. E.g.
|
| https://edea-dev.gitlab.io/mockups/ (source:
| https://gitlab.com/edea-dev/mockups)
|
| https://otfn.development.fabcity.hamburg/git-pdm-mockups/
| jarek-foksa wrote:
| I used it to implement the "Sketchify" generator in Boxy SVG
| (https://boxy-svg.com/ideas/23). It is especially nice that
| Rough.js has very few dependencies and can run inside a web
| worker.
| lionkor wrote:
| Firefox android is not supported? lol
| collyw wrote:
| Is there anything that will take a hand drawn sketch and clean it
| up?
| collyw wrote:
| Is there anything that will take a photo of hand drawn sketch and
| clear it up?
| mym1990 wrote:
| Topaz Labs software
| omoikane wrote:
| You can get most of the way by importing the bitmap in
| Inkscape, trace it (shift+alt+B), simplify paths (ctrl+L, maybe
| multiple times). Usually some manual edits after that is needed
| to clean things up.
|
| Depending on the image, often I just import the bitmap and
| trace all the edges manually.
| yboris wrote:
| If using Python & Matplotlib, consider using XKCD style to
| communicate that a graph is imprecise and should be read that
| way.
|
| https://matplotlib.org/stable/gallery/showcase/xkcd.html#sph...
| spankalee wrote:
| Wired Elements are a set of web components by the same author
| that use Rough.js to render in a sketchy style. They work in any
| framework.
|
| https://wiredjs.com/
| darrinm wrote:
| Love rough.js. Thanks Preet Shihn! I used it to create Sketchy
| Shapes you can add to Hatch projects. Fun to play with the
| parameters in realtime: https://hatch.one/@darrin/sketchy-
| shapes/edit
| cadr wrote:
| I remember using some Java "napkin" look and feel years ago.
| Really great for getting the idea across that this really is a
| _prototype_ and I didn 't just finish all the work in 30 minutes.
| SamBam wrote:
| Yup. a) it allows people not to get hung up on the details, but
| just as importantly b) it shows creative people to look at the
| prototype and imagine other possibilities. A finished-looking
| mock-up tends to shrink the world of possibilities.
| beiller wrote:
| Is there a simple diagram app / site / etc. that uses this? I
| love the look.I'd love to diagram things using it. Love the fill
| types which could be great for accessibility.
| sadeshmukh wrote:
| This looks just like Excalidraw, which happens to be their
| first sponsor. I love Excalidraw, and I'll pull it open for any
| quick diagramming I need to do.
| usuxhxvg wrote:
| Don't take this is criticism at all because I think the value for
| what you get is worth the 3 kB. But I am curious. Why is it even
| that big?
| jwilber wrote:
| Awhile back I built a dataviz library off roughjs: roughviz
|
| https://www.jwilber.me/roughviz/
|
| The author, Preet, has worked on many other cool projects and I
| recommend checking out his site: https://shihn.ca/creations/
| veg wrote:
| Absolutely love this library. Easy to use and stood the test of
| time. Used it for charts on https://usdc.cool
| dang wrote:
| Related:
|
| _Show HN: Sketchy-appearance interactive timeline made using
| RoughJS_ - https://news.ycombinator.com/item?id=29563678 - Dec
| 2021 (1 comment)
|
| _Rough.js - Create graphics with a hand-drawn, sketchy,
| appearance_ - https://news.ycombinator.com/item?id=29555853 - Dec
| 2021 (23 comments)
|
| _Show HN: Hand-drawn timelines using RoughJS_ -
| https://news.ycombinator.com/item?id=23998225 - July 2020 (1
| comment)
|
| _Rough.js - Create graphics with a hand-drawn, sketchy,
| appearance_ - https://news.ycombinator.com/item?id=22787187 -
| April 2020 (13 comments)
|
| _Rough.js v4.0 - hand-drawn, sketchy graphics_ -
| https://news.ycombinator.com/item?id=22141526 - Jan 2020 (20
| comments)
|
| _Show HN: RoughJS - Create hand-drawn graphics using JavaScript_
| - https://news.ycombinator.com/item?id=16571827 - March 2018 (92
| comments)
|
| _Show HN: Rough.js simple lib to create hand-drawn, sketchy,
| scribbly graphics_ -
| https://news.ycombinator.com/item?id=13662347 - Feb 2017 (1
| comment)
| zurtri wrote:
| I love the effects. I use it on https://horserecords.info/.
___________________________________________________________________
(page generated 2023-12-22 23:00 UTC)