JavaScript tutorial: Create a watercolor edge with P5.js

To paint a watercolor in JavaScript, we need paper, water, and ink. Step two is the ink edge color.

Last week we created a textured paper canvas and got a healthy dose of the P5 API and JavaScript’s Math.random() function. This week, we’re going to look at a specific element of watercolor to see if we can emulate it on our canvas: the edge color.

watercolour / watercolor paint marks Annie Spratt (CC0)

If you take a look at the various paint blots in the watercolor above, you may notice that in many cases the saturation of color increases dramatically at the edges. This dramatic increase in saturation is going to be the goal of this week’s exercise. You’ll also notice that the shapes are very irregular, which is a complicating detail I’m going to leave off for now by just drawing perfect circles.

We left off with the foundation of P5 code that draws a textured paper canvas for us to draw on:

To continue reading this article register now