Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Exploring canvas drawing techniques

perfectionkills.com

Post reply on HN
Print view View original

11–20 of 36 posts

Re: Exploring canvas drawing techniques

#11

Post by andrelaszlo »

Kronopath wrote: post #9

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…

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 :)

Re: Exploring canvas drawing techniques

#12

Post by andrelaszlo »

Kronopath wrote: post #9

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…

more "spraycanny":

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

Re: Exploring canvas drawing techniques

#13

Post by Kronopath »

andrelaszlo wrote: post #12
Kronopath wrote: post #9

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…

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.

Re: Exploring canvas drawing techniques

#14

Post by kangax »

Kronopath wrote: post #9

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…

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

Re: Exploring canvas drawing techniques

#16

Post by kangax »

szimek wrote: post #15

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.

Re: Exploring canvas drawing techniques

#19

Post by rogerallen »

kangax wrote: post #18
rogerallen wrote: post #17

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. :^)

Re: Exploring canvas drawing techniques

#20

Post by 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.

Post reply on HN