Learn the basics of p5.js
Full disclosure — you won’t be an expert at creating digital art by the end of this article. However, you will learn the basics of it, and have a starting point to venture onto much bigger projects.
We will be working on creating a canvas filled with random geometric shapes. Is it possible to make something much more exciting with p5? Absolutely. Check out the example projects in the docs.
In this article, however, we’ll be sticking to simple geometries. This is to ensure that the complexity of the project does not deter us from learning the essentials. Let’s save the exciting pieces for the future, and dive into this one for now.
We’ll setup a backbone for the web page, and then never touch the HTML again. Our HTML needs to do two things. First it needs to link all the files necessary for our project — the p5.js library, our JS script, and the style-sheet. Then, it also needs to set up a division onto which we’ll later mount the canvas (remember the id of “shapes” for later).
Note : I’ve decided to import p5.js using the CDN, but please feel free to download it to your machine, and use it locally.
<!DOCTYPE html> <html> <head> <title>Shapes</title> <link rel="stylesheet" href="shapes.css"> </head> <body> <div class="frame"> <h1>Familiar Shapes</h1> <div id="shapes" class="art"></div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script> <script src="shapes.js"></script> </body> </html>