📖 Code Guides - Complete Catalog

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

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

#	Sketch Details	Actions
601	Sketch I posted in p5js.ai in p5js.ai Creative coding sketch Key Skills: daily by corbun · 49 views	📖 Read Docs 👁️ View
602	Dice on my Android V1.1 Dice on my Android v 1.1 is a successor of the original game dice on my Android what this version includes is a cool card option where you can draw a card and there is another slider where you can slide the max number the card will display from 1 to 15 what it does is whatever number you set it to is the highest number it will display like if you do 10 the max number will be 10 also I updated the dice also instead of it being the max dice 5 it's 15 hope you enjoy this update more will come soon! Key Skills: dice update cards cool by Angry GamerBro · 49 views	📖 Read Docs 👁️ View
603	Ant Battle (Raig) (More Colors) (Credits) Creative coding sketch Key Skills: Color manipulation by Mathew Bernard · 49 views	📖 Read Docs 👁️ View
604	Ant Battle (Birds) (Main Menu And Christmas Units) (Chapter 2) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 49 views	📖 Read Docs 👁️ View
605	smiley face buttons (Remix by Corbun) This sketch creates a lively grid of eight yellow smiley-face circles and eight patterned white squares on a soft gradient background. The faces blink, bob, rotate, and react to the mouse with hover scaling, squash-and-bounce clicks, glowing halos, expanding ripples, and orbiting sparkle particles, while each square animates a unique line pattern clipped neatly inside its borders. Key Skills: Arrays of objects for managing many animated instances p5.Graphics buffers with native canvas clipping HSB color mode for rainbow hue cycling Linear interpolation (lerp) for smooth hover/scale transitions Particle-style systems using push/splice on arrays by corbun · 49 views	📖 Read Docs 👁️ View
606	Monster This sketch renders an interactive 3D scene in WEBGL mode: a grey cube with a clickable colored sphere 'button' embedded in its front face, surrounded by four wobbling tentacle-like chains of stretched spheres. You can drag the cube to rotate it, click the button to cycle through messages, double-click it to change its color, and grab any tentacle tip to stretch and bend it. Key Skills: WEBGL 3D rendering Manual 3D-to-2D projection push()/pop() transform isolation Trigonometric animation (sin/cos wobble) Mouse-based dragging and picking by A Romero · 49 views	📖 Read Docs 👁️ View
607	I want to build a mini game with claude as co This sketch is a complete mini arcade game called 'Neon Dodge' where the player controls a glowing cyan circle with their mouse, dodging magenta squares that fall from the top of the screen. The game features a neon glow aesthetic, an increasing difficulty curve, and a full start-screen/gameplay/game-over state machine. Key Skills: Finite state machines (game states) Arrays of objects for managing entities Circle-vs-rectangle collision detection Layered transparency for glow effects push()/pop() with translate/rotate by DoodleFalcon29 · 49 views	📖 Read Docs 👁️ View
608	Pool table game that is real pool This sketch is a fully playable 8-ball pool game built entirely in p5.js: fifteen numbered balls are racked on a felt table, and the player click-drags away from the white cue ball to aim and shoot. It includes real elastic ball-to-ball collisions, rail bounces, pocket detection, scratch handling, and a simple win/lose condition around sinking the 8-ball. Key Skills: Elastic collision physics with normal/tangent vector decomposition p5.Vector for aiming direction and shot power Plain JavaScript objects as lightweight game entities Game state management (aiming, scratches, game over) Mouse and touch input unified through wrapper functions by david w · 49 views	📖 Read Docs 👁️ View
609	Preview Not Available Preview expired or not found This sketch loads a fullscreen night-time photo from Unsplash and displays it scaled to cover the entire browser window, while a translucent bar at the top counts elapsed and remaining minutes of an enormous (nearly endless) 7.889 million minute timer. Key Skills: Asynchronous image loading with callbacks Boolean state flags for conditional rendering Aspect ratio math for scaling images Responsive canvas resizing Text formatting with nf() by Anonymous · 49 views	📖 Read Docs 👁️ View
610	Very smart chatbot This sketch throws out the canvas and instead builds an entire chat application using p5.js DOM functions - a title, description, scrolling message history, text input, and Send button - then powers a rule-based 'Smart Chatbot' that replies using regular expressions, remembered state, and a tiny built-in calculator. Tucked inside draw() is also a fully-coded particle constellation animation that never actually appears, because style.css hides the canvas element entirely. Key Skills: p5.js DOM element creation Event listeners and callbacks Regular expressions for text parsing State management with global variables Array iteration and higher-order functions by corbun · 49 views	📖 Read Docs 👁️ View
611	Sketch 2026-07-03 15:55 This sketch is a classic space shooter game where you pilot a blue triangle spaceship across the bottom of the screen, firing yellow bullets upward to destroy red enemy blocks that fall from above. Points are awarded for each enemy destroyed, and the game uses arrow keys to move and spacebar to shoot. Key Skills: Object-oriented programming Class design Array management Collision detection Keyboard input by Anonymous · 49 views	📖 Read Docs 👁️ View
612	Four-AI-4TRACK-SAS This sketch is a web-based GPS tracking and AI chat interface called Four-IA 4Track SAS. It combines a conversational AI chat panel with a sidebar for history management, social media links, and theme switching, styled with modern UI elements and micro-interactions. Key Skills: DOM manipulation CSS animations and keyframes Event listeners and delegation localStorage API for persistence CSS custom properties and cascading by Anonymous · 49 views	📖 Read Docs 👁️ View
613	P5.js sketch inspired by: "Whirlpool" Creative coding sketch Key Skills: daily by corbun · 48 views	📖 Read Docs 👁️ View
614	BALLY Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by GlitchOtter56 · 48 views	📖 Read Docs 👁️ View
615	P5.js sketch inspired by: "Island paradise" Creative coding sketch Key Skills: daily by corbun · 48 views	📖 Read Docs 👁️ View
616	P5.js sketch inspired by: "Carousel spin" Creative coding sketch Key Skills: daily by corbun · 48 views	📖 Read Docs 👁️ View
617	p5js.ai in p5js.ai fixed I think This sketch turns the canvas into a full-screen browser window that seamlessly loads and displays the p5js.ai website. Interact with the page just like a normal site, while p5.js quietly manages the background. Key Skills: daily by corbun · 48 views	📖 Read Docs 👁️ View
618	Robot buddy v5 adjusted full screen Key Skills: Basic p5.js drawing Creative coding by Emmanuel Emmanuel · 48 views	📖 Read Docs 👁️ View
619	Hangman (Admin Panel) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 48 views	📖 Read Docs 👁️ View
620	Beginner-friendly 2D side-scrolling adventure Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by smalldrgan · 48 views	📖 Read Docs 👁️ View
621	totaly not an ad (I still cant spell) Glowing green Matrix-style code rains down the screen while a glitchy title and URL for Corbun's Game Lab slowly reveal themselves over the top. Click to start an eerie ambient soundtrack and copy the lab’s link straight from the screen. Key Skills: Mouse interaction Audio/sound Arrays & loops daily by corbun · 48 views	📖 Read Docs 👁️ View
622	Temu Rainbow Friends Temu Key Skills: temurainbowfriends by Mathew Bernard · 48 views	📖 Read Docs 👁️ View
623	[Device: desktop/laptop This sketch simulates a fake virus-scan popup that cycles through four dramatic states — scanning, infected, fixing, and clean — complete with animated progress bars, a scrolling list of fake infected files, oscillator sound effects, and a big red FIX NOW button. It's a prank sketch designed to look alarming while a small 'This is a prank.' label keeps things playful. Key Skills: Finite state machine with switch-case millis()-based timers for animation phases map() and constrain() for progress bars p5.sound Oscillator and Noise DOM elements with createButton() by corbun · 48 views	📖 Read Docs 👁️ View
624	P5.js sketch inspired by: "Crosshatch" uhh don't play if you have epilepsy This sketch tiles the entire canvas with a grid of hand-sketched crosshatch cells, where each cell's line density is driven by Perlin noise that slowly evolves over time. The result looks like an animated pencil-shading texture, with patches of the canvas continuously breathing between dense and sparse hatching. Key Skills: Nested for loops for grid layout Perlin noise (noise()) map() for range conversion push()/pop() transform isolation translate() and rotate() by corbun · 48 views	📖 Read Docs 👁️ View
625	Crea un animazione stile stickman di uno schermo This sketch tells a short animated story with a stick figure using a computer: it boots up, opens a browser, searches for a real person, edits their Wikipedia page with a made-up fact, saves the edit, and finally displays a message explaining that this is 'disinformation' or 'digital vandalism'. Every scene change is driven by a finite-state machine, and a virtual mouse pointer glides smoothly across the screen using vector interpolation. Key Skills: Finite-state machine (switch/case) Frame-based timers for sequencing animation Vector interpolation (p5.Vector.lerp) for smooth movement Typewriter text effect via substring() Trigonometric animation (sin) for arm waving by MangoPanda28 · 48 views	📖 Read Docs 👁️ View
626	space hero This sketch is a full boss-battle mini-game: an armored archer slides left and right across a glowing sci-fi citadel, firing energy arrows upward at a cybernetic space wolf that patrols the sky and lobs plasma blasts back. A cinematic typewriter cutscene, parallax starfield, particle bursts, floating damage numbers and procedurally synthesized sound effects turn a simple shooting-gallery loop into a mini cinematic experience. Key Skills: Game state machine Object-literal game entities Particle systems Collision detection with dist() Screen shake camera effect by peolker · 48 views	📖 Read Docs 👁️ View
627	Gizmo escapes V1.1.1 On my last update I kind of messed up with the jumping animation so in this update I made it so when you jump he kind of jumps diagonally which looks pretty darn cool please try out this new update it is pretty cool peace ✌️ Key Skills: Animation loops update bunny fruits fun by Angry GamerBro · 47 views	📖 Read Docs 👁️ View
628	P5.js sketch inspired by: "Dewdrop lens" This sketch creates a glowing, dewdrop-like lens that distorts a starry, geometric background as it follows your mouse around the screen. Move your cursor to drag the shimmering droplet and watch the pattern warp and shift beneath it. Key Skills: Mouse interaction daily by corbun · 47 views	📖 Read Docs 👁️ View
629	temu stocks Colorful sine waves glide and overlap across a black background, creating a flowing, animated light show. The waves continuously shift and ripple in harmony, filling the screen with smooth, hypnotic motion. Key Skills: Color manipulation Trigonometry daily by corbun · 47 views	📖 Read Docs 👁️ View
630	Pizza Making game Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 47 views	📖 Read Docs 👁️ View
631	Name Owen on the screen, make the style of the This sketch spells out the name 'Owen' with each letter bouncing around the screen like a classic DVD-logo screensaver, using two weights of the Oswald font. Clicking a letter randomly resizes it and reverses its direction, turning a simple animation into a playful interactive toy. Key Skills: preload() and loadFont() for custom typography Array of objects for managing multiple independent entities Edge collision / bounce detection using textWidth() Mouse interaction with per-object hit-testing Responsive layout with windowResized() by Owen Landon · 47 views	📖 Read Docs 👁️ View
632	It so when I press keys "a", "s", "d", "f", "j" This sketch draws a small on-screen piano and lets you literally see the keyboard react as you type: pressing A, S, D, F, J, K, L, or ; lights up the matching piano key in its own color and prints the letters you're holding down above the keys. It's a visual keyboard tester built entirely with rectangles, an object lookup table, and p5.js's key-event system. Key Skills: Lookup objects (keyToNoteMap, keyRects) instead of hardcoded values keyIsDown() for continuous state vs keyPressed()/keyReleased() for one-time events Arrays used as state (pressedKeysArray tracking currently held keys) for-in loops over object properties Custom fonts with preload() and loadFont() by Jonathan Chi · 47 views	📖 Read Docs 👁️ View
633	Cool guy This sketch draws a large, friendly cartoon 'cool guy' - complete with spiky hair, sunglasses, a smirking mouth, and a blue collared shirt - centered on the canvas. Every shape is calculated from a single scale value tied to the window size, so the character redraws itself crisp and centered no matter how the browser is resized. Key Skills: translate() and push()/pop() for local coordinate systems Proportional/relative sizing instead of hardcoded pixel values beginShape()/vertex()/endShape() for custom polygons Responsive canvas with windowResized() Layering shapes to build a complex illustration by Red guides · 47 views	📖 Read Docs 👁️ View
634	puppy Creative coding sketch Key Skills: daily by GlitchOtter56 · 46 views	📖 Read Docs 👁️ View
635	BAH Glowing green “Matrix rain” code cascades down the screen while a cryptic message types itself out with a decryption status HUD overlay. Move your mouse to stir up digital particles and occasionally trigger glitchy hologram shifts for a hacker-terminal vibe. Key Skills: Particle systems & physics Mouse interaction Arrays & loops daily by corbun · 46 views	📖 Read Docs 👁️ View
636	P5.js sketch inspired by: "Jet stream" Creative coding sketch Key Skills: daily by corbun · 46 views	📖 Read Docs 👁️ View
637	P5.js sketch inspired by: "Heat shimmer" Creative coding sketch Key Skills: daily by corbun · 46 views	📖 Read Docs 👁️ View
638	P5.js sketch inspired by: "Frost on glass" This sketch covers the screen in soft, organic frost patterns that look like icy crystals on glass. Click and drag your mouse to gently wipe the frost away and reveal the cool, dark background beneath. Key Skills: Mouse interaction daily by corbun · 46 views	📖 Read Docs 👁️ View
639	Dice on my Android V1.1.3 official release Official release means this is the full game the versions before this we're kind of boring or just was missing stuff but this update mostly includes a cool button called roll mania I got the idea from one of my favorite commenters corbun go check out his profile he has the best games and he suggested I added this what it does is when you press it it rolls dice for 10 seconds automatically for example if you set it to 10 it will roll 100 dice in 10 seconds pretty cool right 👍 Key Skills: Arrays & loops Trigonometry official dice corbun by Angry GamerBro · 46 views	📖 Read Docs 👁️ View
640	Robot thingamajig Robot duddde Key Skills: Basic p5.js drawing Creative coding by Emmanuel S · 46 views	📖 Read Docs 👁️ View
641	Door: Jeff’s Shop Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 46 views	📖 Read Docs 👁️ View
642	War Simulator Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 46 views	📖 Read Docs 👁️ View
643	Ant Battle (Raig) (More Colors) Creative coding sketch Key Skills: Color manipulation by Mathew Bernard · 46 views	📖 Read Docs 👁️ View
644	pronk (Remix) This sketch is an interactive prank: it fakes a slow software installation with rotating status messages and a progress bar, then switches to a classic blue-screen-of-death crash, and finally reveals a cheerful 'APRIL FOOLS!' screen with a bouncing circle animation and a burst of white noise. Key Skills: Finite state machine millis() based timing switch statement p5.sound Envelope/Noise Progress bar drawing by corbun · 46 views	📖 Read Docs 👁️ View
645	My sketch is throwing this error — please diagnose This sketch draws an animated cartoon face inside a large oval that can be either purple or green. Clicking a small gray 'button' triggers a blinking sequence followed by a spiraling color-morph animation that shrinks the eyes into the center of the oval (or reverses the process), while red tic marks fade in and out around the oval's edge to indicate its 'active' state. Key Skills: Timing animations with millis() and stored start times Color interpolation with lerpColor() Boolean state machines for sequencing behaviors map() for remapping and clamping progress values Trigonometric spiral motion with sin()/cos() by Jimmy Ly · 46 views	📖 Read Docs 👁️ View
646	Rectangular background with a door touching the This sketch is a small point-and-click game called 'Annoying Neighbors' built entirely with p5.js shapes and a state machine. You open a door in a hallway and something unpredictable appears behind it - an annoying neighbor, a box with an item, or nothing - and your job is to manage a rising 'annoyance meter' before it maxes out and ends the game. Key Skills: Finite state machines (gameState) Custom rectangle hit-testing (isMouseOver) Randomness driving game logic (random()) Responsive layout (calculateLayout / windowResized) Canvas 2D context gradients (drawingContext.createRadialGradient) by Owen Landon · 46 views	📖 Read Docs 👁️ View
647	Ball Game This sketch is a 'Neon Dodger' survival game where the player controls a glowing circle at the bottom of the screen, moving it left and right with the mouse to dodge falling neon squares. Enemies spawn at randomized intervals from the top of the screen, and the score increases every time one passes safely - until a collision ends the game with a restart screen. Key Skills: Game state management with booleans Arrays of objects (enemies) Collision detection (circle vs. square) Timing with millis() noLoop()/loop() to pause and resume the draw cycle by Shahwaiz Khan · 46 views	📖 Read Docs 👁️ View
648	When I press space, triple jump Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by FuzzyComet50 · 45 views	📖 Read Docs 👁️ View
649	P5.js sketch inspired by: "Nebula cloud" This sketch paints a rich, glowing nebula across the screen, with soft clouds of purples, pinks, and oranges layered over a deep space background and scattered stars. The result is a dreamy, cosmic scene that feels like looking into a colorful, distant galaxy. Key Skills: Color manipulation Trigonometry daily by corbun · 45 views	📖 Read Docs 👁️ View
650	P5.js sketch inspired by: "Geyser eruption" Creative coding sketch Key Skills: daily by corbun · 45 views	📖 Read Docs 👁️ View