Skip to main content
Interactive experiments

Creative

38demos · p5.js, Canvas 2D, WebGL

Generative art, interactive typography, physics simulations, and creative coding experiments. Each demo is a standalone HTML file — no build step required. Open, explore, remix.

p5.jsTartanismInteractiveWeaveTotal SerialismAlgorithmicParticlesGenerative TextTypographyScrollAudioCanvas 2DNoiseSVGGenerativePlotterPhysicsWebGL3DFluidGLSLFlow FieldHarmonicsNatureCSSData VizUIGame TheoryWebcamCSS 3DCanvasInkIsometricAtmosphereTexturePhoneticsGridSashikoWavesWeatherSimulationAgent-BasedSynesthesiaTessellationBreathingSwarmLiquidGlitchTextAgents
Open ↗

Tartan Weave Synth

controls

Interactive generative tartan based on Tartanism field notes. Brighter, natural textile palette. 6 weave structures, mouse-warped threads, and frame-by-frame export for animated GIFs.

p5.jsTartanism
Jun 10, 2026
Open ↗

Serial Permutation Canvas

controls

Visualizing total serialism as particle geometry. 12-tone series, prime/retrograde/inversion/rotation permutations, and color-mapped particles.

p5.jsTotal Serialism
Jun 10, 2026
Open ↗

Scroll-Chromatic Excavation

controls

Scroll through the void to excavate hidden text. Microscopic agents swarm toward dark pixels, revealing buried glyphs. Rebels erase. Builders reveal. Full control panel with sliders.

p5.jsInteractive
Jun 10, 2026
Open ↗

Scroll-Isometric Dissolution

Isometric typography dissolves into particles as you scroll. A 3D word space that collapses under velocity.

p5.jsTypography
May 28, 2026
Open ↗

Percussive Archaeology

Rhythm-driven excavation of buried text. Each beat spawns agents that dig toward the hidden manuscript.

p5.jsAudio
May 28, 2026
Open ↗

Noise-Shared Cursor Swarm Brush

64 particles lerp-track your cursor through a recursive geometric subdivision landscape. Noise-driven turbulence stains tiles as you move.

Canvas 2DNoise
May 20, 2026
Open ↗

Algorithmic Fluid Plotter

Generative fluid dynamics rendered as pen-plotter compatible vector paths. Perlin noise drives the flow field.

SVGGenerative
May 15, 2026
Open ↗

Kinetic Type Physics

Physics-driven typography where letters have mass, velocity, and collision. Mouse repulsion and gravity well.

p5.jsPhysics
May 12, 2026
Open ↗

Monolith Drummer

A 3D monolith that responds to rhythm. Web Audio API drives the geometry, each beat deforms the surface.

WebGLAudio
May 10, 2026
Open ↗

Liquid Decryption

Text emerges from liquid simulation. Each letter is a fluid body that decrypts into position.

p5.jsFluid
May 8, 2026
Open ↗

Elastic Shader Type

GLSL shader-driven typography that warps and stretches elastically. Mouse interaction creates ripples through the letterforms.

WebGLGLSL
May 5, 2026
Open ↗

Flow-Field Scramble Typography

Letters navigate a vector flow field, scrambling and reassembling into words. Particle-driven text.

p5.jsFlow Field
May 1, 2026
Open ↗

Harmonic Particle Atmosphere

Particles orbit in harmonic resonance, creating emergent patterns from simple rules.

p5.jsParticles
Apr 28, 2026
Open ↗

Invisible Wind

Wind forces act on invisible structures. You see only the effect: bending grass, scattering leaves, rippling fabric.

p5.jsPhysics
Apr 25, 2026
Open ↗

Glassmorphism Data Atlas

A data visualization dashboard with frosted glass panels, real-time chart updates, and depth-based layering.

CSSData Viz
Apr 20, 2026
Open ↗

Bespoke Emotion Ledger

Five characters play Prisoner's Dilemma. Each has a distinct strategy, emotional state, and trust score. Visual encoding cycles every round.

