📖 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

#	Sketch Details	Actions
201	Sketch 2026-03-12 17:48 This is a fast-paced clicking game where players must click randomly spawned black squares as quickly as possible within a 45-second timer. The game tracks scores, calculates player ranks based on recent match history, and maintains a leaderboard of top 10 scores with a beautiful hexagon-tiled background. Key Skills: Game state management Collision detection Arrays and object data structures localStorage persistence Off-screen graphics buffers by Anonymous · 271 views	📖 Read Docs 👁️ View
202	Totally accurate tops This sketch simulates a spinning top launching mini-game where a red tracker bounces back and forth across a bar, and you must click to stop it when it lands in the yellow goal zone. The game automatically detects perfect timing and displays results with visual feedback. Key Skills: Game state machine DOM element manipulation Collision detection Animation loop and oscillation Event handling (mousePressed) by Anonymous · 271 views	📖 Read Docs 👁️ View
203	Audio Reactive This sketch creates a real-time audio visualization that responds to sound from your microphone. Colorful spectrum bars dance across the canvas with the audio frequencies, while a central circle pulses with the overall volume level, creating an immersive visual representation of sound. Key Skills: Audio input and microphone access FFT spectrum analysis Real-time data visualization HSB color mode Mapping and scaling values by Anonymous · 271 views	📖 Read Docs 👁️ View
204	Algorithmic Bloom This sketch generates an elegant fractal tree that grows recursively with branches tapering in length and color. The tree animates continuously with noise-driven swaying motion, set against a softly shifting sky gradient and textured ground, with seasonal color palettes you can cycle through by pressing keys. Key Skills: Recursive functions Perlin noise animation Dynamic color gradients Transformations (translate, rotate, push/pop) Tree data structures and fractals by Anonymous · 271 views	📖 Read Docs 👁️ View
205	Generative Art This sketch generates unique abstract artwork by arranging randomly rotated shapes (circles, squares, and triangles) in a grid. Each shape's color, size, and rotation are controlled by Perlin noise, creating coherent organic patterns. Click the mouse or resize the window to generate new designs with different random seeds. Key Skills: Perlin noise Random seeding HSB color mode Transformation matrices (translate, rotate) Grid generation by Anonymous · 270 views	📖 Read Docs 👁️ View
206	emoji clicker This sketch creates an interactive emoji clicker game where players tap a giant smiling emoji to earn points, then purchase upgrades that automatically generate points over time. As upgrades are purchased, the game progressively unlocks more powerful earning mechanisms, creating an idle game experience. Key Skills: Object arrays Game state management DOM elements in p5.js Event handling Exponential scaling by Anonymous · 269 views	📖 Read Docs 👁️ View
207	Sketch 2026-02-13 17:42 Poubelle Shooter is a first-person shooter game that combines three.js 3D graphics with p5.js UI overlays. Players navigate a 3D environment using WASD keys, aim with the mouse, and shoot randomly spawning garbage cans to earn points within a 60-second timer while managing a health system. Key Skills: Three.js 3D graphics library Raycasting for collision detection Pointer lock controls (FPS-style camera) Game state management Object spawning and pooling by Anonymous · 268 views	📖 Read Docs 👁️ View
208	sunrise This sketch animates a peaceful day-night cycle, showing the sky transitioning from starry night through dawn, bright day, sunset, and back to night. Clouds drift across the sky, birds glide through the scene, and a glowing sun arcs from the bottom to the top of the canvas, while layered silhouettes form a rolling ground at the horizon. Key Skills: Color interpolation with lerpColor Object-oriented programming with classes Array iteration and object management Alpha transparency and fade effects Progress-driven animation by Anonymous · 267 views	📖 Read Docs 👁️ View
209	ai firework launcher This sketch creates an interactive fireworks display where each mouse click launches a colorful rocket that explodes into glowing particles with physics-based motion. The particles fade and fall under gravity, leaving soft trails across a dark canvas to create a vibrant, animated light show. Key Skills: Object-oriented programming with ES6 classes Particle systems and array management Physics simulation with forces and vectors HSB color mode for color generation Semi-transparent backgrounds for motion trails by Anonymous · 267 views	📖 Read Docs 👁️ View
210	spider man 2 test This sketch creates a 3D Spider-Man vs Venom battle scene in WEBGL mode with a procedurally generated city, realistic lighting, and character models built from geometric shapes. Miles Morales and Venom start on opposite sides of the canvas, approach each other, fight with visual effects, and reset to repeat the cycle. Key Skills: WEBGL 3D rendering 3D transforms (translate, rotate, scale) Procedural generation State machines Lighting and shading by Anonymous · 267 views	📖 Read Docs 👁️ View
211	Sketch 2026-02-07 15:33 This sketch creates an interactive audio-reactive image distortion effect that displays an image with bulges and pinches controlled by microphone input and time-based oscillations. The distortion effect follows your mouse cursor and responds to sound levels, creating a mesmerizing, morphing visual. Key Skills: Pixel manipulation Audio input and amplitude analysis Polar coordinates and transformations Time-based animation with sine waves Mouse interaction by Anonymous · 266 views	📖 Read Docs 👁️ View
212	neon pong This is a souped-up Pong game that explodes with 10+ game modes, AI opponents, boss battles, gravity wells, portals, and a gun upgrade shop. Players earn coins by scoring, buy gun upgrades with coins, and battle through escalating levels in single-player mode or face off against a friend. Key Skills: Game state management Collision detection (ball-paddle, ball-boss, bullet-ball) Physics and velocity AI pathfinding and decision making Mode-based configuration and scaling by Anonymous · 265 views	📖 Read Docs 👁️ View
213	invest in CORBUN does weird webs (game) This sketch simulates a stock trading game where you buy and sell shares of the fictional CORBUN stock. A glowing price chart updates in real-time with random price movements, and buttons let you trade shares and watch your portfolio value change instantly. Key Skills: Interactive buttons Game state management Random walk simulation Real-time data visualization Normalization and scaling by Anonymous · 265 views	📖 Read Docs 👁️ View
214	cool games This sketch creates an interactive game where a blue circle follows your mouse and collects pink squares that appear randomly on the canvas. Each collection increases your score and spawns a new item to chase, creating a simple but engaging clicker game. Key Skills: Mouse tracking Collision detection Distance formula Game loops Score tracking by Anonymous · 265 views	📖 Read Docs 👁️ View
215	Sketch 2026-02-13 04:38 This is a spiritual wellness and productivity application built with p5.js and DOM elements that combines daily task management, affirmations, confessions, and time-based alarms. All data persists in browser localStorage and automatically resets daily, helping users maintain spiritual practices and stay organized. Key Skills: localStorage data persistence DOM selection and manipulation Event listeners and user interaction JSON serialization Date and time handling by Anonymous · 264 views	📖 Read Docs 👁️ View
216	king of ai chatbots This sketch creates Larry, a conversational AI chatbot that runs entirely in your browser. Larry learns from your inputs, remembers conversations, detects mood and intent, and responds with personality using voice recognition and text-to-speech capabilities. Key Skills: Text processing and regular expressions Markov chain text generation Intent detection and pattern matching Sentiment analysis localStorage persistent memory by Anonymous · 263 views	📖 Read Docs 👁️ View
217	Aquarium Attempt - xelsed.ai (Remix) This interactive aquarium simulation lets players purchase and manage 12 different sea creature types using coins earned when creatures eat each other. The sketch features dynamic predator-prey relationships, depth-based rendering, animated ocean backgrounds, and a summoned Manta Ray boss that can absorb nearby fish. Key Skills: Object-oriented design (ES6 classes) Array management and splice() Predator-prey mechanics Depth-based rendering and layering State machines (Octopus hopping, Manta Ray gulping) by Anonymous · 263 views	📖 Read Docs 👁️ View
218	FNAF This sketch creates a interactive 3D recreation of Freddy Fazbear's Pizza using Three.js, featuring a dining hall with an animatronic stage, tables, Pirate Cove alcove, and restrooms. Players navigate with WASD/arrow keys, look around with the mouse, and switch between security camera views with Q/E, experiencing the iconic FNAF location in first-person perspective. Key Skills: Three.js scene graph and groups Procedural texture generation with Canvas 2D First-person camera control with pointer lock Quaternion-based camera rotation Dynamic lighting and flickering effects by Anonymous · 263 views	📖 Read Docs 👁️ View
219	object spawner fps test This sketch creates an interactive FPS performance test that spawns and animates hundreds or thousands of bouncing household objects. Users type a number and press ENTER to spawn that many objects, which then bounce around the canvas with rotation, collision detection, and detailed visual representations of items from electronics, school supplies, furniture, and outdoor gear categories. Key Skills: ES6 Classes Object-oriented programming Collision detection Velocity and physics Nested switch statements by Anonymous · 263 views	📖 Read Docs 👁️ View
220	mazey This sketch creates an interactive maze game where players navigate a red cube from a green start cell to a blue goal cell using arrow keys or WASD. The maze is procedurally generated using the Recursive Backtracker algorithm, and the cube moves smoothly between cells with interpolation. Key Skills: Procedural maze generation Recursive Backtracker algorithm Grid-based navigation Lerp-based smooth animation Collision detection with walls by Anonymous · 263 views	📖 Read Docs 👁️ View
221	escape tsunamis for brainrots v2 A fast-paced arcade survival game where you collect colorful "brainrot" characters, deposit them in your base for passive income, and dodge tsunamis that spawn from above. You can buy speed upgrades, activate utility waves for strategic advantages, and manage an inventory—all while racing against rising water. Key Skills: Collision detection Game state management Array and object manipulation Animation loops Event-driven input by Anonymous · 262 views	📖 Read Docs 👁️ View
222	Good This sketch creates an interactive emoji restaurant simulation where customers arrive, find tables, eat, and pay. Special characters like robbers steal food while police officers chase them, and sailboat people enjoy meals—all controlled by clicking or touching tables to spawn food. Key Skills: State machines Object-oriented programming with class inheritance Collision detection and avoidance Animation loops Array management and filtering by Anonymous · 262 views	📖 Read Docs 👁️ View
223	Shadow maze 2.6 Shadow Maze 2.6 is a stealth maze game where players navigate through fog-shrouded levels while avoiding enemies and collecting coins. The game features single-player and two-player cooperative modes, a progressive difficulty system with an in-game shop for purchasing upgrades, and a light-radius mechanic that reveals only the immediate area around each player, creating tension and exploration. Key Skills: Game state machine Collision detection Fog of war / masking with beginContour Enemy AI pathfinding Particle effects and trails by Anonymous · 262 views	📖 Read Docs 👁️ View
224	Alpha Omega Alpha Omega is a two-player cooperative battle game where a blue circle and red square team up to defeat a central boss enemy. Players move with keyboard controls, throw five types of projectiles (knives, daggers, fireballs, ice balls, and lightning) to damage the boss, manage cooldown timers, and avoid the boss's collision attacks while tracking health bars for all characters. Key Skills: Collision detection Class-based projectile systems Game state management Cooldown timers with millis() Array management and deletion by Anonymous · 262 views	📖 Read Docs 👁️ View
225	play with your food This interactive p5.js sketch lets players drag colorful food items onto a white plate to create edible arrangements. A scoring system judges creativity based on variety, balance, symmetry, and food pairings, then delivers parent-themed feedback on the player's culinary design. Key Skills: Game state management with switch statements Mouse interaction and dragging detection Array manipulation and object iteration Scoring algorithms with multiple weighted factors Collision detection and proximity checking by Anonymous · 262 views	📖 Read Docs 👁️ View
226	Sketch 2026-02-08 21:36 Neural Flow Weaver is an abstract visualization of an interconnected network where animated nodes drift across the canvas and connect dynamically based on proximity. The sketch combines animated nodes, philosophical text insights, ambient soundscapes generated with Tone.js, and interactive audio feedback—creating a meditative experience that represents information processing and problem-solving. Key Skills: Particle systems and animation Distance-based geometry (collision detection) Perlin noise and organic randomness Tone.js synthesizers and audio effects Euclidean rhythm patterns by Anonymous · 262 views	📖 Read Docs 👁️ View
227	ScuffedSixSiege Scuffed Six Siege is a top-down tactical shooter inspired by Rainbow Six Siege where players compete in an attack-vs-defend bomb-planting game mode. Teams spawn on opposite sides of a procedurally generated map with destructible walls, hidden rooms, and pathfinding AI opponents that scale difficulty by rank. Key Skills: Game state machine Procedural obstacle generation Grid-based pathfinding (BFS) Collision detection (circle vs rect, bullet vs soldier) Difficulty scaling and rank progression by Anonymous · 261 views	📖 Read Docs 👁️ View
228	Feelings and Emotions This is an interactive educational game that teaches children to identify emotions by presenting real-life situations and asking them to select the correct emotional response from three choices. The sketch displays animated emoji-like faces that change expressions to match the emotion being taught, with a scoring system that tracks correct answers and provides immediate visual feedback. Key Skills: DOM manipulation with p5.js Data-driven game design State management across frames Conditional rendering with switch statements Responsive canvas drawing with translate and proportional sizing by Anonymous · 261 views	📖 Read Docs 👁️ View
229	Simple MineCraft Cline (Remix) This sketch creates a colorful 2D Minecraft-style sandbox where two players can simultaneously run, jump, mine, and place blocks to reshape the terrain. The world features procedurally-generated terrain, a day/night cycle with zombie spawns at night, and separate keyboard/touch controls for cooperative building. Key Skills: Procedural terrain generation with Perlin noise 2D tilemap and block grid systems Physics simulation with gravity and collision detection Multi-player input handling and control schemes Camera tracking and viewport culling by Anonymous · 260 views	📖 Read Docs 👁️ View
230	diary of a wimpy kid123 This is a side-scrolling parkour game themed around Diary of a Wimpy Kid where players jump over obstacles while being chased by Rodrick and Fregley. The game features double-jumping, collectible cheese items, increasing difficulty, and a notebook-style visual presentation. Key Skills: Game state management Collision detection Velocity and gravity physics Dynamic obstacle spawning Multiple animated objects by Anonymous · 260 views	📖 Read Docs 👁️ View
231	Door (Remix) This is a multi-level survival game where players navigate through 12 increasingly challenging scenarios—from clicking a door handle to avoiding zombies, laser grids, and falling airplane debris. Each level teaches different p5.js techniques like collision detection, mouse/keyboard input, state management, and real-time animation. Key Skills: Game state management Collision detection (rectangle-circle and rectangle-rectangle) Classes and object-oriented design Animation with deltaTime Mouse and keyboard input handling by Anonymous · 260 views	📖 Read Docs 👁️ View
232	Sketch poop This interactive restaurant simulator lets you shoot food emojis at hungry customers sitting at tables. Customers eat, pay, and leave in sequence, while occasionally someone falls and needs an ambulance—click their phone emoji to call for help. The sketch combines emoji-based animation, collision detection, and state management to create a playful chaos simulator. Key Skills: Collision detection (AABB rectangle-rectangle) State machines and object properties Array management and filtering Vector math and direction calculation Responsive canvas layout by Anonymous · 260 views	📖 Read Docs 👁️ View
233	potato ai official 1.0 (corbun does weird webs upd ) This sketch creates a playful chat interface where users converse with "Potato AI" (Jeff), a quirky potato-themed chatbot that responds to messages, asks conversational questions, and occasionally displays potato-themed images or bizarre Easter eggs. Key Skills: HTML element creation (createDiv, createInput, createButton) Event listeners and callbacks (mousePressed, keypress) Conditional logic and keyword detection Asynchronous timing (setTimeout) String methods (toLowerCase, includes) by Anonymous · 259 views	📖 Read Docs 👁️ View
234	DIE This is a Flappy Bird-style game where a fish navigates through moving seaweed obstacles while jumping and shooting missiles. The player controls the fish with the spacebar or mouse clicks to jump, presses 'x' to shoot missiles at obstacles, and tries to pass through as many obstacles as possible without hitting them or the screen edges. The game tracks score and ends on collision. Key Skills: Game state machines Object-oriented design Collision detection (bounding boxes) Physics simulation (gravity and velocity) Dynamic object spawning by Anonymous · 259 views	📖 Read Docs 👁️ View
235	test This sketch creates an interactive clicker game where players click on a live webcam feed to earn clicks, which can be spent on upgrades like click multipliers and auto-clickers. The interface features a circular video target in the main game area and a responsive sidebar panel displaying available upgrades with buy buttons. Key Skills: Video capture and masking Responsive layout and window resizing Game state management with objects Mouse interaction and click detection Distance-based collision detection by Anonymous · 258 views	📖 Read Docs 👁️ View
236	veck.io pls friend moon_noob on the real website veck.io This sketch creates a hybrid 2D/3D space shooter game using p5.js for UI and game logic combined with Three.js for 3D rendering. Players control a spaceship on a procedurally generated grid arena, shooting down incoming red enemies while managing health, across three game states: start screen, active gameplay, and game over screen. Key Skills: Game state management Collision detection with bounding boxes Procedural generation with noise Canvas layering and z-index Coordinate system mapping by Anonymous · 258 views	📖 Read Docs 👁️ View
237	buy a brainrot This is an idle-game-style clicker where you rescue colorful brainrots walking down a runway, bring them back to your base to generate passive income, or sell them at a market for cash. The sketch combines collection mechanics, passive income systems, rarity tiers, and persistent save/load functionality. Key Skills: Game state management Passive income systems Collision detection and pickup Rarity and loot tables UI scrolling and overlays by Anonymous · 258 views	📖 Read Docs 👁️ View
238	Food This sketch is an interactive emoji-catching game where players move a basket to catch falling food emojis while avoiding disasters and hazards. When bad emojis are caught, police officers, cars, helicopters, fire trucks, and tow trucks arrive to respond to the chaos in an escalating comedy of emergency vehicles. Key Skills: State machines and finite states Collision detection (AABB bounding boxes) Object arrays and management Animation and frame-based timing Responsive canvas and window resizing by Anonymous · 258 views	📖 Read Docs 👁️ View
239	Sketch 2026-02-22 23:12 This sketch creates a 3D first-person shooter game using Three.js inside p5.js. Players navigate a 3D environment with WASD keys, aim with the mouse, and click to shoot red target boxes that reposition when hit, with a score tracker for each successful shot. Key Skills: Three.js scene, camera, and renderer PointerLockControls and FPS movement Raycasting and collision detection Velocity and physics simulation Event listeners for keyboard and mouse input by Anonymous · 258 views	📖 Read Docs 👁️ View
240	Snail game (Remix) This is a complete snail-themed collection game where players guide a customizable snail around obstacle-filled maps to collect food and reach score targets to unlock new levels. The game features multiple difficulty maps, speed-boosting candies, pickaxes to destroy obstacles, inventory systems, and an admin panel for cheats. Key Skills: Object-Oriented Programming (Classes) State Machine & Game Flow Collision Detection (Circle-Rectangle) Keyboard & Mouse Input LocalStorage Persistence by Anonymous · 257 views	📖 Read Docs 👁️ View
241	escape tsunamis for brainrots v2 (Remix) This is a fast-paced arcade game where players collect colorful "brainrot" creatures and deposit them in a base while evading incoming tsunami waves. The game combines resource collection, inventory management, shop upgrades, and special wave power-ups to create a chaotic, score-driven experience. Key Skills: Game state management Real-time collision detection Inventory and resource management UI layout and interaction Object animation and interpolation by Anonymous · 257 views	📖 Read Docs 👁️ View
242	fun fps This sketch animates a soft red ball bouncing around a responsive canvas while a bright blue loading bar steadily fills across the bottom. The canvas automatically resizes when you resize the window, and the ball adapts its collision detection to avoid the loading bar area. Key Skills: Animation loop Collision detection with radius Velocity physics Responsive canvas resizing Multiple animated elements by Anonymous · 257 views	📖 Read Docs 👁️ View
243	Sketch 2026-01-26 02:56 This sketch creates a fully playable Pong game where two players control paddles on opposite sides of the screen to bounce a ball back and forth. The game tracks scores and resets the ball whenever it goes out of bounds on either side. Key Skills: Object properties and state management Collision detection (bounding box) Keyboard input with keyIsDown() Game loops and frame-based animation Score tracking and game events by hpesoj · 257 views	📖 Read Docs 👁️ View
244	spider man This sketch animates Spider-Man swinging back and forth on a web across a night-time cityscape filled with flickering building windows and twinkling stars. The character rotates and leans naturally with the swing motion while a dynamic sky gradient transitions from deep purple to sunset orange. Key Skills: Trigonometric animation (sine waves) Pendulum physics simulation Procedural generation (random buildings) Perlin noise for organic variation Color gradients and lerping by Anonymous · 256 views	📖 Read Docs 👁️ View
245	the wimpy game This sketch creates a dodge-and-collect game where players control a wimpy stick figure kid navigating a school hallway. The player must avoid falling bullies while collecting homework pages to increase their score, losing lives when hit by bullies and ending the game when all three lives are lost. Key Skills: Game state management Collision detection (AABB) Object spawning and pooling Input handling Difficulty progression by Anonymous · 256 views	📖 Read Docs 👁️ View
246	run run run This sketch creates an adaptive platformer where an AI learns your fastest route and spawns hazards directly in your path. The visuals pulse between cool blues and hot reds based on how closely you follow the AI's predicted trajectory, creating a feedback loop where speed and visual intensity reinforce each other. Key Skills: Physics simulation and velocity Collision detection (AABB and circle-rectangle) Procedural difficulty scaling Machine learning pattern recognition Color interpolation and visual feedback by Anonymous · 256 views	📖 Read Docs 👁️ View
247	Minesweeper This sketch implements the classic Minesweeper game in p5.js with a 10x10 grid where players click to reveal cells and right-click to flag suspected mines. The game includes mine placement that avoids the first click, automatic cell flooding for empty cells, and a timer tracking game duration. Key Skills: 2D arrays and grid data structures Mouse events and input handling Recursive flood-fill algorithms Game state management Collision and neighbor detection by hpesoj · 256 views	📖 Read Docs 👁️ View
248	triple t virus This sketch creates a fake virus warning screen with a menacing red background, animated text that floats and fades, two interactive buttons, and terrifying jumpscare images that flash on screen at unpredictable intervals. It combines visual pranks, sound effects, and responsive design to create an immersive (and unsettling) interactive experience. Key Skills: Timer-based event scheduling Image preloading and rendering Custom animation class Array manipulation with splice Responsive canvas resizing by Anonymous · 255 views	📖 Read Docs 👁️ View
249	cookie clicker by:moon_noob This is a Cookie Clicker game where players click a central cookie to earn points, then purchase upgrades that generate cookies automatically. The game features persistent save/load functionality using localStorage, responsive button positioning, and real-time score updates displaying cookies per second (CPS). Key Skills: Game loops and state management deltaTime-based animation Object arrays and upgrade progression localStorage persistence DOM manipulation with p5.buttons by Anonymous · 255 views	📖 Read Docs 👁️ View
250	collect the balls V3 Collect the Balls! is a fast-paced arcade game where players move a paddle to catch falling balls, earn points, and spend their score in a shop to unlock skins and score multipliers. The game features progressive difficulty scaling, a menu system, and persistent cosmetic upgrades that affect both gameplay and visuals. Key Skills: Game state management Collision detection Mouse interaction Button UI controls Persistent data (score, purchases) by Anonymous · 255 views	📖 Read Docs 👁️ View