Tutoriales

An interactive sketch in the p5.js Web Editor draws circles on the canvas as the mouse pointer moves.

A preview of the interactive landscape project showing a ladybug and flower emoji in front of a simple landscape background.

A person juggles three balls as a car travels past behind them. A painting of a nighttime landscape with a tree, cloud and crescent moon hangs in the background.

A preview of the sunrise animation created in the Conditionals and Interactivity tutorial.

A canvas displaying a snapshot of the sunrise animation from the Conditionals and Interactivity tutorial. The snapshot includes a sun, and trees and mountains in the landscape.

Three pink caterpillars with googly eyes on the starting line wait for the race with the text “Click to start”.

A preview of the interactive flower garden with flowers appearing on a light blue canvas as a user clicks with their mouse pointer.

A still frame from an animation of three flowers with petals illustrated using pointillism, three solid stems, and a watering pot.

A webcam snapshot of a white person with short dark curly hair wearing pink heart shaped glasses posing for a picture. There is a red to yellow linear gradient filter on top of the photo. Colorful circles are scattered on top of the image with a color gradient overlay. The circles have randomized radial color gradients inside them to mimic a camera's lens flare. Some color gradients are pink to purple, cyan to green, or yellow to orange.

A white person with short, dark curly hair wears pink heart-shaped glasses and a dark sleeveless shirt. He places his hand on his cheek and looks diagonally to the left, smiling softly. A vertical linear blue to pink gradient is overlaid. On top of that, we see a mixture of angular and curved white 4-pointed sparkles of varying sizes, with an angular sparkle over the left lens of his glasses, and a curved sparkle over the right lens. We see pink and blue radial gradient circles layered on top, creating a lens flare effect.

A graphic illustration of a code editor with colorful lines that suggest syntax highlighting code. Two floating circles resembling HTML tags surround the editor.

Bold typography in contrasting white and black against a deep blue background. It features the words 'FONTSTYLE' in black at the top. 'TYPEFACE' is in white in the middle. 'abc' is in white at the bottom. Each is in a different font size. This creates a bold and striking display of font styles and typefaces.

A retro handheld gaming device, positioned at the center of the screen. It has a simple landscape on its screen. The device is set against a bright blue background with white motion arcs resembling a rainbow and stylized stars. Blocky brown platforms on either side and a checkered floor complete the nostalgic video game scene.

A white circle in the center of a gray background with an example of a p5.js Web Editor alt text output listed at the bottom.

A red heart in the bottom right corner of a pink background with an example of alt text describing the image.

A cube on top of a grid with colored lines showing its movement in 3D space.

A bunch of red ladybugs on a green background

A sphere in front of some walls and a floor, lit by a red, green, and blue light.

A warped, wavy city street

A line of spheres receding into fog as they go off into the distance

A screenshot of the profiler in the developer tools of Google Chrome

The title is “A Field Guide to Debugging!” and it features a black-and-white cartoon illustrations of insects, a mouse and a computer laptop in deep thought.

The bouncing particles animation used in this tutorial displays orange circles bouncing around a dark canvas.

The palm of a hand with 4 points in green color that identify each finger, and 5 green points identifying the thumb and  bottom of the palm.

Piano keys

A p5.js logo with musical notes above it has arrows labeled with HTTP methods pointing to a cloud labeled “Internet”. Above the cloud is an icon that reads “http\://”. Arrows point from the cloud to a pink cube labeled “Web Server” with the Node.js logo above it.