5 ms·

Rough.js v4.0 – hand-drawn, sketchy graphics

307 points by shihn 7y ago

dang 7y ago
A thread from 2018: https://news.ycombinator.com/item?id=16571827 https://news.ycombinator.com/item?id=16571827
spankalee 7y ago
If you like this, be sure to check out Wired Elements - a set of 20+ fully working, wire-frame style web components built with Rough.js (by the author of Rough.js): https://wiredjs.com/ https://wiredjs.com/ They're great for rapid wire-frame prototyping.
- syspec 7y ago
  I’ve seen this attempted before to operate success, but this is the best execution I have seen of this idea! It’s dynamically rough so it’s different each time, but it’s not over done
  - shihn 7y ago
    wired-elements could be adapted to v4.0 of roughjs, which supports random number seeding. Causing the shape to remain the same, once generated.
    - ygra 7y ago
      You could do the same with 3.1 with generators, I believe.
- grizzles 7y ago
  Rough.js + WE look awesome. I love that you can hand craft UI ideas in the same style if needed. Just curious - do you use any drag & drop tool with it for prototyping?
- blondin 7y ago
  this is super awesome! thanks for sharing
- spectramax 7y ago
  Genuinely curious - why would anyone prefer this over just blocky normal graphics?
  - osel 7y ago
    I’ve found sketchy styles to be immensely useful in getting clients to focus on UX and structure rather than getting stuck on minor irrelevant details. My background is construction, and architects do the same thing with initial concepts.
    - spectramax 7y ago
      I never thought of it that way, that makes sense.
    - seanwilson 7y ago
      Yep, it's super common that when you show a UX prototype to a client they'll hyperfocus on things you don't want them to focus on right now like the font choice or button colors. Making it look rough and muted can help.
andrenotgiant 7y ago
If you have another library that builds SVG charts or diagrams, Rough.js is really fun and usually very simple to include. When combined with a handwritten font like humour sans[0] You can instantly turn a chart into something that looks more like an XKCD drawing. No idea why, but I find the hand-drawn look is universally more engaging for charts and diagrams, causing people to actually pay attention and ask questions. It looks like some of the example links[1] need updating. But the WiredJS[2] site is a good demo of the look I am describing. [0] https://github.com/shreyankg/xkcd-desktop/blob/master/Humor-Sans.ttf https://github.com/shreyankg/xkcd-desktop/blob/master/Humor-... [1] https://github.com/pshihn/rough/wiki/Examples https://github.com/pshihn/rough/wiki/Examples [2] https://wiredjs.com/ https://wiredjs.com/
andreareina 7y ago
Somewhat related: paper.css[1], a stylesheet for getting that rough look in your html components. [1] https://www.getpapercss.com/ https://www.getpapercss.com/
brandly 7y ago
Excalidraw is built on top of this! https://excalidraw.com/ https://excalidraw.com/
johnx123-up 7y ago
Another library recently featured in HN https://news.ycombinator.com/item?id=21648968 https://news.ycombinator.com/item?id=21648968 https://github.com/jwilber/roughViz https://github.com/jwilber/roughViz
- shihn 7y ago
  RoughViz is awesome, and it also used RoughJS for rendering.
