Using Bezier Curves in p5.js to Make a Generative Flower Pen Plot with Watercolor

A while back I painted a series of generative, hard edge watercolor paintings. I created the images with p5.js, pen plotted the lines, and then watercolor painted over the top. I decided to revisit that series and modify the shapes to make them look more like flowers (or at least plants). See the bottom of this post for related posts including one with some similar source code.

The image below is one of the original generative curve images. I’m using bezier curves in p5.js to draw lines that roughly resemble some type of leaf or petal. Color uses a fixed array of rgb colors with a low alpha value to create transparency.

Generative Flowers in p5.js
Bezier curves with low alpha color fill using p5.js.

Getting Started

The first step in the process was cleaning up the way the lines generate to create a base that was roughly at the bottom of the image. Bezier curves require two x, y points and then two control points that bend the line. Going through my code after the fact I realized that I had mistaken the second x, y point for control points, but I liked the result so I didn’t fix it.

Generative Flower Grid

Once I had some notional of a generative flower that I liked I moved the flower into a grid. Drawing the flowers in a grid makes each image like it’s own little canvas. Seeing the generative flowers in a grid makes me think about some type of botanical poster with various types of plants.

Manufacturing the Physical

I do all of my pen plotting with a Cameo Silhouette. I originally bought it for making stencils, but it’s gotten far more use as a pen plotter. It allows me to plot up to a 12″ x 12″ image. This pen plot painting is 8″ x 10″.

Setting up the Generative Flower Grid SVG image inside the Silhouette software and getting ready to pen plot.

This plot uses Arches Hot Press watercolor paper and a Micron pen. I recently moved away from Cold Press watercolor paper because it’s harder to get a clean line on hard edge watercolor paintings. The hot press paper is much better. I could probably write a separate post on hard edge watercolor painting supplies and techniques.

Like many plots, this one ended up with some imperfections. If you notice, there’s a pen drag line in the lower right corner. I used to dislike pen plotting “mistakes” and have grown to really like them. It humanizes the plot and reminds me that plotting is an analog process. In the past I would have re-plotted the image. Now I embrace the imperfection as part of what makes the peice original and unique.

Watercolor Painting the Pen Plot

I used Daniel Smith watercolors for the painting with a size 4 round brush. The quality of DS paints is great, but I’m not a huge fan of granulation and find that I tend to only use the non-granulating colors. I’m planning to try another less granulating brand of watercolor soon.

Work in process. After plotting the generative flowers it was time to get started with watercolor. The painting process is pretty detailed and requires focus.
An overhead view of the painting in process. The paper is taped to MDF with Scotch delicate surface painters tape.

The painting took a while to complete because the flowers are small and require precision. I painted light to dark and one color at a time.

One of the things I’ve noticed when painting hard edge watercolor is that it’s much easier to get clean lines with a wet on wet technique. I personally get rough edges when I attempt to paint wet on dry. I started each petal by laying down some detailed water and then moved around paint to get cleaner edges. It’s far from fast, but I really like the end result.

Completed Generative Flower Pen Plot with Watercolor

Angle view of the completed generative flower pen plot with watercolor. Note the pen drag “mistakes” in the lower right corner.
Overhead view of the generative flower pen plot with watercolor.
Detailed image of the completed pen plot watercolor painting.

Related Posts

There are several posts like this on the site. A couple of the links below show video of the process and the bottom link contains some of the original source code for working with bezier curves in p5.js.

0 0 votes
Article Rating

Leave a Reply

0 Comments
Inline Feedbacks
View all comments