📖 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

#	Sketch Details	Actions
401	fruit ninja 🥷 This is a Fruit Ninja-style game where players slice colorful fruits that arc across a bright sky using mouse drags or touch swipes. The challenge is avoiding bombs while racking up points, managing three lives, and surviving increasingly difficult waves of flying fruit. Key Skills: Game state machine Physics simulation (gravity, velocity, parabolic motion) Line-circle collision detection Touch and mouse input handling Procedural difficulty scaling by corbun · 81 views	📖 Read Docs 👁️ View
402	theme of the day but its super good This sketch renders a realistic 3D Earth with a satellite orbiting around it under simulated gravity, surrounded by a glowing starfield. The satellite leaves a glowing orange trail, and interactive controls let you adjust gravity, masses, and initial orbital conditions to see how the orbit changes in real time. Key Skills: 3D graphics and WEBGL rendering Newtonian gravity and physics simulation Vector mathematics and forces Euler integration for animation Texture mapping and materials by corbun · 90 views	📖 Read Docs 👁️ View
403	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 · 72 views	📖 Read Docs 👁️ View
404	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 · 85 views	📖 Read Docs 👁️ View
405	Subject gus: breached through the facility This is a stealth-horror escape game where you play as a red circle named Gus navigating a glowing maze while avoiding a blue enemy guard with a rotating field of view. Navigate through 20x20 grid of walls and corridors, time your movements to avoid detection, and reach the green exit tile—all with atmospheric sound design and subtle glitch effects. Key Skills: Grid-based movement and tile navigation Lerp interpolation for smooth animation Game state machines Field of view and line of sight detection Bresenham raycasting algorithm by Anonymous · 98 views	📖 Read Docs 👁️ View
406	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 · 79 views	📖 Read Docs 👁️ View
407	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 · 63 views	📖 Read Docs 👁️ View
408	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 · 70 views	📖 Read Docs 👁️ View
409	Simple MineCraft Cline (Remix) (Remix) This sketch creates a 2-player Minecraft-inspired sandbox where two players navigate a procedurally generated pixel world, place and break blocks, and survive zombie attacks during night cycles. The game combines tile-based world generation, physics simulation, day/night cycling, and enemy AI into a cooperative survival experience. Key Skills: Tile-based world generation Perlin noise procedural terrain 2D collision detection Physics simulation (gravity, velocity) Multi-entity state management by Anonymous · 120 views	📖 Read Docs 👁️ View
410	Sketch 2026-07-03 12:08 daily theme This sketch creates a mesmerizing quicksand simulation where particles gently fall from above, land on a rippling sandy surface, and slowly sink out of view. The undulating quicksand surface is animated using Perlin noise, while individual particles accelerate as they sink deeper, creating a continuous, hypnotic flow. Key Skills: Particle systems Perlin noise animation Collision detection Physics acceleration Vector math (position, velocity, acceleration) by Anonymous · 101 views	📖 Read Docs 👁️ View
411	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 · 68 views	📖 Read Docs 👁️ View
412	tu-tu-du-du max verstappen This sketch creates a dynamic 3D visualization of swirling, racing-inspired lines that spin through space against a deep blue background, with the name "MAX VERSTAPPEN" displayed prominently at the center. The lines use Perlin noise to create organic, flowing motion that continuously rotates, evoking speed and energy inspired by Formula 1 racing. Key Skills: WEBGL 3D mode Perlin noise Coordinate transformations (translate, rotate) Nested loops Push and pop state isolation by Anonymous · 93 views	📖 Read Docs 👁️ View
413	five hundred and twenty fourth to come This sketch creates a mesmerizing swirl of colorful, steam-like particles that drift across a dark canvas using Perlin noise-driven flow fields. Touch or drag anywhere on screen to push and shape the mist in real time, creating an interactive art piece. Key Skills: Particle systems and arrays Perlin noise flow fields HSB color mode and palettes Touch and mouse interaction Vector math (velocity, distance, angle) by Anonymous · 123 views	📖 Read Docs 👁️ View
414	Lethal ape: redux revamp update This sketch creates a tense top-down maze exploration game where the player navigates multi-room levels while dodging intelligent roaming monsters. The camera smoothly follows the player, UI buttons enable running and menu interactions, and procedural sounds build an eerie horror atmosphere. Key Skills: Game state machine (loading, menus, gameplay, jumpscare) Camera tracking and smooth lerp interpolation Procedural audio synthesis with p5.sound oscillators and envelopes Touch input and mobile joystick from scratch Collision detection (AABB) for pickups and room transitions by Anonymous · 147 views	📖 Read Docs 👁️ View
415	p5 storm chasing project (Remix) This sketch creates a TV-style National Weather Service radar map that simulates weather patterns across a region. It displays a dynamic southwest-to-northeast band of rain with a stratiform shield, tornado markers, and a Providence, KY location indicator that regenerates every few seconds or when clicked. Key Skills: Coordinate transformation and rotation Field-based procedural generation HSB color mapping for data visualization Grid-based spatial partitioning Procedural spline and pattern generation by Anonymous · 135 views	📖 Read Docs 👁️ View
416	p5 storm chasing project This sketch creates a TV-style weather radar display showing a southwest-to-northeast band of rain with a stratiform shield, tornado markers, and a Providence, KY location indicator. It combines procedural weather generation, color-mapped reflectivity visualization, and interactive regeneration on click. Key Skills: Procedural generation Coordinate rotation HSB color mapping Reflectivity visualization Interactive event handling by Anonymous · 113 views	📖 Read Docs 👁️ View
417	Michael dev This sketch creates a responsive landing page with a gray canvas background and two centered blue links that open external websites. The layout automatically repositions elements when the window is resized, keeping the interactive links always visible and properly aligned. Key Skills: DOM elements and p5.js integration Window resize events Responsive layout and positioning HTML link creation CSS styling through JavaScript by Anonymous · 124 views	📖 Read Docs 👁️ View
418	Red guides and his friends This sketch fills the screen with three colorful abstract characters—the "weird guys"—made of wiggly organic shapes with bright expressive eyes and curved mouths. Click or tap any character to trigger a gentle pulsing animation that brings them to life. Key Skills: Object-oriented programming with classes Perlin noise for organic generation Lerp for smooth easing animation Touch and mouse interaction Collision detection with distance by Anonymous · 129 views	📖 Read Docs 👁️ View
419	Sketch 2026-06-18 13:29 This sketch creates an animated birthday cake with flickering candles and a 'Happy Birthday!' message. The cake features layered frosting with a wavy design, pink candles with animated yellow and orange flames that flicker independently using Perlin noise, and automatically scales to fit any window size. Key Skills: Perlin noise for animation Responsive design with windowWidth/windowHeight Layered shape drawing Loops and arrays Frame-based animation by Anonymous · 98 views	📖 Read Docs 👁️ View
420	theme of the day This sketch creates an immersive 3D walkable city rendered in WEBGL with a tilt-shift effect that simulates a miniature diorama. Users navigate using keyboard (W/A/S/D) or on-screen buttons, while the tilt-shift effect blurs everything outside a horizontal band centered on the mouse/touch position, creating cinematic depth-of-field. Key Skills: WEBGL 3D rendering Off-screen buffers and compositing Camera control and perspective Procedural generation Depth-of-field and post-processing effects by Anonymous · 112 views	📖 Read Docs 👁️ View
421	My awesome sketch This sketch generates hypnotic, rotating starburst patterns made of radiating lines. Each pattern is controlled by a numeric seed—enter a seed value or generate random ones to instantly explore infinite geometric designs that slowly spin around the canvas center. Key Skills: randomSeed() and deterministic randomness Trigonometry: sine, cosine, polar coordinates The draw loop and animation with rotate() Event handling: input fields and button presses Precomputation: separating data from rendering by Anonymous · 145 views	📖 Read Docs 👁️ View
422	robux clicker (Remix) This sketch creates an addictive clicker game inspired by Roblox currency (Robux). Click a glowing green symbol to earn points manually, or toggle an auto-clicker that generates massive points automatically. The dark interface, hover effects, and responsive counter create an engaging mini-game experience. Key Skills: Mouse interaction and collision detection Game state management Responsive canvas and layout Transform stacking with push/pop Real-time UI updates by Anonymous · 117 views	📖 Read Docs 👁️ View
423	monkey chase 3 by corbun This sketch creates an eerie game where a flat monkey sprite chases your mouse cursor with AI steering behavior in a 3D WEBGL environment. When it catches you, the canvas freezes and slowly dissolves into glitchy crash images overlaid with fading static noise over seven minutes. Key Skills: Steering behavior Predictive targeting Collision detection WEBGL sprite rendering State machines by Anonymous · 230 views	📖 Read Docs 👁️ View
424	Twenty five year rotating clock remix This sketch creates an interactive 25-year rotating concentric disc clock that displays seconds, minutes, hours, days of the month, months, days of the week, and years. Seven rotating rings spin to show the current time and date, with each number positioned on a circular path that rotates to highlight the active value. Key Skills: CSS transforms (rotateZ, translateX) Circular layout mathematics jQuery DOM manipulation Recursive timing functions Date and time APIs by Anonymous · 160 views	📖 Read Docs 👁️ View
425	SVG Full Year Gear Clock This sketch displays an animated SVG-based mechanical gear clock that shows the current date and time. Embedded SVG gears rotate in synchronized patterns to represent seconds, minutes, hours, days, and months—creating a vintage clockwork visualization that updates in real-time. Key Skills: SVG embedding and manipulation CSS transforms and rotation JavaScript Date objects setInterval for continuous animation Time-based rotation calculations by Anonymous · 146 views	📖 Read Docs 👁️ View
426	u clicker 2 This sketch transforms your webcam into an interactive clicker game where tapping a circular video feed earns points that can be spent on 40 quirky upgrades—from flat click bonuses to wild auto-clickers and time-bending multipliers. As you upgrade, your click power snowballs exponentially. Key Skills: Webcam capture and clipping Game state management and persistence Touch and mouse input handling Exponential cost scaling Canvas layout and UI panels by Anonymous · 135 views	📖 Read Docs 👁️ View
427	Wings Slayer (Lucas) Wings Slayer is a 3D first-person shooting game where you hunt flying birds across multiple themed worlds, earn points to unlock weapons and new bird targets, and eventually face off against powerful bosses. The game combines fast-paced action with a progression system and environmental variety. Key Skills: 3D camera and first-person view Raycasting collision detection Game state management (health, score, inventory) Procedural world generation Boss behavior and AI by Anonymous · 102 views	📖 Read Docs 👁️ View
428	Simple MineCraft Game (Louis) This sketch creates a 2D sandbox mining game inspired by Minecraft where players explore a procedurally generated world, mine blocks, fight skeletons and spiders, and collect materials to win. The player navigates terrain physics, manages a hotbar inventory, and survives day/night cycles with enemy spawns. Key Skills: Procedural world generation with Perlin noise Tile-based grid collision detection Physics simulation (gravity, velocity, acceleration) Enemy pathfinding and behavior trees Day/night cycle and time-based events by Anonymous · 224 views	📖 Read Docs 👁️ View
429	Sketch 2026-06-08 16:23 (Remix) (Remix) (Remix) This sketch generates a symmetrical Islamic rosette pattern with customizable petals and central stars. The design uses trigonometric calculations to create intricate geometric patterns radiating from the center, with adjustable point count and size controlled by interactive sliders. Key Skills: Trigonometric geometry Object-oriented design with classes Class composition Procedural pattern generation Symmetry and rotation by Anonymous · 183 views	📖 Read Docs 👁️ View
430	Sketch 2026-06-08 16:23 (Remix) (Remix) This sketch generates Islamic geometric rosettes—intricate star-petal patterns with radiating symmetry. Each rosette is constructed from mathematically derived petal shapes and nested stars, arranged around a central point with full rotational symmetry controlled by an adjustable number of points. Key Skills: Trigonometry and angle calculations Object-oriented classes and constructors Rotational symmetry with rotate() and transforms Interactive sliders and real-time redraw Pre-computed geometry for performance by Anonymous · 147 views	📖 Read Docs 👁️ View
431	Sketch 2026-06-08 16:23 (Remix) This sketch generates an interactive Islamic rosette motif with symmetrical petals radiating from a center point. Users control the number of petals and the overall size with sliders, and the design updates dynamically to show intricate geometric patterns with nested stars at the center. Key Skills: Object-oriented design with classes Trigonometric calculations for geometry Rotational symmetry and transforms Pre-calculation and caching for performance Interactive controls with slider input by Anonymous · 118 views	📖 Read Docs 👁️ View
432	Sketch 2026-06-08 16:23 (Remix) This sketch creates an interactive geometric rosette pattern with multiple petals arranged radially around nested stars at the center. Users adjust a slider from 3 to 60 points to dynamically regenerate the entire flower-like design, with petals and concentric stars recalculating their geometry in real time. Key Skills: Trigonometry (sin, cos, tan) Class design and object-oriented programming Radial symmetry with rotate() and translate() Interactive sliders and event handling Pre-computed vs. real-time calculations by Anonymous · 129 views	📖 Read Docs 👁️ View
433	AI Kaleidoscope Generator - Symmetrical Pattern Art Draw mesmerizing symmetrical patterns with real (Remix) This sketch creates an interactive kaleidoscope generator where you draw with your mouse and watch your strokes multiply into hypnotic symmetrical patterns. The symmetry, rotation speed, and colors all respond to real-time controls, letting you create mesmerizing glowing art instantly. Key Skills: WEBGL mode and 3D coordinate system Matrix transformations (push, pop, rotate, scale) HSB color mode and palette generation Real-time mouse interaction and event handlers Symmetry and reflection geometry by Anonymous · 164 views	📖 Read Docs 👁️ View
434	Sketch 2026-06-08 16:23 This sketch generates an Islamic-inspired geometric rosette pattern with 24 petals arranged in radial symmetry around a central star. Each petal is a curved polygon filled with colors from a palette, and the center features nested stars with alternating colors creating an intricate mandala-like effect. Key Skills: Radial symmetry and rotation transforms Trigonometric geometry (sin, cos, tan calculations) Object-oriented design with ES6 classes Pre-calculation for performance (constructor initialization) Palette-based color cycling by Anonymous · 123 views	📖 Read Docs 👁️ View
435	I think Anonymous is the goat and I hate with all my mind body and soul Stella dev (the temu one) This is a space shooter game where players control a blue triangle ship to dodge falling enemies and shoot them down. The player moves by touching or clicking, fires projectiles by tapping, and loses when an enemy collides with them or passes the bottom of the screen. Score increases with each enemy destroyed. Key Skills: Object-oriented programming with classes Collision detection using distance Game state management Touch and mouse input handling Nested loops for multi-object interactions by Anonymous · 133 views	📖 Read Docs 👁️ View
436	I hate Anonymous and corbun and corbun 2.5 This is a fast-paced arcade shooter where players pilot a blue triangular ship to dodge falling enemy circles or destroy them with yellow projectiles. The game combines mouse/touch movement, collision detection, and scoring to create an engaging action experience. Key Skills: Object-oriented programming with ES6 classes Collision detection using distance formula Game state management Array manipulation and iteration Touch and mouse input handling by Anonymous · 172 views	📖 Read Docs 👁️ View
437	Sketch 2026-06-07 16:54 AI Crab Hunter is an action game where you control a cyan character that shoots bullets to eliminate crabs spawning from the screen edges. Move with WASD or arrow keys, aim with your mouse, and fire with clicks or spacebar to rack up kills and collect drops. Key Skills: Game loops and entity updates Collision detection with distance calculations Game state machines (alive/dying/collected) Class-based architecture for game objects Input handling (keyboard, mouse, touch) by Anonymous · 110 views	📖 Read Docs 👁️ View
438	just drive This sketch creates a playable driving simulator on an infinite NYC-style grid with procedurally generated buildings, parks, and pedestrians. Drive your red taxi around neighborhoods ranging from dense midtown skyscrapers to suburban houses, controlled via keyboard arrows or touch joystick. Key Skills: Procedural generation with pseudorandom seeding Camera following and translation transforms Spatial culling for performance optimization Touch joystick and mobile game controls Game physics (velocity, friction, steering) by Anonymous · 120 views	📖 Read Docs 👁️ View
439	Cool gradient This sketch fills your entire screen with a continuously morphing field of psychedelic waves and ripples. Using WebGL shaders, it animates colorful patterns that flow and shift in real time, creating an immersive, organic visual experience that responds to your window size. Key Skills: WebGL shaders Fragment shaders Trigonometric functions (sine, cosine) UV coordinates Real-time animation by Anonymous · 175 views	📖 Read Docs 👁️ View
440	THATSSSSSS CRAZYYY This sketch displays an animated, glowing URL that ripples and shimmers across a shifting radial gradient background. Each letter cycles through rainbow hues with a soft glow effect, and clicking anywhere copies the link to your clipboard with a playful confirmation message. Key Skills: Text animation and character loops HSB color mode and rainbow cycling Trigonometric motion (sine waves) Layer rendering and glow effects Interactive click and touch events by Anonymous · 147 views	📖 Read Docs 👁️ View
441	horrible game I think it works this time by corbun This sketch creates an interactive liquid chrome shader effect that responds to mouse movement, generating a shimmering, mercury-like surface that ripples and distorts in real-time. The visual effect is accompanied by generative techno music that intensifies based on how fast you move your mouse across the canvas. Key Skills: GLSL Fragment Shaders Shader Uniforms WEBGL Rendering Mouse Velocity Calculation P5.sound Synthesis by Anonymous · 163 views	📖 Read Docs 👁️ View
442	really bad game by corbun fixed This sketch creates an interactive liquid-metal surface that responds to mouse movement with rippling shader effects and a generative techno soundscape. As you move your cursor, custom GLSL shaders render shimmering visuals while p5.sound synthesizes evolving tones with distortion, delay, and reverb. Key Skills: GLSL shaders and WEBGL rendering Mouse velocity calculation and damping Real-time audio parameter mapping p5.sound synthesis (oscillators, reverb, delay, distortion) Gesture-driven interaction design by Anonymous · 170 views	📖 Read Docs 👁️ View
443	really bad game by corbun This sketch creates a rippling, liquid-metal landscape rendered with GLSL shaders that responds to mouse movement in real time. As you move your cursor faster, the visual distortions intensify and trigger evolving techno synth sounds with glitchy effects, creating a fully interactive audio-visual experience. Key Skills: GLSL shaders and GPU rendering Shader uniforms and real-time data passing Mouse velocity calculation p5.sound oscillators and audio effects Effect chaining and audio routing by Anonymous · 163 views	📖 Read Docs 👁️ View
444	SAVE P5JS.AI This sketch creates an interactive network visualization with drifting glowing nodes that connect when close together. Clicking the central button copies a shareable link, triggers animated feedback, and enters a playful "training mode" where users simulate sharing the link across a fake social media feed. Key Skills: Game state management Hit detection and button interactions Distance-based drawing and physics repulsion Mouse and touch input handling Dynamic UI rendering based on state by Anonymous · 176 views	📖 Read Docs 👁️ View
445	Sketch 2026-05-25 11:12 This sketch creates an anime-styled news feed that scrolls vertically with procedurally generated placeholder images. News items fade in smoothly as they enter the screen, respond to mouse hover with visual feedback, and recycle at the bottom to create an infinite scrolling effect. Key Skills: Procedural graphics generation createGraphics for off-canvas rendering Fade-in animation and alpha blending Object recycling and infinite scrolling Hover detection and interactive feedback by Anonymous · 121 views	📖 Read Docs 👁️ View
446	Welcome to p5js AI - Mobile-Friendly Creative Coding. Learn how to Vibecode, then create your own! This sketch creates a welcoming onboarding screen with a soft gradient background, gently drifting particles, and an animated carousel of instructional panels. Each panel pulses inside a circular badge while its title and description fade smoothly in and out, automatically cycling through ten steps that introduce users to p5js AI. Key Skills: Animation loop (frameCount, draw cycle) HSB color mode (hue-based coloring) Alpha transparency (fade effects) Responsive design (windowWidth, windowHeight) Text rendering (textFont, textSize, textAlign) by Anonymous · 202 views	📖 Read Docs 👁️ View
447	Sketch 2026-05-17 06:18 This sketch simulates a population of 120 AI-controlled cars learning to drive around a procedurally generated circular track using genetic algorithms and neural networks. Over generations, the population evolves better driving behaviors through natural selection, with the camera following the best performer while inferior drivers are replaced by offspring of champions. Key Skills: Genetic Algorithms Neural Networks Fitness Selection Procedural Generation Collision Detection by Anonymous · 203 views	📖 Read Docs 👁️ View
448	Sketch 2026-05-17 05:06 This is a 3D first-person bird-shooting game built with p5.js where you fly through a procedurally generated forest, aim at colorful birds flying past, and earn points for accurate shots. As your score grows, you unlock increasingly powerful weapons and faster, more exotic birds—from ducks to dragons—each with unique models, colors, particle effects, and reactive audio. Key Skills: 3D WEBGL rendering and camera control Ray-casting collision detection First-person mouse-locked input handling Particle systems with physics Procedural audio synthesis with oscillators and envelopes by Anonymous · 237 views	📖 Read Docs 👁️ View
449	Sketch 2026-05-15 22:54 by cbun This sketch creates a cozy nighttime scene with a crackling fire pit in front of a house under a starry sky. The fire flickers realistically using Perlin noise, sparks drift upward, and generative ambient music plays a breathing G-Major 7th chord when the user taps to start. Key Skills: Perlin noise Layered drawing and depth sorting Particle systems Generative ambient sound Procedural animation by Anonymous · 168 views	📖 Read Docs 👁️ View
450	Sketch 2026-05-15 16:34 This sketch creates an animated bouncing ball that changes color based on its horizontal position and plays a sound effect whenever it hits a wall. The ball's speed can be controlled with arrow keys, and the spacebar resets it to a random starting state. Key Skills: Collision detection with radius HSB color mode and dynamic hue mapping Speed multiplier system Procedural sound synthesis with oscillators Keyboard input handling by Anonymous · 165 views	📖 Read Docs 👁️ View