📖 Code Guides - Complete Catalog
Comprehensive table of contents for all 567 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.
567 fully documented sketches · Organized by creation date · Real concepts from AI-generated docs
| # | Preview | Sketch Details | Actions |
|---|---|---|---|
| 101 |
|
AI Creature Evolution - xelsed.aiThis sketch simulates a mini ecosystem where circular creatures wander the canvas hunting for green food pellets, growing when they eat, splitting into mutated offspring when large enough, and dying when they starve. Over time genetic traits like vision radius and turning speed drift through mutation, creating an evolving population, while the Web Speech API narrates milestones out loud.
Key Skills:
|
📖 Read Docs 👁️ View |
| 102 |
|
Hypnotic Lava Lamp - xelsed.aiThis sketch simulates a classic lava lamp: soft, glowing orange-yellow blobs made of noisy, wobbling blob shapes drift slowly upward and downward inside a dark purple glass tube. The blobs use Perlin noise to squash, stretch, and wobble organically, and glow via canvas shadow blur combined with additive blending to make overlapping blobs brighten each other.
Key Skills:
|
📖 Read Docs 👁️ View |
| 103 |
|
AI Coin Flip - Heads or Tails with StatsThis sketch creates an animated gold coin that flips end-over-end when clicked, using a squishing scale trick to fake a 3D flip, then lands on a random Heads or Tails result. A running tally of heads versus tails is displayed below the coin, turning a simple click interaction into a tiny stats-tracking toy.
Key Skills:
|
📖 Read Docs 👁️ View |
| 104 |
|
AI Mind Reader - xelsed.aiThis sketch creates an interactive 'AI Mind Reader' where a glowing neon brain pulses with animated neural connections while the user types cryptic hints into a text box. Each hint is sent to the OpenAI API, and the AI's guess floats away from the brain as a fading neon text bubble, accompanied by spoken audio feedback via the Web Speech API.
Key Skills:
|
📖 Read Docs 👁️ View |
| 105 |
|
AI Symmetry Canvas - Kaleidoscope Drawing with 6-Fold Mirroring - xelsed.aiThis sketch turns mouse movement into a mesmerizing mandala by mirroring every line segment you draw six times around the center of the canvas. Colors shift through the rainbow based on the angle from center, and a subtle fade effect leaves gentle trails as the pattern builds up.
Key Skills:
|
📖 Read Docs 👁️ View |
| 106 |
|
AI Dying Battery - Watch the Panic UnfoldThis sketch renders a looping animated battery icon that visually drains from 100% down to 0% over a fixed cycle, changing color from green to yellow to red and swapping in increasingly panicked text messages as the charge falls. Once it hits 0%, it instantly loops back to full and starts again, forever repeating the anxiety spiral.
Key Skills:
|
📖 Read Docs 👁️ View |
| 107 |
|
TooneTouchTooneTouch fills the screen with a 10x10 grid of circles that glow, pulse, and play musical notes when you click them. Left alone, the piece drifts into an autonomous 'idle mode' where it plays itself, cycling background colors and triggering random cells to a soft ambient drone.
Key Skills:
|
📖 Read Docs 👁️ View |
| 108 |
|
AI Ecosystem Oracle - xelsed.aiThis sketch simulates a living ecosystem of colorful blob creatures that wander, eat food, grow, split into offspring, and die of old age. A text box lets you type commands like 'feast' or 'plague' to an AI oracle, which calls OpenAI's API to interpret your intent and unleash an effect on the whole population, complete with a spoken prophecy.
Key Skills:
|
📖 Read Docs 👁️ View |
| 109 |
|
Deomo Of Ai codingThis sketch creates a mesmerizing swarm of 160 glowing orbs that orbit a shifting center point, each pulsing with color and wobbling in radius. Additive blending and translucent trail overlays combine to produce a hypnotic, glowing particle field that gently follows the mouse.
Key Skills:
|
📖 Read Docs 👁️ View |
| 110 |
|
AI Synth Pad - Interactive Musical Grid Click the colorful pads to play musical tones! A 4x4 grid oThis sketch creates a glowing 4x4 grid of colorful synth pads that each play a note from a C major scale when clicked. Clicking a pad triggers a sine-wave tone through p5.Oscillator and flashes a bright HSB-colored glow that smoothly fades away, turning the canvas into a playable, visually reactive instrument.
Key Skills:
|
📖 Read Docs 👁️ View |
| 111 |
|
AI Breathing Mandala - Meditative Geometric Animation - xelsed.aiThis sketch renders a glowing, symmetrical mandala made of concentric rings of circles, triangles, and hexagons that smoothly expand and contract like a breathing rhythm. Moving the mouse toward the center speeds up the breathing cycle, while soft glowing dust particles drift in the background for a calm, meditative atmosphere.
Key Skills:
|
📖 Read Docs 👁️ View |
| 112 |
|
AI Boids Flocking - Emergent Swarm Intelligence Watch 100 birds flock together using Craig ReynoldsThis sketch simulates a flock of 100 triangular birds ('boids') that move around the screen following three simple local rules — separation, alignment, and cohesion — plus a fourth rule that makes them flee the mouse cursor like a predator. No bird is told to flock; the group behavior emerges purely from each boid reacting to its nearby neighbors.
Key Skills:
|
📖 Read Docs 👁️ View |
| 113 |
|
AI Raindrop Symphony - Musical Rain Visualization Watch raindrops fall and create music! Each dropThis sketch simulates gentle rainfall on a dark blue gradient background, where each raindrop that hits the bottom creates an expanding ripple, a burst of splash particles, and a soft musical note. Clicking anywhere increases the intensity of the rain and unlocks audio playback.
Key Skills:
|
📖 Read Docs 👁️ View |
| 114 |
|
Simple MineCraft ClineThis sketch is a playable side-scrolling Minecraft-style sandbox built entirely in p5.js: a Perlin-noise-generated world of grass, dirt, stone, wood and leaves that you can walk across, jump on, dig into, and rebuild block by block using a five-slot hotbar. It supports keyboard, mouse, and on-screen touch controls, and gives audio feedback for jumping, placing, breaking, and selecting blocks using p5.sound oscillators and noise.
Key Skills:
|
📖 Read Docs 👁️ View |
| 115 |
|
AI Excuse Generator - Why I Can't Work TodayThis sketch generates a stream of increasingly ridiculous work excuses in floating speech-bubble shapes every time you click. Bubbles drift upward and fade out as they rise, and the pool of excuses escalates from mild to absurd the more you click, tracked by an on-screen counter.
Key Skills:
|
📖 Read Docs 👁️ View |
| 116 |
|
Spinning Rainbow Color Wheel - xelsed.aiThis sketch draws a six-wedge rainbow pie chart that rotates continuously in the center of a black canvas. Each wedge is drawn with p5.js's arc() function in PIE mode, and a slowly incrementing rotation angle applied every frame creates the spinning hypnotic effect.
Key Skills:
|
📖 Read Docs 👁️ View |
| 117 |
|
FRACTAL GARDEN2This sketch simulates a living cross-section of soil where Perlin-noise nutrients drift and diffuse, seeds fall from the sky and germinate when the ground is fertile enough, and surviving seeds grow into branching plants using L-system turtle graphics. Random events like seed showers, droughts, and blooms periodically reshape the miniature ecosystem, while a scrolling timeline tracks population and soil fertility over time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 118 |
|
AI Inverse Kinematics Tentacle - Snake Chain Animation Mesmerizing snake-like chain that follows yoThis sketch creates a mesmerizing snake-like tentacle made of 15 connected segments that smoothly chases the mouse cursor using inverse kinematics. The tentacle wobbles organically as it moves, colored in a gradient from purple at the head to cyan at the tail, with a glowing circular tip.
Key Skills:
|
📖 Read Docs 👁️ View |
| 119 |
|
AI Theremin Simulator - Spooky Sci-Fi Instrument Move your mouse to play the classic electronic insThis sketch turns your mouse into a virtual theremin - moving it left/right changes pitch and up/down changes volume, while a glowing sci-fi visualizer pulses in sync with the sound using p5.sound's Oscillator and Amplitude analyzer.
Key Skills:
|
📖 Read Docs 👁️ View |
| 120 |
|
AI Bongo Drums - Tribal Percussion Instrument Tap the bongos to play! Left drum plays low tone, rigThis sketch draws two 3D-styled bongo drums that you can click or tap to play realistic percussive tones. Each drum reacts to where you hit it with a squashing 'skin depression' animation and a pitch/volume change based on hit accuracy, all wrapped in a warm, spotlighted tribal-themed background.
Key Skills:
|
📖 Read Docs 👁️ View |
| 121 |
|
Rainbow Spirograph - xelsed.aiThis sketch draws an animated spirograph using the hypotrochoid equation - the classic 'circle rolling inside a circle' curve. A glowing rainbow line is traced point by point onto a persistent off-screen layer, so the pattern slowly builds into an intricate, colorful geometric artwork over time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 122 |
|
AI Daydreaming Fish - Dreams of the OceanThis sketch draws a little orange fish swimming back and forth inside a circular bowl, releasing tiny bubbles that drift upward and disappear. Above the bowl, a cloud-shaped thought bubble cycles through three dreams - 'The Ocean', 'Freedom', and 'A Bigger Bowl' - giving the fish a wistful, storytelling quality.
Key Skills:
|
📖 Read Docs 👁️ View |
| 123 |
|
Neon Pulse Rings - xelsed.aiThis sketch creates a mesmerizing tunnel effect using concentric neon-colored rings that continuously expand outward from the center of the screen and fade away. Each ring is a class instance that tracks its own size and transparency, and additive blending makes overlapping rings glow brighter, simulating a neon light effect.
Key Skills:
|
📖 Read Docs 👁️ View |
| 124 |
|
WordleThis sketch recreates Wordle, the daily word-guessing game, using object-oriented p5.js code. Players type 5-letter guesses into a grid of boxes and get color-coded feedback (green, yellow, gray) both on the grid and on an on-screen keyboard, until they guess the secret word or run out of six tries.
Key Skills:
|
📖 Read Docs 👁️ View |
| 125 |
|
FractalGardenThis sketch grows a living miniature ecosystem: a shifting band of soil rendered from a nutrient grid that diffuses and regenerates around hidden wells, while seeds drift down through gravity and wind, land in the dirt, and sprout into branching, shape-specific plants that compete for nutrients and space.
Key Skills:
|
📖 Read Docs 👁️ View |
| 126 |
|
AI Procrastinating Rocket - Countdown with ExcusesThis sketch draws a cartoon rocket sitting on a launch pad under a bobbing cloud sky, counting down from 10 - but it almost never reaches zero. Every second there's a chance the countdown interrupts itself with a silly excuse ('Wait, did I leave the stove on?'), resets to 10, and tallies up another failed launch attempt.
Key Skills:
|
📖 Read Docs 👁️ View |
| 127 |
|
AI Wind Chimes - Peaceful Garden Sounds Click to make the chimes swing and play! 5 hanging tubes ofThis sketch simulates a set of five hanging wind chime tubes that sway like pendulums and play a soft sine-wave tone whenever you click. Each tube has its own length, pitch, and swing speed, and a painted background of hills, sun, and grass gives the whole scene a peaceful garden feel.
Key Skills:
|
📖 Read Docs 👁️ View |
| 128 |
|
AI Ant Journey - Watch the Little WorkerThis sketch animates a lone ant walking across a dirt-colored canvas, steering around rocks, sticks, and puddles as it carries a leaf crumb back to its nest. Every time the ant reaches the nest, a delivery counter increments and a brand new set of obstacles and a starting position are generated, so the little journey repeats forever with a different layout each time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 129 |
|
AI Squishy Blob - Poke the Jelly CreatureThis sketch renders a soft, wobbly blob made of 24 connected points that stretches and squishes in response to the mouse. The blob chases your cursor when you click-drag near it, has googly eyes that always look at the mouse, and sits on a smooth pastel gradient background.
Key Skills:
|
📖 Read Docs 👁️ View |
| 130 |
|
Jellyfish Aquarium Attempt - xelsed.aiThis sketch renders a tranquil deep-sea aquarium where glowing jellyfish drift upward and sway through Perlin-noise currents above a hand-painted gradient ocean floor. Soft particles drift like plankton in the background while the jellyfish glow using additive blending, giving them a true bioluminescent look.
Key Skills:
|
📖 Read Docs 👁️ View |
| 131 |
|
AI Coffee Cooling - Watch Your Drink Get ColdThis sketch simulates a cup of coffee slowly cooling from 180°F down to room temperature, with rising steam that fades as the drink cools and status messages that appear at key temperature thresholds. The cup itself subtly shifts color from a warm tan to a cooler gray-brown as it loses heat, and steam particles are spawned, animated, and removed continuously to create a living, breathing thermal simulation.
Key Skills:
|
📖 Read Docs 👁️ View |
| 132 |
|
AI Day Pie Clock - Time as a Shrinking PieThis sketch turns the current time of day into a giant pie chart: a dark wedge grows clockwise from midnight to show how much of the day has already passed, while the lighter remaining slice shrinks. The exact time and hours left until midnight are printed in the center, and the remaining slice changes color to orange and then red as the evening gets late.
Key Skills:
|
📖 Read Docs 👁️ View |
| 133 |
|
Iridescent Soap Bubbles - xelsed.aiThis sketch creates a continuous stream of translucent soap bubbles that spawn near the bottom of the screen, drift upward with a gentle side-to-side wobble, and pop after a random lifespan. Each bubble is rendered with an animated iridescent radial gradient plus a highlight arc, all sitting on top of a soft blue vertical gradient background.
Key Skills:
|
📖 Read Docs 👁️ View |
| 134 |
|
- xelsed.aiThis sketch animates a glowing gradient ball that bounces around the full browser window, leaving behind a slowly fading trail. It combines classic velocity-based motion with the raw HTML5 Canvas API to create a radial gradient that makes the ball look like a glossy 3D sphere.
Key Skills:
|
📖 Read Docs 👁️ View |
| 135 |
|
AI Watercolor Canvas - Paint with Soft BlendingThis sketch turns the browser window into a soft, meditative watercolor canvas where dragging the mouse lays down translucent, overlapping blobs of color that blend naturally with the paper and with each other. A speckled cream paper texture sits underneath, and a row of color-swatch buttons at the bottom lets you switch paint colors or clear the canvas with the C key.
Key Skills:
|
📖 Read Docs 👁️ View |
| 136 |
|
Fractal ForestThis sketch simulates a living patch of soil where nutrient-rich earth glows and drifts like breathing tissue, seeds fall from a starry night sky, and germinated seeds grow into branching plants using L-system grammar rules. Dead plants decay, return nutrients as glowing particles, and sometimes spawn spreading fungus, while a scrolling timeline chart tracks population and soil fertility over time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 137 |
|
Shawns_RemixThis sketch loads the Betty Botter tongue-twister from a text file, breaks it into individual words, and shuffles them into a fresh random arrangement every time you click. The result is a playful word-remix poem that reflows to fit the browser window.
Key Skills:
|
📖 Read Docs 👁️ View |
| 138 |
|
AI Ocean Waves - Calming MeditationThis sketch paints a tranquil ocean scene using a vertical sky-to-deep-water gradient behind three overlapping sine-wave shapes. Each wave layer moves at its own speed and height, creating a soft parallax effect that mimics water gently lapping near a shore.
Key Skills:
|
📖 Read Docs 👁️ View |
| 139 |
|
AI Rain Window - Meditative RainfallThis sketch fills the screen with 120 individual raindrops that fall down a softly blurred, gradient night-sky background. Drops sway gently side to side, some slow down and 'stick' partway down leaving a glowing vertical trail behind them, and occasional soft lightning flashes brighten the whole scene.
Key Skills:
|
📖 Read Docs 👁️ View |
| 140 |
|
Glowing Bouncing Ball with Fading Trail - xelsed.aiThis sketch fills the screen with soft pastel bubbles that rise from the bottom, wobble side to side using Perlin noise, and shimmer with an animated highlight. When a bubble drifts off the top of the screen it 'pops', releasing a small burst of fading particles, while a smooth vertical gradient fills the background behind everything.
Key Skills:
|
📖 Read Docs 👁️ View |
| 141 |
|
Starfield Attempt - xelsed.aiThis sketch simulates a classic 'warp speed' starfield, where hundreds of stars rush outward from the center of the screen toward the viewer. Each star accelerates as it approaches, and a semi-transparent background creates streaking light trails behind every star, mimicking the visual of a spaceship jumping to lightspeed.
Key Skills:
|
📖 Read Docs 👁️ View |
| 142 |
|
IrishWristWatchScrableThis sketch takes the tongue-twister 'I wish to wash my Irish wristwatch.' and shatters it into individual letters, scattering each one to a random spot on the canvas. The result looks like the phrase exploded and froze mid-air, with letters floating independently across the screen.
Key Skills:
|
📖 Read Docs 👁️ View |
| 143 |
|
Sketch 2026-02-13 23:51This sketch builds a mini GTA-style open-world prototype entirely with three.js, using p5.js only as a bootstrapper for setup/preload and a synthetic gunshot sound. A drivable car, a first-person on-foot character with a gun, and 50 wandering NPCs populate a procedurally scattered city of boxy buildings and roads, and pressing 'E' swaps you between driving the car and walking around shooting NPCs with raycasting.
Key Skills:
|
📖 Read Docs 👁️ View |
| 144 |
|
AI Firefly Meadow - Peaceful Night Scene - xelsed.aiThis sketch creates a peaceful animated night meadow where 70 glowing fireflies drift using Perlin noise and gently gravitate toward the mouse cursor, while 100 stars twinkle above against a gradient sky. Soft blur filters and fading trail rectangles give the fireflies a dreamy, organic glow.
Key Skills:
|
📖 Read Docs 👁️ View |
| 145 |
|
SKIP - xelsed.aiThis sketch draws a single pink circle that continuously orbits around the center of the browser window in a smooth elliptical loop. The motion is created purely with trigonometry (sine and cosine) tied to the animation's frame count, and the canvas automatically resizes to fill the entire browser window.
Key Skills:
|
📖 Read Docs 👁️ View |
| 146 |
|
Try to get the highest score!This sketch is a 20-second arcade game where you swing a glowing sword across two eerie, eye-tracking space monsters to score points before time runs out. It layers a slowly animated Perlin-noise nebula and twinkling starfield behind the action, and uses custom line-circle collision math to detect sword slashes.
Key Skills:
|
📖 Read Docs 👁️ View |
| 147 |
|
SystemTest2This sketch splits the screen into four live panels that each demonstrate a different hardware capability p5.js can access: mouse/touch input with ripple effects, device motion and compass sensors, live webcam video, and a microphone-reactive 3D cube rendered with WebGL. It works as an interactive test harness where every quadrant reacts instantly to a different piece of hardware.
Key Skills:
|
📖 Read Docs 👁️ View |
| 148 |
|
CatEastHatThis sketch creates a playful interactive scene where a cartoon cat, controlled by your mouse or finger, chases and 'eats' a randomly placed hat. Once the cat's head gets close enough to the hat, the hat disappears and a fun message appears, letting you click to reset and play again.
Key Skills:
|
📖 Read Docs 👁️ View |
| 149 |
|
AI Fake Loading Bar - Absurd Excuses GeneratorThis sketch creates a satirical loading bar that appears to load forever, crawling up to about 87% before slowing to a near-standstill and occasionally slipping backwards. A rotating list of increasingly absurd excuse messages plays underneath, and a 'Cancel' button that mockingly relabels itself 'Nice try' when clicked completes the joke about broken software UX.
Key Skills:
|
📖 Read Docs 👁️ View |
| 150 |
|
SKIPPEDThis sketch creates a peaceful twilight meadow scene with layered grass, twinkling stars, tree silhouettes, and glowing fireflies that drift organically through the air. The scene uses Perlin noise for natural motion, gradient skies, and additive blending to make the fireflies glow convincingly.
Key Skills:
|
📖 Read Docs 👁️ View |