Introduction to P5.js and the Canvas

P5.js is a JavaScript library designed to make creative coding accessible and fun for everyone. Its philosophy centers around lowering the barrier to entry for artists, designers, educators, and beginners who want to experiment with code as a medium for creative expression. In the context of creative coding, P5.js allows you to quickly visualize ideas by providing simple functions for drawing, animation, and interactivity. Using P5.js, you can create generative art, interactive sketches, and dynamic visualizations—all directly in your web browser.

When you create a P5.js sketch, you typically define two main functions: setup() and draw(). The setup() function runs once when the sketch starts. It is where you initialize your canvas using createCanvas(width, height), set background colors, and configure other initial settings. The draw() function, if present, runs continuously in a loop after setup() finishes, allowing you to animate or update your sketch frame by frame. By placing createCanvas(400, 300) inside setup(), you ensure the canvas is only created once at the beginning, and the background color is set before anything else is drawn.