📖 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

#	Sketch Details	Actions
701	Sketch 2026-02-22 22:27 This sketch simulates a busy emoji restaurant where customers arrive, find seats at tables, eat food, and leave. Click or tap the kitchen area to generate food items that customers will eat, creating a dynamic, interactive restaurant simulation with state machines and object-oriented design. Key Skills: State machines (ARRIVING, SEEKING_TABLE, MOVING_TO_CHAIR, EATING, LEAVING) Object-oriented design with classes Pathfinding with atan2 and trigonometry Object references and linking Array cleanup and memory management by Anonymous · 251 views	📖 Read Docs 👁️ View
702	Sketch 2026-02-22 21:31 This sketch simulates multiple NPC characters autonomously cutting and eating a pumpkin and food items displayed on the canvas. NPCs move toward randomly chosen targets (either the pumpkin or food emojis), and when targeting food, they shrink it as they 'eat' it until it disappears. Key Skills: Object-oriented programming with classes Autonomous agent behavior Trigonometric movement (atan2, cos, sin) Array filtering and dynamic removal State management (isTargeted, isCuttingFood flags) by Anonymous · 262 views	📖 Read Docs 👁️ View
703	Sketch 2026-02-22 19:32 This is an interactive arcade-style game where players control a gun at the bottom of the screen to shoot falling tacos while avoiding bones and garlic. The game features a scoring system, multiple gun upgrades with different firing patterns, and a game-over state triggered by hitting bad items. Key Skills: Game state management Collision detection Classes and object-oriented design Array iteration and manipulation Event handling (touch/click) by Anonymous · 274 views	📖 Read Docs 👁️ View
704	gta 6 current state This 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: three.js 3D scene and rendering 3D camera following and first-person view Object transformation (position, rotation, quaternion) Raycasting for intersection detection AI pathfinding with angle smoothing by Anonymous · 343 views	📖 Read Docs 👁️ View
705	gta6 current state This 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: three.js 3D scene, camera, renderer Procedural chunk-based world generation Enemy AI with pathfinding and chasing Raycasting for shooting/hit detection Game state and wanted level system by Anonymous · 350 views	📖 Read Docs 👁️ View
706	day dreaminj fish This 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: State management (sleeping, feeding, shooting) Animation loops and smooth motion (lerp) Particle systems (bubbles and food) Event handling (mouse clicks, keyboard input) UI positioning and responsiveness by Anonymous · 346 views	📖 Read Docs 👁️ View
707	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 · 284 views	📖 Read Docs 👁️ View
708	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: Vector math and forces Particle systems Mouse interaction dat.gui parameter controls ES6 classes by Anonymous · 356 views	📖 Read Docs 👁️ View
709	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 · 283 views	📖 Read Docs 👁️ View
710	Webcam Effects This 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: Video capture and webcam access Pixel-level image manipulation Coordinate mapping and scaling Built-in p5.js filters Interactive mode switching by Anonymous · 326 views	📖 Read Docs 👁️ View
711	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 · 286 views	📖 Read Docs 👁️ View
712	Aplikasi Surat Masuk & Keluar This is a DOM-based email/letter management application built with p5.js that allows users to compose, send, and receive simulated letters. The sketch manages two arrays (inbox and outbox) and dynamically creates HTML elements to display sent and received letters with timestamps. Key Skills: DOM manipulation (createDiv, createButton, select) Event handling (mousePressed, addEventListener) Arrays and objects Application state management Conditional rendering by Anonymous · 285 views	📖 Read Docs 👁️ View
713	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 · 305 views	📖 Read Docs 👁️ View
714	YouTube 67 This sketch creates an animated text display where the word 'Ryzzbray' bounces around the canvas in both horizontal and vertical directions. The text reverses direction when it hits the edges, mimicking a classic bouncing ball animation. Key Skills: Animation loop Velocity and position updates Collision detection with boundaries Text rendering in p5.js Responsive canvas by Anonymous · 285 views	📖 Read Docs 👁️ View
715	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 · 282 views	📖 Read Docs 👁️ View
716	Sketch 2026-02-19 21:55 This sketch recreates the Cookie Clicker game mechanic with a giant clickable cookie on the left and upgradeable buildings on the right. It features a day/night cycle, twinkling stars, animated click effects, and a progression system where players earn cookies through clicking and passive generation. Key Skills: Mouse interaction and collision detection Game state management with objects and arrays Color interpolation and day/night cycles Upgrade systems with exponential cost scaling UI layout and scrollable panels by Anonymous · 268 views	📖 Read Docs 👁️ View
717	Sketch 2026-02-19 21:46h This sketch creates an interactive lightning storm scene where a tree stands in a landscape and randomly gets struck by branching lightning bolts. When lightning hits the tree, it animates falling to the ground over one second with a realistic rotation, and the background flashes white during each strike. Key Skills: Recursion and fractals Collision detection Animation with lerp and timing Transform matrices (push, pop, translate, rotate) Procedural generation by Anonymous · 267 views	📖 Read Docs 👁️ View
718	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 · 297 views	📖 Read Docs 👁️ View
719	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 · 306 views	📖 Read Docs 👁️ View
720	Painting 2/16/2026 This sketch loads an external image file and displays it centered on the canvas, scaled proportionally to fit the window without distortion. The image is drawn once and animation stops, creating a static gallery-like viewer. Key Skills: Image loading Proportional scaling Aspect ratio Canvas centering preload() function by Anonymous · 259 views	📖 Read Docs 👁️ View
721	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 · 292 views	📖 Read Docs 👁️ View
722	Sketch 2026-02-16 07:50 This 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: Audio synthesis with oscillators Real-time audio amplitude measurement Perlin noise for organic patterns HSB color mode (Hue, Saturation, Brightness) Device sensor integration (accelerometer/gyroscope) by Anonymous · 357 views	📖 Read Docs 👁️ View
723	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 · 318 views	📖 Read Docs 👁️ View
724	Sketch 2026-02-15 20:14 This sketch creates an interactive auto-clicker that rapidly increments a click counter on screen while playing rapid beep sounds. Clicking the big green button starts a high-speed interval that fires as fast as the browser allows, demonstrating setInterval timing, DOM manipulation, and p5.sound audio feedback. Key Skills: Event handling (mousePressed callbacks) DOM manipulation (createButton, createP, .html()) setInterval and timer functions p5.sound oscillators and amplitude envelopes State management (isAutoClicking flag) by Anonymous · 268 views	📖 Read Docs 👁️ View
725	egg This sketch creates an idle farming game where players plant glowing seeds that grow and generate income, while managing an 'egg level' that speeds up growth. A random wind gust periodically sweeps across the screen, resetting the game and forcing strategic decisions about when to rebirth for increased passive income. Key Skills: Class-based object design Array iteration and management Game state and reset mechanics Keyboard event handling Incremental/idle game loops by Anonymous · 278 views	📖 Read Docs 👁️ View
726	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 · 290 views	📖 Read Docs 👁️ View
727	Sketch 2026-02-14 10;08 This sketch is a catch-the-falling-objects game where the player controls a blue circle at the bottom of the screen to catch red circles falling from above. Catching points increases your score, but missing them decreases it—the game mechanics are designed to teach persistence and never giving up. Key Skills: Game loop and state management Arrays and dynamic object creation Collision detection with dist() Keyboard and mouse input handling Object properties and methods by Anonymous · 276 views	📖 Read Docs 👁️ View
728	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 · 307 views	📖 Read Docs 👁️ View
729	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 · 325 views	📖 Read Docs 👁️ View
730	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 · 279 views	📖 Read Docs 👁️ View
731	lookpassword LostApp is a cyberpunk-themed secure vault application that requires login credentials to unlock. Once authenticated, users can store encrypted entries called 'flies' with optional media attachments, manage a 180-minute storage budget, upload custom background music, and email reports—all while animated floating dots create a neon aesthetic in the background. Key Skills: State management and conditional visibility Form input validation and data collection Arrays of objects for complex data storage File uploads and media handling p5.dom for UI element creation by Anonymous · 259 views	📖 Read Docs 👁️ View
732	Sketch 2026-02-14 08:55 This sketch creates an unsettling interactive creature that appears to escape the digital canvas. A dark blob-like entity with five glowing yellow eyes that track your mouse movements is accompanied by eerie ambient sounds (white noise with reverb and a low-frequency hum). Semi-transparent red bars peek from the canvas edges, and the webpage background flickers with a glitchy dark effect, blurring the boundary between the sketch and the webpage. Key Skills: Perlin noise and procedural generation Mouse tracking and coordinate mapping p5.sound synthesis and audio effects DOM manipulation with p5.js Canvas boundaries and drawing outside by Anonymous · 263 views	📖 Read Docs 👁️ View
733	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 · 278 views	📖 Read Docs 👁️ View
734	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 · 292 views	📖 Read Docs 👁️ View
735	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 · 297 views	📖 Read Docs 👁️ View
736	Sketch 2026-02-13 23:51 This sketch builds a mini GTA-style open-world prototype entirely with three.js, using p5.js only as a bootstrapper for setup/preload and a synthetic gunshot sound. A drivable car, a first-person on-foot character with a gun, and 50 wandering NPCs populate a procedurally scattered city of boxy buildings and roads, and pressing 'E' swaps you between driving the car and walking around shooting NPCs with raycasting. Key Skills: three.js scene graph & THREE.Group composition Perspective camera follow behavior Quaternion-based forward-vector movement Raycasting for hit detection Keyboard input state tracking by Anonymous · 434 views	📖 Read Docs 👁️ View
737	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 · 318 views	📖 Read Docs 👁️ View
738	Simple Game This sketch creates an interactive 'Kick The Buddy' game where players click on an animated character to damage it with three escalating weapons. The character bounces around the canvas with physics simulation, displays floating damage numbers, and can be knocked out with screen shake effects. Key Skills: Physics simulation with gravity and velocity Collision detection and response Particle systems and visual effects State management in games Color interpolation and gradual changes by Anonymous · 276 views	📖 Read Docs 👁️ View
739	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 · 324 views	📖 Read Docs 👁️ View
740	Sketch 2026-02-13 08:47 This sketch creates a face recognition attendance system that uses webcam input to detect faces, verify liveness through blink detection, and automatically mark attendance for recognized students. Attendance records are stored locally in the browser and can be displayed as reports showing attendance percentages. Key Skills: Face detection using pre-trained neural networks Face recognition via descriptor matching Liveness detection through eye aspect ratio Asynchronous model loading from CDN Browser local storage for data persistence by Anonymous · 269 views	📖 Read Docs 👁️ View
741	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 · 292 views	📖 Read Docs 👁️ View
742	aktinometr Aktinometr is an environmental monitoring dashboard that displays real-time solar radiation, temperature, and humidity data with animated graphs and statistics. It can simulate realistic sensor data with daily cycles or connect to an ESP32 microcontroller via WebSocket for live measurements. Key Skills: WebSocket communication Real-time data visualization Perlin noise for natural variation Smoothing with lerp() Multi-series line graphs by Anonymous · 278 views	📖 Read Docs 👁️ View
743	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 · 288 views	📖 Read Docs 👁️ View
744	backrooms This 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: Three.js 3D scene, camera, and rendering Procedural maze generation (recursive backtracking) Pathfinding algorithms (breadth-first search / BFS) Collision detection in 3D space Game state machines by Anonymous · 347 views	📖 Read Docs 👁️ View
745	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 · 303 views	📖 Read Docs 👁️ View
746	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 · 290 views	📖 Read Docs 👁️ View
747	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 · 338 views	📖 Read Docs 👁️ View
748	exploding smiley face 5 min timer This sketch creates a 5-minute countdown timer with an animated yellow smiley face ball that bounces around the canvas. When the timer reaches zero, the smiley face freezes and explodes in an expanding orange burst, followed by a 'TIME'S UP!' message. Key Skills: Time tracking with millis() Animation and state management Collision detection and bouncing Layered graphics and compositing Responsive canvas resizing by Anonymous · 308 views	📖 Read Docs 👁️ View
749	sensor ultrasonico This sketch creates a real-time web dashboard that receives distance measurements from 4 ultrasonic sensors via Bluetooth (HC-05/HC-06 module connected to Arduino). The dashboard displays color-coded distance readings—green for far, yellow for medium, red for close—and manages the wireless connection state with a visual connection indicator. Key Skills: Web Bluetooth API Asynchronous programming (async/await) Data streaming and buffering CSV parsing Event listeners by Anonymous · 282 views	📖 Read Docs 👁️ View
750	dino This 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: Reinforcement Learning Collision Detection (AABB) Game State Management Physics Simulation (Gravity & Velocity) Classes and Inheritance by Anonymous · 337 views	📖 Read Docs 👁️ View