📖 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
501	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 · 108 views	📖 Read Docs 👁️ View
502	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 · 107 views	📖 Read Docs 👁️ View
503	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 · 107 views	📖 Read Docs 👁️ View
504	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 · 105 views	📖 Read Docs 👁️ View
505	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: Asynchronous image loading with callbacks State machines using boolean flags Aspect-ratio-preserving 'cover' scaling millis() for real-time elapsed time Responsive canvases with windowResized() by corbun · 103 views	📖 Read Docs 👁️ View
506	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 · 103 views	📖 Read Docs 👁️ View
507	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 · 103 views	📖 Read Docs 👁️ View
508	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 · 99 views	📖 Read Docs 👁️ View
509	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 · 98 views	📖 Read Docs 👁️ View
510	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 · 97 views	📖 Read Docs 👁️ View
511	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 · 96 views	📖 Read Docs 👁️ View
512	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 · 93 views	📖 Read Docs 👁️ View
513	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 · 91 views	📖 Read Docs 👁️ View
514	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 · 90 views	📖 Read Docs 👁️ View
515	party portal This 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: localStorage for cross-tab state sync Particle animation classes p5.sound music generation Animated color interpolation Hidden admin sequence detection by corbun · 88 views	📖 Read Docs 👁️ View
516	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 · 84 views	📖 Read Docs 👁️ View
517	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 · 83 views	📖 Read Docs 👁️ View
518	Ant Battle Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 80 views	📖 Read Docs 👁️ View
519	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 · 75 views	📖 Read Docs 👁️ View
520	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 · 74 views	📖 Read Docs 👁️ View
521	Grand Karting: Breath of the Wild This 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: Three.js scene graph (Scene, Mesh, Group) Curve-based geometry generation (CatmullRomCurve3, TubeGeometry) Manual velocity/rotation physics requestAnimationFrame game loop Keyboard input state tracking by Maddala Royals · 72 views	📖 Read Docs 👁️ View
522	3d blackhole This 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: WEBGL 3D rendering (sphere, torus) Vector-based physics (steering + gravity) Class-based particle systems Color interpolation with lerpColor Polar-to-Cartesian coordinate conversion by corbun · 72 views	📖 Read Docs 👁️ View
523	More orbiting objects orbiting around the supernova (Remix) Creative coding sketch Key Skills: Object-oriented programming daily by GlitchOtter56 · 71 views	📖 Read Docs 👁️ View
524	talking ben This 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: p5.sound library (microphone input, recording, playback) State management (tracking isRecording, isPlaying, hasRecording) Conditional animation (expressions change based on state) UI interaction (buttons, click detection, hit testing) Scaling and responsive design (min/max, windowWidth/windowHeight) by corbun · 71 views	📖 Read Docs 👁️ View
525	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 · 71 views	📖 Read Docs 👁️ View
526	mom please don't put down spot This 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: Per-pixel color gradients with lerpColor() Layered transparency for glow effects push()/pop()/translate()/scale() for nested drawing groups Sine wave animation for organic movement frameCount-driven continuous animation by corbun · 69 views	📖 Read Docs 👁️ View
527	spot for all of his life💯 (Remix) This sketch loads a single image from the web and displays it full-screen with a semi-transparent timer bar overlaid at the top, counting up elapsed minutes and counting down from a massive countdown target of nearly 8 million minutes. It handles the image loading asynchronously so the sketch never freezes while waiting for the network. Key Skills: Asynchronous image loading with callbacks Aspect ratio preserving 'cover' scaling millis() based timing Responsive canvas resizing Conditional rendering based on state flags by Mathew Bernard · 68 views	📖 Read Docs 👁️ View
528	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 · 68 views	📖 Read Docs 👁️ View
529	P5.js sketch inspired by: "Knot theory" Creative coding sketch Key Skills: daily by corbun · 67 views	📖 Read Docs 👁️ View
530	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 · 67 views	📖 Read Docs 👁️ View
531	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: ES6 classes and objects Arrays of custom objects map() for value conversion Simulated depth/parallax with a z property Animation loop (draw) by optional · 67 views	📖 Read Docs 👁️ View
532	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 · 67 views	📖 Read Docs 👁️ View
533	inf road trip This 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: Perspective and vanishing points Animation loop and frame-based movement Arrays for managing multiple objects Parallax scrolling for depth illusion map() function for scaling based on distance by corbun · 66 views	📖 Read Docs 👁️ View
534	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 · 66 views	📖 Read Docs 👁️ View
535	P5.js sketch inspired by: "Jigsaw puzzle" Creative coding sketch Key Skills: daily by corbun · 64 views	📖 Read Docs 👁️ View
536	Ant Battle V4 Creative coding sketch Key Skills: Basic p5.js drawing Creative coding by Mathew Bernard · 64 views	📖 Read Docs 👁️ View
537	AMERICAAAAAAAAA This 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: Particle systems Vector physics and forces Font loading and text rendering Off-screen graphics buffers Pixel sampling and geometry extraction by corbun · 64 views	📖 Read Docs 👁️ View
538	P5.js sketch inspired by: "Hologram" Creative coding sketch Key Skills: daily by corbun · 63 views	📖 Read Docs 👁️ View
539	R0bot t-thing_ ERROR This sketch brings a boxy cartoon robot to life on the canvas: its eyes track the mouse and blink naturally, its arms can be grabbed and slung around like a ragdoll, and clicking its chest emoji triggers a squinting electric-shock animation complete with speech bubbles. It is a great example of combining timers, easing, trigonometry, and simple state machines to make a static drawing feel alive. Key Skills: The draw() animation loop Mouse interaction (mousePressed, mouseDragged, mouseReleased) Timers with millis() for natural, randomized behavior Easing/smoothing with lerp() Vector math for dragging: atan2(), dist(), constrain() by Emmanuel Emmanuel · 63 views	📖 Read Docs 👁️ View
540	AI Fractal Explorer - Infinite Mandelbrot Zoom Explore infinite mathematical beauty! Click to zoom (Remix) Creative coding sketch Key Skills: Recursion & fractals Mouse interaction daily by QuantumComet97 · 62 views	📖 Read Docs 👁️ View
541	Get this sketch popular I'm not using ai I made thus myself ut made bya human not a ai I did that by using the code tab to add files and code Key Skills: Trigonometry by Red guides · 62 views	📖 Read Docs 👁️ View
542	P5.js sketch inspired by: "Wormhole" Creative coding sketch Key Skills: daily by corbun · 61 views	📖 Read Docs 👁️ View
543	my profile This 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: 3D rendering with WEBGL Orbital mechanics and gravity simulation Camera control and mouse interaction Lighting and material properties Particle trails and history buffers by corbun · 61 views	📖 Read Docs 👁️ View
544	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 · 60 views	📖 Read Docs 👁️ View
545	spot This 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: Static rendering with noLoop() Color blending with lerpColor() Per-pixel gradient loops Shape composition with push()/translate()/pop() Responsive canvas with windowResized() by Corban Machen · 60 views	📖 Read Docs 👁️ View
546	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 · 60 views	📖 Read Docs 👁️ View
547	P5.js sketch inspired by: "Isometric blocks" Creative coding sketch Key Skills: daily by corbun · 59 views	📖 Read Docs 👁️ View
548	P5.js sketch inspired by: "Graffiti tag" Creative coding sketch Key Skills: daily by corbun · 59 views	📖 Read Docs 👁️ View
549	Interactive animation with the name “ASHTON” displayed This sketch renders the word "ASHTON" in glowing, layered text at the center of a full-window WEBGL canvas, surrounded by softly pulsing background fireworks. Clicking or tapping the text changes its hue and launches an expanding ring (a shockwave) from its center, turning a static title into a playful interactive animation. Key Skills: WEBGL coordinate system (centered origin) HSB color mode and alpha transparency Custom font loading with preload() Layered transparency for glow effects Particle systems with ES6 classes by Ashton Jensen · 59 views	📖 Read Docs 👁️ View
550	Your_Robot_Buddy An interactive Robot pretty cool huh? V3. Big update new title screen and new a new color panel change your robots color! Have fun Key Skills: Color manipulation by Emmanuel Emmanuel · 59 views	📖 Read Docs 👁️ View