p5js

You create generative art using p5.js by writing scripts that manipulate the canvas to procedurally generate visual compositions. This Skill generates the interactive visual outputs directly from your logic.

Audio-reactive visualizations respond to a sound file by using the p5.sound.js library to analyze audio input. You can generate particle systems or visual elements that dynamically react to the beat.

p5.js supports WebGL for rendering 3D scenes by utilizing the WebGL renderer within the canvas. This allows you to develop interactive 3D experiences and spatial visualizations directly in the browser.

The best way to visualize datasets with interactive charts in p5.js is to bind data values to canvas drawing functions. This creates dynamic, mouse-driven interactive experiences that update visual outputs based on data.

You need Puppeteer to capture canvas animations when exporting procedural outputs as video or image sequences. Puppeteer automates the browser environment, while CCapture.js records the canvas frames for visual art.

Use p5.svg instead of standard canvas for generative art when you need vector graphics output. It renders interactive visual compositions as scalable SVG files rather than rasterized pixel images.