π 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 |
|---|---|---|---|
| 751 |
|
GUESS WHO!!!This sketch creates a hilariously dim-witted zombie jockey riding on a wobbly chicken. The bot blinks randomly, tracks the mouse with laggy eyes, and twitches awkwardly while the chicken beneath it wobbles side to sideβa delightfully stupid animation powered by noise, transforms, and eye-tracking logic.
Key Skills:
|
π Read Docs ποΈ View |
| 752 |
|
This game is broken someone fix it, Theres a game after this i promiseThis is a multilingual text adventure game where players explore an ancient temple, collect items, and solve puzzles through typed commands or clickable buttons. The game supports five languages (English, Spanish, French, German, Italian) and features a classic retro terminal aesthetic with green text on black.
Key Skills:
|
π Read Docs ποΈ View |
| 753 |
|
heheheThis sketch creates a fast-paced bug-squashing game where cockroaches scurry across the screen and players race against a 30-second timer to click and splat as many bugs as possible. The game combines interactive collision detection, real-time scoring, and increasing difficulty as spawn rates accelerate.
Key Skills:
|
π Read Docs ποΈ View |
| 754 |
|
play with your foodThis interactive p5.js sketch lets players drag colorful food items onto a white plate to create edible arrangements. A scoring system judges creativity based on variety, balance, symmetry, and food pairings, then delivers parent-themed feedback on the player's culinary design.
Key Skills:
|
π Read Docs ποΈ View |
| 755 |
|
ITS RAINING TACOSThis sketch creates a festive animation where colorful tacos rain down the screen continuously while a mouse-following circle trails across the canvas with colors that shift based on cursor position. It combines object-oriented programming with p5.js animation to create an interactive, playful visual experience.
Key Skills:
|
π Read Docs ποΈ View |
| 756 |
|
ping-pongThis sketch is a modern Pong game where a glowing ball bounces between two paddlesβone controlled by the mouse, the other by simple AI. Each collision triggers synthesized sound effects, and the first player to reach 5 points wins the game.
Key Skills:
|
π Read Docs ποΈ View |
| 757 |
|
have funThis sketch creates an interactive physics simulation where clicking destroys falling blocks, shattering them into flying pieces while drawing cracks across the screen. As you accumulate clicks, the cracks intensify until the screen itself "breaks," revealing a grotesque face beneath with a dramatic jumpscare effect.
Key Skills:
|
π Read Docs ποΈ View |
| 758 |
|
ΧΧ©ΧΧ§ ΧΧΧΧΧThis sketch creates an interactive Hebrew language learning game that displays a question asking for the Hebrew word for "dog." Users type their answer in an input box, click a check button, and receive instant visual feedback in green (correct) or red (incorrect with the right answer shown).
Key Skills:
|
π Read Docs ποΈ View |
| 759 |
|
ZahlenschΓ€tzerThis sketch is a number guessing game where players try to discover a secret number between 1 and 100 by entering guesses and receiving feedback. The game displays instructions, remaining attempts, and directional hints (too high/too low) on a clean interface with an input field and buttons.
Key Skills:
|
π Read Docs ποΈ View |
| 760 |
|
cazador de manzanasThis sketch is a fast-paced fruit-catching game where players move a basket with their mouse to catch falling fruits, special items, and avoid bombs. The game features a combo system, particle effects, scrolling clouds, and synthesized sound effects that reward quick reflexes and strategic catching.
Key Skills:
|
π Read Docs ποΈ View |
| 761 |
|
Unfinished projectThis sketch creates a pixelated adventure game where you play as a diver exploring a flooded world. You swim through water, walk on land, enter houses, interact with NPCs, and complete quests by flooding buildings to reclaim the land for the sea.
Key Skills:
|
π Read Docs ποΈ View |
| 762 |
|
mazeyThis sketch creates an interactive maze game where players navigate a red cube from a green start cell to a blue goal cell using arrow keys or WASD. The maze is procedurally generated using the Recursive Backtracker algorithm, and the cube moves smoothly between cells with interpolation.
Key Skills:
|
π Read Docs ποΈ View |
| 763 |
|
Cody's mindThis sketch creates a cosmic particle network orbiting a glowing central core, with sassy AI-generated thoughts that float across the screen. The particles emit flickering connections to nearby neighbors, creating an animated visualization of a thinking mind with personality.
Key Skills:
|
π Read Docs ποΈ View |
| 764 |
|
Sketch 2026-02-08 21:36Neural Flow Weaver is an abstract visualization of an interconnected network where animated nodes drift across the canvas and connect dynamically based on proximity. The sketch combines animated nodes, philosophical text insights, ambient soundscapes generated with Tone.js, and interactive audio feedbackβcreating a meditative experience that represents information processing and problem-solving.
Key Skills:
|
π Read Docs ποΈ View |
| 765 |
|
Algorithmic BloomThis sketch generates an elegant fractal tree that grows recursively with branches tapering in length and color. The tree animates continuously with noise-driven swaying motion, set against a softly shifting sky gradient and textured ground, with seasonal color palettes you can cycle through by pressing keys.
Key Skills:
|
π Read Docs ποΈ View |
| 766 |
|
Sketch 2026-02-08 12:55This is not a p5.js creative coding sketchβit is a web application that fetches real-time weather data from OpenWeatherMap API and displays agricultural advisory information on an HTML page. The sketch.js file contains only a single async function that retrieves weather data, and the project is primarily HTML/CSS/JavaScript for agricultural decision support, not visual art or interactive graphics created with p5.js.
Key Skills:
|
π Read Docs ποΈ View |
| 767 |
|
Sketch 2026-02-07 15:33This sketch creates an interactive audio-reactive image distortion effect that displays an image with bulges and pinches controlled by microphone input and time-based oscillations. The distortion effect follows your mouse cursor and responds to sound levels, creating a mesmerizing, morphing visual.
Key Skills:
|
π Read Docs ποΈ View |
| 768 |
|
InterActiveImagetestThis sketch displays an image on canvas and warps it into a bulging, rippling field centered on your mouse cursor. When you click to activate your microphone, the intensity of the warp responds to sound levels and time-based oscillations, creating an interactive audio-visual sculpture.
Key Skills:
|
π Read Docs ποΈ View |
| 769 |
|
RoomThis sketch creates an immersive 3D room rendered in WebGL, filled with furniture, lab equipment, and decorative objects lit with warm, dramatic directional and point lights. You control a first-person camera by clicking and dragging to pan and tilt your head, and scrolling to zoom in and out through the lived-in space.
Key Skills:
|
π Read Docs ποΈ View |
| 770 |
|
Astro botThis sketch creates a full platformer game called Astro Bot where players navigate through 5 themed worlds, rescue bots, defeat enemies, and fight bosses. The game features a hub world for level selection, animated platforms, touch controls, particle effects, and a complete game loop with lives, scoring, and world progression.
Key Skills:
|
π Read Docs ποΈ View |
| 771 |
|
YouTubeThis sketch creates a playful video player interface that displays random YouTube video titles in a large thumbnail box. Clicking the X button in the bottom-left corner skips to the next video with a beep sound and increments a counter.
Key Skills:
|
π Read Docs ποΈ View |
| 772 |
|
Sketch 2026-01-26 02:56This sketch creates a fully playable Pong game where two players control paddles on opposite sides of the screen to bounce a ball back and forth. The game tracks scores and resets the ball whenever it goes out of bounds on either side.
Key Skills:
|
π Read Docs ποΈ View |
| 773 |
|
MinesweeperThis sketch implements the classic Minesweeper game in p5.js with a 10x10 grid where players click to reveal cells and right-click to flag suspected mines. The game includes mine placement that avoids the first click, automatic cell flooding for empty cells, and a timer tracking game duration.
Key Skills:
|
π Read Docs ποΈ View |
| 774 |
|
Sketch 2026-01-25 22:50This is a fully playable Minesweeper game built with p5.js. Players click to reveal cells, right-click to flag mines, and try to uncover all safe cells before hitting a mine. The game includes a timer, smart mine placement that avoids the first click, and automatic flood-fill revealing of empty regions.
Key Skills:
|
π Read Docs ποΈ View |
| 775 |
|
Platform GameThis is a 22-level platform game where the player controls a blue square that must navigate through increasingly complex levels by jumping, avoiding lava, and reaching green goal tiles. The game features gravity-based physics, collision detection, eight different tile types, and progressive difficulty.
Key Skills:
|
π Read Docs ποΈ View |
| 776 |
|
SnakeThis sketch implements the classic Snake game where players control a growing snake using arrow keys to collect food and increase their score. The game ends if the snake hits walls or itself, the food changes color with each bite, and the game accelerates as the score increases until reaching a winning score of 52.
Key Skills:
|
π Read Docs ποΈ View |
| 777 |
|
WordleThis sketch recreates Wordle, the daily word-guessing game, using object-oriented p5.js code. Players type 5-letter guesses into a grid of boxes and get color-coded feedback (green, yellow, gray) both on the grid and on an on-screen keyboard, until they guess the secret word or run out of six tries.
Key Skills:
|
π Read Docs ποΈ View |
| 778 |
|
Sketch 2026-01-17 14:49This sketch creates a smooth text transition animation that alternates between two phrases: 'Adra Keren' and 'Adra Anak Emas'. Each phrase fades in and holds for 2 seconds, then fades out over 1 second as the other phrase fades in, creating a continuous loop. The canvas resizes responsively to fit the window.
Key Skills:
|
π Read Docs ποΈ View |
| 779 |
|
Fractal ForestThis sketch simulates a living patch of soil where nutrient-rich earth glows and drifts like breathing tissue, seeds fall from a starry night sky, and germinated seeds grow into branching plants using L-system grammar rules. Dead plants decay, return nutrients as glowing particles, and sometimes spawn spreading fungus, while a scrolling timeline chart tracks population and soil fertility over time.
Key Skills:
|
π Read Docs ποΈ View |
| 780 |
|
Particle SystemThis sketch creates an interactive particle system with 100 colorful particles that bounce around the canvas and are attracted toward the mouse cursor. Each particle has randomized size and color, creating a dynamic visual effect that responds to user interaction in real time.
Key Skills:
|
π Read Docs ποΈ View |
| 781 |
|
Teachable Machine > P5.js > Device (web serial) (Remix) (Remix)This sketch combines machine learning image classification with real-time device communication, allowing a Teachable Machine model to recognize objects from your webcam and send classification results to physical devices via USB Serial or Bluetooth. It bridges the gap between p5.js, ml5.js, and embedded systems like the micro:bit.
Key Skills:
|
π Read Docs ποΈ View |
| 782 |
|
Teachable Machine > P5.js > Device (web serial)This sketch connects a Teachable Machine image classifier to a web browser, processes live webcam video to identify objects or subjects, and sends classification results via Web Serial to microcontroller devices like Arduino or Micro:bit. It bridges machine learning and hardware by creating a real-time visual classification system with two-way serial communication.
Key Skills:
|
π Read Docs ποΈ View |
| 783 |
|
Sketch 2026-01-11 20:18This sketch uses ml5.js to classify video from your webcam in real-time and sends the classification results to a microcontroller via Web Serial API. It displays the live video feed alongside the current prediction label and confidence percentage, creating a bridge between machine learning in the browser and hardware devices.
Key Skills:
|
π Read Docs ποΈ View |
| 784 |
|
HappyNewYear2026This sketch animates a glittering Times Square-style ball dropping down a starry sky while cycling through iconic 2025 moments. When the ball reaches the bottom, the scene explodes into colorful confetti, fireworks, and a bold "2026" celebration.
Key Skills:
|
π Read Docs ποΈ View |
| 785 |
|
FRACTAL GARDEN2This sketch simulates a living cross-section of soil where Perlin-noise nutrients drift and diffuse, seeds fall from the sky and germinate when the ground is fertile enough, and surviving seeds grow into branching plants using L-system turtle graphics. Random events like seed showers, droughts, and blooms periodically reshape the miniature ecosystem, while a scrolling timeline tracks population and soil fertility over time.
Key Skills:
|
π Read Docs ποΈ View |
| 786 |
|
FractalGardenThis sketch grows a living miniature ecosystem: a shifting band of soil rendered from a nutrient grid that diffuses and regenerates around hidden wells, while seeds drift down through gravity and wind, land in the dirt, and sprout into branching, shape-specific plants that compete for nutrients and space.
Key Skills:
|
π Read Docs ποΈ View |
| 787 |
|
Voxel-destructibleThis sketch creates a fully destructible 3D voxel world built with three.js, where each tiny cube can be clicked or tapped to explode into falling physics-based pieces. The scene supports free camera rotation and zooming, and plays satisfying destruction sounds via tone.js.
Key Skills:
|
π Read Docs ποΈ View |
| 788 |
|
Sketch 2025-12-24 00:08This sketch creates an animated orbital system featuring a morphing planet at the center and a smaller moon orbiting around it. Both shapes continuously transform between a triangle and a dodecagon while rotating, with colors that shift through the rainbow spectrum creating a mesmerizing, symmetrical animation.
Key Skills:
|
π Read Docs ποΈ View |
| 789 |
|
AI ASCII Camera - Live Webcam to Text Art Converter - xelsed.aiThis sketch turns your live webcam feed into moving ASCII art, sampling the video's pixel brightness and mapping it to a ramp of text characters from spaces to '@' symbols. A toggle button lets you switch to a 'drawing' mode where you can finger-paint on a tiny buffer that also gets rendered as green terminal-style text.
Key Skills:
|
π Read Docs ποΈ View |
| 790 |
|
AI Constellation Drawer - Create Your Own Star Patterns - xelsed.aiThis sketch fills the screen with dozens of gently twinkling stars set against a deep blue gradient sky, and lets you click any two stars to draw a glowing white line between them - building your own constellation. Stars glow brighter under the mouse and while selected, and a subtle parallax effect makes the whole starfield drift as you move your cursor.
Key Skills:
|
π Read Docs ποΈ View |
| 791 |
|
AI Reaction Time Test - How Fast Are Your Reflexes - xelsed.aiThis sketch is a classic reaction-time tester: the screen stays red for a random delay, flashes green, and measures how many milliseconds pass before you click. A simple state machine drives four screens (waiting, ready, result, and too-early) and keeps track of your personal best score.
Key Skills:
|
π Read Docs ποΈ View |
| 792 |
|
AI Lissajous Explorer - Mathematical Spirograph Patterns - xelsed.aiThis sketch draws a glowing, colorful Lissajous curve - a classic mathematical spirograph pattern created by combining two sine waves at different frequencies. Three sliders let you control the A and B frequencies and the phase offset, instantly reshaping the curve from a circle into figure-eights and intricate woven patterns.
Key Skills:
|
π Read Docs ποΈ View |
| 793 |
|
AI Pendulum Wave - Mesmerizing Harmonic Motion Physics - xelsed.aiThis sketch simulates 15 pendulums of gradually increasing arm length, all released from the same starting angle so they swing at slightly different frequencies. As they oscillate, the pendulums drift in and out of phase with each other, producing traveling wave patterns, moments of perfect synchronization, and eventual chaotic motion - a classic physics demonstration rendered with glowing HSB-colored trails.
Key Skills:
|
π Read Docs ποΈ View |
| 794 |
|
AI Symmetry Canvas - Kaleidoscope Drawing with 6-Fold Mirroring - xelsed.aiThis sketch turns mouse movement into a mesmerizing mandala by mirroring every line segment you draw six times around the center of the canvas. Colors shift through the rainbow based on the angle from center, and a subtle fade effect leaves gentle trails as the pattern builds up.
Key Skills:
|
π Read Docs ποΈ View |
| 795 |
|
AI Gravity Painter - Click to Create Orbital Particle Wells - xelsed.aiThis sketch simulates glowing gravity wells that pull a swarm of 250 particles into swirling orbital trails using real inverse-square physics. Clicking anywhere spawns a pulsing well that attracts nearby particles until it fades away after ten seconds, leaving behind streaking, color-shifting trails.
Key Skills:
|
π Read Docs ποΈ View |
| 796 |
|
AI Temporal Dendrite - Time-Driven Fractal Tree - xelsed.aiThis sketch grows a recursive fractal tree whose shape is driven entirely by the current time of day - the hour sets how many main branches sprout from the trunk, the minute controls how wide those branches fan out, and the second (plus milliseconds) creates a gentle continuous sway. Branch color shifts from dark brown at the roots to spring green at the outermost twigs, and Perlin noise adds organic, non-repeating wobble to every tip.
Key Skills:
|
π Read Docs ποΈ View |
| 797 |
|
AI Liquid Chrome Mirror - Mouse Velocity Metallic Distortion - xelsed.aiThis WEBGL sketch raymarches a chrome-like sphere in real time, deforming its surface with sine-wave ripples whenever the mouse moves. The faster the cursor travels, the stronger the ripples become, while the reflective surface renders a fake procedural environment in shifting blues and purples for a molten-metal look.
Key Skills:
|
π Read Docs ποΈ View |
| 798 |
|
AI Boids Flocking - Emergent Swarm Intelligence Watch 100 birds flock together using Craig ReynoldsThis sketch simulates a flock of 100 triangular birds ('boids') that move around the screen following three simple local rules β separation, alignment, and cohesion β plus a fourth rule that makes them flee the mouse cursor like a predator. No bird is told to flock; the group behavior emerges purely from each boid reacting to its nearby neighbors.
Key Skills:
|
π Read Docs ποΈ View |
| 799 |
|
AI Inverse Kinematics Tentacle - Snake Chain Animation Mesmerizing snake-like chain that follows yoThis sketch creates a mesmerizing snake-like tentacle made of 15 connected segments that smoothly chases the mouse cursor using inverse kinematics. The tentacle wobbles organically as it moves, colored in a gradient from purple at the head to cyan at the tail, with a glowing circular tip.
Key Skills:
|
π Read Docs ποΈ View |
| 800 |
|
AI Voronoi Crystals - Stained Glass Tessellation Beautiful crystal formations using Voronoi diagramThis sketch generates a living stained-glass window by scattering colorful seed points across the canvas and computing the Voronoi diagram between them every frame. Each cell is filled with a slowly pulsing HSB color and outlined with a soft glowing edge, while the seeds themselves drift and bounce off the canvas walls, so the whole mosaic subtly reshapes itself forever. Clicking anywhere on the canvas drops a brand new seed, instantly splitting nearby cells and growing the crystal pattern.
Key Skills:
|
π Read Docs ποΈ View |