📖 Code Guides - Complete Catalog
Comprehensive table of contents for all 927 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.
927 fully documented sketches · Organized by creation date · Real concepts from AI-generated docs
| # | Preview | Sketch Details | Actions |
|---|---|---|---|
| 851 |
|
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 |
| 852 |
|
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 |
| 853 |
|
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 |
| 854 |
|
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 |
| 855 |
|
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 |
| 856 |
|
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 |
| 857 |
|
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 |
| 858 |
|
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 |
| 859 |
|
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 |
| 860 |
|
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 |
| 861 |
|
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 |
| 862 |
|
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 |
| 863 |
|
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 |
| 864 |
|
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 |
| 865 |
|
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 |
| 866 |
|
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 |
| 867 |
|
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 |
| 868 |
|
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 |
| 869 |
|
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 |
| 870 |
|
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 |
| 871 |
|
Sketch 2025-12-12 01:03This sketch creates an interactive 3D cosmic symphony where users click to spawn musical stars that orbit a central black hole under gravitational forces. Each star emits notes from the C Major Pentatonic scale, while an AI system analyzes the composition and suggests new celestial bodies to balance the arrangement. A shader-based animated nebula provides the background atmosphere.
Key Skills:
|
📖 Read Docs 👁️ View |
| 872 |
|
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 |
| 873 |
|
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 |
| 874 |
|
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 |
| 875 |
|
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 |
| 876 |
|
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 |
| 877 |
|
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 |
| 878 |
|
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 |
| 879 |
|
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 |
| 880 |
|
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 |
| 881 |
|
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 |
| 882 |
|
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 |
| 883 |
|
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 |
| 884 |
|
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 |
| 885 |
|
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 |
| 886 |
|
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 |
| 887 |
|
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 |
| 888 |
|
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 |
| 889 |
|
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 |
| 890 |
|
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 |
| 891 |
|
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 |
| 892 |
|
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 |
| 893 |
|
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 |
| 894 |
|
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 |
| 895 |
|
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 |
| 896 |
|
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 |
| 897 |
|
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 |
| 898 |
|
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 |
| 899 |
|
- 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 |
| 900 |
|
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 |