Explore the possibilities of p5.js with short examples.
No alt text
Mobile Device Movement
Animate based on device motion.
Sine and Cosine
Animate circular, back and forth, and wave motion.
Orbit Control
Control the camera with the mouse.
Smoke Particles
Simulate smoke with a particle system.
A few basic shapes drawn in white and black over a grey background
Shape Primitives
Draw 2D shapes.
A few basic shapes drawn in different colors over a blue background
Color
Add color to your sketch.
Drawing Lines
Draw with the mouse.
Animation with Events
Pause and resume animation.
Conditions
Use if and else statements to make decisions while your sketch runs.
Words
Load fonts and draw text.
Copy Image Data
Paint from an image file onto the canvas.
Alpha Mask
Use one image to cut out a section of another image.
Image Transparency
Make an image translucent on the canvas.
Audio Player
Create a player for an audio file.
Video Player
Create a player for a video file.
Video on Canvas
Display and stylize a video on the canvas.
Video Capture
Display a live video feed from a camera.
Image Drop
Display an image that the page visitor dragged and dropped.
Input and Button
Use text input from the page visitor.
Form Elements
Create a form and respond to the results.
Translate
Move the coordinate system origin.
Rotate
Rotate the coordinate system.
Scale
Modify the coordinate system scale.
Linear Interpolation
Convert a number between 0 and 1 to another range.
Map
Convert a number from one range to another range.
Random
Get random numbers.
Constrain
Keep a number within a range.
Clock
Get the current time.
Color Interpolation
Fade between two colors.
Color Wheel
Create a visualization of the color spectrum.
Bezier
Draw a set of curves.
Kaleidoscope
Draw mirrored designs with the mouse.
Noise
Generate naturalistic textures using Perlin noise.
Recursive Tree
Draw a tree using a function that calls itself.
Random Poetry
Generate a poem with words randomly selected from a bank.
Aim
Rotate toward a point.
Triangle Strip
Split a ring into triangles.
Circle Clicker
Make a game about clicking a circle quickly and save the high score.
Ping Pong
Make a game inspired by Atari's Pong.
Snake
Make a game based on Snake arcade games.
Geometries
Draw 3D shapes, including a custom model.
Custom Geometry
Generate a 3D shape programmatically.
Materials
Change 3D objects' color, texture, and how they respond to light.
Filter Shader
Manipulate imagery with a shader.
Adjusting Positions with a Shader
Use a shader to adjust shape vertices.
Framebuffer Blur
Simulate a camera's depth of field.
Create Graphics
Draw imagery off-screen.
Multiple Canvases
Use Instance Mode to put multiple canvases on the page.
Shader as a Texture
Generate a texture for a 3D shape using a shader.
Snowflakes
Animate snowfall.
Shake Ball Bounce
Animate ball movement based on mobile device motion.
Connected Particles
Draw circles and connecting lines using the mouse.
Flocking
Simulate bird flocking behavior.
Local Storage
Save data from the browser on the device.
JSON
Store data in JavaScript object notation.
Table
Store data as comma-separated values.
Non-Orthogonal Reflection
Simulate a ball bouncing on a slanted surface.
Soft Body
Simulate the physics of a soft body accelerating toward the mouse.
Forces
Simulate forces on multiple bodies as they move through liquid.
Game of Life
Recreate John Conway's cellular automaton.
Mandelbrot Set
Visualize a mathematical set that produces fractal structures.
Looking for the old p5.js site? Find it here!