
Exploring canvas drawing techniques - bpierre
http://perfectionkills.com/exploring-canvas-drawing-techniques/
======
Kronopath
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](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.

~~~
andrelaszlo
more "spraycanny":

[http://codepen.io/anon/pen/utcLx](http://codepen.io/anon/pen/utcLx)

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

~~~
RobinL
A nice illustration of the central limit theorem!
[http://en.wikipedia.org/wiki/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.

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

~~~
kangax
Interesting. Will check it out. Found Javascript adaptation at
[http://www.rogerandwendy.com/roger/dynadraw](http://www.rogerandwendy.com/roger/dynadraw)

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

~~~
bcjordan
This is a lot of fun
[http://i.imgur.com/seMWVWv.png](http://i.imgur.com/seMWVWv.png)

~~~
rogerallen
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..

------
szimek
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](http://szimek.github.io/signature_pad)
(works best on touch devices).

~~~
girvo
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!

~~~
unwind
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. :)

~~~
girvo
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!) :)

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

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

[1] [http://literallycanvas.com/](http://literallycanvas.com/)

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

------
sonier
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](http://doc.jsfiddle.net/use/embedding.html)

~~~
jervisfm
> 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](http://codepen.io/kangax/pen/wDuxl)

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

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

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

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

[0] - [http://www.amazon.com/Knowledge-Adventure-Spider-Man-
Cartoon...](http://www.amazon.com/Knowledge-Adventure-Spider-Man-Cartoon-
Maker/dp/1569971447)

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

~~~
ygra
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.

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

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

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

------
thoughtpalette
This is great! The Harmony examples are amazing.

------
agumonkey
Neighbor points give fantastic results.

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

