Exploring canvas drawing techniques | Hacker News Reader

Exploring canvas drawing techniques

perfectionkills.com

181 pointsbpierre35 comments

Your circular spray brush has a pretty awful distribution of points. If you hold it in one location for several seconds you can tell that it's heavily biasing points to the bottom left, and you tend to get very visible "lines" as well. I tweaked it a bit to improve it:

http://codepen.io/anon/pen/EqbnG

My implementation still isn't perfect, as it biases points in the middle over points around the edges. (A consequence of the fact that a bunch of points evenly distributed around a small radius are closer together than a bunch of points evenly distributed around a large radius.) But it's definitely better than the one in the article.

I thought the same thing. Seems like the author messed up while converting radians to degrees, or something.

I changed it to

    var angle = (Math.PI * 2 * Math.random());

But it has your problem as well. To be fair, a spray can also focuses the paint in the center like that :)

more "spraycanny":

http://codepen.io/anon/pen/utcLx

Approximating a normal distribution by summing three uniformly distributed random numbers is pretty clever. And it's a nice visual effect as well.

A nice illustration of the central limit theorem! http://en.wikipedia.org/wiki/Central_limit_theorem

This means there's nothing special about 3 - the more times you add uniforms together, the more normal it becomes. Also it doesn't matter if the uniform isn't uniform.

Thanks! Yeah, I messed it up (used 270 degrees for some reason..). Updated to your version.

Surprised you didn't rediscover using physics on the pen point. You might check out http://www.graficaobscura.com/dyna/

Interesting. Will check it out. Found Javascript adaptation at http://www.rogerandwendy.com/roger/dynadraw

Yep, that's mine. I'm a fan. :^)

This is a lot of fun http://i.imgur.com/seMWVWv.png

Thanks. All props should go to Paul Haeberli for the original idea.

I should really update it to add controls for mass and friction. Actually I should make a jsfiddle for this. But, I'm in the middle of something else at the moment..

I made a jsFiddle version. Easier for hacking the mass/drag/etc vars. http://jsfiddle.net/rogerallen/LCbpz/

Brush, fur and neighbor points look really cool.

Using Bézier curves, but with variable width, can give nice "handwritten" feel to it - http://szimek.github.io/signature_pad (works best on touch devices).

Nice! Line thickness based on distance between points seems perfect for replicating ink. Good idea.

That was super cool to use, and I totally create a digital version of my signature on my iPhone that I'm going to use! Awesome!

I had the same impulse, and then it struck me: maybe, just maybe, trying to replicate my hand-written signature on an unknown website that's obviously doing it's best to capture hand-writing is not the absolute best strategy, security-wise.

Not saying the author of that pad is evil or anything, I just questioned my own impulse. And stopped drawing. :)

John Hancocks arent particularly secure anyway, and I actually have little use for my digital version, other than using it on documents to be sent to people. Everything else is handled via other ways (or require actual pen on paper!) :)

:) Well, it's open source, so you can check what it does and even run it locally without internet connection if you really want.

Good idea though, I'll have to add form for credit card details :)

A note for those who are thinking about making a "real" paint app out of these techniques - which I started on, got the architecture mostly done to a demonstration stage, and then stalled out on UI:

When you start adding in the flexibility of different tool types, differentiating "stroke" and "material", real-time preview vs. final, and other nuances, the internals start to resemble a dataflow system dealing with point paths and canvas buffers. Often you take raw input and derive a new path from it, or take an existing buffer and combine it with path data.

The basic rendering techniques really are this straightforward, it's just the flexibility requirement that adds complication.

This is excellent. We'll probably implement quite a few of these as Literally Canvas[1] brushes.

[1] http://literallycanvas.com/

This gives a strange combination of nostalgia for 80s tech with excitement about the future.

This is the most educating thing I have seen on HN in a while.

I went through the code for each, starting with the simplest and working my way up to the much more interesting and complex.

The only thing missing is a way to edit the JS and see the result. Looks like it's easy to use an embedded jsfiddle[0], but I have not tried it myself.

[0] http://doc.jsfiddle.net/use/embedding.html

> The only thing missing is a way to edit the JS and see the result.

If you look on at the right edge of the grey-ish tab bar, you will see an "edit" link. This opens up a link to CodePen which lets you fork the snippet and mark changes to it. Here is one such link: http://codepen.io/kangax/pen/wDuxl

Wow, somehow I completely missed that. Thanks for pointing it out.

The examples became more and more complex while the code remained evolutionary and understandable. Amazing work and a huge resource for canvas drawing and those unfamiliar with javascript. Very impressive.

This is a HN JS post I have no problems with! Lots of effort and actually useful - well done!

Great variety! Some of these reminded me of [0] Spider-Man Cartoon Maker.

[0] - http://www.amazon.com/Knowledge-Adventure-Spider-Man-Cartoon...

What a great interactive post. I never knew canvas was so flexible.

Canvas is just a 2D drawing API. Whatever you can do with pixels, you can do in canvas. That includes writing Photoshop if you're so inclined.

Now, that in mind, there are limitations and especially for drawing applications it's a shame that you have to think that hard about how to antialias a stroke (approximating it with shadows – really?). So in a way we dragged 2D graphics to the web, but leaving it with a strange mixture of features which date from a range of 1980–2000.

They never pay an award - or - reward for that matter -- the police always come up with some excuse not to pay. And if that fails then they say YOU must be part of the crime.

Fantastic. This is really an excellent post. I particularly enjoy the code snippets along with each example.

this is awesome. the colored pixel brush is my favorite.

this is a nice example of what i like about programming most visualizations in general. it's fun and easy to brainstorm. change variables and logic until you end up with something you like.

This is great! The Harmony examples are amazing.

Neighbor points give fantastic results.

Agreed. Two minutes of screwing around on it made me feel like an artist: http://i.imgur.com/5e42RRN.png

Reply on news.ycombinator.com