📖 Code Guides - Complete Catalog

Comprehensive table of contents for all 821 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.

821 fully documented sketches · Organized by creation date · Real concepts from AI-generated docs

#	Sketch Details	Actions
251	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 · 273 views	📖 Read Docs 👁️ View
252	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 · 273 views	📖 Read Docs 👁️ View
253	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 · 272 views	📖 Read Docs 👁️ View
254	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 · 272 views	📖 Read Docs 👁️ View
255	battles ageist mythical creatures This is a turn-based battle game where players select a mythical creature and engage in strategic combat against randomly generated enemies. The game features character progression through a shop system, permanent ability upgrades, pet companions that fight alongside the player, and multiple battle sequences with increasing difficulty. Key Skills: Game state management Object-oriented classes Turn-based game logic Mouse and keyboard input handling Inventory and shop systems by Anonymous · 272 views	📖 Read Docs 👁️ View
256	Sketch 2026-03-04 21:03 This is not a p5.js creative coding sketch. The provided code is a full-stack web application (PHP backend + HTML/CSS frontend) for a Medicare CRM system, not a visual sketch created with p5.js. Key Skills: Arrays & loops by Anonymous · 271 views	📖 Read Docs 👁️ View
257	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 · 271 views	📖 Read Docs 👁️ View
258	gta6 current state updated This sketch creates an immersive 3D GTA-style game where you drive a car through an endless procedurally generated city, then step out on foot to shoot enemies while evading increasingly aggressive police vehicles. As your wanted level rises from 0 to 5 stars, cop cars, SWAT trucks, Humvees, and finally tanks spawn and hunt you down. Key Skills: Three.js 3D rendering Procedural chunk-based world generation AI pathfinding and chasing Collision detection and physics Raycasting for shooting and hit detection by Anonymous · 271 views	📖 Read Docs 👁️ View
259	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 · 270 views	📖 Read Docs 👁️ View
260	escape tsunamis for brainrots This is a fast-paced evacuation game where you collect colorful 'brainrots' and escape advancing tsunami waves. You manage inventory, buy speed upgrades, and activate utility waves with coins earned from storing brainrots—all while staying ahead of the rising water. Key Skills: Game state management Collision detection Inventory and item systems Tween/easing (lerp) Arrays and object manipulation by Anonymous · 270 views	📖 Read Docs 👁️ View
261	red vs blue This sketch creates a two-player capture-the-flag game where a red player and blue player compete to steal each other's flags and return them to their own bases to score points. Players move with keyboard controls, pick up flags on collision, and can tag opponents to force them to drop the flag and respawn. Key Skills: Object-oriented programming with classes Collision detection Keyboard input and continuous movement Game state management Player respawning and item carrying by Anonymous · 270 views	📖 Read Docs 👁️ View
262	auto clicker super fast This sketch creates a simulated auto-clicker interface that rapidly increments a counter and plays audio feedback. Users toggle a button to start and stop the auto-clicker, which fires 100 times per second, updating a display and producing a short click sound with each increment. Key Skills: setInterval and timing State management with boolean flags DOM manipulation and HTML updates p5.sound oscillators and envelope control Button callbacks and event handling by Anonymous · 270 views	📖 Read Docs 👁️ View
263	btd clone lol This sketch recreates a tower-defense game where colorful balloons travel along a winding path while player-placed monkeys shoot them down. As rounds progress, balloons become tougher and faster, and players earn money to buy and upgrade their defenses before their lives run out. Key Skills: Object-oriented programming with classes Collision detection with distance checking Path following and vector movement Game state management Interactive upgrades and UI by Anonymous · 269 views	📖 Read Docs 👁️ View
264	dino game but with a twist:) This sketch creates a fast-paced dinosaur runner game where players tap to jump over randomly-sized cacti racing toward them. When you hit a cactus, an animated GIF briefly celebrates your crash before the game resets, adding a humorous twist to the classic endless runner genre. Key Skills: Game loop and frame-based animation ES6 classes and object-oriented design Gravity and velocity physics Axis-aligned bounding box collision detection Game state management with boolean flags by Anonymous · 269 views	📖 Read Docs 👁️ View
265	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 · 269 views	📖 Read Docs 👁️ View
266	CitySkyline This sketch creates a mesmerizing day-night cycle of a city skyline that continuously transforms over 60 seconds. Stars twinkle at night, clouds drift across the sky, birds fly at dawn, shooting stars streak overhead, and glowing lanterns rise from rooftops at dusk—all set against a smoothly gradient-shifting sky that transitions from deep night through sunrise, midday blue, sunset, and back again. Key Skills: Time-based state management Color interpolation and gradients Conditional rendering based on time ranges Object-oriented design with classes Graphics buffer optimization by Anonymous · 269 views	📖 Read Docs 👁️ View
267	BallBlaster BallBlaster is a space shooter game where players control a laser-firing ship at the bottom of the canvas and destroy falling neon orbs to score points. The game tracks lives, spawns enemies at intervals, handles collisions between lasers and balls, and ends when all lives are lost. Key Skills: Object-oriented programming with classes Collision detection (circle-circle and rectangle-circle) Game state management Array iteration and removal Vector mathematics and movement by Anonymous · 269 views	📖 Read Docs 👁️ View
268	Cowboy gunslinger! This sketch creates an action-packed cowboy shooter game where you defend yourself against waves of incoming outlaws. You aim and shoot at targets moving across the screen while they shoot back—lose three lives and it's game over. Key Skills: Game state management Array iteration and object storage Collision detection (distance and rectangular overlap) Touch and mouse input handling Trigonometry for aiming (atan2) by Anonymous · 269 views	📖 Read Docs 👁️ View
269	First to come This sketch creates an animated steam effect using thousands of particles that flow and swirl across the canvas, guided by Perlin noise. The particles react to mouse and touch input, parting away from your cursor like wisps of smoke around the glowing "P5JS.AI" logo. Key Skills: Perlin noise Particle systems Flow fields HSB color mode Velocity and acceleration by Anonymous · 268 views	📖 Read Docs 👁️ View
270	Civilization This sketch creates a Dungeons & Dragons-themed social simulation app where players can log in, manage resources, join groups, accept bounties, and communicate with party members. The interface uses a cyberpunk aesthetic with DOM elements to build a complete multi-screen application including user authentication, a marketplace, group management, and an admin control panel. Key Skills: DOM manipulation with p5.js Multi-screen state management User authentication and registration localStorage persistence Conditional rendering based on user role by Anonymous · 268 views	📖 Read Docs 👁️ View
271	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 · 268 views	📖 Read Docs 👁️ View
272	ping-pong This sketch is a modern Pong game where a glowing ball bounces between two paddles—one controlled by the mouse, the other by simple AI. Each collision triggers synthesized sound effects, and the first player to reach 5 points wins the game. Key Skills: Game loop and frame-based animation Collision detection (AABB bounds testing) Game state management AI logic (simple tracking) Sound synthesis with oscillators by Anonymous · 268 views	📖 Read Docs 👁️ View
273	The best snake game (Remix) This is a full-featured snake game with a grid-based gameplay system, multiple customizable snake outfits unlocked by reaching score thresholds, and a developer admin panel for testing and tweaking. Players navigate their snake around the canvas eating food to grow and score points while avoiding walls and self-collision. Key Skills: Game state machines Object-oriented class design Canvas-based UI drawing Grid-based movement Collision detection by Anonymous · 267 views	📖 Read Docs 👁️ View
274	collect the balls V2 Collect the Balls is a fast-paced arcade game where players catch falling colorful balls with a paddle to earn points. The game features a menu system, a shop to buy score multipliers, customizable paddle skins, and progressively increasing difficulty as you score more points. Key Skills: State management Collision detection Dynamic difficulty scaling UI button handling Game loops and frame-based animation by Anonymous · 267 views	📖 Read Docs 👁️ View
275	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 · 267 views	📖 Read Docs 👁️ View
276	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 · 267 views	📖 Read Docs 👁️ View
277	7 painful nights at corbuns zombie island v2 offical This is an immersive 3D first-person survival game built with Three.js where players explore a tropical island, manage health and hunger, and battle waves of zombies during nighttime. The game features day-night cycles, multiple zombie types, hired guards, a climbable ladder, and fruit-gathering mechanics. Key Skills: Three.js 3D rendering and scene graph First-person camera controls (PointerLockControls) Real-time collision detection (Box3, Sphere) Object-oriented game entities (Zombie, Bullet, Guard classes) Day-night cycle and time-based state management by Anonymous · 266 views	📖 Read Docs 👁️ View
278	Particle System with crazy meter 2 This sketch creates a swarm of glowing particles that drift across a dark canvas and are magnetically attracted to your mouse. A dat.gui slider labeled "crazy meter" lets you control the particle speed from calm and slow to wild and chaotic. Key Skills: Particle systems Vector physics Object-oriented programming Mouse interaction GUI integration by Anonymous · 266 views	📖 Read Docs 👁️ View
279	roblox trash This sketch creates a playful 3D Roblox-style scene using WebGL. It features a blocky character with waving arms standing on a ground plane, surrounded by trees, clouds, and colorful buildings, all rendered in a low-poly aesthetic with interactive camera controls. Key Skills: WebGL 3D rendering 3D transforms (translate, rotate, scale) 3D primitives (box, cylinder, sphere) Lighting and materials Camera controls with orbitControl() by Anonymous · 266 views	📖 Read Docs 👁️ View
280	day dreaming fish 3 This interactive sketch creates a dreamy underwater world where a charming fish cycles through its hopes and worries in floating thought bubbles. Players can chat with the fish, feed it by clicking, and watch it move gracefully through a bowl while small bubbles float upward—but neglect the fish too long and it falls asleep with an ominous twist. Key Skills: State management with boolean flags Timing and frameCount-based animation Smooth motion with lerp() Thought bubbles and text display Particle physics with gravity by Anonymous · 265 views	📖 Read Docs 👁️ View
281	A tale of space and science This sketch creates an animated cinematic narrative featuring stick figures exploring a cosmic story. Smooth gradient backgrounds, floating particles, and organic blob shapes evolve through nine scenes, with stick figures in different poses holding symbolic pixel-art items while text narrates their space exploration journey. Key Skills: Scene management and state arrays Gradient backgrounds and layered fills Perlin noise for organic animation Alpha transparency and fade effects Pose-based character animation by Anonymous · 265 views	📖 Read Docs 👁️ View
282	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 · 265 views	📖 Read Docs 👁️ View
283	Braylon's Strobe This sketch creates a high-energy strobe effect with a responsive canvas filled with colorful squares that pulse in different rhythms and the name "Braylon" flashing at the center. The entire scene toggles between light and dark backgrounds, giving it a dynamic, attention-grabbing visual presence. Key Skills: Frame counting and timing Modulo operator (%) for cycling behavior Conditional logic for state switching Responsive canvas sizing Color and fill properties by Anonymous · 265 views	📖 Read Docs 👁️ View
284	Zahlenschätzer This sketch is a number guessing game where players try to discover a secret number between 1 and 100 by entering guesses and receiving feedback. The game displays instructions, remaining attempts, and directional hints (too high/too low) on a clean interface with an input field and buttons. Key Skills: DOM interaction (input fields and buttons) Game state management Conditional logic Input validation Responsive canvas by Anonymous · 265 views	📖 Read Docs 👁️ View
285	Beachvibes Beachvibes is an interactive audio-visual sketch that creates a relaxing beach scene with animated ocean waves synchronized to dynamic sound effects. The sketch combines continuous wave noise with periodic crashing wave sounds, triggered with visual splash animations, while users control volume, wave depth, and crash frequency through interactive sliders. Key Skills: Audio synthesis with p5.sound Noise generators and filtering Envelope control (ADSR) Perlin noise animation Real-time parameter modulation by Anonymous · 264 views	📖 Read Docs 👁️ View
286	robux clicker This sketch creates an interactive Robux clicker game inspired by Roblox's premium currency system. Players click a glowing Robux-style symbol to earn currency, and can toggle an auto-clicker that generates income passively every second. Key Skills: Mouse collision detection (circular and rectangular) Time-based game mechanics (millis() and timestamp tracking) Interactive button state management Transform and scale effects (push/pop, translate, scale, rotate) Responsive UI with hover states by Anonymous · 264 views	📖 Read Docs 👁️ View
287	Sketch 2026-03-09 18:39 This is a chaotic emoji-collecting cooking game where you tap falling emojis to gather ingredients, call customers to the serving line, and serve meals while managing mayhem from special emojis that spawn UFOs, sharks, airplanes, armed people, and police. The sketch combines emoji rain mechanics, character animations, collision detection, and state management across dozens of interactive objects. Key Skills: Game state machines (MENU, PLAYING, FIGHTING) Object arrays and iteration with splice() ES6 class design with update() and display() pattern Collision detection (distance-based) DOM manipulation and p5.Div elements by Anonymous · 264 views	📖 Read Docs 👁️ View
288	Bouncing Blended Balls This sketch creates an interactive canvas filled with 15 semi-transparent colored circles that bounce off the walls and each other. When circles overlap, their colors blend together using additive color mixing, creating vibrant new hues. You can drag your mouse across the canvas to push the circles around. Key Skills: Object-oriented programming with ES6 classes Animation using the draw loop and velocity Collision detection and wall bouncing Additive color blending with blendMode() Mouse interaction and event handling by Anonymous · 264 views	📖 Read Docs 👁️ View
289	block stacker-2.0 This sketch creates an isometric 3D block-stacking game powered by Matter.js physics. Colorful blocks slide horizontally across the screen, and you click to drop them onto a growing tower, trying to stack as high as possible before the structure becomes unstable and tumbles. Key Skills: Matter.js physics engine Isometric projection and 3D drawing Collision detection and hit testing Camera movement and viewport control Game state management by Anonymous · 264 views	📖 Read Docs 👁️ View
290	System This interactive sketch simulates an airplane flying across the screen that drops supply boxes with parachutes at regular intervals. Players click or tap falling supplies to collect them and increment a food counter, while particle trails and synthesized sound effects create an engaging, gamified experience. Key Skills: Object-oriented design with ES6 classes Vector physics and velocity Particle systems and trails Collision detection with bounding boxes Array management with backward loops by Anonymous · 264 views	📖 Read Docs 👁️ View
291	xesled.ai synth pad This sketch creates an interactive 4×4 grid of colorful musical pads that play different notes when clicked. Each pad lights up on tap and triggers a sine wave oscillator with a unique frequency from a chromatic scale, creating a playable synthesizer interface. Key Skills: 2D grid layout Oscillators and sine waves Chromatic scale Mouse interaction State tracking with 2D arrays by Anonymous · 263 views	📖 Read Docs 👁️ View
292	hacker typer This sketch simulates a hacker terminal that types out neon-green code and system messages on a black background. Every time you press a key, a new word from a pre-written code snippet appears on screen, with lines breaking randomly to mimic real terminal output, and a blinking cursor marks where new text will appear. Key Skills: Keyboard event handling Text rendering and fonts String splitting and arrays Conditional logic and randomness Scrolling viewport by Anonymous · 262 views	📖 Read Docs 👁️ View
293	big one BIG ONE is a face-swapping and dress-up application that uses MediaPipe face detection to identify faces in videos, then overlays a source face image and optional outfit onto detected faces in real-time. Users can also add custom text overlays and record the result. Key Skills: Real-time face detection with MediaPipe Canvas rendering and compositing Image masking with graphics buffers DOM interaction and file input handling Responsive canvas resizing by Anonymous · 262 views	📖 Read Docs 👁️ View
294	lostapp for me only LostApp is a secure personal vault web application that requires login credentials to access. Once unlocked, users can store text entries, images, and videos with an optional time-budget tracker (maximum 180 minutes total), and email their stored entries as a report. Key Skills: DOM manipulation and p5.js createElement Event handling with mousePressed callbacks State management with global variables Form validation and input constraints Array operations and data persistence by Anonymous · 262 views	📖 Read Docs 👁️ View
295	aktinometr (Remix) This sketch creates an interactive weather station dashboard that displays real-time sensor data for solar radiation, temperature, and humidity. The visualization combines animated sensor cards with a multi-line graph showing measurement history, and supports both simulated data and live ESP32 hardware connections via WebSocket. Key Skills: Animation with lerp() Data visualization with beginShape/endShape Array history buffers Map function for scaling WebSocket communication by Anonymous · 262 views	📖 Read Docs 👁️ View
296	Try this This is a roguelike action game where you control a character that automatically attacks enemies with multiple weapons simultaneously. Defeat enemies to earn gold, buy upgrades in the shop, and survive increasingly difficult waves. Key Skills: Game state machines Object-oriented design with classes Collision detection using distance p5.Graphics texture rendering Touch input handling by Anonymous · 261 views	📖 Read Docs 👁️ View
297	buy a brainrot v3 This sketch creates a fast-paced resource collection game where you rescue magical creatures called brainrots that walk along a runway, deliver them to your base to generate passive income, and sell them for increasingly large sums of money. A competing AI bot also rescues brainrots, and you can upgrade your speed by visiting a power-up zone. Key Skills: Game state management Collision detection (circle-rectangle, circle-circle) Passive income systems AI pathfinding and targeting Save/load encoding (Base64) by Anonymous · 261 views	📖 Read Docs 👁️ View
298	Ball catcher This sketch creates an interactive catch game where colorful items fall from the top of the screen and the player controls a paddle with their mouse to catch them. Each caught item increases the score by 10 points, demonstrating spawning, collision detection, and responsive game mechanics. Key Skills: Array management Collision detection Spawning objects Object properties Mouse interaction by Anonymous · 261 views	📖 Read Docs 👁️ View
299	hostb This sketch creates an animated background of 60 pulsating bubbles that float smoothly across the canvas with semi-transparent trails. Each bubble has a gradient color based on its position and pulses in opacity, creating a fluid, dynamic visual effect designed to enhance the PayPalMoney demo website. Key Skills: Animation loop with frameCount Object arrays and for-of loops Trigonometric animation with sin() Color interpolation with lerp() Canvas wrapping and edge detection by Anonymous · 261 views	📖 Read Docs 👁️ View
300	fading colors This sketch creates an interactive visual trail effect where moving your mouse leaves behind a series of fading, shrinking circles that gradually disappear. Each circle represents a 'clone' of your mouse position frozen in time, creating a ghostly echo effect that reveals your recent movement path across the dark canvas. Key Skills: Arrays and object storage Time-based animation with millis() The lerp() function for smooth transitions Alpha transparency and color animation Object lifecycle management by Anonymous · 260 views	📖 Read Docs 👁️ View