hirenj 7y ago
I’m using this in a scientific drawing tool that I put together - it was remarkably easy to integrate, and the sketch aesthetic is great for presentations or when you wish to convey uncertainty. I’m still hanging out for a browser implementation of Fiziko (https://news.ycombinator.com/item?id=21651240 https://news.ycombinator.com/item?id=21651240) though, which would be a whole other cool aesthetic.
- tauchunfall 7y ago
  There is some code [0] for generation of coastal lines in cartographic maps (text in french, code in JavaScript). It's kind of similar. The blog post [1] about fiziko describes how it calculates parallel bezier curves using line intersection and curves of varying thinkness. The code about the coastal lines also uses a similar technique and describes how to get the result step by step. [0] https://observablehq.com/@linard-y/chemin-decale-offset-paths https://observablehq.com/@linard-y/chemin-decale-offset-path... [1] https://habr.com/en/post/454376/ https://habr.com/en/post/454376/
golergka 7y ago
I've just been toying with an idea of a canvas-based game and wanted to use hand-drawn graphics style – and with this library, it looks like I can save money on the art and have animations for free, too! Thanks so much for posting this.
RobKohr 7y ago
It would be nice if I didn't have to have html elements for this, but instead it would be a js or css that you applied and all the normal elements would be automatically rendered in sketchy style.

307 points by shihn 7y ago

dang 7y ago

A thread from 2018: https://news.ycombinator.com/item?id=16571827 https://news.ycombinator.com/item?id=16571827

If you like this, be sure to check out Wired Elements - a set of 20+ fully working, wire-frame style web components built with Rough.js (by the author of Rough.js): https://wiredjs.com/ https://wiredjs.com/ They're great for rapid wire-frame prototyping.

syspec 7y ago
I’ve seen this attempted before to operate success, but this is the best execution I have seen of this idea! It’s dynamically rough so it’s different each time, but it’s not over done
- shihn 7y ago
  wired-elements could be adapted to v4.0 of roughjs, which supports random number seeding. Causing the shape to remain the same, once generated.
  - ygra 7y ago
    You could do the same with 3.1 with generators, I believe.
grizzles 7y ago
Rough.js + WE look awesome. I love that you can hand craft UI ideas in the same style if needed. Just curious - do you use any drag & drop tool with it for prototyping?
blondin 7y ago
this is super awesome! thanks for sharing
spectramax 7y ago
Genuinely curious - why would anyone prefer this over just blocky normal graphics?
- osel 7y ago
  I’ve found sketchy styles to be immensely useful in getting clients to focus on UX and structure rather than getting stuck on minor irrelevant details. My background is construction, and architects do the same thing with initial concepts.
  - spectramax 7y ago
    I never thought of it that way, that makes sense.
  - seanwilson 7y ago
    Yep, it's super common that when you show a UX prototype to a client they'll hyperfocus on things you don't want them to focus on right now like the font choice or button colors. Making it look rough and muted can help.

andrenotgiant 7y ago

If you have another library that builds SVG charts or diagrams, Rough.js is really fun and usually very simple to include. When combined with a handwritten font like humour sans[0] You can instantly turn a chart into something that looks more like an XKCD drawing. No idea why, but I find the hand-drawn look is universally more engaging for charts and diagrams, causing people to actually pay attention and ask questions. It looks like some of the example links[1] need updating. But the WiredJS[2] site is a good demo of the look I am describing. [0] https://github.com/shreyankg/xkcd-desktop/blob/master/Humor-Sans.ttf https://github.com/shreyankg/xkcd-desktop/blob/master/Humor-... [1] https://github.com/pshihn/rough/wiki/Examples https://github.com/pshihn/rough/wiki/Examples [2] https://wiredjs.com/ https://wiredjs.com/

andreareina 7y ago

Somewhat related: paper.css[1], a stylesheet for getting that rough look in your html components. [1] https://www.getpapercss.com/ https://www.getpapercss.com/

brandly 7y ago

Excalidraw is built on top of this! https://excalidraw.com/ https://excalidraw.com/

johnx123-up 7y ago

Another library recently featured in HN https://news.ycombinator.com/item?id=21648968 https://news.ycombinator.com/item?id=21648968 https://github.com/jwilber/roughViz https://github.com/jwilber/roughViz

shihn 7y ago
RoughViz is awesome, and it also used RoughJS for rendering.

hirenj 7y ago

I’m using this in a scientific drawing tool that I put together - it was remarkably easy to integrate, and the sketch aesthetic is great for presentations or when you wish to convey uncertainty. I’m still hanging out for a browser implementation of Fiziko (https://news.ycombinator.com/item?id=21651240 https://news.ycombinator.com/item?id=21651240) though, which would be a whole other cool aesthetic.

tauchunfall 7y ago
There is some code [0] for generation of coastal lines in cartographic maps (text in french, code in JavaScript). It's kind of similar. The blog post [1] about fiziko describes how it calculates parallel bezier curves using line intersection and curves of varying thinkness. The code about the coastal lines also uses a similar technique and describes how to get the result step by step. [0] https://observablehq.com/@linard-y/chemin-decale-offset-paths https://observablehq.com/@linard-y/chemin-decale-offset-path... [1] https://habr.com/en/post/454376/ https://habr.com/en/post/454376/

golergka 7y ago

I've just been toying with an idea of a canvas-based game and wanted to use hand-drawn graphics style – and with this library, it looks like I can save money on the art and have animations for free, too! Thanks so much for posting this.

RobKohr 7y ago

It would be nice if I didn't have to have html elements for this, but instead it would be a js or css that you applied and all the normal elements would be automatically rendered in sketchy style.