π 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
| # | Preview | Sketch Details | Actions |
|---|---|---|---|
| 351 |
|
Chess game but its using medieval charactersThis sketch is a fully playable chess game rendered with hand-drawn medieval characters instead of standard chess symbols - archers for pawns, castles for rooks, horsemen for knights, wizards for bishops, a sorceress for the queen, and a warlord king. You play white against a simple AI that plays black, and captures trigger themed projectile animations (arrows, boulders, holy light, fireballs, and sword slashes).
Key Skills:
|
π Read Docs ποΈ View |
| 352 |
|
Pool table game that is real poolThis 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:
|
π Read Docs ποΈ View |
| 353 |
|
v-22This sketch draws a detailed top-down illustration of a V-22 Osprey tiltrotor aircraft using layered p5.js shapes - fuselage, tail booms, tapered wings, engine nacelles, three-blade proprotors, and surface markings all built from rects, custom polygons, and ellipses.
Key Skills:
|
π Read Docs ποΈ View |
| 354 |
|
topview files v15This file is a deliberately empty placeholder that exists only to satisfy the loading order in index.html. It contains no drawing code, variables, or functions of its own - every real piece of this top-down game (setup, draw loop, physics, AI, UI) lives in fifteen other separate .js files that load before it.
Key Skills:
|
π Read Docs ποΈ View |
| 355 |
|
Grand Karting: Breath of the WildThis sketch builds a full 3D go-kart racing game using Three.js (loaded alongside p5.js, though p5 itself is barely used). You drive a kart around a looping curved track, drift around corners, launch off ramps, glide through the air, grind along rails, and wall-ride while a day/night cycle sweeps across the sky.
Key Skills:
|
π Read Docs ποΈ View |
| 356 |
|
Crea un animazione stile stickman di uno schermoThis 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:
|
π Read Docs ποΈ View |
| 357 |
|
Crea un animazione stile stickman che raccontaThis sketch tells the true story of footballer Antonio Puerta through a sequence of six animated stickman scenes - a football match, medical collapse, hospitalization, and passing - each driven by a simple state machine that advances automatically based on elapsed frames. Stickmen are drawn with rotate() and push()/pop() to animate limbs, while map() and lerp() interpolate positions, fades, and pulsing monitor lines to narrate the story visually.
Key Skills:
|
π Read Docs ποΈ View |
| 358 |
|
Hack The Hood Mini AppEDUMATE 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:
|
π Read Docs ποΈ View |
| 359 |
|
P5.js sketch inspired by: "Abstract waves"This sketch layers 20 semi-transparent, glowing wave lines that ripple across a dark night-sky background, each wave moving at its own speed and phase to create a hypnotic, ocean-like animation. The canvas automatically reshapes itself whenever the browser window is resized.
Key Skills:
|
π Read Docs ποΈ View |
| 360 |
|
Tornado intercept simulator by corbunThis 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:
|
π Read Docs ποΈ View |
| 361 |
|
DRIFT STARS 2026Drift 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:
|
π Read Docs ποΈ View |
| 362 |
|
Gun gameThis 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:
|
π Read Docs ποΈ View |
| 363 |
|
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:
|
π Read Docs ποΈ View |
| 364 |
|
Sketch 2026-07-10 09:04This 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:
|
π Read Docs ποΈ View |
| 365 |
|
3d blackholeThis sketch renders a glowing 3D black hole in WEBGL, surrounded by a swirling ring of colorful accretion-disk dust particles and a parallax starfield. Moving the mouse drags a custom glowing cursor orb that is itself pulled toward the black hole's gravity, visually reinforcing the sense of being sucked into deep space.
Key Skills:
|
π Read Docs ποΈ View |
| 366 |
|
open world gameThis 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:
|
π Read Docs ποΈ View |
| 367 |
|
P5.js sketch inspired by: "Xylophone"This sketch draws an interactive xylophone with eight colorful bars spanning a C major scale. Clicking, tapping, or pressing mapped keyboard keys (A-K) triggers a soft percussive tone for that bar and makes it flash red briefly to show it was struck.
Key Skills:
|
π Read Docs ποΈ View |
| 368 |
|
Volleyball where the different sections of theThis 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:
|
π Read Docs ποΈ View |
| 369 |
|
Gold and Purple Lava PitThis sketch simulates a bubbling lava pit that you can drop gold coins into. When a gold particle touches the lava, it turns purple, melts away, and dissolves into a spinning purple vortex that sinks and disappears.
Key Skills:
|
π Read Docs ποΈ View |
| 370 |
|
P5.js sketch inspired by: "Expectation vs reality Waterfall"This sketch paints a moody nighttime waterfall scene using a custom Particle class: hundreds of small glowing droplets are continuously spawned at a rocky ledge, fall and drift under simulated gravity, fade out, and disappear into a misty pool below. Static rock shapes and layered semi-transparent mist ellipses frame the falling water for a soft, atmospheric effect.
Key Skills:
|
π Read Docs ποΈ View |
| 371 |
|
spot for all of his lifeπ―This sketch loads a single image over the network and displays it full-screen, cropped to fill the window while preserving its aspect ratio. A dark bar at the top overlays a live countdown showing elapsed and remaining minutes out of an enormous configured total, updating every frame in real time.
Key Skills:
|
π Read Docs ποΈ View |
| 372 |
|
Preview Not Available Preview expired or not foundThis 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:
|
π Read Docs ποΈ View |
| 373 |
|
Bouncing ball animationThis 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:
|
π Read Docs ποΈ View |
| 374 |
|
spotThis sketch renders a still, storybook-style graveyard scene: a soft gradient sky, a green ground plane, and a single rounded gravestone engraved with the word 'SPOT'. Everything is drawn once and left static, like a painted illustration rather than an animation.
Key Skills:
|
π Read Docs ποΈ View |
| 375 |
|
P5.js sketch inspired by: "Vinyl scratch"This sketch draws a richly detailed vinyl record - complete with concentric grooves and colored labels - sitting on a dark background, alongside a tonearm that glides smoothly toward wherever you click or drag. Interacting with the record actually drives a live p5.sound oscillator and white-noise generator, so the pitch and scratchy texture of the sound change as you move the mouse across the disc.
Key Skills:
|
π Read Docs ποΈ View |
| 376 |
|
Sketch 2026-07-07 23:54This 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:
|
π Read Docs ποΈ View |
| 377 |
|
mom please don't put down spotThis sketch paints a full-screen cartoon sunset scene with a gradient sky, a glowing sun, warm-toned ground, and a spotted white dog named Spot lying peacefully in the foreground, his chest rising and falling with a subtle breathing animation.
Key Skills:
|
π Read Docs ποΈ View |
| 378 |
|
I lost the index.ejs of my project, will you helpThis 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:
|
π Read Docs ποΈ View |
| 379 |
|
Very smart chatbotThis 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:
|
π Read Docs ποΈ View |
| 380 |
|
P5.jsι»θ²θζ―η―ε½’εε η²ει±Όε¨η»οΌ12000η²εοΌεΈ¦εΊι¨ζ°΄ι’εε½±οΌε·¦δΈθ§ζΎη€ΊδΈθ§ε½ζ°ε ¬εΌοΌη²ει»ιζΈεεε οΌζΆι΄ειtι©±ε¨ι±Όζη»ζε¨ζΈΈε¨This sketch renders a swimming fish built entirely out of 12,000 glowing particles arranged in a polar-coordinate ring, with a distorted body wave and a wiggling tail. A flipped, semi-transparent copy of the fish is drawn below it to simulate a water reflection, and the whole animation runs on a black canvas with additive color blending for a neon glow.
Key Skills:
|
π Read Docs ποΈ View |
| 381 |
|
Peter pan game real gameThis sketch is a complete side-scrolling flight game where you control Peter Pan, flapping upward with the W or Up Arrow key to dodge pirates and collect pixie dust for points. It features a parallax scrolling Neverland background, custom hand-drawn characters built from primitive shapes, simple circle-based collision detection, and a full start/playing/game-over state machine.
Key Skills:
|
π Read Docs ποΈ View |
| 382 |
|
make your own heroThis sketch builds an RPG-style hero creation screen using p5.js DOM elements (a text input and buttons) layered on top of canvas drawing. Players type a hero name, spend a pool of skill points on four stats, and watch a simple hand-drawn warrior illustration on the canvas, then click 'Start Battle' to switch to a second game-state screen.
Key Skills:
|
π Read Docs ποΈ View |
| 383 |
|
space heroThis 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:
|
π Read Docs ποΈ View |
| 384 |
|
P5.js sketch inspired by: "Umbrella rain"This sketch fills the screen with hundreds of individually animated raindrops that fall at different speeds based on a simulated depth value, creating a parallax rain effect over a dark stormy sky. Three simple umbrellas sit along the bottom of the canvas, and everything reflows automatically when the browser window is resized.
Key Skills:
|
π Read Docs ποΈ View |
| 385 |
|
Object show where the Animation looks real andThis sketch fuses three.js 3D rendering with the p5.js draw loop to build an orbiting 'object show' scene: a golden trophy sits at the center while a soda cup, remote, PlayStation 5, salt lamp, and a McDonald's arc spin around it, each animated with GSAP. Text overlays render 'Animation 2024' and a randomly generated elimination result on top of the WebGL scene.
Key Skills:
|
π Read Docs ποΈ View |
| 386 |
|
starter thingThis sketch fills the screen with 70 glowing, color-shifting particles that drift, connect into thin constellation lines when they're close together, and leave soft trails behind thanks to a translucent background. Moving the mouse gently tugs nearby particles toward the pointer, and clicking or tapping bursts fresh particles into the scene.
Key Skills:
|
π Read Docs ποΈ View |
| 387 |
|
7364 games in oneThis sketch turns a single number - the 'game ID' - into an entire generated mini-game: a colored background, a bouncing shape (circle, square, or line), and its size and speed, all deterministically derived from that number using a seeded random generator. Clicking or tapping picks a brand new random game ID and rebuilds the whole scene instantly.
Key Skills:
|
π Read Docs ποΈ View |
| 388 |
|
Crossy rpadThis 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:
|
π Read Docs ποΈ View |
| 389 |
|
the modifulThis 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:
|
π Read Docs ποΈ View |
| 390 |
|
Simple GameThis 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:
|
π Read Docs ποΈ View |
| 391 |
|
Very fun game but sonion th onionThis 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:
|
π Read Docs ποΈ View |
| 392 |
|
P5.js sketch inspired by: "Tetris blocks"This sketch recreates the classic falling-block puzzle game Tetris entirely in p5.js, complete with seven colored tetromino shapes, rotation, line-clearing, scoring, and a speed-up mechanic. Pieces fall automatically on a timer while arrow keys let the player shift, rotate, and drop them onto a 10x20 grid.
Key Skills:
|
π Read Docs ποΈ View |
| 393 |
|
chicken runThis 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:
|
π Read Docs ποΈ View |
| 394 |
|
Offline game that works offline chicken runThis 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:
|
π Read Docs ποΈ View |
| 395 |
|
party portalThis sketch creates an interactive party portal with a shared live player counter across browser tabs, auto-triggered Party Mode when a threshold is reached, and animated confetti and emojis. It includes optional music playback, a hidden admin dashboard accessed via a secret key sequence, and persistent statistics using localStorage.
Key Skills:
|
π Read Docs ποΈ View |
| 396 |
|
inf road tripThis sketch creates a relaxing infinite driving scene where you cruise down a perspective road with trees and hills scrolling past. The car stays centered while the road lines and scenery continuously move toward you, simulating forward motion without the car actually moving.
Key Skills:
|
π Read Docs ποΈ View |
| 397 |
|
AMERICAAAAAAAAAThis sketch creates a patriotic fireworks display where colorful rockets launch from the bottom of the screen and explode into particles that assemble into glowing "AMERICA 250" text. After one minute, the text dissolves away in a shimmering fade, creating a celebratory visual effect.
Key Skills:
|
π Read Docs ποΈ View |
| 398 |
|
my profileThis sketch creates a beautifully lit 3D Earth rotating slowly in a starfield, with a satellite orbiting around it and leaving a glowing trail. The scene responds to mouse dragging for rotation control, and interactive sliders let you adjust gravity and satellite parameters in real time to watch the orbit transform.
Key Skills:
|
π Read Docs ποΈ View |
| 399 |
|
p5js.ai is super coolThis sketch displays a spinning 3D cube in WEBGL mode with glowing text wrapped around all six faces. The text "p5js.ai is super cool" shimmers with soft yellow-orange neon light created by layered glow effects, while the cube continuously rotates on three axes. An epilepsy warning overlay appears on load and must be dismissed before the animation begins.
Key Skills:
|
π Read Docs ποΈ View |
| 400 |
|
talking benThis sketch creates an interactive cartoon dog that fills the screen with expressive animations and a speech bubble. Users can record their voice through their microphone, play it back, and watch the dog react with silly comments and changing facial expressions.
Key Skills:
|
π Read Docs ποΈ View |