📖 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 |
|---|---|---|---|
| 151 |
|
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 |
| 152 |
|
Numbers shuffleThis sketch is a classic sliding number puzzle (like the 15-puzzle) rendered entirely with p5.js shapes and text. Numbered tiles sit in a grid with one empty slot, and you click a tile next to the empty space to slide it into place, trying to restore the numbers to sequential order.
Key Skills:
|
📖 Read Docs 👁️ View |
| 153 |
|
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 |
| 154 |
|
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 |
| 155 |
|
Voxel-destructibleThis sketch creates a fully destructible 3D voxel world built with three.js, where each tiny cube can be clicked or tapped to explode into falling physics-based pieces. The scene supports free camera rotation and zooming, and plays satisfying destruction sounds via tone.js.
Key Skills:
|
📖 Read Docs 👁️ View |
| 156 |
|
AI Bubble Pop - Satisfying Click Game Pop colorful bubbles as they float up! Click bubbles to burstThis sketch creates a satisfying bubble-popping game where colorful bubbles float up from the bottom of the screen. Click any bubble to burst it, trigger a percussion sound that varies with bubble size, and release a particle explosion—all while tracking your score.
Key Skills:
|
📖 Read Docs 👁️ View |
| 157 |
|
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 |
| 158 |
|
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 |
| 159 |
|
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 |
| 160 |
|
HappyNewYear2026This sketch animates a glittering Times Square-style ball dropping down a starry sky while cycling through iconic 2025 moments. When the ball reaches the bottom, the scene explodes into colorful confetti, fireworks, and a bold "2026" celebration.
Key Skills:
|
📖 Read Docs 👁️ View |
| 161 |
|
Teachable Machine > P5.js > Device (web serial) (Remix) (Remix)This sketch combines machine learning image classification with real-time device communication, allowing a Teachable Machine model to recognize objects from your webcam and send classification results to physical devices via USB Serial or Bluetooth. It bridges the gap between p5.js, ml5.js, and embedded systems like the micro:bit.
Key Skills:
|
📖 Read Docs 👁️ View |
| 162 |
|
Teachable Machine > P5.js > Device (web serial)This sketch connects a Teachable Machine image classifier to a web browser, processes live webcam video to identify objects or subjects, and sends classification results via Web Serial to microcontroller devices like Arduino or Micro:bit. It bridges machine learning and hardware by creating a real-time visual classification system with two-way serial communication.
Key Skills:
|
📖 Read Docs 👁️ View |
| 163 |
|
Lethal ape: reduxThis sketch creates a hand-drawn, side-scrolling horror maze game where players navigate dark lab floors while avoiding monsters and collecting items. Using a joystick or keyboard, players move through interconnected rooms, experience the camera smoothly following their position, and face jump-scares when colliding with wandering creatures.
Key Skills:
|
📖 Read Docs 👁️ View |
| 164 |
|
Astro botThis sketch creates a full platformer game called Astro Bot where players navigate through 5 themed worlds, rescue bots, defeat enemies, and fight bosses. The game features a hub world for level selection, animated platforms, touch controls, particle effects, and a complete game loop with lives, scoring, and world progression.
Key Skills:
|
📖 Read Docs 👁️ View |
| 165 |
|
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 |
| 166 |
|
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 |
| 167 |
|
Particle System with crazy meter🫠This sketch creates a swarm of glowing pastel particles that float across a dark canvas and wrap around its edges. Moving your mouse pulls them into chaotic motion, and the "crazy meter" slider controls their maximum speed and attraction strength.
Key Skills:
|
📖 Read Docs 👁️ View |
| 168 |
|
Sketch 2026-01-11 20:18This sketch uses ml5.js to classify video from your webcam in real-time and sends the classification results to a microcontroller via Web Serial API. It displays the live video feed alongside the current prediction label and confidence percentage, creating a bridge between machine learning in the browser and hardware devices.
Key Skills:
|
📖 Read Docs 👁️ View |
| 169 |
|
Sketch 2025-12-24 00:08This sketch creates an animated orbital system featuring a morphing planet at the center and a smaller moon orbiting around it. Both shapes continuously transform between a triangle and a dodecagon while rotating, with colors that shift through the rainbow spectrum creating a mesmerizing, symmetrical animation.
Key Skills:
|
📖 Read Docs 👁️ View |
| 170 |
|
Sketch 2026-02-16 07:50This interactive sketch creates a dynamic grid of circles that responds to mouse/touch movement and device orientation. The oscillator's pitch and volume follow your cursor, while Perlin noise generates flowing patterns that pulse with the sound's amplitude, blending audio and visuals into a unified experience.
Key Skills:
|
📖 Read Docs 👁️ View |
| 171 |
|
gta6 current stateThis sketch creates a GTA-inspired 3D city sandbox where you drive a car or run on foot through an endless procedurally-generated world. As your wanted level (star meter) increases over time, cop cars chase you and eventually tanks arrive to fire projectiles—survive 7 seconds of continuous collision or a tank hit to trigger game over.
Key Skills:
|
📖 Read Docs 👁️ View |
| 172 |
|
Particle SystemThis sketch creates an interactive particle system with 100 colorful particles that bounce around the canvas and are attracted toward the mouse cursor. Each particle has randomized size and color, creating a dynamic visual effect that responds to user interaction in real time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 173 |
|
lit funThis sketch creates a 3D fighting game where players control Spider-Man to battle an AI-controlled Deadpool in a procedurally generated city. The game features full 3D movement, web-swinging mechanics, attack systems, health tracking, and a dynamic third-person camera that players control with the mouse.
Key Skills:
|
📖 Read Docs 👁️ View |
| 174 |
|
geo dashThis sketch creates a Geometry Dash-inspired game where a player controls a square that jumps over incoming red spike obstacles. The game features continuous scrolling, collision detection, score tracking, and rhythmic sound effects using the p5.sound library.
Key Skills:
|
📖 Read Docs 👁️ View |
| 175 |
|
ROUNDS (improved)ROUNDS is a fast-paced local multiplayer (or AI) battle arena where two characters duel across shifting platform maps, firing projectiles, blocking attacks, and collecting powerful upgrade cards between rounds. The winning player reaches a target score by eliminating their opponent through combat, blocking, and strategic ability stacking.
Key Skills:
|
📖 Read Docs 👁️ View |
| 176 |
|
gta 6 current stateThis is a GTA-inspired 3D game prototype built with three.js where you drive a car, evade cop cars, and switch to on-foot mode to shoot NPCs. The game escalates with a five-star wanted level system that spawns increasingly dangerous police units, ending when you're caught or hit by tank fire.
Key Skills:
|
📖 Read Docs 👁️ View |
| 177 |
|
day dreaminj fishThis sketch creates a dreamy fish bowl where a sleepy orange fish drifts peacefully, displays changing dreams in thought bubbles, and responds to your typed messages. Click to feed the fish, chat with it, and discover that if you don't interact enough, the fish will fall asleep—and dream of vengeance with a 1-in-10 chance to turn the tables.
Key Skills:
|
📖 Read Docs 👁️ View |
| 178 |
|
stimulation final bossThis sketch creates a dynamic, multi-layered interactive canvas where a swirling cloud of particles follows your mouse while being repelled by a bouncing white ball. Four spinning pinwheels anchor the corners, you can draw permanent white lines by clicking and dragging, and a clickable button in the center tracks interactions.
Key Skills:
|
📖 Read Docs 👁️ View |
| 179 |
|
7 painful nights at corbuns zombie islandThis is a 3D first-person island survival game built with Three.js where you walk around a low-poly island, harvest fruit from palm trees, shoot zombies that spawn at night, hire guards to help defend, and try to survive 7 nights. The game combines exploration, resource management, combat, and a day-night cycle.
Key Skills:
|
📖 Read Docs 👁️ View |
| 180 |
|
dinoThis sketch creates an AI-learning dinosaur game inspired by Chrome's offline dinosaur, where the dino learns to jump over cacti and duck under birds by recording successful actions in a 'winning list'. The game features a fixed, repeating obstacle course that allows the AI to gradually improve its decision-making through reinforcement learning, getting smarter with every successful dodge.
Key Skills:
|
📖 Read Docs 👁️ View |
| 181 |
|
Webcam EffectsThis sketch captures your live webcam video and applies five different visual effects in real time: normal display, pixelation, ASCII art, edge detection, and posterization. Click anywhere on the canvas to cycle through each effect and watch your video transform.
Key Skills:
|
📖 Read Docs 👁️ View |
| 182 |
|
This game is broken someone fix it, Theres a game after this i promiseThis is a multilingual text adventure game where players explore an ancient temple, collect items, and solve puzzles through typed commands or clickable buttons. The game supports five languages (English, Spanish, French, German, Italian) and features a classic retro terminal aesthetic with green text on black.
Key Skills:
|
📖 Read Docs 👁️ View |
| 183 |
|
Sketch 2026-03-05 16:07This sketch creates a playable car racing game where you control a blue car to dodge red obstacle vehicles on a three-lane road. The game features keyboard and touch controls, collision detection, score tracking, and three game states (menu, playing, game over).
Key Skills:
|
📖 Read Docs 👁️ View |
| 184 |
|
RoomThis sketch creates an immersive 3D room rendered in WebGL, filled with furniture, lab equipment, and decorative objects lit with warm, dramatic directional and point lights. You control a first-person camera by clicking and dragging to pan and tilt your head, and scrolling to zoom in and out through the lived-in space.
Key Skills:
|
📖 Read Docs 👁️ View |
| 185 |
|
Lethal ape reduxThis is a spooky top-down maze game where you navigate procedurally-lit rooms, avoid intelligent monsters that hunt across multiple floors, collect keys, and face sudden jumpscares with eerie procedural audio. You control movement with a joystick, toggle VR head-tracking mode to look around, and run to escape danger.
Key Skills:
|
📖 Read Docs 👁️ View |
| 186 |
|
InterActiveImagetestThis sketch displays an image on canvas and warps it into a bulging, rippling field centered on your mouse cursor. When you click to activate your microphone, the intensity of the warp responds to sound levels and time-based oscillations, creating an interactive audio-visual sculpture.
Key Skills:
|
📖 Read Docs 👁️ View |
| 187 |
|
backroomsThis sketch creates an immersive 3D backrooms-style exploration game where you navigate a procedurally-generated maze while being hunted by a monster. The game combines Three.js 3D rendering, a recursive backtracking maze algorithm, and Tone.js audio for an atmospheric horror experience.
Key Skills:
|
📖 Read Docs 👁️ View |
| 188 |
|
killer monkey 2.0This sketch creates a single aggressive 3D monkey wielding a sword that relentlessly chases your mouse cursor across a dark, glowing space. The monkey uses steering AI to predict and hunt your movements, speaking in glitchy banana-themed phrases, until it catches you and crashes the game.
Key Skills:
|
📖 Read Docs 👁️ View |
| 189 |
|
monkey game heheThis sketch creates a chunky 3D monkey in WebGL that chases your cursor around the screen using steering AI. The monkey changes behavior based on distance, displays silly thoughts in speech bubbles, and triggers a crash screen when it catches you—combining 3D graphics, vector physics, and playful game mechanics.
Key Skills:
|
📖 Read Docs 👁️ View |
| 190 |
|
have funThis sketch creates an interactive physics simulation where clicking destroys falling blocks, shattering them into flying pieces while drawing cracks across the screen. As you accumulate clicks, the cracks intensify until the screen itself "breaks," revealing a grotesque face beneath with a dramatic jumpscare effect.
Key Skills:
|
📖 Read Docs 👁️ View |
| 191 |
|
collect the balls!Collect the Balls! is a fast-paced arcade game where players slide a paddle to catch falling balls and earn points. The game features a progression system with score multipliers and paddle skins that can be purchased in shops, plus difficulty that ramps up as the game continues.
Key Skills:
|
📖 Read Docs 👁️ View |
| 192 |
|
ITS RAINING TACOSThis sketch creates a festive animation where colorful tacos rain down the screen continuously while a mouse-following circle trails across the canvas with colors that shift based on cursor position. It combines object-oriented programming with p5.js animation to create an interactive, playful visual experience.
Key Skills:
|
📖 Read Docs 👁️ View |
| 193 |
|
Unfinished projectThis sketch creates a pixelated adventure game where you play as a diver exploring a flooded world. You swim through water, walk on land, enter houses, interact with NPCs, and complete quests by flooding buildings to reclaim the land for the sea.
Key Skills:
|
📖 Read Docs 👁️ View |
| 194 |
|
Sketch 2026-01-17 14:49This sketch creates a smooth text transition animation that alternates between two phrases: 'Adra Keren' and 'Adra Anak Emas'. Each phrase fades in and holds for 2 seconds, then fades out over 1 second as the other phrase fades in, creating a continuous loop. The canvas resizes responsively to fit the window.
Key Skills:
|
📖 Read Docs 👁️ View |
| 195 |
|
BOB aiUltra Smart Bob is an interactive AI character with a dynamic, morphing face that breathes and tracks your mouse. Type messages or hold-click to speak, and Bob responds with clever conversation, math calculations, and witty replies—all customizable through voice pitch, speed, and realism sliders.
Key Skills:
|
📖 Read Docs 👁️ View |
| 196 |
|
Can you beat 12,000This interactive Lego vehicle construction game combines 3D building, selling, and mini-games. Players tap to add blocks and build helicopters, cars, trains, and buses step-by-step, then watch a customer buy each creation. As money accumulates, new vehicles unlock and playable mini-games become available at specific money thresholds.
Key Skills:
|
📖 Read Docs 👁️ View |
| 197 |
|
ROUNDSROUNDS is a chaotic local-multiplayer combat game inspired by the roguelike shooter of the same name. Two players battle across platform-filled arenas, dodging bullets and blocking attacks, while collecting power-up cards between rounds that fundamentally reshape their playstyle with unique abilities, stat boosts, and weapon modifiers.
Key Skills:
|
📖 Read Docs 👁️ View |
| 198 |
|
Cody's mindThis sketch creates a cosmic particle network orbiting a glowing central core, with sassy AI-generated thoughts that float across the screen. The particles emit flickering connections to nearby neighbors, creating an animated visualization of a thinking mind with personality.
Key Skills:
|
📖 Read Docs 👁️ View |
| 199 |
|
YouTubeThis sketch creates a playful video player interface that displays random YouTube video titles in a large thumbnail box. Clicking the X button in the bottom-left corner skips to the next video with a beep sound and increments a counter.
Key Skills:
|
📖 Read Docs 👁️ View |
| 200 |
|
Sketch 2026-02-24 20:50This sketch creates an interactive drawing canvas where users paint with a brush that continuously cycles through rainbow colors. Mouse movements create smooth, fluid strokes using interpolation, with keyboard shortcuts for clearing, resizing, and saving artwork.
Key Skills:
|
📖 Read Docs 👁️ View |