p5.jsGame Theory
Apr 15, 2026
Open ↗

Chromatic Physics Desk

Webcam color sampling becomes draggable physics stickers. Difference-blend cursor inverts everything it touches.

WebcamPhysics
Apr 10, 2026
Open ↗

Dot-Matrix Cylinder Scroll

CSS 3D scroll-driven cylinder with 12 living dot-grid canvases. One grid is a live camera feed rendered as 16x16 brightness dots.

CSS 3DCanvas
Apr 5, 2026
Open ↗

Elastic Feedback Stage

An interactive stage where every element has elastic feedback. Click, drag, and release to see the physics.

p5.jsPhysics
Apr 1, 2026
Open ↗

Fluid Font Gauntlet

Typography that flows like liquid through a gauntlet of obstacles. Letters split, merge, and reform.

p5.jsFluid
Mar 28, 2026
Open ↗

Ink Trails Typewriter

A typewriter where each keystroke leaves an ink trail that bleeds and fades. The text accumulates as a living document.

p5.jsTypography
Mar 25, 2026
Open ↗

Line Monument Valley

Generative landscapes inspired by Monument Valley. Lines form impossible architecture in isometric space.

p5.jsIsometric
Mar 20, 2026
Open ↗

Paper Atmosphere

Atmospheric effects rendered on paper texture. Fog, rain, and light filter through a tactile surface.

p5.jsAtmosphere
Mar 15, 2026
Open ↗

Pen-Plotter Decryption

A message decrypts itself as a pen plotter draws. Each letter appears as the pen traces its path.

SVGPlotter
Mar 10, 2026
Open ↗

Phonetic Flow Field

Phonetic symbols navigate a vector field. Each sound has a distinct path and behavior.

p5.jsFlow Field
Mar 5, 2026
Open ↗

Postcard Matrix

A matrix of living postcards, each with its own animation. Click to flip and reveal the back.

p5.jsInteractive
Mar 1, 2026
Open ↗

Sashiko Wave Weaver

Sashiko stitching patterns weave into waves. Traditional Japanese craft meets generative motion.

p5.jsSashiko
Feb 25, 2026
Open ↗

Sashiko Weather

Weather data visualized through Sashiko stitching patterns. Rain, sun, and wind become thread.

p5.jsSashiko
Feb 20, 2026
Open ↗

Scroll Particle Swarm

Scrolling drives a particle swarm. Velocity spawns agents that explore the content.

p5.jsParticles
Feb 15, 2026
Open ↗

Segregation Engine

controls

Schelling's segregation model as an interactive engine. Adjustable tolerance and density.

p5.jsSimulation
Feb 10, 2026
Open ↗

Sticky Magnetic Blueprint

Magnetic sticky notes on a blueprint grid. Drag, snap, and organize your ideas.

p5.jsInteractive
Feb 5, 2026
Open ↗

Synesthetic Weather Typewriter

Each keystroke produces weather. Type a storm, a sunny day, or a foggy morning.

p5.jsSynesthesia
Feb 1, 2026
Open ↗

Tessellated Breath

Breathing tessellation patterns that expand and contract. Each cell responds to its neighbors.

p5.jsTessellation
Jan 28, 2026
Open ↗

Tessellated Swarm Letterform

Letterforms built from tessellated swarms. Each letter is a colony of agents.

p5.jsTessellation
Jan 25, 2026
Open ↗

Volumetric Liquid Glyph

3D liquid glyphs rendered with volumetric shading. Each letter is a fluid body in space.

p5.js3D
Jan 20, 2026
Open ↗

Corrupted Manuscript

A manuscript that corrupts itself as you read. Text degrades, glitches, and reforms.

p5.jsGlitch
Jan 15, 2026
Open ↗

Flow-Field Typography

Typography that flows through a vector field. Letters navigate obstacles and follow paths.

p5.jsFlow Field
Jan 10, 2026
Open ↗

Ghost Sashiko Weaver

Sashiko patterns woven by ghost agents. Invisible hands stitch traditional patterns.

p5.jsSashiko
Jan 5, 2026