FeaturedIT topics

JavaScript tutorial: Create a watercolor edge with P5.js

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.

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:

p5 textured paperIDG

Related Articles

Back to top button