About the experiment
This page brings together two creative-coding experiments. In the first, a circuit board gradually emerges from traces, contact pads, and watercolour-like fields. In the second, a pixel mascot becomes an interactive 3D object that can be rotated with a mouse or finger.
How it was made
Both scenes are built with p5.js. The circuit-board visual uses p5.brush to add organic strokes, texture, and translucent fills while the elements appear and disappear in a timed loop. The mascot runs in WebGL mode: it is assembled from volumetric geometric blocks, and Pointer Events translate mouse or finger movement into rotation around two axes.
What Processing, p5.js, and WebGL are
Processing is an environment and language for creative coding: images and animation are produced with code rather than drawn manually in a graphics editor. p5.js brings this approach to the browser and provides a JavaScript drawing toolkit. WebGL uses the graphics processor to render 3D graphics efficiently. In this experiment, it handles geometry, depth, lighting, and real-time rotation of the mascot.
This approach works well for generative graphics: each element can be animated, connected to data or user input, and varied without drawing every frame by hand.