Tutorials

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 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 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 screenshot of a chatGPT conversation with a prompt about creating halftone webcam images with p5.js

A screenshot of three AI-generated images from the prompt `The doctor is ['a Pakistani woman', 'a Black man', 'a white man'].` The first image is a portrait, the second a cartoon, and the third is a hallway in shadows.

A screenshot of the Dataset Explorer comparing two sentences with different sentiment scores; the one with a gay son ranks highly and the one with a gay daughter ranks low.

A screenshot of a chatbot interface with introductory conversation

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.