📖 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 |
|---|---|---|---|
| 301 |
|
Temu Rainbow FriendsTemu
Key Skills:
|
📖 Read Docs 👁️ View |
| 302 |
|
Connect 3Creative coding sketch
Key Skills:
|
📖 Read Docs 👁️ View |
| 303 |
|
UNOCreative coding sketch
Key Skills:
|
📖 Read Docs 👁️ View |
| 304 |
|
Ant Battle (Birds) (Main Menu And Christmas Units) (Remix)Creative coding sketch
Key Skills:
|
📖 Read Docs 👁️ View |
| 305 |
|
Ant Battle (Birds) (Main Menu And Christmas Units) (Chapter 2)Creative coding sketch
Key Skills:
|
📖 Read Docs 👁️ View |
| 306 |
|
Ant Battle (Birds) (Main Menu And Christmas Units)Creative coding sketch
Key Skills:
|
📖 Read Docs 👁️ View |
| 307 |
|
Ant Battle (Birds)Creative coding sketch
Key Skills:
|
📖 Read Docs 👁️ View |
| 308 |
|
Ant BattleCreative coding sketch
Key Skills:
|
📖 Read Docs 👁️ View |
| 309 |
|
emmanuelThis 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:
|
📖 Read Docs 👁️ View |
| 310 |
|
Sketch 2026-07-16 22:08This sketch creates a grid of tiles that starts as plain white squares and transforms into a lively animated mosaic of colorful shapes when clicked. On the first click, tiles jump to random shapes, colors and rotations; on the second click and beyond, they continuously morph and drift toward new random targets using smooth interpolation.
Key Skills:
|
📖 Read Docs 👁️ View |
| 311 |
|
Name Alexander Romero appear on screen in 3d withThis sketch is an interactive, multi-stage visual journey built as a finite state machine: you click gaps into a wall of glowing lines, watch it melt, pierce a dark hallway with light, reveal a giant eye, and finally fall into its pupil to loop back to the start. Every stage uses HSB colors, lerp-based animation, and procedurally synthesized sound instead of audio files.
Key Skills:
|
📖 Read Docs 👁️ View |
| 312 |
|
More orbiting objects orbiting around the supernovaThis 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:
|
📖 Read Docs 👁️ View |
| 313 |
|
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:
|
📖 Read Docs 👁️ View |
| 314 |
|
SLEEP_2A game of sleep and dreams
Key Skills:
|
📖 Read Docs 👁️ View |
| 315 |
|
SLEEPgame of sleeping and dreaming...
Key Skills:
|
📖 Read Docs 👁️ View |
| 316 |
|
Interactive animation with the name “ASHTON” displayedThis 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:
|
📖 Read Docs 👁️ View |
| 317 |
|
Name Owen on the screen, make the style of theThis sketch spells out the name 'Owen' with each letter bouncing around the screen like a classic DVD-logo screensaver, using two weights of the Oswald font. Clicking a letter randomly resizes it and reverses its direction, turning a simple animation into a playful interactive toy.
Key Skills:
|
📖 Read Docs 👁️ View |
| 318 |
|
Particle system that follows the mouseThis 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:
|
📖 Read Docs 👁️ View |
| 319 |
|
Sol’s RngThis sketch is a Roblox-style 'gacha' aura roller: click a button to roll for a random rarity (Common through the ultra-rare Synced), watch an animated stick-figure character glow with pulsing rings, and use a hidden admin panel to manually give any aura and see it rendered around the character in real time.
Key Skills:
|
📖 Read Docs 👁️ View |
| 320 |
|
ChessThis sketch turns p5.js into a fully playable chess board: it renders an 8x8 grid, draws Unicode chess symbols for every piece, lets the player click to select and move white pieces with real chess rules enforced, and hands control to a simple built-in AI that plays black by picking the first legal move it can find.
Key Skills:
|
📖 Read Docs 👁️ View |
| 321 |
|
Particle System - MeditationThis sketch fills the canvas with a smooth grey-to-black gradient and continuously spawns soft, colorful particles that trail behind the mouse cursor, drift with simulated gravity, and slowly fade away. Clicking the mouse triggers a burst of 80 particles that explode outward in every direction, like a tiny firework in the gradient sky.
Key Skills:
|
📖 Read Docs 👁️ View |
| 322 |
|
[Device: desktop/laptopThis sketch simulates a fake virus-scan popup that cycles through four dramatic states — scanning, infected, fixing, and clean — complete with animated progress bars, a scrolling list of fake infected files, oscillator sound effects, and a big red FIX NOW button. It's a prank sketch designed to look alarming while a small 'This is a prank.' label keeps things playful.
Key Skills:
|
📖 Read Docs 👁️ View |
| 323 |
|
pronk (Remix)This sketch is an interactive prank: it fakes a slow software installation with rotating status messages and a progress bar, then switches to a classic blue-screen-of-death crash, and finally reveals a cheerful 'APRIL FOOLS!' screen with a bouncing circle animation and a burst of white noise.
Key Skills:
|
📖 Read Docs 👁️ View |
| 324 |
|
FBI TAKEDOWN sceen (Remix)This sketch recreates a classic 'FBI warning' prank screen: a full-screen black page with blinking red warning text, a pulsing alarm sound, fake scanning messages, a countdown timer, and a green 'DISMISS PRANK' button that ends the joke. It uses p5.js text and color functions alongside the p5.sound library to synchronize a flashing visual with an audio alarm.
Key Skills:
|
📖 Read Docs 👁️ View |
| 325 |
|
triple t virus (Remix)This sketch creates a fake 'virus alert' screen with flashing scare images, a flickering red background, animated TV-static noise, and two joke buttons that spawn sarcastic floating text when clicked. It's a comedic prank page built almost entirely from p5.js timers, image overlays, and DOM buttons layered on top of a canvas.
Key Skills:
|
📖 Read Docs 👁️ View |
| 326 |
|
smiley face buttons (Remix by Corbun)This sketch creates a lively grid of eight yellow smiley-face circles and eight patterned white squares on a soft gradient background. The faces blink, bob, rotate, and react to the mouse with hover scaling, squash-and-bounce clicks, glowing halos, expanding ripples, and orbiting sparkle particles, while each square animates a unique line pattern clipped neatly inside its borders.
Key Skills:
|
📖 Read Docs 👁️ View |
| 327 |
|
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:
|
📖 Read Docs 👁️ View |
| 328 |
|
Sketch 1This sketch draws a single static cartoon portrait: a face wearing round glasses, framed by curly hair and two ears, built entirely out of layered ellipse() and rect() shapes with rounded corners. There is no animation or interaction - the same image is simply redrawn every frame using dozens of hard-coded shape calls stacked in a specific order to create depth (hair behind face, glasses over eyes, skin patches over the glasses rim).
Key Skills:
|
📖 Read Docs 👁️ View |
| 329 |
|
It so you build everything and you search it theThis sketch simulates a playful "AI builder" where typing a word like circle, house, or tree into a text box makes that shape appear on the canvas. Each typed command is matched against a list of known words in a switch statement, and matching shapes are stored as drawing functions that get replayed every frame.
Key Skills:
|
📖 Read Docs 👁️ View |
| 330 |
|
Add infinite Craft That you search up somethingThis sketch recreates the viral 'Infinite Craft' game entirely in p5.js: you drag draggable item tiles around a canvas and drop one on top of another to combine them into a new item, following a giant hardcoded lookup table of crafting recipes. Your inventory is drawn as colored rounded rectangles and automatically saved to the browser's localStorage so your discoveries persist between visits.
Key Skills:
|
📖 Read Docs 👁️ View |
| 331 |
|
Battle CatThis sketch draws a single, static cartoon cat wearing armor and wielding a sword, built entirely from p5.js primitive shapes like rectangles, ellipses, triangles, and a bezier curve. The whole character scales and re-centers itself automatically to fit any browser window size.
Key Skills:
|
📖 Read Docs 👁️ View |
| 332 |
|
Your_Robot_BuddyAn 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:
|
📖 Read Docs 👁️ View |
| 333 |
|
smiley face buttonsThis 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:
|
📖 Read Docs 👁️ View |
| 334 |
|
Can you make it so that when he drinks the energyThis 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:
|
📖 Read Docs 👁️ View |
| 335 |
|
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:
|
📖 Read Docs 👁️ View |
| 336 |
|
MonsterThis sketch renders an interactive 3D scene in WEBGL mode: a grey cube with a clickable colored sphere 'button' embedded in its front face, surrounded by four wobbling tentacle-like chains of stretched spheres. You can drag the cube to rotate it, click the button to cycle through messages, double-click it to change its color, and grab any tentacle tip to stretch and bend it.
Key Skills:
|
📖 Read Docs 👁️ View |
| 337 |
|
R0bot t-thing_ ERRORThis 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:
|
📖 Read Docs 👁️ View |
| 338 |
|
Sketch 2026-07-15 21:08This sketch renders an interactive 3D cube in WEBGL mode with a glowing sphere 'button' on its front face and four wobbling tentacles hanging from its corners. You can drag to rotate the cube, click the button to cycle through messages, double-click it to randomize its color, and grab a tentacle tip to stretch and bend it.
Key Skills:
|
📖 Read Docs 👁️ View |
| 339 |
|
My sketch is throwing this error — please diagnoseThis sketch draws an animated cartoon face inside a large oval that can be either purple or green. Clicking a small gray 'button' triggers a blinking sequence followed by a spiraling color-morph animation that shrinks the eyes into the center of the oval (or reverses the process), while red tic marks fade in and out around the oval's edge to indicate its 'active' state.
Key Skills:
|
📖 Read Docs 👁️ View |
| 340 |
|
It so when I press keys "a", "s", "d", "f", "j"This sketch draws a small on-screen piano and lets you literally see the keyboard react as you type: pressing A, S, D, F, J, K, L, or ; lights up the matching piano key in its own color and prints the letters you're holding down above the keys. It's a visual keyboard tester built entirely with rectangles, an object lookup table, and p5.js's key-event system.
Key Skills:
|
📖 Read Docs 👁️ View |
| 341 |
|
Rectangular background with a door touching theThis sketch is a small point-and-click game called 'Annoying Neighbors' built entirely with p5.js shapes and a state machine. You open a door in a hallway and something unpredictable appears behind it - an annoying neighbor, a box with an item, or nothing - and your job is to manage a rising 'annoyance meter' before it maxes out and ends the game.
Key Skills:
|
📖 Read Docs 👁️ View |
| 342 |
|
How tu put the circle on da mittleThis sketch draws a cute, latte-colored bear made entirely of overlapping circles and ellipses, centered on an 800x600 canvas. The bear gently bobs its head, and clicking its nose makes it wave a paw while a speech bubble cycles through friendly greeting messages.
Key Skills:
|
📖 Read Docs 👁️ View |
| 343 |
|
Lethal ape: redux revamp update (Remix)This sketch is a full top-down horror exploration game: you creep through a main hub room and five connected floors while roaming monsters hunt you, and touching one triggers a multi-phase jumpscare. It uses procedural (code-drawn) art for every character and prop, a smoothed camera that follows the player, on-screen joystick/buttons for mobile plus keyboard for desktop, and entirely procedural p5.sound audio (oscillators, noise, envelopes, delay) instead of loaded files.
Key Skills:
|
📖 Read Docs 👁️ View |
| 344 |
|
Cool guyThis sketch draws a large, friendly cartoon 'cool guy' - complete with spiky hair, sunglasses, a smirking mouth, and a blue collared shirt - centered on the canvas. Every shape is calculated from a single scale value tied to the window size, so the character redraws itself crisp and centered no matter how the browser is resized.
Key Skills:
|
📖 Read Docs 👁️ View |
| 345 |
|
Starship GameThis sketch is a full arcade survival game where you steer a spaceship left and right with your mouse, scooping up glowing gold orbs while dodging spiky red mines that rain down from the top of the screen. Each hit costs a life and triggers a screen shake and red damage flash, and the game speeds up the longer you survive until you lose all three lives and see a Game Over screen with your final rank.
Key Skills:
|
📖 Read Docs 👁️ View |
| 346 |
|
EatmojiEatmoji is a survival-style virtual pet game where a glowing, emoji-eyed blob follows your cursor and must gobble up food particles before their countdown timers hit zero. If any food expires, the screen shakes and a game-over emoji appears, challenging you to keep feeding your pet forever.
Key Skills:
|
📖 Read Docs 👁️ View |
| 347 |
|
P5.js sketch inspired by: "Crosshatch" uhh don't play if you have epilepsyThis sketch tiles the entire canvas with a grid of hand-sketched crosshatch cells, where each cell's line density is driven by Perlin noise that slowly evolves over time. The result looks like an animated pencil-shading texture, with patches of the canvas continuously breathing between dense and sparse hatching.
Key Skills:
|
📖 Read Docs 👁️ View |
| 348 |
|
Ball GameThis sketch is a 'Neon Dodger' survival game where the player controls a glowing circle at the bottom of the screen, moving it left and right with the mouse to dodge falling neon squares. Enemies spawn at randomized intervals from the top of the screen, and the score increases every time one passes safely - until a collision ends the game with a restart screen.
Key Skills:
|
📖 Read Docs 👁️ View |
| 349 |
|
I want to build a mini game with claude as coThis sketch is a complete mini arcade game called 'Neon Dodge' where the player controls a glowing cyan circle with their mouse, dodging magenta squares that fall from the top of the screen. The game features a neon glow aesthetic, an increasing difficulty curve, and a full start-screen/gameplay/game-over state machine.
Key Skills:
|
📖 Read Docs 👁️ View |
| 350 |
|
anthropic ai Pool table gameThis sketch is a fully playable, two-player 8-ball pool game rendered in 2D with a realistic top-down look - felt, wooden rails, brass pockets, and a tapered cue stick. Players click-and-drag to aim, release to shoot, and the game runs real physics for ball collisions, cushion bounces, friction, and pocket sinking while enforcing official 8-ball rules like group assignment, fouls, and win conditions.
Key Skills:
|
📖 Read Docs 👁️ View |