📖 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
301	poop game This sketch draws a colorful stick figure man that fills the canvas using direct pixel manipulation. The figure scales dynamically to fit the window and demonstrates how to control individual pixels rather than using p5.js shape functions. Key Skills: Pixel array manipulation Direct pixel rendering Color objects and RGB channels Collision detection with rectangles Responsive canvas scaling by Anonymous · 260 views	📖 Read Docs 👁️ View
302	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 · 260 views	📖 Read Docs 👁️ View
303	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 · 259 views	📖 Read Docs 👁️ View
304	GUESS WHO!!! This sketch creates a hilariously dim-witted zombie jockey riding on a wobbly chicken. The bot blinks randomly, tracks the mouse with laggy eyes, and twitches awkwardly while the chicken beneath it wobbles side to side—a delightfully stupid animation powered by noise, transforms, and eye-tracking logic. Key Skills: Perlin noise for organic motion Transform stacking with push/translate/pop Relative positioning and coordinate systems Lerp for smooth interpolation State machines and timers by Anonymous · 259 views	📖 Read Docs 👁️ View
305	hit the blocks This is a classic arcade-style shooter game where players control a rotating blue square, aim with the mouse, and fire projectiles to destroy red enemy squares spawning from the screen edges. The game ends when an enemy reaches the player, with score tracking and sound effects included. Key Skills: Game state management Object-oriented programming with ES6 classes Collision detection (circle-rectangle and rectangle-rectangle) Trigonometry for aiming (atan2, cos, sin) Velocity and vector-based motion by Anonymous · 258 views	📖 Read Docs 👁️ View
306	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 · 258 views	📖 Read Docs 👁️ View
307	Black screen is gone This is a multi-level diamond hunting game where players pan across vast procedurally-generated towns at increasing depths to find and tap a hidden cyan diamond (or UFO, football, or cosmic object depending on the level). As difficulty increases across 9 levels, the diamond becomes smaller, the town denser, and special mechanics like digging, fishing, and asteroid-drifting are introduced. Key Skills: Procedural generation with grid-based seeding Camera systems and viewport translation Touch input and gesture panning Collision detection with distance calculations Multi-level game state management by Anonymous · 257 views	📖 Read Docs 👁️ View
308	jack and cappie both game This sketch creates an interactive 2D game where you control Jack as he walks around a simple neighborhood with two houses. By pressing arrow keys or WASD, you move Jack left and right to interact with family members, his girlfriend Cappie, and his beloved retro gaming consoles, each triggering friendly messages. Key Skills: Arrays and objects for game state Keyboard input and real-time interaction Distance-based collision detection 2D character and scene rendering Canvas responsiveness and window resizing by Anonymous · 257 views	📖 Read Docs 👁️ View
309	AI 3D Game of Life - Conway's Automata in Space (Remix) This sketch implements Conway's Game of Life in a 3D space using a 10×10×10 grid of cells. Live cells appear as rotating green boxes, and the automaton evolves each frame based on 3D neighbor rules, creating an ever-shifting pattern of emergence and decay. Key Skills: 3D arrays and indexing Cellular automata WEBGL 3D rendering Neighbor counting algorithms State management by Anonymous · 257 views	📖 Read Docs 👁️ View
310	five night at diddys This sketch recreates a simplified version of Five Nights at Freddy's in 3D using three.js for 3D rendering and p5.js for UI overlays. Players manage power, close doors, turn on lights, and survive animatronic attacks by monitoring security cameras and controlling office defenses for six in-game minutes. Key Skills: Game state management Finite state machines for AI Three.js 3D scene setup and rendering p5.js UI overlay system Delta time-based animation by Anonymous · 257 views	📖 Read Docs 👁️ View
311	block stacker This sketch is a timing-based stacking game where players click to place glowing isometric cubes onto a rising tower. A golden block glides back and forth across the top, and players must click precisely when it's aligned with the block below—miss by too much and the tower collapses, ending the game. Key Skills: Game loop and state management Isometric 3D drawing with 2D primitives Collision detection and accuracy calculation Camera following and smooth lerp animation Dynamic difficulty scaling by Anonymous · 257 views	📖 Read Docs 👁️ View
312	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 · 257 views	📖 Read Docs 👁️ View
313	bullet heaven Bullet Heaven is an action-packed arcade game where you pilot a glowing mech through a star-filled space, automatically targeting and firing at swarming enemies while dodging with keyboard controls. Collect rotating power-ups to boost your health, damage, fire rate, and score multiplier as waves of enemies attack from all sides. Key Skills: Game state machine Object-oriented design with classes Collision detection (distance-based) Automatic targeting and vector math Array management and iteration by Anonymous · 256 views	📖 Read Docs 👁️ View
314	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 · 256 views	📖 Read Docs 👁️ View
315	low-key timer This sketch combines a interactive countdown timer interface with an animated bouncing circle that dances across the full-screen canvas. Users can set a custom duration, start or reset the timer, and watch the lively motion continue as seconds tick away in MM:SS format. Key Skills: DOM elements and p5.js Event handlers (mousePressed) Collision detection and bouncing Time tracking with millis() Layering with z-index and absolute positioning by Anonymous · 255 views	📖 Read Docs 👁️ View
316	IT SEES. This sketch creates an immersive first-person 3D maze where the player navigates using WASD and mouse look while being hunted by a terrifying, twitching creature with glowing red eyes. A flickering flashlight illuminates the foggy maze as walls fade to black with distance, and a survival timer tracks how long you evade the relentless stalker before being caught. Key Skills: WEBGL 3D rendering First-person camera control Collision detection on grid Fog and distance-based effects AI pathfinding and pursuit by Anonymous · 255 views	📖 Read Docs 👁️ View
317	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 · 255 views	📖 Read Docs 👁️ View
318	survive ef5 tornado This sketch creates an intense survival game where a tiny red player character must navigate a stormy field while dodging a swirling, animated tornado and debris of various sizes. The player must reach a safe shelter zone while managing health that depletes from tornado proximity and debris collisions, with the goal of surviving as long as possible. Key Skills: Game state management Collision detection Object-oriented programming Perlin noise animation Audio synthesis with p5.sound by Anonymous · 254 views	📖 Read Docs 👁️ View
319	this is my first project This is a clicker game inspired by CS:GO where players click a central target to earn money, buy upgrades that increase click power or passive income, and unlock a mod menu with cheats. The game features a dynamic gradient background, visual click effects, and a responsive UI with an upgrade panel and dat.gui mod controls. Key Skills: Game loop and animation Mouse interaction and collision detection State management with arrays and objects Upgrade systems and economy mechanics Passive income calculation with delta time by Anonymous · 254 views	📖 Read Docs 👁️ View
320	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 · 254 views	📖 Read Docs 👁️ View
321	Sketch 2026-03-17 02:11 This chaotic sushi restaurant simulator lets players click to cook sushi and manage a workflow of customers eating and paying. When customers get sick, random events spawn—poop creatures, zombies, police cars, or UFOs—that remove them from the game in spectacular fashion. Key Skills: Object-oriented design with classes State machines and state transitions Animation timing and millis() Distance-based collision detection Entity management with arrays and filtering by Anonymous · 253 views	📖 Read Docs 👁️ View
322	weird xelad ai thing lol This sketch creates a real-time video distortion effect that warps your webcam feed with a bulging or pinching effect centered on your mouse cursor. The intensity of the warp is controlled by microphone volume, while time-based animation adds subtle continuous oscillation to the distortion. Key Skills: Pixel manipulation with loadPixels() and updatePixels() Polar coordinate transformation Real-time video capture and processing Audio reactivity with p5.sound Distance-based effect radius by Anonymous · 253 views	📖 Read Docs 👁️ View
323	Sketch 2026-03-02 23:21 This interactive Spider-Man swing game challenges players to catch falling energy orbs while swinging on a web across a pixelated city skyline. The player controls the anchor point of the web to catch orbs before they drop off screen, with increasing difficulty, a scoring system, and three lives. Key Skills: Animation loop and frameCount Pendulum motion with trigonometry (sin/cos) Collision detection using distance Game state management Particle effects and bursts by Anonymous · 253 views	📖 Read Docs 👁️ View
324	🙂 This sketch creates an immersive 3D bedroom scene in p5.js WEBGL mode where players hold their mouse or touch to activate a flashlight spotlight that illuminates the dark room. Random jump scares trigger with white flashes, sound effects, and haptic vibration feedback, creating a horror game experience inspired by Five Nights at Freddy's. Key Skills: 3D WEBGL rendering spotLight() directional lighting ambientMaterial() and ambientLight() Mouse and touch interaction Audio playback and p5.sound by Anonymous · 253 views	📖 Read Docs 👁️ View
325	Sketch 2026-02-22 22:27 This sketch creates an interactive fighting game where the player controls Spider-Man using keyboard and mouse to battle an AI-controlled Deadpool. The game features physics-based movement, web-swinging mechanics with momentum, health systems, and a turn-based attack system with cooldowns. Key Skills: Physics simulation with gravity and drag Object-oriented code structure with methods Game state management Keyboard and mouse event handling Collision detection and range checking by Anonymous · 253 views	📖 Read Docs 👁️ View
326	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 · 253 views	📖 Read Docs 👁️ View
327	cazador de manzanas This sketch is a fast-paced fruit-catching game where players move a basket with their mouse to catch falling fruits, special items, and avoid bombs. The game features a combo system, particle effects, scrolling clouds, and synthesized sound effects that reward quick reflexes and strategic catching. Key Skills: Game state machine Collision detection Mouse interaction and input Particle systems Synthesized sound with oscillators by Anonymous · 253 views	📖 Read Docs 👁️ View
328	FLYING FISH Flying Fish is a Flappy Bird-style game where the player controls an orange fish navigating through vertical gaps between green seaweed obstacles. The fish falls due to gravity and jumps when clicked or pressing spacebar, with the goal of passing through as many obstacles as possible without collision. Key Skills: Game state management Gravity and physics Collision detection (AABB) Object-oriented design Event handling (mouse and keyboard) by Anonymous · 252 views	📖 Read Docs 👁️ View
329	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 · 252 views	📖 Read Docs 👁️ View
330	Platform Game This is a 22-level platform game where the player controls a blue square that must navigate through increasingly complex levels by jumping, avoiding lava, and reaching green goal tiles. The game features gravity-based physics, collision detection, eight different tile types, and progressive difficulty. Key Skills: Tile-based level design Gravity and velocity physics Collision detection 2D arrays for game grids Keyboard input handling by hpesoj · 252 views	📖 Read Docs 👁️ View
331	for web wensday on corbun does weird webs This interactive sketch creates a glowing kaleidoscope that mirrors your brush strokes symmetrically around the canvas center. As you drag the mouse, colorful lines radiate outward in a configurable number of symmetrical slices, with color cycling over time and trails that fade slowly for a mesmerizing painted effect. Key Skills: Transformations (translate, rotate, scale) Symmetry and mirroring HSB color mode Semi-transparent backgrounds for trails Distance mapping by Anonymous · 251 views	📖 Read Docs 👁️ View
332	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 · 251 views	📖 Read Docs 👁️ View
333	20 level is easy This is a 20-level diamond hunting game built in p5.js where you pan through procedurally generated towns to find increasingly hidden diamonds. Each level increases difficulty through deeper depths, smaller targets, denser towns, and special mechanics like fishing, digging, and drifting through space. Key Skills: Procedural generation and grid-based generation Camera panning with constrained boundaries Collision detection with tap tolerance Level progression and game state management Touch controls (tap, drag, touchMoved, touchEnded) by Anonymous · 250 views	📖 Read Docs 👁️ View
334	Sketch 2026-03-12 15:43 This sketch creates a local multiplayer fighting game inspired by ROUNDS, where two players battle across multiple maps, collect upgrades via a card system, and compete to 15 points. Players can move, jump, shoot bullets with various properties, and parry incoming fire in a physics-based arena. Key Skills: Game state management Real-time physics simulation Collision detection and response Player input handling (keyboard and mouse) AI decision making and targeting by Anonymous · 250 views	📖 Read Docs 👁️ View
335	parcore man This sketch creates an interactive Spider-Man parkour game powered by Matter.js physics engine. Players control Spider-Man to jump across procedurally generated buildings in an endless city, with a camera that follows the character and collision detection that determines when jumping is allowed. Key Skills: Physics engine integration Collision detection and events Procedural level generation Camera tracking and translation Input handling with keyIsDown by Anonymous · 250 views	📖 Read Docs 👁️ View
336	Sketch 2026-03-01 22:19 This sketch creates a dodge-and-survive game where the player controls a red rectangle using arrow keys or WASD to avoid falling blue objects. The score increases with each dodged object, the game difficulty escalates with faster falling speeds and more frequent spawns, and the game ends on collision. Key Skills: Game state machine Collision detection (AABB) Array management Keyboard input Progressive difficulty by Anonymous · 250 views	📖 Read Docs 👁️ View
337	Sketch 2026-03-16 15:35 This sketch creates an interactive zoom interface where users can zoom in and out of canvas content using on-screen buttons. It demonstrates coordinate transformation techniques using translate() and scale() to create a centered zoom effect that keeps the canvas content anchored at its center point. Key Skills: Coordinate transformation translate() function scale() function push() and pop() Interactive buttons by Anonymous · 249 views	📖 Read Docs 👁️ View
338	cookie clicker by:moon_noob (Remix) This sketch creates a Cookie Clicker game where players click a giant cookie to earn points, then spend their cookies on animated upgrade buttons that boost their cookie production rate. The game state persists automatically using browser localStorage, and the score skyrockets exponentially as upgrades multiply income. Key Skills: Game state management Array manipulation and object properties localStorage persistence Event listeners and callbacks Exponential scaling by Anonymous · 249 views	📖 Read Docs 👁️ View
339	Sketch 2026-02-08 12:55 This is not a p5.js creative coding sketch—it is a web application that fetches real-time weather data from OpenWeatherMap API and displays agricultural advisory information on an HTML page. The sketch.js file contains only a single async function that retrieves weather data, and the project is primarily HTML/CSS/JavaScript for agricultural decision support, not visual art or interactive graphics created with p5.js. Key Skills: Asynchronous programming (async/await) Fetch API and HTTP requests JSON parsing Error handling (try/catch) DOM manipulation by Anonymous · 249 views	📖 Read Docs 👁️ View
340	Sketch 2026-03-10 06:53 This sketch creates a light blue circle that follows your mouse cursor across the canvas in real time. The circle tracks the mouse position every frame, creating a simple but satisfying interactive effect. The canvas automatically resizes when the window changes size. Key Skills: Mouse interaction (mouseX, mouseY) The draw loop and continuous updates Shape positioning and parameters Color with RGB values Responsive canvas sizing by Anonymous · 248 views	📖 Read Docs 👁️ View
341	jack and cappie This sketch creates an interactive 2D adventure game where you control Jack, exploring two houses and interacting with family members and objects. Jack can move left and right, enter houses, and discover messages from parents, his girlfriend Cappie, and retro gaming consoles, all set in a nostalgic 2001 setting. Key Skills: Scene management and state machines Arrays for managing multiple entities Collision detection and proximity checking Constrained movement within boundaries Keyboard input handling by Anonymous · 247 views	📖 Read Docs 👁️ View
342	Sketch 2026-03-06 23:200 Escape Benson Island is an action shooter game where players control a yellow banana at the bottom of the screen and fire banana projectiles upward to destroy descending red Among Us enemy characters. The game progresses through 15 rounds of increasing difficulty, with enemies spawning faster and in greater numbers each round, and the player loses if any enemy reaches the bottom. Key Skills: Object-Oriented Programming (ES6 Classes) Game State Machines Collision Detection Projectile Systems Progressive Difficulty Scaling by Anonymous · 247 views	📖 Read Docs 👁️ View
343	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 · 247 views	📖 Read Docs 👁️ View
344	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 · 247 views	📖 Read Docs 👁️ View
345	fly and race 2 player This sketch creates a competitive 2-player airplane racing game where players accelerate their planes across the screen using keyboard controls. The game features a dynamic day-night sky cycle that transitions between dawn, day, and night, a countdown timer before races start, and declares a winner when an airplane reaches the finish line. Key Skills: Game state management Keyboard input handling Color lerping and gradients Coordinate transforms (translate/scale) Conditional logic flow by Anonymous · 246 views	📖 Read Docs 👁️ View
346	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 · 246 views	📖 Read Docs 👁️ View
347	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 · 246 views	📖 Read Docs 👁️ View
348	Rate this game Rate this Game is an action-packed clicker where players tap a green circle to accumulate food points and survive increasingly chaotic events. From UFOs and microwaves to zombies, nukes, and ice cream vans, each milestone triggers a unique interactive challenge that tests reflexes and strategy. Key Skills: Game state machines (switch on gamePhase) Procedural audio synthesis with oscillators Touch and mouse collision detection Animation via interpolation and time-based movement Particle effects and screen shake by Anonymous · 245 views	📖 Read Docs 👁️ View
349	computer virus (prank) This sketch creates a full-screen prank animation that simulates a computer virus scanning, infecting, and then 'fixing' a system. It progresses through four dramatic states—scanning, infected alert, fixing, and system deleted—complete with alarming sounds and a clickable button, all designed as a harmless visual joke. Key Skills: State machines Progress bars and progress tracking Time-based animation p5.sound oscillators and noise Interactive buttons by Anonymous · 245 views	📖 Read Docs 👁️ View
350	FBI TAKEDOWN sceen This sketch creates a full-screen FBI warning prank interface with flashing red text, a pulsing alarm sound, and a fake countdown timer. It mimics an official security alert by hiding the cursor, filling the screen, and using bold typography and audio effects to create an intensely dramatic fake warning message. Key Skills: Full-screen responsive canvas Text animation and blinking Web Audio API and oscillators Frame-based timing with frameCount Time-based countdown with millis() by Anonymous · 245 views	📖 Read Docs 👁️ View