📖 Code Guides - Complete Catalog
Comprehensive table of contents for all 566 documented p5.js creative coding sketches. Each entry shows the sketch's purpose, key programming concepts from the actual documentation, and links to detailed line-by-line code explanations.
566 fully documented sketches · Organized by creation date · Real concepts from AI-generated docs
| # | Preview | Sketch Details | Actions |
|---|---|---|---|
| 51 |
|
Snake Game Attempt - xelsed.aiThis sketch creates a neon-glowing snake game controlled entirely by mouse movement instead of arrow keys. The snake's head smoothly chases the cursor while body segments trail behind with a springy lag effect, and everything is rendered with a glowing green neon aesthetic using canvas shadow effects.
Key Skills:
|
📖 Read Docs 👁️ View |
| 52 |
|
Animated Pulse Flow - xelsed.aiThis sketch paints a nighttime sky filled with softly twinkling stars, then layers three semi-transparent curtains of noise-driven color on top to simulate the shifting glow of an aurora borealis. The green, blue, and purple bands ripple independently using Perlin noise, creating an organic, ever-changing light show.
Key Skills:
|
📖 Read Docs 👁️ View |
| 53 |
|
color pattern animation detected - xelsed.aiThis sketch creates a mesmerizing flow field particle animation where 1000 tiny particles drift along invisible currents generated by Perlin noise, leaving glowing colorful trails behind them. The ADD blend mode makes overlapping particle paths bloom into bright, fiery colors that shift smoothly over time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 54 |
|
Animated Wave Circle - xelsed.aiThis sketch grows a recursive fractal tree using p5.js recursion and Perlin noise, complete with wind-swayed branches, autumn leaf colors, falling leaves, drifting clouds, a day/night sun-and-moon cycle, and wavy terrain. Every frame the tree is redrawn from scratch with slightly different noise-driven angles, so it never looks perfectly still even though nothing is truly 'animating' a fixed shape.
Key Skills:
|
📖 Read Docs 👁️ View |
| 55 |
|
Animated Spiral Rotation - xelsed.aiThis sketch generates a 3D spiral galaxy made of 20,000 individually colored stars arranged along logarithmic spiral arms, rendered in WebGL and slowly rotating around a glowing core. Purple-to-blue color gradients and a layered transparent glow give it a realistic cosmic depth.
Key Skills:
|
📖 Read Docs 👁️ View |
| 56 |
|
AI Magnetic Field Lines - Iron Filings Physics Visualization - xelsed.aiThis sketch simulates iron filings scattered on paper above hidden magnets, using hundreds of tiny line segments that rotate to align with the combined magnetic field from several invisible poles. Perlin noise adds a gentle organic drift to both the poles and the filings, and clicking the canvas drops in new poles that instantly reshape the field pattern.
Key Skills:
|
📖 Read Docs 👁️ View |
| 57 |
|
Kaleidoscope Symmetry - xelsed.aiThis sketch creates a full-screen, six-fold kaleidoscope built from more than a dozen layered geometric elements - polygons, stars, spirographs, Lissajous curves, recursive nested shapes and a rotating grid - all drawn once and then rotated and mirrored around the canvas center. Every parameter (speeds, sizes, distances, colors) is exposed through a dat.GUI control panel so the viewer can reshape the pattern live.
Key Skills:
|
📖 Read Docs 👁️ View |
| 58 |
|
AI Bouncing Ball V2 - Xelsed p5flash-alpha02This sketch animates a glowing ball that bounces around a full-window canvas, pulsing in size with a sine wave, casting a soft layered shadow, and flashing a new vibrant HSB color every time it hits an edge. A semi-transparent background creates a smooth motion trail instead of harsh redraws.
Key Skills:
|
📖 Read Docs 👁️ View |
| 59 |
|
AI Vine Writer - Type to Grow Organic VinesThis sketch turns your keyboard into a gardening tool: every key you press spawns a curving, noise-driven vine that grows upward from your cursor. Vowels blossom into soft pink or gold flowers while consonants sprout leafy green stems, turning typed words into a living, glowing garden on a dark background.
Key Skills:
|
📖 Read Docs 👁️ View |
| 60 |
|
AI Constellation Drawer - Create Your Own Star Patterns - xelsed.aiThis sketch fills the screen with dozens of gently twinkling stars set against a deep blue gradient sky, and lets you click any two stars to draw a glowing white line between them - building your own constellation. Stars glow brighter under the mouse and while selected, and a subtle parallax effect makes the whole starfield drift as you move your cursor.
Key Skills:
|
📖 Read Docs 👁️ View |
| 61 |
|
Falling Snow with Accumulation - xelsed.aiThis sketch creates a peaceful winter night scene where 200 snowflakes drift and sway downward from a dark blue sky. Each flake lands wherever it touches the ground (or a pile of earlier snow) and adds to a growing snowdrift, so the accumulation visibly builds up over time across the bottom of the screen.
Key Skills:
|
📖 Read Docs 👁️ View |
| 62 |
|
Pendulum Wave Symphony - xelsed.aiThis sketch recreates the classic physics 'pendulum wave' demonstration using 16 glowing colored balls that swing at slightly different speeds. Because each pendulum has a period tuned to complete one more swing than its neighbor over a 20-second cycle, the balls start perfectly aligned, drift into hypnotic wave and spiral patterns, then slowly re-align again.
Key Skills:
|
📖 Read Docs 👁️ View |
| 63 |
|
AI Bouncing Ball - Xelsed p5flash-alpha02This sketch animates a glowing ball that bounces around the browser window, leaving a soft fading trail behind it. Every time it hits an edge it flips direction, picks a brand new vibrant color, and casts a subtle drop shadow, all rendered using p5.js's HSB color mode.
Key Skills:
|
📖 Read Docs 👁️ View |
| 64 |
|
SpaceTeatherAbyssal Anchor is a whack-a-mole style arcade game where you swing a glowing lure on a physics-driven tether to smash jellyfish and sharks before they reach your core. A live 8-bit chiptune soundtrack, screen shake, and particle bursts sell every hit, all generated with p5.js and p5.sound instead of audio files.
Key Skills:
|
📖 Read Docs 👁️ View |
| 65 |
|
AI Neon Sign - Type Your Own Glowing TextThis sketch turns any text you type into a glowing neon sign, complete with a flickering animated glow and a dark brick wall backdrop. Click anywhere to cycle through three vibrant neon color palettes, and the sign resizes automatically to fill your browser window.
Key Skills:
|
📖 Read Docs 👁️ View |
| 66 |
|
loadrunnerThis sketch recreates the classic arcade game Lode Runner: a player runs, climbs ladders, collects gold, and digs holes to trap chasing enemies, all rendered with hand-drawn retro pixel-art tiles and synthesized 8-bit sound effects. It also ships a built-in ASCII level editor so players can design and instantly play their own levels.
Key Skills:
|
📖 Read Docs 👁️ View |
| 67 |
|
AI Ink Flow Meditation - Zen Calligraphy Brush Simulation - xelsed.aiThis sketch turns the whole browser window into a sheet of textured rice paper where dragging the mouse paints flowing ink strokes that pool, bleed at the edges, and slowly dry. If you stop moving for a few seconds, pink cherry blossom petals drift down across the canvas.
Key Skills:
|
📖 Read Docs 👁️ View |
| 68 |
|
AI Flow Field - Perlin Noise Particle Trails Mesmerizing generative art using Perlin noise flow fieThis sketch fills the screen with 2000 tiny particles that drift along an invisible, ever-shifting Perlin noise flow field. Each particle leaves a thin colored trail behind it, and because the field slowly evolves over time, the whole canvas fills with swirling, silk-like ribbons of hue that never quite repeat.
Key Skills:
|
📖 Read Docs 👁️ View |
| 69 |
|
AI Music Visualizer Rings - Audio Frequency Art Watch neon concentric rings pulse to your music! UsThis sketch turns live microphone audio (or a fallback oscillator) into three glowing neon rings that pulse outward with bass, mid, and treble energy. Each ring smoothly eases toward a target radius driven by p5.FFT frequency analysis, creating a hypnotic, club-visualizer feel entirely in the browser.
Key Skills:
|
📖 Read Docs 👁️ View |
| 70 |
|
AI Pendulum Wave - Mesmerizing Physics Simulation Watch multiple pendulums of varying lengths swingThis sketch simulates a classic pendulum wave: dozens of pendulums with carefully calculated lengths swing from a shared anchor point, drifting in and out of sync to create hypnotic, ever-shifting wave patterns. Glowing HSB-colored trails fade slowly on an offscreen buffer, turning simple physics into a flowing light painting that responds live to gravity and pendulum-count sliders.
Key Skills:
|
📖 Read Docs 👁️ View |
| 71 |
|
AI Quest Master v2 - Fantasy RPG - xelsed.aiThis sketch builds a branching fantasy text adventure where a simulated AI Quest Master drives the story through a big lookup table of narrative states. As the story moves between forest, cave, castle, and plains locations, the p5.js canvas procedurally redraws a matching background scene while DOM elements outside the canvas display health, inventory, and clickable choice buttons.
Key Skills:
|
📖 Read Docs 👁️ View |
| 72 |
|
AI Zen Garden - Rake Peaceful Patterns in SandThis sketch turns your browser into a raked sand garden: dragging the mouse carves smooth, ridged grooves into a noise-textured sand background, clicking drops a stone, and pressing R smooths everything back to a fresh, randomly-stoned garden.
Key Skills:
|
📖 Read Docs 👁️ View |
| 73 |
|
AI Liquid Chrome Mirror - Mouse Velocity Metallic Distortion - xelsed.aiThis WEBGL sketch raymarches a chrome-like sphere in real time, deforming its surface with sine-wave ripples whenever the mouse moves. The faster the cursor travels, the stronger the ripples become, while the reflective surface renders a fake procedural environment in shifting blues and purples for a molten-metal look.
Key Skills:
|
📖 Read Docs 👁️ View |
| 74 |
|
Tesseract Portal — 4D Hypercube ProjectionThis sketch renders a 4-dimensional hypercube (tesseract) that rotates through 4D space and gets mathematically projected down into the 3D WEBGL canvas as a glowing wireframe. Dragging the mouse steers the rotation speed, clicking toggles auto-rotation, and pressing R randomizes the spin, making the shape feel like a living portal.
Key Skills:
|
📖 Read Docs 👁️ View |
| 75 |
|
Matrix Digital Rain - xelsed.aiThis sketch recreates the iconic Matrix 'digital rain' - columns of glowing green symbols that continuously scream down a black canvas, each column moving at its own speed with a bright leading character and a fading trail behind it. Semi-transparent backgrounds and Canvas 2D glow effects give the characters a soft neon shimmer, while random character-switching makes the whole screen flicker like scrolling code.
Key Skills:
|
📖 Read Docs 👁️ View |
| 76 |
|
AI Moon Phase Display - Tonight's Lunar PhaseThis sketch renders a peaceful night sky filled with 200 twinkling stars alongside a large moon whose illuminated shape and text label update automatically based on today's calendar date. The moon's shadow shrinks and grows across the visual, cycling through all eight named lunar phases as the day of the month changes.
Key Skills:
|
📖 Read Docs 👁️ View |
| 77 |
|
AI Fortune Cookie - Crack Open Your AI-Generated DestinyThis sketch draws a golden fortune cookie that cracks open when clicked, splitting into two halves while a paper slip grows out from the center. The fortune text and lucky numbers on that slip are generated live by calling OpenAI's GPT-4o-mini API, so every crack reveals a fresh, AI-written fortune.
Key Skills:
|
📖 Read Docs 👁️ View |
| 78 |
|
AI Cellular Automaton Lab - Conway's Game of Life Classic cellular automaton simulation! Click or dThis sketch brings Conway's Game of Life to your browser as an interactive grid of neon-green cells on a dark background. You can click or drag to draw your own starting pattern, then press spacebar to watch it evolve generation by generation according to simple birth/death rules.
Key Skills:
|
📖 Read Docs 👁️ View |
| 79 |
|
AI Magic 8-Ball - Shake for Mystical AnswersThis sketch turns a plain canvas into a glowing, interactive Magic 8-Ball set against a twinkling starfield. Clicking inside the ball makes it wobble like it's being shaken, then a random fortune fades into view inside a translucent blue triangle.
Key Skills:
|
📖 Read Docs 👁️ View |
| 80 |
|
AI Melting Clock - Dali-Inspired Surreal Time DisplayThis sketch draws a Salvador Dali-style 'Persistence of Memory' clock that lives inside a warm sunset-to-purple gradient. The clock face, its hour numbers, and its hands constantly wobble and droop using Perlin noise, while pink drops periodically ooze off the bottom of the clock and fall like melting wax.
Key Skills:
|
📖 Read Docs 👁️ View |
| 81 |
|
AI Metaball Lava Lamp - Hypnotic Blob Fusion Watch colorful blobs float and merge like a real lavaThis sketch renders a hypnotic lava-lamp effect where 6 softly glowing blobs drift around the screen and smoothly melt into one another whenever they get close. It uses a classic 'metaball' field algorithm - summing the influence of each blob at every pixel - to decide where blob surfaces appear and how their orange-to-magenta color blends.
Key Skills:
|
📖 Read Docs 👁️ View |
| 82 |
|
AI Xylophone - Rainbow Musical Bars Click the colorful bars to play musical notes! A playful xylophThis sketch renders an interactive xylophone with 8 rainbow-colored bars that play notes of a C major scale when clicked. Bars bounce with a spring animation and mallets follow the mouse cursor, all set against a soft gradient background inside a wooden frame.
Key Skills:
|
📖 Read Docs 👁️ View |
| 83 |
|
AI Breathing Guide - Calm Your Mind with Visual BreathingThis sketch draws a full-screen meditation aid: a soft glowing circle that smoothly grows and shrinks on a 12-second cycle to guide the viewer's inhale, hold, exhale, and hold. A drifting particle field and a hand-rolled vertical gradient give the whole scene a calm, atmospheric feel.
Key Skills:
|
📖 Read Docs 👁️ View |
| 84 |
|
AI Sunrise Animation - Dawn Breaks with StarsThis sketch paints a slow, continuous sunrise: stars twinkle in a deep purple sky, the sky gradient shifts through dawn pinks into daytime blue, a glowing sun climbs from the horizon, wispy clouds catch the light, and a black mountain silhouette frames the whole scene.
Key Skills:
|
📖 Read Docs 👁️ View |
| 85 |
|
AI Stopwatch Timer - Clean Start/Stop UtilityThis sketch creates a fully functional digital stopwatch centered on the screen, showing minutes, seconds, and centiseconds in a large monospace font. A green START button and a red STOP button let you begin and pause the timer, with the elapsed time correctly resuming from where it left off.
Key Skills:
|
📖 Read Docs 👁️ View |
| 86 |
|
AI Clumsy Robot - Watch It Fail at StairsThis sketch animates a small robot that endlessly repeats a four-phase slapstick loop: walking up to a staircase, attempting to climb it, tumbling backward in a dramatic fall, and sheepishly walking back to try again. Speech bubbles ('I got this!' / 'Ow...') and an attempts counter reinforce the comedic, persistent-but-clumsy character.
Key Skills:
|
📖 Read Docs 👁️ View |
| 87 |
|
AI Growing Plant - Seed to Flower JourneyThis sketch animates a plant's entire life cycle in a single continuous ten-second sequence: a brown seed sits in soil, sprouts a green stem, grows two leaves, and finally opens into a six-petaled flower with a glowing yellow center. A text label at the top tracks the current stage (Seed, Sprouting, Growing, Blooming, Full Bloom!) so the viewer always knows where the plant is in its journey.
Key Skills:
|
📖 Read Docs 👁️ View |
| 88 |
|
Neon Radar Pulse Rings - xelsed.aiThis sketch generates an endless sequence of glowing rings that expand outward from the center of the screen like radar pulses or ripples in water. Each ring is drawn in a random neon color (pink, cyan, or purple) and gradually grows, thins, and fades to nothing using HSB color mode and linear interpolation.
Key Skills:
|
📖 Read Docs 👁️ View |
| 89 |
|
Neon Audio Visualizer - xelsed.aiThis sketch fakes a music visualizer using 32 vertical bars that rise and fall as if reacting to a beat, even though no real audio is involved. A purple-to-cyan color gradient sweeps across the bars, and a semi-transparent mirrored reflection fades out beneath them for a glossy, neon club aesthetic.
Key Skills:
|
📖 Read Docs 👁️ View |
| 90 |
|
AI 3D Game of Life - Conway's Automata in SpaceThis sketch simulates Conway's Game of Life extended into three dimensions, animating a rotating 10x10x10 cube of neon-green blocks that live, die, or are born based on their 26 neighboring cells. The whole grid slowly spins in WEBGL 3D space, and clicking the canvas reshuffles the cells to start a fresh evolution.
Key Skills:
|
📖 Read Docs 👁️ View |
| 91 |
|
AI Laser Harp - Rainbow Light Instrument Play music with light! Move your mouse across the rainbowThis sketch turns your mouse cursor into a light-triggered instrument by drawing eight vertical, rainbow-colored laser beams across the screen. Moving the cursor through a beam plays a musical note from a C major scale while the beam glows brighter, creating a synesthetic light-and-sound experience.
Key Skills:
|
📖 Read Docs 👁️ View |
| 92 |
|
AI Aurora Borealis Generator - Dancing Northern Lights Simulation - xelsed.aiThis sketch simulates the northern lights: a gradient night sky filled with twinkling stars, flowing ribbons of green, teal, and purple aurora light rendered with additive blending and Perlin noise, occasional bright flares that shoot upward, and a silhouette of pine trees along the horizon. Moving the mouse nudges the direction the aurora curtains drift.
Key Skills:
|
📖 Read Docs 👁️ View |
| 93 |
|
AI Neon Rain City - Cyberpunk Rainy Night Simulation - xelsed.aiThis sketch renders a moody cyberpunk skyline at night, with silhouetted buildings, flickering neon signs, wind-driven rain, spreading ripples, drifting fog, and the occasional lightning flash. Moving the mouse left and right controls the wind, tilting every raindrop's fall angle in real time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 94 |
|
AI Lissajous Explorer - Mathematical Spirograph Patterns - xelsed.aiThis sketch draws a glowing, colorful Lissajous curve - a classic mathematical spirograph pattern created by combining two sine waves at different frequencies. Three sliders let you control the A and B frequencies and the phase offset, instantly reshaping the curve from a circle into figure-eights and intricate woven patterns.
Key Skills:
|
📖 Read Docs 👁️ View |
| 95 |
|
AI Pixel Canvas - Draw Retro Pixel ArtThis sketch turns the canvas into a 16x16 pixel-art editor: you click or drag across a grid of squares to paint them with a color chosen from an 8-swatch palette at the bottom, and pressing C wipes everything back to white.
Key Skills:
|
📖 Read Docs 👁️ View |
| 96 |
|
AI Dungeon Master - Procedural Adventure - xelsed.aiThis sketch turns OpenAI's chat model into a living Dungeon Master: every choice you click is sent to GPT-3.5, which replies with narrative text plus structured JSON describing your health, inventory, and the current scene. p5.js reads that JSON every frame and procedurally paints the matching setting - forest, cave, castle, village, or river - complete with time-of-day gradients, weather effects, and scattered story elements like monsters or treasure chests.
Key Skills:
|
📖 Read Docs 👁️ View |
| 97 |
|
Flocking Birds - Boids Algorithm - xelsed.aiThis sketch simulates a flock of 100 birds using Craig Reynolds' classic boids algorithm, where each bird follows three simple local rules - separation, alignment, and cohesion - that combine into complex, lifelike swarming motion. A soft blue sky gradient with a subtle trail effect makes the flock look like it's gliding through open air.
Key Skills:
|
📖 Read Docs 👁️ View |
| 98 |
|
orb-warsOrb Run is a full arcade-style game where you steer a glowing orb with your mouse, dodge homing enemies that spawn from the screen edges, and collect pulsing orbs to raise your score before difficulty ramps up over time. It combines a menu/playing/game-over state machine, procedural gradient backgrounds, particle-style trails, and generative p5.sound audio into one self-contained sketch.
Key Skills:
|
📖 Read Docs 👁️ View |
| 99 |
|
AI Sound Wave Terrain - Interactive Frequency Mesh Visualization - xelsed.aiThis sketch renders an animated 3D-style terrain mesh made of sine waves, where the mouse controls both the frequency of the ripples (X axis) and how tall the peaks and valleys become (Y axis). The mesh is colored with a height-based gradient running from deep blue valleys through cyan and yellow up to fiery orange peaks, giving the impression of a glowing audio-frequency landscape.
Key Skills:
|
📖 Read Docs 👁️ View |
| 100 |
|
AI Voronoi Crystals - Stained Glass Tessellation Beautiful crystal formations using Voronoi diagramThis sketch generates a living stained-glass window by scattering colorful seed points across the canvas and computing the Voronoi diagram between them every frame. Each cell is filled with a slowly pulsing HSB color and outlined with a soft glowing edge, while the seeds themselves drift and bounce off the canvas walls, so the whole mosaic subtly reshapes itself forever. Clicking anywhere on the canvas drops a brand new seed, instantly splitting nearby cells and growing the crystal pattern.
Key Skills:
|
📖 Read Docs 👁️ View |