📖 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
551	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 · 59 views	📖 Read Docs 👁️ View
552	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: 2D array grids for game boards Object literals to model game entities Matrix rotation algorithm Collision detection against a grid millis()-based timing independent of frame rate by corbun · 59 views	📖 Read Docs 👁️ View
553	P5.js sketch inspired by: "Diamond grid" This sketch fills the screen with a grid of rotated squares (diamonds) drawn as outlines, and the stroke thickness of each diamond reacts to how close your mouse or finger is to it. The result is a glowing, radar-like ripple of thick and thin lines that follows your pointer across a dark background. Key Skills: Nested for loops for grids push() / pop() transformation state translate() and rotate() to reposition and reorient shapes map() to convert one numeric range into another Event-driven redraw with noLoop() by corbun · 58 views	📖 Read Docs 👁️ View
554	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 · 58 views	📖 Read Docs 👁️ View
555	Gold and Purple Lava Pit This 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: ES6 classes and objects State machines Array management with push/splice Collision detection push()/pop() transforms and rotate() by Anonymous · 58 views	📖 Read Docs 👁️ View
556	starter thing This 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: Particle systems with plain objects HSB color mode and hue cycling Translucent backgrounds for motion trails dist() for proximity/collision-style checks Default parameters in functions by corbun · 58 views	📖 Read Docs 👁️ View
557	Very broken rubgu.berb machine (I can't spell) This sketch creates an interactive Rube Goldberg machine using the Matter.js physics engine. Clicking the canvas releases a ball that cascades through eleven stages including ramps, seesaws, dominoes, pendulums, and funnels, demonstrating realistic physics interactions and chain reactions across an extended canvas. Key Skills: Matter.js physics engine Static vs. dynamic bodies Constraint joints and pivots Collision detection Chain reactions by Anonymous · 58 views	📖 Read Docs 👁️ View
558	P5.js sketch inspired by: "Neural network" This sketch visualizes a living neural network, with layers of nodes connected by weighted lines and animated data packets flowing between them. Watch as pulses of activity travel across the network over time, bringing the structure to life. Key Skills: daily by corbun · 57 views	📖 Read Docs 👁️ View
559	zhang Creative coding sketch Key Skills: daily by ElectricRobot34 · 57 views	📖 Read Docs 👁️ View
560	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 · 57 views	📖 Read Docs 👁️ View
561	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: Arrays of objects p5.Oscillator and p5.Envelope (ADSR) MIDI note to frequency conversion Event handling (mouse, touch, keyboard) millis() for timed visual feedback by corbun · 57 views	📖 Read Docs 👁️ View
562	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: p5.sound Oscillator and Noise push()/pop() with translate() and rotate() lerp() for easing animation map() and constrain() for input mapping Distance-based collision detection with dist() by corbun · 57 views	📖 Read Docs 👁️ View
563	Object show where the Animation looks real and This 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: Three.js + p5.js canvas sharing GSAP tweening THREE.OrbitControls camera interaction WebGL lighting and shadows THREE.Shape / ExtrudeGeometry by TurboFalcon70 · 57 views	📖 Read Docs 👁️ View
564	Skibidi Toilet Battle (Three Titans) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 56 views	📖 Read Docs 👁️ View
565	Skibidi Toilet Battle Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 56 views	📖 Read Docs 👁️ View
566	More orbiting objects orbiting around the supernova This sketch renders a glowing, pulsing supernova at the center of the canvas surrounded by orbiting particles, meteorites, comets, and drifting nebula clouds, topped with a simple cartoon face. Clicking the canvas cycles through 33 color palettes and animation 'moods', and after enough clicks the whole scene explodes and dramatically reforms. Key Skills: ES6 classes and inheritance (extends) Particle systems with object pooling (splice + push replacement) Trigonometric orbits using cos()/sin() and an incrementing angle Additive blend modes (blendMode(ADD)) for glow effects Color interpolation with lerpColor() and lerp() for smooth transitions by Reyli Martinez · 56 views	📖 Read Docs 👁️ View
567	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 · 56 views	📖 Read Docs 👁️ View
568	ca gam but i made it 3d lol This sketch creates a 3D top-down car racing game where you steer your blue car between lanes to avoid red obstacle cars. The entire game world is rendered in 3D using WEBGL, tilted at a camera angle to create depth, while you accumulate points for surviving. Key Skills: 3D WEBGL rendering Game state management Collision detection (AABB) Camera transforms (rotateX) Input handling (keyboard and touch) by Anonymous · 56 views	📖 Read Docs 👁️ View
569	DRIFT STARS 2 Drift through a neon-soaked cyberpunk city in a sleek 3D car, with glowing skyscrapers, rain, and particle effects lighting up the night. Switch modes, trigger nitro and EMP blasts, and dodge cops and obstacles as the camera swoops cinematically around your high-speed chaos. Key Skills: Particle systems & physics 3D graphics (WebGL) Video/webcam daily by corbun · 55 views	📖 Read Docs 👁️ View
570	Clash Royale (Princess Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 55 views	📖 Read Docs 👁️ View
571	topview files v15 This 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: Script loading order Separation of concerns Global scope across files Code organization for large sketches DOM script tags by truthdebates · 55 views	📖 Read Docs 👁️ View
572	make your own hero This 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: p5.js DOM elements (createInput, createButton) Game state machine with a string variable Object-oriented data modeling (hero object with nested stats) push()/pop()/translate()/scale() for composite drawings Synchronizing DOM element positions with a resizable canvas by peolker · 55 views	📖 Read Docs 👁️ View
573	elastic Eric but worst and better idk This sketch creates a highly interactive 3D character named Elastic Eric that stretches and deforms under drag interactions, with a special 'puddle mode' that melts the character into a liquid-like state inside a glass bowl. The character features a procedurally-generated spherical head mesh, articulated limbs with physics, facial animations including blinking and talking, and responsive haptic feedback on mobile devices. Key Skills: WebGL 3D rendering with WEBGL mode Custom mesh generation and vertex manipulation Verlet integration and spring physics Soft-body deformation from drag interaction State machines (game states: HOME, CREDITS, PLAY) by Anonymous · 55 views	📖 Read Docs 👁️ View
574	P5.js sketch inspired by: "Morphing shapes" This sketch continuously morphs a glowing white superformula shape at the center of the screen, leaving soft trails as it shifts between flower-like and star-like forms. The animation responds to your window size, always filling the space with a smooth, hypnotic outline. Key Skills: Animation loops Arrays & loops daily by corbun · 54 views	📖 Read Docs 👁️ View
575	P5.js sketch inspired by: "Lighthouse beam" This sketch paints a calm nighttime seascape with a tall lighthouse casting a soft, rotating beam of light across the ocean. Watch as the glowing beam slowly sweeps around the scene, illuminating the dark horizon. Key Skills: daily by corbun · 54 views	📖 Read Docs 👁️ View
576	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: Animation loop with frameCount Sine wave motion (sin()) HSB color mode for palette design Custom shapes with beginShape/vertex/endShape Parallel arrays for per-object properties by corbun · 54 views	📖 Read Docs 👁️ View
577	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: Polar coordinates Sine wave animation Additive blend mode (glow effect) Classes and objects push()/pop() transformations by PixelWizard69 · 54 views	📖 Read Docs 👁️ View
578	7364 games in one This 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: Seeded randomness (randomSeed) Deterministic procedural generation Global state variables Animation loop (draw) Collision/bounce detection by corbun · 54 views	📖 Read Docs 👁️ View
579	p5js.ai is super cool This 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: WEBGL 3D rendering Transformation stacks (push/pop) Rotation matrices Blend modes (ADD) Color interpolation (lerpColor) by corbun · 54 views	📖 Read Docs 👁️ View
580	nie nie Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by GlitchOtter56 · 53 views	📖 Read Docs 👁️ View
581	Eatmoji (Remix) Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Shahwaiz Khan · 53 views	📖 Read Docs 👁️ View
582	Particle system that follows the mouse Creative coding sketch Key Skills: Particle systems & physics Mouse interaction by DoodleOtter82 · 53 views	📖 Read Docs 👁️ View
583	Bouncing ball animation Creative coding sketch Key Skills: Animation loops daily by PixelPanda95 · 53 views	📖 Read Docs 👁️ View
584	Ant Battle V3 Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 53 views	📖 Read Docs 👁️ View
585	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: Particle systems ES6 classes and objects Array iteration and safe removal with splice() Alpha transparency and fading Simulated gravity/acceleration by corbun · 53 views	📖 Read Docs 👁️ View
586	Peter pan game real game This 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: Game state machines (switch statements) Object-oriented programming with ES6 classes Gravity and velocity-based physics Circle-circle collision detection with dist() Parallax scrolling backgrounds by peolker · 53 views	📖 Read Docs 👁️ View
587	very weird sketch This sketch creates an interactive space-themed collector game where a player-controlled spaceship chases and collects randomly generated alien critters floating across the canvas. The critters move organically using Perlin noise and display in various colorful shapes—polygons, blobs, and stars—while the player earns points for each successful collection. Key Skills: Object-oriented programming with classes Collision detection using distance formula Perlin noise for organic movement Mouse and touch input handling Transform matrices (translate, rotate) by Anonymous · 53 views	📖 Read Docs 👁️ View
588	paintlet Creative coding sketch Key Skills: daily by GlitchOtter56 · 52 views	📖 Read Docs 👁️ View
589	potato ai 2.0 OFFICAL (Remix) ایک گاؤں میں علی نام کا ایک غریب مگر محنتی لڑکا رہتا تھا۔ اس کا خواب تھا کہ وہ ایک کامیاب انسان بنے اور اپنے والدین کا نام روشن کرے۔ ہر روز وہ صبح سویرے اٹھتا، پڑھائی کرتا اور اپنے والد کے ساتھ کھیتوں میں بھی کام کرتا۔ گاؤں کے کچھ لوگ اس کا مذاق اڑاتے اور کہتے کہ اتنی محنت کا کوئی فائدہ نہیں۔ مگر علی نے کبھی ہمت نہیں ہاری۔ وہ جانتا تھا کہ مسلسل محنت ایک دن ضرور رنگ لائے گی۔ کئی سال بعد علی نے اپنی تعلیم مکمل کی اور ایک کامیاب انجینئر بن گیا۔ جب وہ اپنے گاؤں واپس آیا تو وہی لوگ اس کی کامیابی پر Key Skills: Basic p5.js drawing Creative coding by NeonPanda43 · 52 views	📖 Read Docs 👁️ View
590	AI Fractal Explorer - Infinite Mandelbrot Zoom Explore infinite mathematical beauty! Click to zoom (Remix) This sketch renders the Mandelbrot set pixel-by-pixel using complex number iteration, then paints it with an animated psychedelic color palette. You can click to zoom in, drag to pan, scroll to zoom smoothly, and press K to toggle an ambient audio drone that reacts to the exploration. Key Skills: Escape-time fractal algorithm Complex number iteration Pixel array manipulation (loadPixels/updatePixels) HSV to RGB color conversion Screen-to-complex coordinate mapping by NeonFox67 · 52 views	📖 Read Docs 👁️ View
591	Gizmo escapes V1.0 In real life I have a bunny called Gizmo he's a cool guy so I decided to create a funny game called Gizmo escapes it's a game where you have to collect bananas oranges apples lettuce and carrots but you have to jump over these obstacles it's a pretty fun game the character looks a little weird but still kind of looks like a bunny hope you guys enjoy this game and I will create some updates for this one too Key Skills: Arrays & loops bunny new escape fun by Holden Allen · 51 views	📖 Read Docs 👁️ View
592	Preview Not Available Preview expired or not found Creative coding sketch Key Skills: daily by NeonPanda43 · 51 views	📖 Read Docs 👁️ View
593	Find All Stars Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 51 views	📖 Read Docs 👁️ View
594	emmanuel This sketch builds a 3D WEBGL alley scene where a simple animated character runs in, spray-paints a wall, turns to deliver a warning, and runs off, revealing two lines of neon lime-and-cyan 3D extruded text (EMMANUEL SEDANO) that pop in with paint drips running down the wall. Key Skills: WEBGL 3D rendering with plane() Texture mapping with createGraphics() Frame-based animation state machines Easing functions for smooth motion Perlin noise for procedural textures by Emmanuel Emmanuel · 51 views	📖 Read Docs 👁️ View
595	Particle system that follows the mouse This sketch creates a continuous stream of colorful particles that trail behind the mouse cursor, drifting upward under a light gravity pull before fading away. Clicking the mouse triggers an 80-particle explosion at the cursor and cycles the background through three animated color-gradient themes. Key Skills: ES6 classes for object-oriented particle systems p5.Vector physics (position, velocity, acceleration) Array management with push and splice Alpha transparency and color fading lerpColor for gradient backgrounds by Owen Landon · 51 views	📖 Read Docs 👁️ View
596	smiley face buttons This sketch arranges eight rotating, blinking smiley-face circles around eight white squares filled with unique animated line patterns, all rendered in HSB color mode so each face's hue drifts through the rainbow over time. Hovering grows a face, clicking it triggers a squash-and-bounce animation plus an expanding rainbow ripple, while every square's internal lines are drawn onto an offscreen buffer and clipped so they never spill past its edges. Key Skills: p5.Graphics offscreen buffers Canvas clipping with drawingContext HSB color mode & hue cycling Arrays of state objects for multiple animated instances Easing and lerp()-based animation by Ashton Jensen · 51 views	📖 Read Docs 👁️ View
597	Simon Says Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 50 views	📖 Read Docs 👁️ View
598	Can you make it so that when he drinks the energy This sketch brings to life an interactive cartoon robot with blinking, color-cycling eyes, ragdoll arms you can grab and fling, and a torso you can zap by clicking a lightning emoji. It also lets you drag an energy drink can or a burger into its mouth to trigger eating animations, sound effects, and comic-style speech bubbles that react to whatever you just did. Key Skills: Animation loop (draw()) State machines with boolean flags Mouse interaction (mousePressed/mouseDragged/mouseReleased) lerp() for smooth easing p5.sound oscillators and envelopes by Emmanuel Emmanuel · 50 views	📖 Read Docs 👁️ View
599	Chess game but its using medieval characters This 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: 2D array board representation Move generation and legality rules Check/checkmate/stalemate detection Simple material-based AI evaluation Animation with lerp() and frame counters by david w · 50 views	📖 Read Docs 👁️ View
600	"Welcome to Sketchbook to Screen Student Exhibition" (Remix) Creative coding sketch Key Skills: daily by GlitchOtter56 · 49 views	📖 Read Docs 👁️ View