πŸ“– Code Guides - Complete Catalog

Comprehensive table of contents for all 568 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.

568 fully documented sketches Β· Organized by creation date Β· Real concepts from AI-generated docs

# Preview Sketch Details Actions
501 Sketch 2026-06-08 16:23 - p5.js creative coding sketch

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 Β· 88 views

πŸ“– Read Docs πŸ‘οΈ View
502 I think Anonymous is the goat and I hate with all my mind body and soul Stella dev (the temu one) - p5.js creative coding sketch

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 Β· 88 views

πŸ“– Read Docs πŸ‘οΈ View
503 Simple MineCraft Game (Louis) - p5.js creative coding sketch

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 Β· 87 views

πŸ“– Read Docs πŸ‘οΈ View
504 Sketch 2026-06-07 16:54 - p5.js creative coding sketch

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 Β· 87 views

πŸ“– Read Docs πŸ‘οΈ View
505 Sketch 2026-06-08 16:23 (Remix) - p5.js creative coding sketch

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 Β· 86 views

πŸ“– Read Docs πŸ‘οΈ View
506 Lethal ape: redux revamp update - p5.js creative coding sketch

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 Β· 84 views

πŸ“– Read Docs πŸ‘οΈ View
507 Red guides and his friends - p5.js creative coding sketch

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 Β· 81 views

πŸ“– Read Docs πŸ‘οΈ View
508 five hundred and twenty fourth to come - p5.js creative coding sketch

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 Β· 76 views

πŸ“– Read Docs πŸ‘οΈ View
509 robux clicker (Remix) - p5.js creative coding sketch

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 Β· 76 views

πŸ“– Read Docs πŸ‘οΈ View
510 Wings Slayer (Lucas) - p5.js creative coding sketch

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 Β· 76 views

πŸ“– Read Docs πŸ‘οΈ View
511 Michael dev - p5.js creative coding sketch

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 Β· 72 views

πŸ“– Read Docs πŸ‘οΈ View
512 theme of the day - p5.js creative coding sketch

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 Β· 69 views

πŸ“– Read Docs πŸ‘οΈ View
513 p5 storm chasing project - p5.js creative coding sketch

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 Β· 64 views

πŸ“– Read Docs πŸ‘οΈ View
514 Sketch 2026-06-18 13:29 - p5.js creative coding sketch

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 Β· 64 views

πŸ“– Read Docs πŸ‘οΈ View
515 party portal - p5.js creative coding sketch

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 Β· 57 views

πŸ“– Read Docs πŸ‘οΈ View
516 p5 storm chasing project (Remix) - p5.js creative coding sketch

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 Β· 55 views

πŸ“– Read Docs πŸ‘οΈ View
517 tu-tu-du-du max verstappen - p5.js creative coding sketch

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 Β· 54 views

πŸ“– Read Docs πŸ‘οΈ View
518 Sketch 2026-07-03 12:08 daily theme - p5.js creative coding sketch

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 Β· 52 views

πŸ“– Read Docs πŸ‘οΈ View
519 Subject gus: breached through the facility - p5.js creative coding sketch

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 Β· 42 views

πŸ“– Read Docs πŸ‘οΈ View
520 Four-AI-4TRACK-SAS - p5.js creative coding sketch

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 Β· 40 views

πŸ“– Read Docs πŸ‘οΈ View
521 very weird sketch - p5.js creative coding sketch

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 Β· 39 views

πŸ“– Read Docs πŸ‘οΈ View
522 theme of the day but its super good - p5.js creative coding sketch

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 Β· 38 views

