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

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

#81

Post by ygra » Tue, Mar 13, 2018, 10:44 AM UTC

hanoz wrote: post #77

4lejandrito wrote: post #73

Earlier quoted context omitted.

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://jsfiddle.net/65q7c5to/

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

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.

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

#82

Post by piyush_soni » Tue, Mar 13, 2018, 10:45 AM UTC

chrismorgan wrote: post #33

jashkenas wrote: post #27

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... Wheee. Edit: Too much fun. Here's another: https://beta.observablehq.com/@jashkenas/scratchy-eyes

This is not working in Firefox. Not sure why.

Yup. Only worked in Chrome for me too.

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

#83

Post by doczoidberg » Tue, Mar 13, 2018, 11:04 AM UTC

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

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

#84

Post by [deleted] » Tue, Mar 13, 2018, 11:13 AM UTC

ygra wrote: post #81

hanoz wrote: post #77

Earlier quoted context omitted.

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

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.

[deleted]

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

#85

Post by saintPirelli » Tue, Mar 13, 2018, 12:37 PM UTC

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.

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

#86

Post by nazri1 » Tue, Mar 13, 2018, 2:34 PM UTC

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.

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

#87

Post by severine » Tue, Mar 13, 2018, 2:35 PM UTC

laktak wrote: post #56

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

Maybe this? https://bitbucket.org/wez/asciitosvg

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

#88

Post by RMarcus » Tue, Mar 13, 2018, 2:50 PM UTC

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

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

#89

Post by buildfocus » Tue, Mar 13, 2018, 3:02 PM UTC

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

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

#90

Post by shihn » Tue, Mar 13, 2018, 3:14 PM UTC

unwind wrote: post #76

shihn wrote: post #13

Quick bar chart example with D3: http://roughjs.com/examples/bar-chart.html

FYI: Blank page (with title text) in Firefox (58.0.2, 64-bit, Windows).

There was in issue with the CDN I believe. It was serving an old cache at some nodes. I changed the code to use a different one.