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

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

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

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

Scroll-Isometric Dissolution

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

p5.jsTypography
May 28, 2026

Percussive Archaeology

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

p5.jsAudio
May 28, 2026

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

Algorithmic Fluid Plotter

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

SVGGenerative
May 15, 2026

Kinetic Type Physics

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

p5.jsPhysics
May 12, 2026

Monolith Drummer

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

WebGLAudio
May 10, 2026

Liquid Decryption

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

p5.jsFluid
May 8, 2026

Elastic Shader Type

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

WebGLGLSL
May 5, 2026

Flow-Field Scramble Typography

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

p5.jsFlow Field
May 1, 2026

Harmonic Particle Atmosphere

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

p5.jsParticles
Apr 28, 2026

Invisible Wind

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

p5.jsPhysics
Apr 25, 2026

Glassmorphism Data Atlas

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

CSSData Viz
Apr 20, 2026

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

Chromatic Physics Desk

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

WebcamPhysics
Apr 10, 2026

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

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

Fluid Font Gauntlet

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

p5.jsFluid
Mar 28, 2026

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

Line Monument Valley

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

p5.jsIsometric
Mar 20, 2026

Paper Atmosphere

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

p5.jsAtmosphere
Mar 15, 2026

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

Phonetic Flow Field

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

p5.jsFlow Field
Mar 5, 2026

Postcard Matrix

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

p5.jsInteractive
Mar 1, 2026

Sashiko Wave Weaver

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

p5.jsSashiko
Feb 25, 2026

Sashiko Weather

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

p5.jsSashiko
Feb 20, 2026

Scroll Particle Swarm

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

p5.jsParticles
Feb 15, 2026

Segregation Engine

controls

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

p5.jsSimulation
Feb 10, 2026

Sticky Magnetic Blueprint

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

p5.jsInteractive
Feb 5, 2026

Synesthetic Weather Typewriter

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

p5.jsSynesthesia
Feb 1, 2026

Tessellated Breath

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

p5.jsTessellation
Jan 28, 2026

Tessellated Swarm Letterform

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

p5.jsTessellation
Jan 25, 2026

Volumetric Liquid Glyph

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

p5.js3D
Jan 20, 2026

Corrupted Manuscript

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

p5.jsGlitch
Jan 15, 2026

Flow-Field Typography

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

p5.jsFlow Field
Jan 10, 2026

Ghost Sashiko Weaver

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

p5.jsSashiko
Jan 5, 2026