Last week I introduced the concept of generative art, P5.js, and some of the setup woes with P5.js. I left you with a scaffolding repository that gets all the project setup headache out of the way, but we didn’t dig into making anything yet. This week, we’ll begin the process of actually making some art.
We’re going to start simple by introducing some basic API concepts and build in just the right amount of randomness while we create the “paper” for our watercolor effect. Getting the look and feel of the paper just right is important with any watercolor. It’s also going to help get us get into the mindset of emulating the real world in a digital space. The goal of the rest of this post is to create the effect of real paper for the background of our watercolor. I’d like our paper to be an off-white, cream, or beige color, and it should have a little texture to it.
Note that I’m calling our background “paper” (the thing I’m trying to mimic) and not “the canvas element” (the implementation terminology). Thinking in terms of the real world rather than the digital space is a little mental trick to get me out of the implementation details and help guide my intuition.
Create a color background in P5.js
Our scaffolding already has a bit of P5 code in it, so we can use the existing setup function to get started.
