📖 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 |
|---|---|---|---|
| 1 |
|
DRIFT STARS (FINAL RELEASE)Drift Stars is a full browser-based 3D arcade driving game built entirely in p5.js WEBGL mode. You drift a customizable car around a procedurally scattered cityscape of glowing cone obstacles, leave skidmarks and smoke trails, get chased by an escalating wanted system with five tiers of cop vehicles, and can hop out to explore on foot in first-person, all wrapped in a menu/shop/customizer flow built with plain HTML overlays.
Key Skills:
|
📖 Read Docs 👁️ View |
| 2 |
|
potato ai 2.0 OFFICALThis sketch is a joke chatbot called 'Potato AI 2.0' built entirely with p5.js DOM functions instead of the canvas. You type messages into a text box and a potato-themed 'AI' named larry replies with puns, random meme images, follow-up questions, or glitchy nonsense, plus a few hidden easter eggs like a fake Rickroll and a full-screen 'code chaos' sequence.
Key Skills:
|
📖 Read Docs 👁️ View |
| 3 |
|
The best snake gameThis sketch builds a complete Snake game inside a single p5.js canvas, including a clickable main menu, a paginated outfit-selection screen with unlockable skins, core snake gameplay, and a game-over screen. It also wires up an HTML/CSS admin panel that lets you tweak speed, score, lives, and snake length live while the game runs.
Key Skills:
|
📖 Read Docs 👁️ View |
| 4 |
|
Don't go too hard on the speaker bro🫠This sketch turns your microphone into a live visual instrument: a swarm of colorful little 'cars' chases your mouse and bounces off each other, a spectrum analyzer and pulsing circle react to sound in real time, and a goofy stickman starts dancing whenever the room gets loud enough.
Key Skills:
|
📖 Read Docs 👁️ View |
| 5 |
|
Snail gameThis sketch is a full arcade game where a snail glides around eating red food, dodging grey obstacles, and collecting speed-boosting candy and a screen-clearing pickaxe. It wraps the game in a complete menu system - start screen, map select, instructions, avatar shop, and an admin cheat panel - with progress saved to the browser's localStorage.
Key Skills:
|
📖 Read Docs 👁️ View |
| 6 |
|
Sketch 2026-03-01 14:38This sketch builds a full 'Snake Game Deluxe' with a start menu, character-skin selection, classic grid-based snake movement, and a persistent unlock system stored in the browser's localStorage. Players steer a snake with arrow keys to eat food and raise their score, while reaching score milestones unlocks new colored snake skins that persist between visits.
Key Skills:
|
📖 Read Docs 👁️ View |
| 7 |
|
PoliceThis sketch is a full arcade game where emoji fall from the sky and must be caught in a basket. Catching good food emojis spawns a customer, while catching bad emojis triggers escalating chain reactions - arrests, police cars, helicopter crashes, fire trucks, and tow trucks - each driven by its own state machine.
Key Skills:
|
📖 Read Docs 👁️ View |
| 8 |
|
beanstalk growerThis sketch is a browser-based idle/clicker game: you tap a glowing sun to earn coins and energy, the energy powers a bezier-leafed beanstalk that grows taller over time, and you spend coins on upgrades and a scrollable worker gallery that generates passive income. Random timed events multiply your earnings for a few minutes at a time, keeping the pacing unpredictable.
Key Skills:
|
📖 Read Docs 👁️ View |
| 9 |
|
Top Hat AIThis sketch creates a grid-based building game where tiny top-hatted AI robots fly around dropping colored blocks to construct walls, towers, pyramids, houses, cars, and even pixel-art recreations of uploaded photos. Players click UI buttons to send blueprints, summon lumberjack AIs to chop everything down, toggle a pseudo-3D isometric view, or explore inside a furnished house.
Key Skills:
|
📖 Read Docs 👁️ View |
| 10 |
|
The best snake game (Remix)This sketch builds a complete Snake game with a canvas-drawn menu system, an unlockable outfit/skin system tied to your score, a lives mechanic that gives you a second chance before Game Over, and a hidden DOM-based admin panel for live debugging. A finite state machine switches between the Menu, Outfits, Gameplay, and Game Over screens, all rendered on a single p5.js canvas.
Key Skills:
|
📖 Read Docs 👁️ View |
| 11 |
|
DRIFT STARS (FULL RELEASE)This sketch is a full 3D open-world driving game built entirely in p5.js WEBGL mode: you drift a customizable car through a neon-lit city, dodge traffic cones and NPC drivers, and outrun an escalating police force. It also lets you step out of the car into a first-person, pointer-locked mode to explore on foot, all backed by a procedural synth soundtrack and engine noise generated live with p5.Oscillator.
Key Skills:
|
📖 Read Docs 👁️ View |
| 12 |
|
Snail game What it should beThis is a full multi-screen browser game where a player-controlled snail eats mint candies for points while avoiding obstacles, grabbing speed-boost treats, and using a limited-use pickaxe to smash through walls. It includes a title menu, map-select screen, instructions, an avatar shop with a timed 'secret snail' unlock, and an admin cheat panel, with progress persisted via localStorage.
Key Skills:
|
📖 Read Docs 👁️ View |
| 13 |
|
AI Wave Function Simulator - Physics Interference Visualization Explore wave interference physics!This sketch simulates two circular wave sources whose ripples overlap to create a classic interference pattern, rendered as glowing blue bands on a dark canvas. You can drag the two sources (A and B) around the screen, adjust their oscillation frequency with a slider, and pause/resume the animation to study the moving pattern.
Key Skills:
|
📖 Read Docs 👁️ View |
| 14 |
|
AI Binary Clock - LED Time Display Read time in binary! Six rows of glowing green LED circles repreThis sketch turns the current time into a glowing binary LED clock, splitting hours, minutes, and seconds into six decimal digits and lighting up green LED circles to represent each digit in binary. A readable HH:MM:SS readout sits below the LEDs so you can check your binary-reading skills against the real time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 15 |
|
AI Gravity Wells - Orbital Physics Particle Simulation - xelsed.aiThis sketch simulates a starfield where multiple glowing gravity wells pull streams of colorful particles into swirling orbits, spirals, and slingshot trajectories. Particles are continuously spawned from the screen edges and fade into long motion trails as they get flung around by real inverse-square-law gravity. Clicking adds new wells, letting you sculpt increasingly chaotic orbital systems.
Key Skills:
|
📖 Read Docs 👁️ View |
| 16 |
|
AI Reaction Time Test - Speed Challenge Game Test your reflexes! Wait for the circle to turn green,This sketch is a reaction-time testing game: a circle sits in the middle of the screen and cycles through red (wait), green (click now!), yellow (clicked too early), and a result screen showing your reaction time in milliseconds. It tracks your best time, a rolling average of your last 10 attempts, and renders them as a live bar chart at the bottom of the screen.
Key Skills:
|
📖 Read Docs 👁️ View |
| 17 |
|
AI Weather Symphony - Dynamic Soundscape Control the weather and create unique soundscapes! Drag toThis sketch turns the browser window into a living weather system where dragging paints wind, clicking spawns rain or snow, holding the mouse charges up lightning, and pressing N flips between day and night. Every weather event is mirrored by generative Tone.js audio layers, and a rotating AI-style text suggestion nudges you toward things to try next.
Key Skills:
|
📖 Read Docs 👁️ View |
| 18 |
|
AI Maze Generator - Recursive Backtracking Puzzle Navigate procedurally generated mazes! Adjust mazThis sketch procedurally builds a perfect maze using the recursive backtracking algorithm, animating the carving process cell by cell, then lets you navigate it with the arrow keys or watch a BFS pathfinder solve it for you. A slider controls the maze's grid resolution, and buttons let you regenerate or auto-solve the current maze.
Key Skills:
|
📖 Read Docs 👁️ View |
| 19 |
|
AI Gravity Painter - Click to Create Orbital Particle Wells - xelsed.aiThis sketch simulates glowing gravity wells that pull a swarm of 250 particles into swirling orbital trails using real inverse-square physics. Clicking anywhere spawns a pulsing well that attracts nearby particles until it fades away after ten seconds, leaving behind streaking, color-shifting trails.
Key Skills:
|
📖 Read Docs 👁️ View |
| 20 |
|
Animated Triangle Fade - xelsed.aiThis sketch simulates a flock of 150 triangular boids that swarm, align, and cohere with one another while being drawn toward the mouse cursor. Each boid leaves a fading warm-colored trail, and the whole flock reacts fluidly to cursor movement using classic Craig Reynolds flocking rules.
Key Skills:
|
📖 Read Docs 👁️ View |
| 21 |
|
AI Color Mixer Lab - RGB Additive Blending Tool Learn color theory with interactive RGB mixing! DraThis sketch creates an interactive RGB color mixer where three translucent red, green, and blue circles can be dragged around a full-window canvas. Using p5.js's additive blend mode, overlapping circles combine like beams of light rather than paint, and a crosshair fixed at the canvas center samples the resulting color, displaying it live as both RGB numbers and a hex code.
Key Skills:
|
📖 Read Docs 👁️ View |
| 22 |
|
AI Kaleidoscope Generator - Symmetrical Pattern Art Draw mesmerizing symmetrical patterns with realThis sketch turns your mouse or finger movements into a glowing, rotating kaleidoscope. Every stroke you draw is mirrored across multiple symmetry axes in real time, wrapped in a jewel-toned radial gradient, and colored with an auto-generated harmonious palette that can be reshuffled on demand.
Key Skills:
|
📖 Read Docs 👁️ View |
| 23 |
|
AI Gravity Text - Type Letters That Fall and StackThis sketch turns a simple text input into a live physics playground: every character you type falls from the top of the screen, bounces off the walls and floor, and stacks on top of other letters like Tetris blocks. Pressing SPACE launches the entire pile upward in an explosion before gravity pulls everything back down.
Key Skills:
|
📖 Read Docs 👁️ View |
| 24 |
|
AI Lissajous Curves - Mathematical Harmonic Art Beautiful neon harmonic patterns created by oscillaThis sketch draws glowing, continuously animated Lissajous curves - the classic two-frequency oscillator patterns - using neon additive-blended strokes that leave soft trails. Sliders let you pick the X and Y frequencies and a phase offset, while an 'AI Suggest Curve' button randomly picks aesthetically pleasing frequency ratios and phase values for you.
Key Skills:
|
📖 Read Docs 👁️ View |
| 25 |
|
Voice Canvas - AI Art Director - XeLseDThis sketch turns spoken words into abstract generative art: you click a microphone button, describe a scene like 'ocean waves' or 'fire dance', and the sketch sends your words to OpenAI to choose a visual style, color, speed, and density, then animates that description on screen and speaks a description back to you.
Key Skills:
|
📖 Read Docs 👁️ View |
| 26 |
|
AI Gravity Painter - Physics Art Sandbox Paint with gravitational forces! Click to place gravity weThis sketch turns the whole browser window into a glowing particle physics sandbox where clicking places gravitational wells that pull hundreds of neon particles into swirling orbits, and dragging creates repulsion zones that scatter them apart. A lightweight built-in 'AI' analyzes the current flow of particles and suggests new well placements to either balance the composition (symmetry) or intensify the turbulence (chaos), and pressing C freezes the whole system into a crystalline nearest-neighbor graph.
Key Skills:
|
📖 Read Docs 👁️ View |
| 27 |
|
AI Emotion Particles - xelsed.aiThis sketch fills the screen with 200 Perlin-noise-driven particles whose color, speed, size, and gravity are controlled by an emotion word - happy, sad, angry, calm, or excited. As you type into a text box, the sketch sends your words to the OpenAI API, which returns a single emotion, and every particle on screen instantly adopts that emotion's visual personality.
Key Skills:
|
📖 Read Docs 👁️ View |
| 28 |
|
AI Temporal Dendrite - Time-Driven Fractal Tree - xelsed.aiThis sketch grows a recursive fractal tree whose shape is driven entirely by the current time of day - the hour sets how many main branches sprout from the trunk, the minute controls how wide those branches fan out, and the second (plus milliseconds) creates a gentle continuous sway. Branch color shifts from dark brown at the roots to spring green at the outermost twigs, and Perlin noise adds organic, non-repeating wobble to every tip.
Key Skills:
|
📖 Read Docs 👁️ View |
| 29 |
|
Animated Circle - xelsed.aiThis sketch fills a night-sky canvas with softly drifting circular snowflakes that fall from the top of the screen and pile up realistically at the bottom, building white mounds that grow taller wherever more snow lands. It combines simple particle animation with a clever height-map trick to simulate accumulating snow without any physics engine.
Key Skills:
|
📖 Read Docs 👁️ View |
| 30 |
|
AI Fractal Tree - Growing Branches in the WindThis sketch procedurally grows a fractal tree from a single trunk into a full branching structure over ten seconds, using recursion to place each generation of branches. Wind is faked with a sine wave so every branch gently sways, and once the tree reaches full depth, green leaf dots appear at every branch tip.
Key Skills:
|
📖 Read Docs 👁️ View |
| 31 |
|
Swaying Fractal Tree - xelsed.aiThis sketch grows an animated fractal tree from a bare seed into a full, leafy canopy over about five seconds, using recursive branching where each branch spawns two smaller child branches. Once grown, the whole tree sways gently as if blown by a breebreeze, all rendered against a soft blue-to-white sky gradient.
Key Skills:
|
📖 Read Docs 👁️ View |
| 32 |
|
AI Reaction Time Test - How Fast Are Your Reflexes - xelsed.aiThis sketch is a classic reaction-time tester: the screen stays red for a random delay, flashes green, and measures how many milliseconds pass before you click. A simple state machine drives four screens (waiting, ready, result, and too-early) and keeps track of your personal best score.
Key Skills:
|
📖 Read Docs 👁️ View |
| 33 |
|
AI Bubble Pop Game - Click to PopThis sketch creates a playful bubble-popping game where colorful bubbles rise from the bottom of the screen against a soft sky gradient. Clicking a bubble pops it, increases your score, and triggers a quick red flash effect.
Key Skills:
|
📖 Read Docs 👁️ View |
| 34 |
|
Daydreaming pink fishThis sketch creates a gently bobbing pink fish floating in a soft blue underwater scene, surrounded by rising bubbles and a rotating speech bubble that displays daydream thoughts every few seconds.
Key Skills:
|
📖 Read Docs 👁️ View |
| 35 |
|
AI Spirograph Generator - Geometric Pattern Art Create intricate hypotrochoid patterns with adjustaThis sketch is an interactive digital spirograph that draws hypotrochoid curves - the looping geometric patterns you'd get from a mechanical Spirograph toy. Three sliders let you control the outer wheel radius (R), inner wheel radius (r), and pen offset (d), and the resulting curve is rendered as a full rainbow gradient on a dark background.
Key Skills:
|
📖 Read Docs 👁️ View |
| 36 |
|
Voice Aurora - AI Sound Visualizer - xelsed.aiThis sketch turns your microphone into a wand for painting the night sky: it listens to speech, sends the transcript to OpenAI to generate a set of colors and a mood description, then renders flowing, glowing aurora ribbons using layered Perlin-noise curves while a voice reads the AI's description back to you. Floating particles drift upward in the foreground and the aurora subtly reacts to live microphone volume.
Key Skills:
|
📖 Read Docs 👁️ View |
| 37 |
|
Click to Launch Fireworks - xelsed.aiThis sketch creates an interactive nighttime fireworks display: clicking anywhere on the canvas launches a glowing rocket that rises, explodes into 50-100 colorful particles, and fades away under gravity. It uses HSB color mode for vibrant hues, p5.Vector math for realistic motion, and a fading background trick to leave glowing trails.
Key Skills:
|
📖 Read Docs 👁️ View |
| 38 |
|
AI Firework Show - Click to Launch ExplosionsThis sketch creates an interactive fireworks show where clicking anywhere launches a rocket that streaks upward and bursts into a shower of colorful particles. Multiple fireworks can be in flight or exploding simultaneously, and a semi-transparent background creates trailing light streaks against a dark night sky.
Key Skills:
|
📖 Read Docs 👁️ View |
| 39 |
|
AI Particle Fountain - Physics Particle System Click to spawn beautiful particle fountains! ParticlThis sketch creates a glowing particle fountain simulation where clicking anywhere on the canvas spawns a new fountain that shoots colorful, physics-driven particles into the air. Particles arc upward under gravity, fall back down, and burst into secondary 'splash' particles when they hit the ground, all rendered with additive blending for a soft neon-glow look.
Key Skills:
|
📖 Read Docs 👁️ View |
| 40 |
|
AI Mood Color Morphing - xelsed.aiThis sketch pairs a live text input with a hypnotic field of twenty overlapping, noise-distorted blobs that continuously reshape themselves using Perlin noise and rotation. When you type a mood or phrase and press Enter, the sketch sends your text to OpenAI's GPT-4o-mini model, receives back a 5-color hex palette that matches the emotional tone of your words, and recolors every blob to match.
Key Skills:
|
📖 Read Docs 👁️ View |
| 41 |
|
Animated Color Pattern - xelsed.aiThis sketch creates a mesmerizing flow field of 1000 colorful particles that swirl across the canvas following invisible currents generated by Perlin noise. Fading trails and an earthy color palette give the motion an organic, painterly quality, and clicking the mouse resets the whole pattern.
Key Skills:
|
📖 Read Docs 👁️ View |
| 42 |
|
AI Boid Flocking Simulator - Emergent Swarm Behavior Watch realistic bird/fish swarms with separatiThis sketch simulates a flock of colorful triangular boids that swarm, scatter, and regroup using the classic separation/alignment/cohesion rules pioneered by Craig Reynolds. Left-clicking spawns a new cluster of panicked boids and right-clicking drops a red predator that hunts the nearest boid, all rendered over a soft gradient background with trailing motion streaks.
Key Skills:
|
📖 Read Docs 👁️ View |
| 43 |
|
The best snake game moddedThis sketch is a complete Snake game remix with a menu system, an unlockable outfit shop, a shooting mechanic, chasing zombies, and a live DOM-based admin panel for tweaking the game in real time. The snake moves on a grid, eats fruit to grow and score points, can fire projectiles to snipe food or zombies from a distance, and loses a life when it hits a wall, its own tail, or a zombie.
Key Skills:
|
📖 Read Docs 👁️ View |
| 44 |
|
AI ASCII Camera - Live Webcam to Text Art Converter - xelsed.aiThis sketch turns your live webcam feed into moving ASCII art, sampling the video's pixel brightness and mapping it to a ramp of text characters from spaces to '@' symbols. A toggle button lets you switch to a 'drawing' mode where you can finger-paint on a tiny buffer that also gets rendered as green terminal-style text.
Key Skills:
|
📖 Read Docs 👁️ View |
| 45 |
|
AI Pendulum Wave - Mesmerizing Harmonic Motion Physics - xelsed.aiThis sketch simulates 15 pendulums of gradually increasing arm length, all released from the same starting angle so they swing at slightly different frequencies. As they oscillate, the pendulums drift in and out of phase with each other, producing traveling wave patterns, moments of perfect synchronization, and eventual chaotic motion - a classic physics demonstration rendered with glowing HSB-colored trails.
Key Skills:
|
📖 Read Docs 👁️ View |
| 46 |
|
AI Bouncy Ball Drop - Satisfying PhysicsThis sketch lets you click anywhere on the screen to drop a colorful ball that falls under gravity, bounces off the floor and side walls while losing a bit of energy each time, and gradually fades out and disappears. Every click spawns a brand-new independent ball, so rapid clicking fills the screen with a bouncing, fading crowd.
Key Skills:
|
📖 Read Docs 👁️ View |
| 47 |
|
Animated Particles Fountain - xelsed.aiThis sketch creates a glowing particle fountain that continuously launches colorful particles toward the mouse cursor from the bottom of the screen. Gravity pulls each particle back down while it fades out, and the particles shift color from hot red-yellow to cool blue as they slow down, creating a fiery, trailing fountain effect.
Key Skills:
|
📖 Read Docs 👁️ View |
| 48 |
|
AI Fractal Explorer - Infinite Mandelbrot Zoom Explore infinite mathematical beauty! Click to zoomThis sketch renders the Mandelbrot set by testing every pixel on screen against a mathematical formula, then colors the result with an animated psychedelic palette. Clicking zooms in 2x at the cursor, dragging pans around, and scrolling zooms smoothly - turning the canvas into an infinite fractal exploration tool.
Key Skills:
|
📖 Read Docs 👁️ View |
| 49 |
|
AI Emoji Rain - Colorful Emojis Falling from the SkyThis sketch fills the screen with a soft gradient sky and rains colorful emoji characters that fall under gravity, bounce once when they hit the bottom, and then fade away. Clicking anywhere on the canvas triggers a burst of ten new emojis at the cursor, and the whole scene resizes to fill the browser window.
Key Skills:
|
📖 Read Docs 👁️ View |
| 50 |
|
AI Dream Painter - xelsed.aiThis sketch turns a typed dream description into a living abstract painting: text is sent to OpenAI, which returns a mood, three colors, a speed, and a shape type, and fifty floating shapes then drift across a fading canvas using those AI-chosen properties. The result is a generative visual mood-board that morphs every time you submit new text.
Key Skills:
|
📖 Read Docs 👁️ View |