Webgl

p5.tree is a render pipeline layer for p5.js v2 — pose and camera interpolation, coordinate-space conversions between WORLD / EYE / SCREEN / NDC, frustum visibility, HUD, multi-pass post-processing, picking, and declarative control panels. The demo below exercises all of it at once. Under the hood it’s three independent packages: a renderer-agnostic numeric core (@nakednous/tree — math, spaces, keyframes, visibility), a lightweight DOM layer (@nakednous/ui — sliders, transport), and a p5.js v2 bridge that wires them to the canvas. The dependency direction is strict and one-way — the core knows nothing about p5 or the DOM — which is what lets the same keyframe interpolation that drives a camera path also animate any object, and lets the whole stack run headless or in a future renderer without touching the math. ...

This demo illustrates new capabilities of the WebGL mode in the next major upcoming version of p5.quadrille.js, currently under development. It showcases how Platonic solids can be stored in quadrille cells and rendered using either immediate or retained mode with the p5.platonic library. Platonic Cells Platonic cells are cell functions (cellFn) that implement the filling of Platonic solid cells in a quadrille game. Retained Mode (mouse click to clear/add Platonic solids, drag to navigate; press s (or c) to save) ...

Platonic solids, named after the philosopher Plato, are highly symmetrical, three-dimensional shapes. Each face of a Platonic solid is the same regular polygon, and the same number of polygons meet at each vertex. This sketch demonstrates the rendering of Platonic solids using the p5.platonic library, showcasing both the immediate mode and retained mode rendering of the shapes. Check out the platonic cells example, which fills quadrille cells with the Platonic solids introduced here. ...

Before diving into development, thoroughly reading the Quadrille API documentation is key to efficient coding, preventing mistakes, and ensuring optimal performance. By acquainting yourself with the API’s nuances, you set the stage for informed decision-making, seamless collaboration, and a smoother development journey. The following demo illustrates the game of life using a pentadecathlon pattern as its initial seed, rendered as a surface texture on p5 3D shapes in WEBGL mode: (mouse drag to navigate; [1..7] keys change shape, other keys reset) ...

This demo visualization shows a photomosaic (& videomosaic) implemented in hardware: (press r to randomly pick another painting) ...