When you create generative art or interactive sketches, you want your work to look great on any device or browser window size. This is where responsive design principles come in. In creative coding, responsive design means your canvas and visuals automatically adjust to fit the available screen space, ensuring that shapes, colors, and interactions always appear as intended.

To achieve this in P5.js, you use the windowWidth and windowHeight variables to set your canvas size. But what happens if the user resizes their browser window after your sketch has started? Without extra handling, your canvas would stay the same size, possibly leaving empty space or cropping your artwork.

P5.js provides the windowResized() function for this purpose. By defining this function in your sketch, you can tell P5.js what to do whenever the window size changes. The most common action is to call resizeCanvas(windowWidth, windowHeight), which resizes the canvas to match the new window dimensions. This way, your artwork remains centered, scaled, or otherwise visually consistent, no matter how the user adjusts their browser.

Responsive design is especially important for interactive and generative art, where the experience should be seamless across desktops, laptops, tablets, and phones. You can also use the new canvas size inside your draw() function, so all positions and sizes are recalculated according to the current width and height. This approach gives your art a professional, polished feel and makes it accessible to everyone.