It’s a long time fascination of mine to generate drawings with code. There are several benefits to generating a drawing. They are accurate, (can be) complex and less time consuming to draw. I have many doubts about it too. It is difficult without image input of some kind to generate a drawing with figures. Without any figure, I think there is inherent limitation on what can be expressed on a canvas. There also may be concern about the fact that the drawing will not be done by hand. Drawings done by one hand is often stylistically different from one done by a hand that belongs to another. Perhaps there is something about hands that makes hand-drawing more intuitive.

But must it be? I remember when I was learning to draw (still an ongoing process), it wasn’t that intuitive for me. All I drew looked alike one way or another and I had to consciously change the way I drew to change the style of the paintings. Medium brings huge stylistic change as well. A lot of the choices we make when painting or drawing traditionally are deliberate. In that way maybe traditional drawing and generative drawing is not all that dissimilar.

I have some experience with generative drawing with digitalized human input. It captured the motion but the aesthetics were simple and distracting. This time I thought it would be good for me to focus on aesthetics.

Once I got over that mental hurdle and set on a focus, I started to look for a place to start. Where better to start than imitating the works of the master? From Compendium Lecture by Professor Casey Reas, I got the idea for basic structure.

So far there are three components to drawing:

  • Brush Movement
  • Brush Interaction
  • Drawing

Brush movement is the rule that dictates how the brush will move on each frame, it can be affected by Brush Interaction which are rules that determine the relationship the brush will have with other brushes on canvas. Drawing determines what actual forms are drawn onto the canvas.

Try 1:

Brushes are initiated to have a random direction.
Brushes move along this direction each frame.
The direction wiggles by a random angle each frame.

Brushes have radii and they can collide.
When they do, each brush change the direction slightly towards the
 direction of the colliding brush.

Draw dotted line along each brush.


Reaction: Look like scratches, hair.


Try 2:

Same as try1.

Same as try1.

Connect the colliding brushes with a line.


Reaction: Leaf vein.

Try 3:

Instead of moving in the direction of the colliding brush when they collide, I changed it so that it turns a little anti-clockwise.

When the brushes collide, instead of moving in a straight line with a relatively unified direction like in try1, now they turn anti-clockwise together producing a circular criss-cross pattern.


Looks like: sliced bread.


Try 4:

Same as  try3 but with a larger radius.


Try 5:

Blow up the radius to 250px. Resulted in longer lines.


Looks like: muscles.

Straight angled lines makes it look sharper.

Try 6:

Draw along the brush only when it collides.

Brought radius down to about 20px or so. Thicker and lower opacity line.


The thickness, opacity and irregular circular shape makes it look like some microorganism.

Notice the ease out effect on the line. It is a result of drawing a line every frame and each line drawn overlaps with the ones that has been drawn before and the ones that will be drawn after.


Through this experiment I learnt that how versatile this Brush, Interaction, Drawing model is. With just a few lines of change of code I was able to achieve all the different patterns above.