📖 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 |
|---|---|---|---|
| 901 |
|
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 |
| 902 |
|
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 |
| 903 |
|
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 |
| 904 |
|
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 |
| 905 |
|
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 |
| 906 |
|
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 |
| 907 |
|
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 |
| 908 |
|
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 |
| 909 |
|
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 |
| 910 |
|
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 |
| 911 |
|
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 |
| 912 |
|
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 |
| 913 |
|
SpaceInvadersThis is a fully playable Space Invaders arcade game built with p5.js. Players control a spaceship at the bottom of the screen, dodge descending alien waves, and shoot them down while protective barriers crumble under enemy fire. The game features progressive difficulty, multiple lives, retro synthesizer sound effects, and responsive touch controls.
Key Skills:
|
📖 Read Docs 👁️ View |
| 914 |
|
SmileFaceCatchGPT5highThis is a colorful arcade-style catching game where players move a smiley face at the bottom of the screen to catch falling happy faces while avoiding angry red ones. The game features dynamic difficulty that increases with score, smooth animations with wiggling and spinning smilies, and cheerful sound effects powered by p5.sound synthesizers.
Key Skills:
|
📖 Read Docs 👁️ View |
| 915 |
|
smilefacecatchThis is a fun arcade-style game where players move a paddle left and right to catch falling smiley faces. Each catch increases the score, but missing too many faces triggers a game over screen. The sketch combines object-oriented programming, collision detection, and p5.sound to create an interactive game experience.
Key Skills:
|
📖 Read Docs 👁️ View |
| 916 |
|
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 |
| 917 |
|
Remixed Toung TwisterThis interactive sketch loads a tongue-twister poem, breaks it into individual words, and shuffles them into a new random arrangement every time you click the canvas. The remixed words are displayed as readable lines of text, creating absurd and funny new versions of the original poem.
Key Skills:
|
📖 Read Docs 👁️ View |
| 918 |
|
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 |
| 919 |
|
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 |
| 920 |
|
SystemTest1This sketch creates a comprehensive device capability tester that displays real-time information about input handling, motion sensors, microphone input, camera feed, WebGL rendering, and haptic feedback. It demonstrates how to detect and use both desktop and mobile device capabilities, making it an excellent reference for building cross-platform interactive applications.
Key Skills:
|
📖 Read Docs 👁️ View |
| 921 |
|
Oscilating Sound WebGLThis sketch creates a mesmerizing 3D WebGL visualization featuring an orbiting sphere and rotating torus, synchronized with a Tone.js synthesizer. The pitch of the sound follows the sphere's vertical position, while horizontal mouse movement controls the orbit size and colors.
Key Skills:
|
📖 Read Docs 👁️ View |
| 922 |
|
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 |
| 923 |
|
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 |
| 924 |
|
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 |
| 925 |
|
Sketch 2025-11-27 02:28This sketch animates a circle moving along an elliptical path while a sine wave oscillator's pitch follows the circle's vertical position. Click to start the sound, and watch as the circle's height directly controls the frequency of the tone you hear.
Key Skills:
|
📖 Read Docs 👁️ View |
| 926 |
|
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 |
| 927 |
|
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 |