📖 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
701	P5.js sketch inspired by: "Parachute drop" Float through a scrolling sky of fluffy clouds as a tiny skydiver drifts toward the ground, deploying a parachute to slow their fall. Use the arrow keys to steer left and right and gently guide the character to a safe landing. Key Skills: daily by corbun · 41 views	📖 Read Docs 👁️ View
702	Ant Battle (Birds) (Main Menu And Christmas Units) (Ldk) (Chapter 4 and Chapter 5) (Remix) Raig is here… we have to stop them but ants will Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 41 views	📖 Read Docs 👁️ View
703	Ant Battle (Birds) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 41 views	📖 Read Docs 👁️ View
704	Battle Cat This sketch draws a single, static cartoon cat wearing armor and wielding a sword, built entirely from p5.js primitive shapes like rectangles, ellipses, triangles, and a bezier curve. The whole character scales and re-centers itself automatically to fit any browser window size. Key Skills: Transformations (translate, scale, rotate) push() and pop() state isolation Primitive shapes (rect, ellipse, triangle, arc, bezier) Responsive canvas sizing windowResized() event handling by Mathew Bernard · 41 views	📖 Read Docs 👁️ View
705	Rainbow spiral pattern Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by GlitchOtter56 · 40 views	📖 Read Docs 👁️ View
706	Bouncing ball animation Creative coding sketch Key Skills: Animation loops by PrismPanda42 · 40 views	📖 Read Docs 👁️ View
707	Zombie Shooting Game (Noob To Pro And Hacker) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 40 views	📖 Read Docs 👁️ View
708	SuperNova Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Reyli Martinez · 40 views	📖 Read Docs 👁️ View
709	It so at beginning text box half the size of the Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Jonathan Chi · 40 views	📖 Read Docs 👁️ View
710	UNO Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 40 views	📖 Read Docs 👁️ View
711	Ant Battle (Birds) (Main Menu And Christmas Units) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 40 views	📖 Read Docs 👁️ View
712	SLEEP game of sleeping and dreaming... Key Skills: Basic p5.js drawing Creative coding by Emmanuel Emmanuel · 40 views	📖 Read Docs 👁️ View
713	Add infinite Craft That you search up something This sketch recreates the viral 'Infinite Craft' game entirely in p5.js: you drag draggable item tiles around a canvas and drop one on top of another to combine them into a new item, following a giant hardcoded lookup table of crafting recipes. Your inventory is drawn as colored rounded rectangles and automatically saved to the browser's localStorage so your discoveries persist between visits. Key Skills: Object literals as lookup tables Array management (push/splice/filter) p5.js DOM elements (createInput, createButton) Axis-aligned bounding box collision detection Mouse event callbacks (mousePressed/mouseReleased) by Mathew Bernard · 40 views	📖 Read Docs 👁️ View
714	Sketch 2026-07-15 21:08 This sketch renders an interactive 3D cube in WEBGL mode with a glowing sphere 'button' on its front face and four wobbling tentacles hanging from its corners. You can drag to rotate the cube, click the button to cycle through messages, double-click it to randomize its color, and grab a tentacle tip to stretch and bend it. Key Skills: WEBGL 3D rendering push/pop transform stack Manual 3D-to-2D screen projection Mouse drag interaction p5.Vector math by A Romero · 40 views	📖 Read Docs 👁️ View
715	DRIFT STARS re-release v1.1.1 This version added pedestrians to the game where you can go to settings turn on pedestrians and have fun but if you hit any pedestrian even one you will be five star wanted level and lots of cops will start chasing you so that's where the boost comes in handy but I thought this update would be pretty cool so I hope you guys enjoy it peace ✌️ Key Skills: Trigonometry update cars pedestrians cool by Angry GamerBro · 39 views	📖 Read Docs 👁️ View
716	Ant Battle (Pls Comment And View This) (Titan Ant) (April Fools And Main Menu) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 39 views	📖 Read Docs 👁️ View
717	Ant Battle (Pls Comment And View This) (Titan Ant) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 39 views	📖 Read Docs 👁️ View
718	Sketch 2026-07-17 21:57 Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by A Romero · 39 views	📖 Read Docs 👁️ View
719	Ant Battle (Fish And Explosive Ants and Admin Panel Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 39 views	📖 Read Docs 👁️ View
720	Steal A Brainrot But Level Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 39 views	📖 Read Docs 👁️ View
721	triple t virus (Remix) This sketch creates a fake 'virus alert' screen with flashing scare images, a flickering red background, animated TV-static noise, and two joke buttons that spawn sarcastic floating text when clicked. It's a comedic prank page built almost entirely from p5.js timers, image overlays, and DOM buttons layered on top of a canvas. Key Skills: Timers with millis() DOM elements via createButton() Classes for reusable animation (FloatingText) Nested for-loops for procedural texture Responsive layout with windowResized() by corbun · 39 views	📖 Read Docs 👁️ View
722	Hack The Hood Mini App EDUMATE is a full study-tracking web app built entirely with p5.js DOM elements and canvas drawing: it has login/register screens, a dashboard with a bar chart of weekly study time, a freehand whiteboard with an AI math tutor, a general AI chat, and a profile page. Instead of shapes bouncing around, the 'visuals' here are UI screens drawn with rect(), line(), lerpColor() gradients and text(), switched by a simple state machine. Key Skills: p5.js DOM elements (createButton, createInput, createSlider) State machine with a switch statement Gradient backgrounds with lerpColor() Freehand drawing with beginShape()/vertex() Async/await and fetch() for AI API calls by PrismOtter30 · 39 views	📖 Read Docs 👁️ View
723	Image of miku (Remix) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by nud nud · 38 views	📖 Read Docs 👁️ View
724	Geometry dash Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by DoodleRobot59 · 38 views	📖 Read Docs 👁️ View
725	p5js.ai in p5js.ai Creative coding sketch Key Skills: daily by corbun · 38 views	📖 Read Docs 👁️ View
726	P5.js sketch inspired by: "Blizzard" This sketch paints a soft gradient winter sky filled with hundreds of gently drifting snowflakes, each varying in size, brightness, and motion. The flakes continuously fall and respawn to create an endless, calming snowfall across the screen. Key Skills: daily by corbun · 38 views	📖 Read Docs 👁️ View
727	the little bear Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Estrella lvarez luna · 38 views	📖 Read Docs 👁️ View
728	P5.js sketch inspired by: "Radial burst" This sketch creates a pulsing, radial explosion of bright orange rays and a glowing white ring that repeatedly bursts from the center of the screen. The animation constantly refreshes, filling the canvas with a dynamic, fireworks-like flash on a deep black background. Key Skills: Animation loops Trigonometry daily by corbun · 38 views	📖 Read Docs 👁️ View
729	Game Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by NeonCactus84 · 38 views	📖 Read Docs 👁️ View
730	P5.js sketch inspired by: "Quilt pattern" This sketch stitches together a fullscreen digital quilt made of colorful, randomly patterned square blocks, each filled with geometric triangles and shapes. Every time you run or resize it, you get a fresh, cozy patchwork design filling the entire window. Key Skills: Color manipulation Randomness daily by corbun · 38 views	📖 Read Docs 👁️ View
731	Him clap Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by PixelCactus43 · 38 views	📖 Read Docs 👁️ View
732	Tetris but AI generated Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Kevin Wayne YEUNG · 38 views	📖 Read Docs 👁️ View
733	Ant Battle (Remix) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 38 views	📖 Read Docs 👁️ View
734	Ant Battle (Birds) (Dark Blue) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 38 views	📖 Read Docs 👁️ View
735	Chess This sketch turns p5.js into a fully playable chess board: it renders an 8x8 grid, draws Unicode chess symbols for every piece, lets the player click to select and move white pieces with real chess rules enforced, and hands control to a simple built-in AI that plays black by picking the first legal move it can find. Key Skills: ES6 classes and object-oriented game state 2D coordinate mapping (pixels to grid cells) Nested loops for board search Ternary operators for conditional logic Array methods (find, filter, push) by Mathew Bernard · 38 views	📖 Read Docs 👁️ View
736	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 · 38 views	📖 Read Docs 👁️ View
737	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 · 38 views	📖 Read Docs 👁️ View
738	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 · 38 views	📖 Read Docs 👁️ View
739	Geometry dash Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by CosmicFox66 · 37 views	📖 Read Docs 👁️ View
740	Dice on my Android Dice on my Android is a cool little interactive checkerboard where you can roll dice if you're wondering what the purpose of it is just think what if someday you're playing a board game with your friends but it's missing the dice or you just need dice well play this for free and you can roll up to five guys per roll dice and all dice are all different colors too it is simple but could be fun and great for family or friends board games!!! Key Skills: Color manipulation Arrays & loops Trigonometry by Angry GamerBro · 37 views	📖 Read Docs 👁️ View
741	Blue Light Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Reyli Martinez · 37 views	📖 Read Docs 👁️ View
742	Particle System Creative coding sketch Key Skills: Particle systems & physics by QuantumComet97 · 37 views	📖 Read Docs 👁️ View
743	You are an experienced coding teacher for kids.i Creative coding sketch Key Skills: Arrays & loops by Huang Jialang 2A11 · 37 views	📖 Read Docs 👁️ View
744	Bouncing ball animation Creative coding sketch Key Skills: Animation loops by DoodleOtter82 · 37 views	📖 Read Docs 👁️ View
745	Clash Royale Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 37 views	📖 Read Docs 👁️ View
746	Ant Battle (Birds) (Main Menu And Christmas Units) (Remix) (Chapter 4 and Chapter 5) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 37 views	📖 Read Docs 👁️ View
747	Connect 3 Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 37 views	📖 Read Docs 👁️ View
748	Sol’s Rng This sketch is a Roblox-style 'gacha' aura roller: click a button to roll for a random rarity (Common through the ultra-rare Synced), watch an animated stick-figure character glow with pulsing rings, and use a hidden admin panel to manually give any aura and see it rendered around the character in real time. Key Skills: Weighted random selection with cumulative probability p5.js DOM elements (createButton, createDiv, createInput) HSL color strings for animated rainbow effects push()/pop() and translate() for local coordinate drawing frameCount-driven sine wave animation by Mathew Bernard · 37 views	📖 Read Docs 👁️ View
749	Sketch 2026-08-26 14:24 - regular polygons stack stack of regular polygons sitting on one side Key Skills: polygonstack geometry by abdulwahabb ibrahimm · 36 views	📖 Read Docs 👁️ View
750	pup Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by GlitchOtter56 · 36 views	📖 Read Docs 👁️ View