Blog

Animated pigeons walking across a green and gray point-cloud map.

Coogle Maps: An Interactive Pigeon Data Portrait of New York City

This article presents Coogle Maps, an interactive data portrait that explores pigeon activity in New York City. The project connects pigeon-related 311 complaints with nearby restaurants, parks, buildings, street furniture, and other public data. Mapbox vector tiles are rendered as a point-cloud landscape in WebGL, while animated pigeon models mark areas of interest. A reusable Codex skill uses the local records to create short pigeon reviews without adding unsupported details. The project shows how open urban data, interactive mapping, and generated text can support a playful view of the city from a pigeon’s perspective.

2026-10-22

An animated banana still life gradually drawn with black contour marks.

Optical Still Life: Drawing Negative Space with Flood Fill

This article presents an animated still-life drawing system that uses negative space to suggest three-dimensional form. Source paintings are resized, converted to grayscale, and thresholded into binary pixel data. A flood fill algorithm identifies connected black regions, while contour detection orders boundary pixels into paths that can be drawn over time. The outline animation is followed by region filling, allowing the object to emerge gradually from an almost empty canvas. Tests with fruit, flowers, and vessels explore how image preprocessing, drawing order, and missing visual information affect the perception of form.

2026-10-15

An animated pixel-art pigeon assembled from different GIF body parts.

Exquisite Corpse: GIF Pixel Art and Animation in p5.js

This article presents a collaborative Exquisite Corpse project that combines animated GIF body parts into a new pixel-art character in p5.js. A shared function samples GIF frames as coordinate and color grids, allowing each collaborator to create different visual effects from the same data structure. Separate ranges define the head, body, and legs, while CMY color separation and multiply blending produce a print-like appearance. Circular easing functions control how colored pixels move into place. The project explores reusable functions, parameter-based variation, and collaborative coding through a shared animation framework.

2026-10-08

Four stages of a Mona Lisa portrait drawn with Fourier circles over a sampled-color background.

Mona Lisa Portrait Clock: Fourier Drawing and the Representation of Time

This article presents an experimental portrait clock that connects drawing complexity with time. The system converts a traced Mona Lisa into two-dimensional point data and applies a discrete Fourier transform to represent the path as rotating circles. The same source points can produce simple or detailed drawings by changing the number of circles used during a fixed drawing period. Image colors are sampled to build a layered background while the Fourier path gradually completes the portrait. The study explores how mathematical representation, data amount, and drawing time can shape the visual experience of a familiar image.

2026-10-01

An animated digital paper folding experiment.

A Folding: Simulating Paper Folds in p5.js

This article presents a two-dimensional paper-folding simulation built with p5.js. The system represents a sheet of paper as a polygon and defines each folding line with two points. A cross product is used to determine which side of the line each vertex belongs to. When a folding line crosses a polygon, the system splits the polygon and reflects the vertices on the folding side across the line. To support repeated folds, the system also tracks the active paper pieces, allowing one fold to affect multiple layers. Finally, the study makes an initial exploration of using an evolution strategy to generate different folding patterns. This process shows how basic geometry can support procedural paper folding and pattern generation.

2026-09-29

An animated hand-drawn face formed by colorful particles.

Face Generator: Interactive Portrait Drawing with Compute Shaders (GPU) in p5.js

This article presents an interactive face generator built with p5.js and WebGPU compute shaders. A hand-drawn portrait is represented as a collection of curves and point data. Multiple face views are prepared in Procreate and Rhino/Grasshopper, then organized as faces, lines, and points in JSON. A compute shader updates many particles in parallel, while noise and style parameters create crayon-like line qualities. The horizontal mouse position selects different face views, producing the illusion of a rotating portrait. This study explores how GPU particle systems can combine responsive interaction with a hand-drawn visual language.

2026-09-24

A tablet showing a dust bunny simulation surrounded by handmade paper-clay interaction objects.

Dust Bunnies to Candy: Connecting Physical Inputs to p5.js with MQTT

This article presents an interactive system that turns sweeping, airflow, and collected digital dust bunnies into a physical candy reward. An ESP32 uses sound sensors, buttons, and a motor to communicate with a p5.js and Matter.js simulation through MQTT.

2026-09-23

A generative landscape with redwood trunks, layered green hills, and an orange sunset.

Locating Place|Space: Watercolor Shaders and Generative Nature Study in p5.js

This article presents a generative nature study built with p5.js from a landscape prompt written by a partner. The scene combines a watercolor sky, layered hills, small trees, and tall redwood trees. A p5.js 2.0 shader, noise functions, blend modes, and procedural geometry create the visual texture and depth. Gaussian functions shape the hills and tree trunks, while a Fibonacci sequence helps organize elements across the landscape. Through sketches and parameter tests, the process explores how language, personal memory, mathematics, and code can work together to interpret an imagined place.

2026-09-10

A pale blue inspiration board connecting projects about observation, systems, materials, computation, and design.

My Inspiration Board: The Way of Seeing, Thinking, and Making

This article presents an inspiration board that organizes twenty references into three connected areas: the way of seeing, the way of thinking, and the way of making. The first group studies observation, perception, and ways of making familiar objects appear unfamiliar. The second group examines hidden systems in nature, algorithms, computation, and responsive materials. The final group explores connections across art, architecture, data, machines, light, animals, and extended reality. Together, these references describe a design practice based on careful observation, systematic thinking, and experimental making.

2026-08-31