
Show HN: RoughJS – Create hand-drawn graphics using JavaScript - shihn
http://roughjs.com/
======
bcjordan
If you repeatedly clear canvas/draw with a setInterval of ~100-200ms, looks
kind of like the hand-drawn un-stable lines art style of Squigglevision (Dr.
Katz / Science Court) :)

EDIT: If folks want to play with a JSFiddle:
[https://jsfiddle.net/49g2Leqw/9/](https://jsfiddle.net/49g2Leqw/9/)

~~~
adrice727
[https://jsfiddle.net/adrice727/49g2Leqw/105/](https://jsfiddle.net/adrice727/49g2Leqw/105/)

~~~
rmetzler
This is the vehicle I programmed together with my 5 year old:
[https://jsfiddle.net/k1g6533y/13/](https://jsfiddle.net/k1g6533y/13/)

~~~
4lejandrito
Very nice!

I changed it a little bit to optimise rendering just in case you don't know
about 'requestAnimationFrame()' ([https://developer.mozilla.org/en-
US/docs/Web/API/window/requ...](https://developer.mozilla.org/en-
US/docs/Web/API/window/requestAnimationFrame)):

[https://jsfiddle.net/65q7c5to/](https://jsfiddle.net/65q7c5to/)

~~~
hanoz
What do all the context transformation lines do in this example? It seems to
work just as well with clearRect on its own.

~~~
ygra
There's only one such line. In general it's a good idea to reset the transform
before clearing as the (0, 0, w, h) rectangle may not cover the whole canvas
anymore. In this toy example there obviously isn't another transform so it's
without function.

------
jashkenas
This is a very fun library. Following the tip in these comments from @bcjordan
to repeatedly re-render, I've forked a little physics notebook by Jim
Bumgardner apply Rough.js to the circle rendering:

[https://beta.observablehq.com/@jashkenas/tumble-wheel-
with-r...](https://beta.observablehq.com/@jashkenas/tumble-wheel-with-rough-
js)

Wheee.

Edit: Too much fun. Here's another:
[https://beta.observablehq.com/@jashkenas/scratchy-
eyes](https://beta.observablehq.com/@jashkenas/scratchy-eyes)

~~~
chrismorgan
This is not working in Firefox. Not sure why.

~~~
nacs
Both work well for me in Firefox 58

~~~
chrismorgan
It got fixed to use require() instead of import().

------
ronilan
This is fantastic!

Just made a quick rough "Mondrian" drawing app (using BlockLike.js[1])

[https://s.codepen.io/BlockLike/debug/Bromox/PNAvYLPDGqDr](https://s.codepen.io/BlockLike/debug/Bromox/PNAvYLPDGqDr)

Click and Drag to rectangle.

Space key = black

r key = red

b key = blue

g key = green

y key = yellow

[1]
[https://www.blocklike.org/#getstarted](https://www.blocklike.org/#getstarted)

EDIT: If folks want to play with the pen:
[https://codepen.io/BlockLike/pen/Bromox?editors=0010](https://codepen.io/BlockLike/pen/Bromox?editors=0010)

~~~
shihn
Cool!

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

~~~
kqr
It looks like you have to purchase a license to use it. The only price quoted
on the page is $2999 -- a bit steep for some illustrations on a blog. Please
explain.

~~~
MattRix
I believe the $2999 price is for licensing Zwibbler so you can have it on your
own site/app. For example if you had a company that made custom t-shirts,
users could create their own designs using Zwibbler on your site.

On the other hand, if you just want to draw some pictures using the Zwibbler
demo to put them on your blog, you don't need a license, and it doesn't cost
you anything.

~~~
kqr
That is the sensible interpretation but it's not very clear from the wording
on the page. I like being in the clear, legally speaking.

------
shihn
I used some of the same core code to create sketchy UI controls using web-
components: [https://www.webcomponents.org/collection/wiredjs/wired-
eleme...](https://www.webcomponents.org/collection/wiredjs/wired-elements)

~~~
fleur-de-lotus
Any plan for a react component?

~~~
shihn
I'm not planning to at the moment, but if someone wants to write a wrapper, go
for it.

~~~
swyx
i dont know polymer at all so i didnt know how to use react-polymer - anyone
want to give it a shot?

in the meantime ive started writing a pure react version of it:
[https://github.com/sw-yx/react-wired](https://github.com/sw-yx/react-wired) i
have not published to npm yet

------
shihn
Quick bar chart example with D3: [http://roughjs.com/examples/bar-
chart.html](http://roughjs.com/examples/bar-chart.html)

~~~
swagasaurus-rex
Awesome. I was about to ask about D3 support.

But now that I'm here... Is there any support for animation?

~~~
shihn
Well the library provides simple drawing methods. You would animate it the
same way you would animate anything on a canvas. (Note most D3 charts use SVG)

------
nazri1
Having an option to make the result deterministic would be nice. That way you
can use it for drawing stuff that's guaranteed to be rendered identically when
loaded at different times.

~~~
dvh
Replace Math.random() with your deterministic PRNG, for example
[https://github.com/davidbau/seedrandom](https://github.com/davidbau/seedrandom)

------
yantrams
This has made me so much happy. Thank you. Brilliant stuff. I've been looking
for something that does this and have just started having fun with this
problem using P5.js and playing around with splines, perlin noise etc.

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

GitHub link:
[https://github.com/pshihn/rough](https://github.com/pshihn/rough)

~~~
shihn
I'm assuming you're joking :P But if it really solved 2 of your problems, I'm
curious what they were?

~~~
petecooper
Not joking at all, I assure you! Primary use case is for education/training
materials where a flat or prescribed style is not desirable, and also because
despite my girlfriend being an artist I have no ability there whatsoever and
this has just removed a whole bunch of fear about presenting polygons.

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

~~~
shihn
It's doable - It already parses SVG paths
[https://github.com/pshihn/rough/wiki#path-d--
options](https://github.com/pshihn/rough/wiki#path-d--options)

------
daleco
That’s great, I’ve been looking for a Sketch 3 plugin that was doing that for
a while (it doesn’t exist yet) It could potentially be wrapped in a plugin.

When presenting designs, in some situations you may want to show rough
sketches and not high fidelity (or people focus on details rather than the big
picture). Something like that would allow me to easily toggle between high
fidelity to rough state.

~~~
psteinweber
Wonderful and indeed a very practical idea. I would use it!

------
chestervonwinch
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?

~~~
shihn
I'm doing some approximation on complex SVG paths for performance reasons.
Doesn't happen on non-svg paths. Need for improvement.

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

[http://stevehanov.ca/blog/index.php?id=33](http://stevehanov.ca/blog/index.php?id=33)

[http://zwibbler.com/](http://zwibbler.com/)

[https://www.websequencediagrams.com/](https://www.websequencediagrams.com/)

------
imkevinxu
Reminds me of this old website I built back in college
[http://xkcdgraphs.com/](http://xkcdgraphs.com/)

~~~
KennyCason
Woah! This is awesome. :) I'd love to use this on my blog next time I need
graphs.

------
tobinharris
Really cool stuff.

Would look great in [http://yuml.me](http://yuml.me) which also has a sketchy
look.

I need to rewrite yUML using newer tech, business collaborations welcome :)

------
egnehots
Are there any good papers about this kind of stuff?

------
CodeCube
This is just lovely :) I guess I don't really have much to add, other than to
say you've delighted me with this

~~~
shihn
Thanks. I'm a bit surprised by the reception actually. It was just a fun side
project with no real use case in mind.

------
kmfrk
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](https://mermaidjs.github.io/mermaid-live-editor).

~~~
cyrusaf
Have you tried plantuml?

[http://plantuml.com/](http://plantuml.com/)

[https://www.planttext.com/](https://www.planttext.com/)

------
RMarcus
Very cool! I wrote something similar, but it only renders lines.
[https://rmarcus.info/blog/2017/10/23/humanlines.html](https://rmarcus.info/blog/2017/10/23/humanlines.html)

------
pit2
Does anyone know how this can be exported/used/translated to work with
Inkscape?

------
frunzales
A bit off-topic but a while ago someone posted a similar tool here on HN that
allows one to produce diagrams - they looked pretty much hand-drawn. Does
anyone have a link?

~~~
ben336
If by diagrams you mean charts, possibly
[https://jakevdp.github.io/blog/2012/10/07/xkcd-style-
plots-i...](https://jakevdp.github.io/blog/2012/10/07/xkcd-style-plots-in-
matplotlib/)

~~~
frunzales
This comes close enough but it's not the exact software that was posted around
here :-)

~~~
LeonB
was it this?
[http://shaky.github.bushong.net/](http://shaky.github.bushong.net/)

~~~
frunzales
I believe so. It's very close to what I've previously seen posted here.

------
H00tyMcOwlFace
No idea what I will be using it for yet, but I am sure I will!

------
ohf
Does anyone else get a fancy pants adventure vibe from this?

There's a critique about digital art in general here: over-perfection is dull.
I'm all about that wabi-sabi.

------
saintPirelli
Absolutely stunning work. I have to do some work with D3.js for university and
this feels like the universe telling me to stop procrastinating.

------
glhaynes
Fantastic! I love this sort of thing, hope to see it used a lot. Could
definitely use support for high-DPI screens.

------
JasonSage
I'd love to pair this with one of those tools that turns ascii drawings into
SVGs. Looks great!

------
laktak
Anybody know of a tool that can convert ascii drawings (in markdown) to this?

~~~
severine
Maybe this?
[https://bitbucket.org/wez/asciitosvg](https://bitbucket.org/wez/asciitosvg)

------
buildfocus
This is very cool, but I have no idea at all where I'd ever use it.

------
kenning
This is awesome! Do you have plans to integrate with canvas.js?

~~~
shihn
I'm not planning to at the moment, but if someone wants to write a wrapper, go
for it.

------
sporkologist
Simulated badly-drawn hatching! This is great!

------
kqr
Has anyone attempted to combine this with D3?

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

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

------
gugagore
Related:
[https://matplotlib.org/xkcd/examples/showcase/xkcd.html](https://matplotlib.org/xkcd/examples/showcase/xkcd.html)

~~~
imkevinxu
Easier web version :) [http://xkcdgraphs.com/](http://xkcdgraphs.com/)

------
FromTheId
Aw man I love this.

Thank you!

------
doczoidberg
does anybody know something similar for .NET (WPF) applications?

------
mito88
nice!

------
ashleymarsh
This is fantastic!