πŸ“– Read Docs πŸ‘οΈ View
523 Very broken rubgu.berb machine (I can't spell) - p5.js creative coding sketch

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 Β· 38 views

πŸ“– Read Docs πŸ‘οΈ View
524 Sketch 2026-07-03 15:55 - p5.js creative coding sketch

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 Β· 38 views

πŸ“– Read Docs πŸ‘οΈ View
525 inf road trip - p5.js creative coding sketch

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 Β· 37 views

πŸ“– Read Docs πŸ‘οΈ View
526 Simple MineCraft Cline (Remix) (Remix) - p5.js creative coding sketch

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 Β· 35 views

πŸ“– Read Docs πŸ‘οΈ View
527 talking ben - p5.js creative coding sketch

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 Β· 34 views

πŸ“– Read Docs πŸ‘οΈ View
528 ca gam  but i made it 3d lol - p5.js creative coding sketch

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 Β· 33 views

πŸ“– Read Docs πŸ‘οΈ View
529 P5.js sketch inspired by: "Umbrella rain" - p5.js creative coding sketch

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 Β· 32 views

πŸ“– Read Docs πŸ‘οΈ View
530 my profile - p5.js creative coding sketch

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 Β· 32 views

πŸ“– Read Docs πŸ‘οΈ View
531 elastic Eric but worst and better idk - p5.js creative coding sketch

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 Β· 32 views

πŸ“– Read Docs πŸ‘οΈ View
532 AMERICAAAAAAAAA - p5.js creative coding sketch

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 Β· 31 views

πŸ“– Read Docs πŸ‘οΈ View
533 p5js.ai is super cool - p5.js creative coding sketch

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 Β· 31 views

πŸ“– Read Docs πŸ‘οΈ View
534 fruit ninja πŸ₯· - p5.js creative coding sketch

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 Β· 31 views

πŸ“– Read Docs πŸ‘οΈ View
535 spot for all of his lifeπŸ’― - p5.js creative coding sketch

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 Β· 29 views

πŸ“– Read Docs πŸ‘οΈ View
536 P5.js sketch inspired by: "Tetris blocks" - p5.js creative coding sketch

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 Β· 25 views

πŸ“– Read Docs πŸ‘οΈ View
537 P5.js sketch inspired by: "Vinyl scratch" - p5.js creative coding sketch

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 Β· 23 views

πŸ“– Read Docs πŸ‘οΈ View
538 spot - p5.js creative coding sketch

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 Β· 22 views

πŸ“– Read Docs πŸ‘οΈ View
539 Object show where the Animation looks real and - p5.js creative coding sketch

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 Β· 22 views

πŸ“– Read Docs πŸ‘οΈ View
540 starter thing - p5.js creative coding sketch

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 Β· 22 views

πŸ“– Read Docs πŸ‘οΈ View
541 7364 games in one - p5.js creative coding sketch

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 Β· 22 views

πŸ“– Read Docs πŸ‘οΈ View
542 3d blackhole - p5.js creative coding sketch

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 Β· 21 views

πŸ“– Read Docs πŸ‘οΈ View
543 Gold and Purple Lava Pit - p5.js creative coding sketch

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 Β· 20 views

πŸ“– Read Docs πŸ‘οΈ View
544 Preview Not Available Preview expired or not found - p5.js creative coding sketch

Preview Not Available Preview expired or not found

This sketch loads a fullscreen night-time photo from Unsplash and displays it scaled to cover the entire browser window, while a translucent bar at the top counts elapsed and remaining minutes of an enormous (nearly endless) 7.889 million minute timer.

Key Skills:
  • Asynchronous image loading with callbacks
  • Boolean state flags for conditional rendering
  • Aspect ratio math for scaling images
  • Responsive canvas resizing
  • Text formatting with nf()

by Anonymous Β· 20 views

πŸ“– Read Docs πŸ‘οΈ View
545 P5.jsι»‘θ‰²θƒŒζ™―ηŽ―ε½’ε‘ε…‰η²’ε­ι±ΌεŠ¨η”»οΌŒ12000η²’ε­οΌŒεΈ¦εΊ•ιƒ¨ζ°΄ι’ε€’ε½±οΌŒε·¦δΈŠθ§’ζ˜Ύη€ΊδΈ‰θ§’ε‡½ζ•°ε…¬εΌοΌŒη²’ε­ι»„ι’ζΈε˜ε‘ε…‰οΌŒζ—Άι—΄ε˜ι‡tι©±εŠ¨ι±ΌζŒη»­ζ‘†εŠ¨ζΈΈεŠ¨ - p5.js creative coding sketch

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 Β· 20 views

πŸ“– Read Docs πŸ‘οΈ View
546 P5.js sketch inspired by: "Xylophone" - p5.js creative coding sketch

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 Β· 19 views

πŸ“– Read Docs πŸ‘οΈ View
547 make your own hero - p5.js creative coding sketch

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 Β· 19 views

πŸ“– Read Docs πŸ‘οΈ View
548 Peter pan game real game - p5.js creative coding sketch

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 Β· 18 views

πŸ“– Read Docs πŸ‘οΈ View
549 P5.js sketch inspired by: "Expectation vs reality Waterfall" - p5.js creative coding sketch

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 Β· 17 views

πŸ“– Read Docs πŸ‘οΈ View
550 mom please don't put down spot - p5.js creative coding sketch

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 Β· 17 views

πŸ“– Read Docs πŸ‘οΈ View