Show HN: RoughJS – Create hand-drawn graphics using JavaScript • Hacker News Board

Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#1

Post by shihn » Mon, Mar 12, 2018, 9:28 PM UTC

Show HN: RoughJS – Create hand-drawn graphics using JavaScript
roughjs.com

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#2

Post by codingdave » Mon, Mar 12, 2018, 10:14 PM UTC

I like it -- it would be killer if there was a way to simply throw an SVG at it and have it convert the whole thing to this style.

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#3

Post by shihn » Mon, Mar 12, 2018, 10:16 PM UTC

codingdave wrote: post #2

I like it -- it would be killer if there was a way to simply throw an SVG at it and have it convert the whole thing to this style.

It's doable - It already parses SVG paths https://github.com/pshihn/rough/wiki#path-d--options

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#4

Post by kqr » Mon, Mar 12, 2018, 10:27 PM UTC

Has anyone attempted to combine this with D3?

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#5

Post by petecooper » Mon, Mar 12, 2018, 10:27 PM UTC

Well, this just solved two problems I've been trying to figure out for months -- thanks, shihn!

GitHub link: https://github.com/pshihn/rough

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#6

Post by shihn » Mon, Mar 12, 2018, 10:30 PM UTC

kqr wrote: post #4

Has anyone attempted to combine this with D3?

I drew a map with RoughJS and d3 (3rd example ->)https://github.com/pshihn/rough/wiki/Examples

I'm sure Charts and all would be easy too.

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#7

Post by LiveTheDream » Mon, Mar 12, 2018, 10:34 PM UTC

Very cool. Reminds me of Steve Hanov's work:

http://stevehanov.ca/blog/index.php?id=33

http://zwibbler.com/

https://www.websequencediagrams.com/

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#8

Post by vjeux » Mon, Mar 12, 2018, 10:58 PM UTC

In the same vein, I've been using Zwibbler ( http://zwibbler.com/demo/ ) for all the illustrations on my blog ( http://vjeux.com ) and it's been really nice to have images that look like they have been hand drawn.

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#9

Post by chestervonwinch » Mon, Mar 12, 2018, 10:59 PM UTC

Cool. I notice on the map example that the hatching lines in some of the states (South Dakota and Georgia, for example) don't quite match up. Why is that?

Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript

#10

Post by kmfrk » Mon, Mar 12, 2018, 11:06 PM UTC

I would absolutely love a flow chart library that used this with decent text alignment.

I used to prefer mermaid.js, but it silently fails in ways the don't work that well for me: https://mermaidjs.github.io/mermaid-live-editor.