Doodle Drawer – Brushes

At my Doodle Drawer app, I’ve played with a couple of “brushes”. The idea is to treat the connection lines differently.


Basically the difference is that the line connections are drawn closer or further away from each line based on the formula of Harmony.

The ‘shaded brush’ looks like this:

The sketched brush looks like this:

And the ‘fur brush’ looks like this:

Parametric Curves and deCasteljau Bezier Curves

Cubic Bezier Curves – Under the Hood from Peter Nowell on Vimeo.

You can drag the markers and open this example in new tab.

The core part of this practise clearly is the bezier curve. To get all points on the curve for 4 control points this would suffice.

However in order to use an arbitary amount of control points I use the following function. It’s recursively, so potentially it’ll explode the max available stack depth (no clue how much that is in js). But for now it’ll do the job.

To use the function simply wrap a loop around with your favorite segments amount.

Now simply draw the points.

Et voilà! The animation idea is inspired by

This is my solution to cg2 exercersise a01.2-1.3.

See Also Practical Guide to Bezier Curves

Doodle Drawer

Inspired by Harmony from Mr. Doob (Ricardo Cabello) I made a little app called ‘Doodle Drawer’. The basic idea  for some brushes is that it connects lines that has been drawn already and in case they’re close enough.

doodle drawersilly doodle