📖 Code Guides - Complete Catalog

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

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

#	Sketch Details	Actions
551	P5.js sketch inspired by: "Yarn ball" This sketch draws a soft, rounded yarn ball made of dozens of translucent arcs layered and gently rotated to look like wound strands of yarn. A loose thread peels off the ball and wiggles its way toward the mouse cursor, and clicking or tapping cycles through four color palettes. Key Skills: push()/pop() transform isolation translate() and rotate() for polar-style drawing arc() for drawing partial circles Sine/cosine-driven animation with frameCount beginShape()/vertex()/endShape() for custom curves by Corban Machen · 16 views	📖 Read Docs 👁️ View
552	Sketch 2026-07-07 23:54 This sketch builds an animated splash/branding screen for a school (IBMT Zinder), featuring a logo that draws itself with an ease-out animation, a slogan that fades in, and a subtly pulsing call-to-action text. It relies entirely on p5.js's text and shape primitives combined with frame-based animation timers rather than any physics or particles. Key Skills: Frame-based animation progress (0 to 1) Easing functions (easeOutCubic) Text rendering and alignment Responsive layout with windowWidth/windowHeight Alpha/opacity fade-in using map() by Kebi Salissou · 16 views	📖 Read Docs 👁️ View
553	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 · 16 views	📖 Read Docs 👁️ View
554	Crossy rpad This sketch recreates the classic Crossy Road game: a red square hops between lanes of grass, traffic, and water, riding logs and dodging cars while the camera scrolls upward to follow progress. It tracks a score based on distance traveled and persists a high score across sessions using the browser's local storage. Key Skills: ES6 classes for game objects Finite state machines (START/PLAYING/GAME_OVER) Camera scrolling via draw-position offset Axis-aligned bounding box (AABB) collision detection Procedural, infinite obstacle generation by dk donkey kong · 16 views	📖 Read Docs 👁️ View
555	I lost the index.ejs of my project, will you help This sketch simulates a fictional 'city investment' and task-reward game entirely in the browser, using p5.js only to draw a small stats readout while HTML buttons and divs (created with createButton and createDiv) handle all the real interaction. Clicking buttons lets a mock user join cities, complete tasks, and spin a weighted roulette wheel, all while a plain object (mockUser) tracks balance, gems, and daily limits in memory. Key Skills: DOM manipulation with createButton/createDiv Event handlers (mousePressed, mouseOver, mouseOut) Weighted random selection Object-based state management Array methods (reduce, filter, includes, splice) by Bitrex Ke · 15 views	📖 Read Docs 👁️ View
556	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 · 15 views	📖 Read Docs 👁️ View
557	Simple Game This sketch fills the screen with a grid of white circles that pulse in size like a slow-moving wave, thanks to a sine function tied to frameCount. Keyboard controls let you adjust the grid spacing, animation speed, and pulse size live, with a semi-transparent black background creating soft motion trails. Key Skills: Nested for loops for grid layout Sine wave oscillation for animation frameCount-driven motion Transparency and trailing backgrounds Keyboard input handling by Mamadou Bah · 14 views	📖 Read Docs 👁️ View
558	Very fun game but sonion th onion This sketch is a complete arcade-style game where you steer a layered onion character named Sonion around the screen to collect ten glowing 'flavor pearls' before a 30-second timer runs out, all while dodging falling rotten vegetables that cost you lives. It uses a finite state machine to switch between start, playing, game-over and win screens, and supports both keyboard (WASD/arrows) and touch/mouse controls. Key Skills: Finite state machine (START/PLAYING/GAMEOVER/WIN) ES6 classes for game objects Circle-circle collision detection with dist() Timing with millis() for a countdown Keyboard input via keyPressed()/keyReleased() flags by dk donkey kong · 14 views	📖 Read Docs 👁️ View
559	Bouncing ball animation This sketch animates a colorful ball that bounces around the full browser window, changing color and playing a percussive noise burst every time it hits an edge. A continuous sine wave drone plays in the background, and arrow keys let the viewer speed up or slow down the ball in any direction. Key Skills: Animation loop (draw) Collision detection with canvas edges Audio synthesis with p5.sound (Oscillator, Noise, Envelope) Keyboard input handling Responsive canvas resizing by QuantumSquid51 · 13 views	📖 Read Docs 👁️ View
560	Sketch 2026-07-10 09:04 This sketch builds a full 1v1 (or 1v1v-AI) top-down soccer game using Matter.js for physics and p5.js for rendering. Players and a ball are circular Matter.js bodies that collide realistically, while p5.js draws the field, players, ball, score, timer, and menu screens on top of the physics simulation. Key Skills: Matter.js physics engine integration Game state machines Collision sensors and events Vector-based force application Simple sports AI (seek/defend/attack) by Purav Mehta · 12 views	📖 Read Docs 👁️ View
561	the modiful This sketch is meant to draw a mesmerizing rainbow spiral that grows outward from the center of the screen, with each dot colored by cycling through the HSB hue wheel and old dots fading into a soft black trail. As written, the file actually contains two corrupted lines (a mangled variable name and stray text after the last function) that will stop it from running at all, which makes it a great real-world exercise in reading error messages and debugging. Key Skills: HSB color mode Polar to Cartesian coordinate conversion translate() and coordinate origins while loops for procedural drawing Alpha transparency for trail effects by Mamadou Bah · 12 views	📖 Read Docs 👁️ View
562	Offline game that works offline chicken run This sketch is a complete offline endless-runner game where a cartoon chicken jumps and ducks to dodge bombs and flying bullets scrolling toward it. Difficulty buttons let the player pick a starting speed, and the game speeds up automatically as the score climbs until a collision ends the run. Key Skills: Game state machine (start/playing/gameOver) Constructor functions as classes AABB collision detection Scrolling background trick with two rectangles DOM elements (createButton) mixed with canvas by Ranbitosu by Todmur · 12 views	📖 Read Docs 👁️ View
563	open world game This sketch is a sprawling GTA-style 3D open-world game built entirely in p5.js WEBGL mode, featuring a walkable/drivable neon Vice-City-inspired map with buildings, palm trees, NPCs you can talk to or shoot, a car you can enter, elevators to rooftops, and a full synthesized sound-effects engine using p5.sound oscillators and envelopes. Key Skills: WEBGL 3D transforms (translate/rotate/push/pop) Custom lighting (ambientLight, directionalLight, pointLight) Third-person orbit camera math (yaw/pitch spherical coordinates) AABB collision detection and sliding resolution Synthesized audio with p5.Oscillator and p5.Envelope by NeonCactus38 · 10 views	📖 Read Docs 👁️ View
564	Volleyball where the different sections of the This sketch draws a giant rotating volleyball made of six colored panels, decorated with sparkling glitter particles and seams, that spins on its own and speeds up when you drag it with the mouse. Clicking or auto-spawning intervals shoot little five-pointed stars outward from the center for extra sparkle. Key Skills: push()/pop() transform isolation translate() and rotate() for object-centered spinning HSB colorMode for hue animation Particle systems with arrays of objects Custom shapes with beginShape()/vertex()/endShape() by Anonymous · 10 views	📖 Read Docs 👁️ View
565	chicken run This sketch is a Chrome-Dino-style endless runner where a cartoon chicken sprints across a scrolling gray ground, jumping over bombs and ducking under flying bullets. The player picks an Easy or Hard difficulty, and the game speeds up the longer they survive, tracking a score that increases every time an obstacle is dodged. A single collision instantly ends the run and shows a Game Over screen with the final score. Key Skills: Game state machines Function-based OOP constructors (this.method) AABB collision detection Scrolling backgrounds DOM buttons inside a p5 sketch by Ranbitosu by Todmur · 10 views	📖 Read Docs 👁️ View
566	Gun game This sketch is a full first-person shooter built with three.js for 3D rendering while p5.js supplies procedural gunshot sounds through p5.sound. You move through an arena with WASD, look around with the mouse via Pointer Lock, and fight off waves of AI enemies that chase and shoot back until either you or all the AIs are defeated. Key Skills: Mixing p5.js with an external 3D library (three.js) First-person camera controls with PointerLockControls Raycasting for collision detection and hit-scan style checks Real-time game loop with requestAnimationFrame and delta time Object arrays for managing bullets and AI enemies by NeonPanda79 · 9 views	📖 Read Docs 👁️ View
567	DRIFT STARS 2026 Drift Stars 2026 is a full 3D driving/drifting game built entirely with p5.js's WEBGL renderer. You steer a customizable car through a procedurally-styled city that cycles through time of day and weather, earning drift-combo points while dodging traffic and evading a wanted-level cop chase. Key Skills: WEBGL 3D rendering in p5.js Class-based architecture (Vehicle, Camera, AudioSystem) Vector math with p5.Vector (add, sub, limit, lerp) Finite state machine for game screens Particle systems (smoke, fire, explosions) by TurboOctopus58 · 8 views	📖 Read Docs 👁️ View
568	Tornado intercept simulator by corbun This sketch simulates driving a small armored vehicle across a huge scrolling farmland toward a swirling, animated tornado. You steer with the keyboard or on-screen buttons, then must time the deployment of airbags and ground spikes so the car is fully anchored before it drifts into the tornado's dangerous wind field, scoring 'intercept time' for every second you survive safely close to the storm. Key Skills: p5.Vector physics (acceleration, friction, velocity) Camera scrolling via translate()/push()/pop() Object-oriented design with ES6 classes Timer-driven state machines (deltaTime/millis) Procedural world generation with random() by corbun · 6 views	📖 Read Docs 👁️ View