# project p5 [![npm version](https://badge.fury.io/js/p5.svg)](https://www.npmjs.com/package/p5) 1.11.10 https://github.com/processing/p5.js#readme # files ## src/accessibility/color_namer.js src/accessibility/color_namer.js ### modules ### classes ### namespaces ## src/accessibility/describe.js src/accessibility/describe.js ### modules ### classes ### namespaces ## src/accessibility/gridOutput.js src/accessibility/gridOutput.js ### modules ### classes ### namespaces ## src/accessibility/outputs.js src/accessibility/outputs.js ### modules ### classes ### namespaces ## src/accessibility/textOutput.js src/accessibility/textOutput.js ### modules ### classes ### namespaces ## src/color/color_conversion.js src/color/color_conversion.js ### modules ### classes ### namespaces ## src/color/creating_reading.js src/color/creating_reading.js ### modules ### classes ### namespaces ## src/color/p5.Color.js src/color/p5.Color.js ### modules ### classes ### namespaces ## src/color/setting.js src/color/setting.js ### modules ### classes ### namespaces ## src/core/friendly_errors/fes_core.js src/core/friendly_errors/fes_core.js ### modules ### classes ### namespaces ## src/core/friendly_errors/file_errors.js src/core/friendly_errors/file_errors.js ### modules ### classes ### namespaces ## src/core/friendly_errors/sketch_reader.js src/core/friendly_errors/sketch_reader.js ### modules ### classes ### namespaces ## src/core/friendly_errors/stacktrace.js src/core/friendly_errors/stacktrace.js ### modules ### classes ### namespaces ## src/core/friendly_errors/validate_params.js src/core/friendly_errors/validate_params.js ### modules ### classes ### namespaces ## src/core/shape/2d_primitives.js src/core/shape/2d_primitives.js ### modules ### classes ### namespaces ## src/core/shape/attributes.js src/core/shape/attributes.js ### modules ### classes ### namespaces ## src/core/shape/curves.js src/core/shape/curves.js ### modules ### classes ### namespaces ## src/core/shape/vertex.js src/core/shape/vertex.js ### modules ### classes ### namespaces ## src/core/constants.js src/core/constants.js ### modules ### classes ### namespaces ## src/core/environment.js src/core/environment.js ### modules ### classes ### namespaces ## src/core/helpers.js src/core/helpers.js ### modules ### classes ### namespaces ## src/core/init.js src/core/init.js ### modules ### classes ### namespaces ## src/core/internationalization.js src/core/internationalization.js ### modules ### classes ### namespaces ## src/core/legacy.js src/core/legacy.js ### modules ### classes ### namespaces ## src/core/main.js src/core/main.js ### modules ### classes ### namespaces ## src/core/p5.Element.js src/core/p5.Element.js ### modules ### classes ### namespaces ## src/core/p5.Graphics.js src/core/p5.Graphics.js ### modules ### classes ### namespaces ## src/core/p5.Renderer.js src/core/p5.Renderer.js ### modules ### classes ### namespaces ## src/core/p5.Renderer2D.js src/core/p5.Renderer2D.js ### modules ### classes ### namespaces ## src/core/reference.js src/core/reference.js ### modules ### classes ### namespaces ## src/core/rendering.js src/core/rendering.js ### modules ### classes ### namespaces ## src/core/structure.js src/core/structure.js ### modules ### classes ### namespaces ## src/core/transform.js src/core/transform.js ### modules ### classes ### namespaces ## src/data/local_storage.js src/data/local_storage.js ### modules ### classes ### namespaces ## src/data/p5.TypedDict.js src/data/p5.TypedDict.js ### modules ### classes ### namespaces ## src/dom/dom.js src/dom/dom.js ### modules ### classes ### namespaces ## src/events/acceleration.js src/events/acceleration.js ### modules ### classes ### namespaces ## src/events/keyboard.js src/events/keyboard.js ### modules ### classes ### namespaces ## src/events/mouse.js src/events/mouse.js ### modules ### classes ### namespaces ## src/events/touch.js src/events/touch.js ### modules ### classes ### namespaces ## src/image/filters.js src/image/filters.js ### modules ### classes ### namespaces ## src/image/image.js src/image/image.js ### modules ### classes ### namespaces ## src/image/loading_displaying.js src/image/loading_displaying.js ### modules ### classes ### namespaces ## src/image/p5.Image.js src/image/p5.Image.js ### modules ### classes ### namespaces ## src/image/pixels.js src/image/pixels.js ### modules ### classes ### namespaces ## src/io/files.js src/io/files.js ### modules ### classes ### namespaces ## src/io/p5.Table.js src/io/p5.Table.js ### modules ### classes ### namespaces ## src/io/p5.TableRow.js src/io/p5.TableRow.js ### modules ### classes ### namespaces ## src/io/p5.XML.js src/io/p5.XML.js ### modules ### classes ### namespaces ## src/math/calculation.js src/math/calculation.js ### modules ### classes ### namespaces ## src/math/math.js src/math/math.js ### modules ### classes ### namespaces ## src/math/noise.js src/math/noise.js ### modules ### classes ### namespaces ## src/math/p5.Vector.js src/math/p5.Vector.js ### modules ### classes ### namespaces ## src/math/random.js src/math/random.js ### modules ### classes ### namespaces ## src/math/trigonometry.js src/math/trigonometry.js ### modules ### classes ### namespaces ## src/typography/attributes.js src/typography/attributes.js ### modules ### classes ### namespaces ## src/typography/loading_displaying.js src/typography/loading_displaying.js ### modules ### classes ### namespaces ## src/typography/p5.Font.js src/typography/p5.Font.js ### modules ### classes ### namespaces ## src/utilities/array_functions.js src/utilities/array_functions.js ### modules ### classes ### namespaces ## src/utilities/conversion.js src/utilities/conversion.js ### modules ### classes ### namespaces ## src/utilities/string_functions.js src/utilities/string_functions.js ### modules ### classes ### namespaces ## src/utilities/time_date.js src/utilities/time_date.js ### modules ### classes ### namespaces ## src/webgl/3d_primitives.js src/webgl/3d_primitives.js ### modules ### classes ### namespaces ## src/webgl/GeometryBuilder.js src/webgl/GeometryBuilder.js ### modules ### classes ### namespaces ## src/webgl/interaction.js src/webgl/interaction.js ### modules ### classes ### namespaces ## src/webgl/light.js src/webgl/light.js ### modules ### classes ### namespaces ## src/webgl/loading.js src/webgl/loading.js ### modules ### classes ### namespaces ## src/webgl/material.js src/webgl/material.js ### modules ### classes ### namespaces ## src/webgl/p5.Camera.js src/webgl/p5.Camera.js ### modules ### classes ### namespaces ## src/webgl/p5.DataArray.js src/webgl/p5.DataArray.js ### modules ### classes ### namespaces ## src/webgl/p5.Framebuffer.js src/webgl/p5.Framebuffer.js ### modules ### classes ### namespaces ## src/webgl/p5.Geometry.js src/webgl/p5.Geometry.js ### modules ### classes ### namespaces ## src/webgl/p5.Matrix.js src/webgl/p5.Matrix.js ### modules ### classes ### namespaces ## src/webgl/p5.Quat.js src/webgl/p5.Quat.js ### modules ### classes ### namespaces ## src/webgl/p5.RenderBuffer.js src/webgl/p5.RenderBuffer.js ### modules ### classes ### namespaces ## src/webgl/p5.RendererGL.Immediate.js src/webgl/p5.RendererGL.Immediate.js ### modules ### classes ### namespaces ## src/webgl/p5.RendererGL.Retained.js src/webgl/p5.RendererGL.Retained.js ### modules ### classes ### namespaces ## src/webgl/p5.RendererGL.js src/webgl/p5.RendererGL.js ### modules ### classes ### namespaces ## src/webgl/p5.Shader.js src/webgl/p5.Shader.js ### modules ### classes ### namespaces ## src/webgl/p5.Texture.js src/webgl/p5.Texture.js ### modules ### classes ### namespaces ## src/webgl/text.js src/webgl/text.js ### modules ### classes ### namespaces ## lib/addons/p5.sound.js lib/addons/p5.sound.js ### modules ### classes ### namespaces ## lib/addons/p5.sound.min.js lib/addons/p5.sound.min.js ### modules ### classes ### namespaces # modules ## Environment Environment ### submodules ### elements ### classes ### namespaces Environment ## Color Color ### submodules ### elements ### classes ### namespaces ## Color Conversion Color Conversion ### submodules ### elements ### classes ### namespaces Color ## Creating & Reading Creating & Reading ### submodules ### elements ### classes ### namespaces Color A class to describe a color. Each `p5.Color` object stores the color mode and level maxes that were active during its construction. These values are used to interpret the arguments passed to the object's constructor. They also determine output formatting such as when saturation() is called. Color is stored internally as an array of ideal RGBA values in floating point form, normalized from 0 to 1. These values are used to calculate the closest screen colors, which are RGBA levels from 0 to 255. Screen colors are sent to the renderer. When different color representations are calculated, the results are cached for performance. These values are normalized, floating-point numbers. Note: color() is the recommended way to create an instance of this class. ## Setting Setting ### submodules ### elements ### classes ### namespaces Color ## Shape Shape ### submodules ### elements ### classes ### namespaces ## 2D Primitives 2D Primitives ### submodules ### elements ### classes ### namespaces Shape ## Attributes Attributes ### submodules ### elements ### classes ### namespaces Typography ## Curves Curves ### submodules ### elements ### classes ### namespaces Shape ## Vertex Vertex ### submodules ### elements ### classes ### namespaces Shape ## Constants Constants ### submodules ### elements ### classes ### namespaces Constants ## Structure Structure ### submodules ### elements ### classes ### namespaces IO ## DOM DOM ### submodules ### elements ### classes ### namespaces DOM The web is much more than just canvas and the DOM functionality makes it easy to interact with other HTML5 objects, including text, hyperlink, image, input, video, audio, and webcam. There is a set of creation methods, DOM manipulation methods, and an extended p5.Element that supports a range of HTML elements. See the beyond the canvas tutorial for a full overview of how this addon works. See tutorial: beyond the canvas for more info on how to use this library. ## Rendering Rendering ### submodules ### elements ### classes ### namespaces Rendering module A class to describe a drawing surface that's separate from the main canvas. Each `p5.Graphics` object provides a dedicated drawing surface called a graphics buffer. Graphics buffers are helpful when drawing should happen offscreen. For example, separate scenes can be drawn offscreen and displayed only when needed. `p5.Graphics` objects have nearly all the drawing features of the main canvas. For example, calling the method `myGraphics.circle(50, 50, 20)` draws to the graphics buffer. The resulting image can be displayed on the main canvas by passing the `p5.Graphics` object to the image() function, as in `image(myGraphics, 0, 0)`. Note: createGraphics() is the recommended way to create an instance of this class. ## Foundation Foundation ### submodules ### elements ### classes ### namespaces Foundation ## Transform Transform ### submodules ### elements ### classes ### namespaces Transform ## Data Data ### submodules ### elements ### classes ### namespaces ## LocalStorage LocalStorage ### submodules ### elements ### classes ### namespaces Data ## Dictionary Dictionary ### submodules ### elements ### classes ### namespaces Data Base class for all p5.Dictionary types. Specifically typed Dictionary classes inherit from this class. ## Events Events ### submodules ### elements ### classes ### namespaces main main ## Acceleration Acceleration ### submodules ### elements ### classes ### namespaces Events main main ## Keyboard Keyboard ### submodules ### elements ### classes ### namespaces Events ## Mouse Mouse ### submodules ### elements ### classes ### namespaces Events ## Touch Touch ### submodules ### elements ### classes ### namespaces Events ## Image Image ### submodules ### elements ### classes ### namespaces Image A class to describe an image. Images are rectangular grids of pixels that can be displayed and modified. Existing images can be loaded by calling loadImage(). Blank images can be created by calling createImage(). `p5.Image` objects have methods for common tasks such as applying filters and modifying pixel values. ## Loading & Displaying Loading & Displaying ### submodules ### elements ### classes ### namespaces Typography This module defines the p5.Font class and functions for drawing text to the display canvas. ## Pixels Pixels ### submodules ### elements ### classes ### namespaces Image ## IO IO ### submodules ### elements ### classes ### namespaces ## Input Input ### submodules ### elements ### classes ### namespaces IO A class to describe an XML object. Each `p5.XML` object provides an easy way to interact with XML data. Extensible Markup Language (XML) is a standard format for sending data between applications. Like HTML, the XML format is based on tags and attributes, as in ``. Note: Use loadXML() to load external XML files. ## Output Output ### submodules ### elements ### classes ### namespaces IO This is the p5 instance constructor. A p5 instance holds all the properties and methods related to a p5 sketch. It expects an incoming sketch closure and it can also take an optional node parameter for attaching the generated p5 canvas to a node. The sketch closure takes the newly created p5 instance as its sole argument and may optionally set preload(), setup(), and/or draw() properties on it for running a sketch. A p5 sketch can run in "global" or "instance" mode: "global" - all properties and methods are attached to the window "instance" - all properties and methods are bound to this p5 object ## Table Table ### submodules ### elements ### classes ### namespaces IO Table objects store data with multiple rows and columns, much like in a traditional spreadsheet. Tables can be generated from scratch, dynamically, or using data from an existing file. ## Math Math ### submodules ### elements ### classes ### namespaces ## Calculation Calculation ### submodules ### elements ### classes ### namespaces Math ## Vector Vector ### submodules ### elements ### classes ### namespaces Math A class to describe a two or three-dimensional vector. A vector can be thought of in different ways. In one view, a vector is like an arrow pointing in space. Vectors have both magnitude (length) and direction. `p5.Vector` objects are often used to program motion because they simplify the math. For example, a moving ball has a position and a velocity. Position describes where the ball is in space. The ball's position vector extends from the origin to the ball's center. Velocity describes the ball's speed and the direction it's moving. If the ball is moving straight up, its velocity vector points straight up. Adding the ball's velocity vector to its position vector moves it, as in `pos.add(vel)`. Vector math relies on methods inside the `p5.Vector` class. Note: createVector() is the recommended way to make an instance of this class. ## Noise Noise ### submodules ### elements ### classes ### namespaces Math ## Random Random ### submodules ### elements ### classes ### namespaces Math ## Trigonometry Trigonometry ### submodules ### elements ### classes ### namespaces Math ## Typography Typography ### submodules ### elements ### classes ### namespaces ## Array Functions Array Functions ### submodules ### elements ### classes ### namespaces Data ## Conversion Conversion ### submodules ### elements ### classes ### namespaces Data ## String Functions String Functions ### submodules ### elements ### classes ### namespaces Data ## Time & Date Time & Date ### submodules ### elements ### classes ### namespaces IO ## 3D Primitives 3D Primitives ### submodules ### elements ### classes ### namespaces Shape A class to describe a 3D shape. Each `p5.Geometry` object represents a 3D shape as a set of connected points called vertices. All 3D shapes are made by connecting vertices to form triangles that are stitched together. Each triangular patch on the geometry's surface is called a face. The geometry stores information about its vertices and faces for use with effects such as lighting and texture mapping. The first parameter, `detailX`, is optional. If a number is passed, as in `new p5.Geometry(24)`, it sets the number of triangle subdivisions to use along the geometry's x-axis. By default, `detailX` is 1. The second parameter, `detailY`, is also optional. If a number is passed, as in `new p5.Geometry(24, 16)`, it sets the number of triangle subdivisions to use along the geometry's y-axis. By default, `detailX` is 1. The third parameter, `callback`, is also optional. If a function is passed, as in `new p5.Geometry(24, 16, createShape)`, it will be called once to add vertices to the new 3D shape. ## 3D 3D ### submodules ### elements ### classes ### namespaces ## Interaction Interaction ### submodules ### elements ### classes ### namespaces 3D ## Lights Lights ### submodules ### elements ### classes ### namespaces 3D ## 3D Models 3D Models ### submodules ### elements ### classes ### namespaces Shape ## Material Material ### submodules ### elements ### classes ### namespaces 3D This module defines the p5.Shader class ## Camera Camera ### submodules ### elements ### classes ### namespaces 3D A class to describe a camera for viewing a 3D sketch. Each `p5.Camera` object represents a camera that views a section of 3D space. It stores information about the camera’s position, orientation, and projection. In WebGL mode, the default camera is a `p5.Camera` object that can be controlled with the camera(), perspective(), ortho(), and frustum() functions. Additional cameras can be created with createCamera() and activated with setCamera(). Note: `p5.Camera`’s methods operate in two coordinate systems: * The “world” coordinate system describes positions in terms of their relationship to the origin along the x-, y-, and z-axes. For example, calling `myCamera.setPosition()` places the camera in 3D space using "world" coordinates. * The "local" coordinate system describes positions from the camera's point of view: left-right, up-down, and forward-backward. For example, calling `myCamera.move()` moves the camera along its own axes. ## Quaternion Quaternion ### submodules ### elements ### classes ### namespaces Math A class to describe a Quaternion for vector rotations in the p5js webgl renderer. Please refer the following link for details on the implementation https://danceswithcode.net/engineeringnotes/quaternions/quaternions.html ## p5.sound p5.sound ### submodules ### elements ### classes ### namespaces p5.sound p5.sound extends p5 with Web Audio functionality including audio input, playback, analysis and synthesis. * p5.SoundFile: Load and play sound files. * p5.Amplitude: Get the current volume of a sound. * p5.AudioIn: Get sound from an input source, typically a computer microphone. * p5.FFT: Analyze the frequency of sound. Returns results from the frequency spectrum or time domain (waveform). * p5.Oscillator: Generate Sine, Triangle, Square and Sawtooth waveforms. Base class of * p5.Noise and p5.Pulse. * p5.MonoSynth and p5.PolySynth: Play musical notes * p5.Envelope: An Envelope is a series of fades over time. Often used to control an object's output gain level as an "ADSR Envelope" (Attack, Decay, Sustain, Release). Can also modulate other parameters. * p5.Delay: A delay effect with parameters for feedback, delayTime, and lowpass filter. * p5.Filter: Filter the frequency range of a sound. * p5.Reverb: Add reverb to a sound by specifying duration and decay. * p5.Convolver: Extends p5.Reverb to simulate the sound of real physical spaces through convolution. * p5.SoundRecorder: Record sound for playback / save the .wav file. * p5.SoundLoop, p5.Phrase, p5.Part and p5.Score: Compose musical sequences. * userStartAudio: Enable audio in a browser- and user-friendly way. p5.sound is on GitHub. Download the latest version here. main main # classes ## p5 p5 p5 IO Output This is the p5 instance constructor. A p5 instance holds all the properties and methods related to a p5 sketch. It expects an incoming sketch closure and it can also take an optional node parameter for attaching the generated p5 canvas to a node. The sketch closure takes the newly created p5 instance as its sole argument and may optionally set preload(), setup(), and/or draw() properties on it for running a sketch. A p5 sketch can run in "global" or "instance" mode: "global" - all properties and methods are attached to the window "instance" - all properties and methods are bound to this p5 object sketch a closure that can set optional preload(), setup(), and/or draw() properties on the given p5 instance Function(p5) node element to attach canvas to HTMLElement ### return a p5 instance P5 ## p5.Color p5.Color p5.Color Color Creating & Reading A class to describe a color. Each `p5.Color` object stores the color mode and level maxes that were active during its construction. These values are used to interpret the arguments passed to the object's constructor. They also determine output formatting such as when saturation() is called. Color is stored internally as an array of ideal RGBA values in floating point form, normalized from 0 to 1. These values are used to calculate the closest screen colors, which are RGBA levels from 0 to 255. Screen colors are sent to the renderer. When different color representations are calculated, the results are cached for performance. These values are normalized, floating-point numbers. Note: color() is the recommended way to create an instance of this class. pInst pointer to p5 instance. P5 vals an array containing the color values for red, green, blue and alpha channel or CSS color. Number[]|String ## p5.Element p5.Element p5.Element DOM DOM A class to describe an HTML element. Sketches can use many elements. Common elements include the drawing canvas, buttons, sliders, webcam feeds, and so on. All elements share the methods of the `p5.Element` class. They're created with functions such as createCanvas() and createButton(). elt wrapped DOM element. HTMLElement pInst pointer to p5 instance. P5 ` function setup() { createCanvas(100, 100); background(200); // Create a button element and // place it beneath the canvas. let btn = createButton('change'); btn.position(0, 100); // Call randomColor() when // the button is pressed. btn.mousePressed(randomColor); describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` ## p5.Graphics p5.Graphics p5.Graphics Rendering Rendering A class to describe a drawing surface that's separate from the main canvas. Each `p5.Graphics` object provides a dedicated drawing surface called a graphics buffer. Graphics buffers are helpful when drawing should happen offscreen. For example, separate scenes can be drawn offscreen and displayed only when needed. `p5.Graphics` objects have nearly all the drawing features of the main canvas. For example, calling the method `myGraphics.circle(50, 50, 20)` draws to the graphics buffer. The resulting image can be displayed on the main canvas by passing the `p5.Graphics` object to the image() function, as in `image(myGraphics, 0, 0)`. Note: createGraphics() is the recommended way to create an instance of this class. p5.Element width width of the graphics buffer in pixels. Number height height of the graphics buffer in pixels. Number renderer renderer to use, either P2D or WEBGL. Constant pInst sketch instance. P5 canvas existing `` element to use. HTMLCanvasElement ` let pg; function setup() { createCanvas(100, 100); // Create a p5.Graphics object. pg = createGraphics(50, 50); // Draw to the p5.Graphics object. pg.background(100); pg.circle(25, 25, 20); describe('A dark gray square with a white circle at its center drawn on a gray background.'); } function draw() { background(200); // Display the p5.Graphics object. image(pg, 25, 25); } ` ` // Click the canvas to display the graphics buffer. let pg; function setup() { createCanvas(100, 100); // Create a p5.Graphics object. pg = createGraphics(50, 50); describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.'); } function draw() { background(200); // Calculate the background color. let bg = frameCount % 255; // Draw to the p5.Graphics object. pg.background(bg); // Display the p5.Graphics object while // the user presses the mouse. if (mouseIsPressed === true) { image(pg, 25, 25); } } ` ## p5.Renderer p5.Renderer p5.Renderer Rendering Rendering Main graphics and rendering context, as well as the base API implementation for p5.js "core". To be used as the superclass for Renderer2D and Renderer3D classes, respectively. p5.Element elt DOM node that is wrapped HTMLElement pInst pointer to p5 instance P5 isMainCanvas whether we're using it as main canvas Boolean ## p5.TypedDict p5.TypedDict p5.TypedDict Data Dictionary Base class for all p5.Dictionary types. Specifically typed Dictionary classes inherit from this class. ## p5.StringDict p5.StringDict p5.StringDict Data Dictionary A simple Dictionary class for Strings. p5.TypedDict ## p5.NumberDict p5.NumberDict p5.NumberDict Data Dictionary A simple Dictionary class for Numbers. p5.TypedDict ## p5.MediaElement p5.MediaElement p5.MediaElement DOM DOM A class to handle audio and video. `p5.MediaElement` extends p5.Element with methods to handle audio and video. `p5.MediaElement` objects are created by calling createVideo, createAudio, and createCapture. elt DOM node that is wrapped String p5.Element ` let capture; function setup() { createCanvas(100, 100); // Create a p5.MediaElement using createCapture(). capture = createCapture(VIDEO); capture.hide(); describe('A webcam feed with inverted colors.'); } function draw() { // Display the video stream and invert the colors. image(capture, 0, 0, width, width * capture.height / capture.width); filter(INVERT); } ` ## p5.File p5.File p5.File DOM DOM A class to describe a file. `p5.File` objects are used by myElement.drop() and created by createFileInput. file wrapped file. File ` // Use the file input to load a // file and display its info. function setup() { createCanvas(100, 100); background(200); // Create a file input and place it beneath the canvas. // Call displayInfo() when the file loads. let input = createFileInput(displayInfo); input.position(0, 100); describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.'); } // Display the p5.File's info once it loads. function displayInfo(file) { background(200); // Display the p5.File's name. text(file.name, 10, 10, 80, 40); // Display the p5.File's type and subtype. text(`${file.type}/${file.subtype}`, 10, 70); // Display the p5.File's size in bytes. text(file.size, 10, 90); } ` ` // Use the file input to select an image to // load and display. let img; function setup() { createCanvas(100, 100); // Create a file input and place it beneath the canvas. // Call handleImage() when the file image loads. let input = createFileInput(handleImage); input.position(0, 100); describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.'); } function draw() { background(200); // Draw the image if it's ready. if (img) { image(img, 0, 0, width, height); } } // Use the p5.File's data once it loads. function handleImage(file) { // Check the p5.File's type. if (file.type === 'image') { // Create an image using using the p5.File's data. img = createImg(file.data, ''); // Hide the image element so it doesn't appear twice. img.hide(); } else { img = null; } } ` ## p5.Image p5.Image p5.Image Image Image A class to describe an image. Images are rectangular grids of pixels that can be displayed and modified. Existing images can be loaded by calling loadImage(). Blank images can be created by calling createImage(). `p5.Image` objects have methods for common tasks such as applying filters and modifying pixel values. ` let img; // Load the image. function preload() { img = loadImage('assets/bricks.jpg'); } function setup() { createCanvas(100, 100); // Display the image. image(img, 0, 0); describe('An image of a brick wall.'); } ` ` let img; // Load the image. function preload() { img = loadImage('assets/bricks.jpg'); } function setup() { createCanvas(100, 100); // Apply the GRAY filter. img.filter(GRAY); // Display the image. image(img, 0, 0); describe('A grayscale image of a brick wall.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Image object. let img = createImage(66, 66); // Load the image's pixels. img.loadPixels(); // Set the pixels to black. for (let x = 0; x < img.width; x += 1) { for (let y = 0; y < img.height; y += 1) { img.set(x, y, 0); } } // Update the image. img.updatePixels(); // Display the image. image(img, 17, 17); describe('A black square drawn in the middle of a gray square.'); } ` width Number height Number ## p5.PrintWriter p5.PrintWriter p5.PrintWriter IO Output A class to describe a print stream. Each `p5.PrintWriter` object provides a way to save a sequence of text data, called the print stream, to the user's computer. It's a low-level object that enables precise control of text output. Functions such as saveStrings() and saveJSON() are easier to use for simple file saving. Note: createWriter() is the recommended way to make an instance of this class. filename name of the file to create. String extension format to use for the file. String ` function setup() { createCanvas(100, 100); background(200); // Style the text. textAlign(LEFT, CENTER); textFont('Courier New'); textSize(12); // Display instructions. text('Double-click to save', 5, 50, 90); describe('The text "Double-click to save" written in black on a gray background.'); } // Save the file when the user double-clicks. function doubleClicked() { // Create a p5.PrintWriter object. let myWriter = createWriter('xo.txt'); // Add some lines to the print stream. myWriter.print('XOO'); myWriter.print('OXO'); myWriter.print('OOX'); // Save the file and close the print stream. myWriter.close(); } ` ## p5.Table p5.Table p5.Table IO Table Table objects store data with multiple rows and columns, much like in a traditional spreadsheet. Tables can be generated from scratch, dynamically, or using data from an existing file. rows An array of p5.TableRow objects p5.TableRow[] ## p5.TableRow p5.TableRow p5.TableRow IO Table A TableRow object represents a single row of data values, stored in columns, from a table. A Table Row contains both an ordered array, and an unordered JSON object. str optional: populate the row with a string of values, separated by the separator String separator comma separated values (csv) by default String ## p5.XML p5.XML p5.XML IO Input A class to describe an XML object. Each `p5.XML` object provides an easy way to interact with XML data. Extensible Markup Language (XML) is a standard format for sending data between applications. Like HTML, the XML format is based on tags and attributes, as in ``. Note: Use loadXML() to load external XML files. ` let myXML; // Load the XML and create a p5.XML object. function preload() { myXML = loadXML('assets/animals.xml'); } function setup() { createCanvas(100, 100); background(200); // Get an array with all mammal tags. let mammals = myXML.getChildren('mammal'); // Style the text. textAlign(LEFT, CENTER); textFont('Courier New'); textSize(14); // Iterate over the mammals array. for (let i = 0; i < mammals.length; i += 1) { // Calculate the y-coordinate. let y = (i + 1) * 25; // Get the mammal's common name. let name = mammals[i].getContent(); // Display the mammal's name. text(name, 20, y); } describe( 'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.' ); } ` ## p5.Vector p5.Vector p5.Vector Math Vector A class to describe a two or three-dimensional vector. A vector can be thought of in different ways. In one view, a vector is like an arrow pointing in space. Vectors have both magnitude (length) and direction. `p5.Vector` objects are often used to program motion because they simplify the math. For example, a moving ball has a position and a velocity. Position describes where the ball is in space. The ball's position vector extends from the origin to the ball's center. Velocity describes the ball's speed and the direction it's moving. If the ball is moving straight up, its velocity vector points straight up. Adding the ball's velocity vector to its position vector moves it, as in `pos.add(vel)`. Vector math relies on methods inside the `p5.Vector` class. Note: createVector() is the recommended way to make an instance of this class. x x component of the vector. Number y y component of the vector. Number z z component of the vector. Number ` function setup() { createCanvas(100, 100); background(200); // Create p5.Vector objects. let p1 = createVector(25, 25); let p2 = createVector(75, 75); // Style the points. strokeWeight(5); // Draw the first point using a p5.Vector. point(p1); // Draw the second point using a p5.Vector's components. point(p2.x, p2.y); describe('Two black dots on a gray square, one at the top left and the other at the bottom right.'); } ` ` let pos; let vel; function setup() { createCanvas(100, 100); // Create p5.Vector objects. pos = createVector(50, 100); vel = createVector(0, -1); describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.'); } function draw() { background(200); // Add velocity to position. pos.add(vel); // If the dot reaches the top of the canvas, // restart from the bottom. if (pos.y < 0) { pos.y = 100; } // Draw the dot. strokeWeight(5); point(pos); } ` ## p5.Font p5.Font p5.Font Typography Loading & Displaying A class to describe fonts. pInst pointer to p5 instance. P5 ` let font; function preload() { // Creates a p5.Font object. font = loadFont('assets/inconsolata.otf'); } function setup() { createCanvas(100, 100); // Style the text. fill('deeppink'); textFont(font); textSize(36); // Display the text. text('p5*js', 10, 50); describe('The text "p5*js" written in pink on a gray background.'); } ` ## p5.Camera p5.Camera p5.Camera 3D Camera A class to describe a camera for viewing a 3D sketch. Each `p5.Camera` object represents a camera that views a section of 3D space. It stores information about the camera’s position, orientation, and projection. In WebGL mode, the default camera is a `p5.Camera` object that can be controlled with the camera(), perspective(), ortho(), and frustum() functions. Additional cameras can be created with createCamera() and activated with setCamera(). Note: `p5.Camera`’s methods operate in two coordinate systems: * The “world” coordinate system describes positions in terms of their relationship to the origin along the x-, y-, and z-axes. For example, calling `myCamera.setPosition()` places the camera in 3D space using "world" coordinates. * The "local" coordinate system describes positions from the camera's point of view: left-right, up-down, and forward-backward. For example, calling `myCamera.move()` moves the camera along its own axes. rendererGL instance of WebGL renderer RendererGL ` let cam; let delta = 0.001; function setup() { createCanvas(100, 100, WEBGL); // Create a p5.Camera object. cam = createCamera(); // Place the camera at the top-center. cam.setPosition(0, -400, 800); // Point the camera at the origin. cam.lookAt(0, 0, 0); describe( 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.' ); } function draw() { background(200); // Turn the camera left and right, called "panning". cam.pan(delta); // Switch directions every 120 frames. if (frameCount % 120 === 0) { delta *= -1; } // Draw the box. box(); } ` ` // Double-click to toggle between cameras. let cam1; let cam2; let isDefaultCamera = true; function setup() { createCanvas(100, 100, WEBGL); // Create the first camera. // Keep its default settings. cam1 = createCamera(); // Create the second camera. // Place it at the top-left. // Point it at the origin. cam2 = createCamera(); cam2.setPosition(400, -400, 800); cam2.lookAt(0, 0, 0); // Set the current camera to cam1. setCamera(cam1); describe( 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.' ); } function draw() { background(200); // Draw the box. box(); } // Toggle the current camera when the user double-clicks. function doubleClicked() { if (isDefaultCamera === true) { setCamera(cam2); isDefaultCamera = false; } else { setCamera(cam1); isDefaultCamera = true; } } ` ## p5.Framebuffer p5.Framebuffer p5.Framebuffer Rendering A class to describe a high-performance drawing surface for textures. Each `p5.Framebuffer` object provides a dedicated drawing surface called a framebuffer. They're similar to p5.Graphics objects but can run much faster. Performance is improved because the framebuffer shares the same WebGL context as the canvas used to create it. `p5.Framebuffer` objects have all the drawing features of the main canvas. Drawing instructions meant for the framebuffer must be placed between calls to myBuffer.begin() and myBuffer.end(). The resulting image can be applied as a texture by passing the `p5.Framebuffer` object to the texture() function, as in `texture(myBuffer)`. It can also be displayed on the main canvas by passing it to the image() function, as in `image(myBuffer, 0, 0)`. Note: createFramebuffer() is the recommended way to create an instance of this class. target sketch instance or p5.Graphics object. p5.Graphics|p5 settings configuration options. Object ## p5.Geometry p5.Geometry p5.Geometry Shape 3D Primitives A class to describe a 3D shape. Each `p5.Geometry` object represents a 3D shape as a set of connected points called vertices. All 3D shapes are made by connecting vertices to form triangles that are stitched together. Each triangular patch on the geometry's surface is called a face. The geometry stores information about its vertices and faces for use with effects such as lighting and texture mapping. The first parameter, `detailX`, is optional. If a number is passed, as in `new p5.Geometry(24)`, it sets the number of triangle subdivisions to use along the geometry's x-axis. By default, `detailX` is 1. The second parameter, `detailY`, is also optional. If a number is passed, as in `new p5.Geometry(24, 16)`, it sets the number of triangle subdivisions to use along the geometry's y-axis. By default, `detailX` is 1. The third parameter, `callback`, is also optional. If a function is passed, as in `new p5.Geometry(24, 16, createShape)`, it will be called once to add vertices to the new 3D shape. detailX number of vertices along the x-axis. Integer detailY number of vertices along the y-axis. Integer callback function to call once the geometry is created. Function ` // Click and drag the mouse to view the scene from different angles. let myGeometry; function setup() { createCanvas(100, 100, WEBGL); // Create a p5.Geometry object. myGeometry = new p5.Geometry(); // Create p5.Vector objects to position the vertices. let v0 = createVector(-40, 0, 0); let v1 = createVector(0, -40, 0); let v2 = createVector(40, 0, 0); // Add the vertices to the p5.Geometry object's vertices array. myGeometry.vertices.push(v0, v1, v2); describe('A white triangle drawn on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Draw the p5.Geometry object. model(myGeometry); } ` ` // Click and drag the mouse to view the scene from different angles. let myGeometry; function setup() { createCanvas(100, 100, WEBGL); // Create a p5.Geometry object using a callback function. myGeometry = new p5.Geometry(1, 1, createShape); describe('A white triangle drawn on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Draw the p5.Geometry object. model(myGeometry); } function createShape() { // Create p5.Vector objects to position the vertices. let v0 = createVector(-40, 0, 0); let v1 = createVector(0, -40, 0); let v2 = createVector(40, 0, 0); // "this" refers to the p5.Geometry object being created. // Add the vertices to the p5.Geometry object's vertices array. this.vertices.push(v0, v1, v2); // Add an array to list which vertices belong to the face. // Vertices are listed in clockwise "winding" order from // left to top to right. this.faces.push([0, 1, 2]); } ` ` // Click and drag the mouse to view the scene from different angles. let myGeometry; function setup() { createCanvas(100, 100, WEBGL); // Create a p5.Geometry object using a callback function. myGeometry = new p5.Geometry(1, 1, createShape); describe('A white triangle drawn on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Draw the p5.Geometry object. model(myGeometry); } function createShape() { // Create p5.Vector objects to position the vertices. let v0 = createVector(-40, 0, 0); let v1 = createVector(0, -40, 0); let v2 = createVector(40, 0, 0); // "this" refers to the p5.Geometry object being created. // Add the vertices to the p5.Geometry object's vertices array. this.vertices.push(v0, v1, v2); // Add an array to list which vertices belong to the face. // Vertices are listed in clockwise "winding" order from // left to top to right. this.faces.push([0, 1, 2]); // Compute the surface normals to help with lighting. this.computeNormals(); } ` ` // Click and drag the mouse to view the scene from different angles. // Adapted from Paul Wheeler's wonderful p5.Geometry tutorial. // https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/ // CC-BY-SA 4.0 let myGeometry; function setup() { createCanvas(100, 100, WEBGL); // Create the p5.Geometry object. // Set detailX to 48 and detailY to 2. // >>> try changing them. myGeometry = new p5.Geometry(48, 2, createShape); } function draw() { background(50); // Enable orbiting with the mouse. orbitControl(); // Turn on the lights. lights(); // Style the p5.Geometry object. strokeWeight(0.2); // Draw the p5.Geometry object. model(myGeometry); } function createShape() { // "this" refers to the p5.Geometry object being created. // Define the Möbius strip with a few parameters. let spread = 0.1; let radius = 30; let stripWidth = 15; let xInterval = 4 * PI / this.detailX; let yOffset = -stripWidth / 2; let yInterval = stripWidth / this.detailY; for (let j = 0; j <= this.detailY; j += 1) { // Calculate the "vertical" point along the strip. let v = yOffset + yInterval * j; for (let i = 0; i <= this.detailX; i += 1) { // Calculate the angle of rotation around the strip. let u = i * xInterval; // Calculate the coordinates of the vertex. let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread; let y = (radius + v * cos(u / 2)) * sin(u); if (u < TWO_PI) { y += sin(u) * spread; } else { y -= sin(u) * spread; } let z = v * sin(u / 2) + sin(u / 4) * 4 * spread; // Create a p5.Vector object to position the vertex. let vert = createVector(x, y, z); // Add the vertex to the p5.Geometry object's vertices array. this.vertices.push(vert); } } // Compute the faces array. this.computeFaces(); // Compute the surface normals to help with lighting. this.computeNormals(); } ` ## p5.Shader p5.Shader p5.Shader 3D Material A class to describe a shader program. Each `p5.Shader` object contains a shader program that runs on the graphics processing unit (GPU). Shaders can process many pixels or vertices at the same time, making them fast for many graphics tasks. They’re written in a language called GLSL and run along with the rest of the code in a sketch. A shader program consists of two files, a vertex shader and a fragment shader. The vertex shader affects where 3D geometry is drawn on the screen and the fragment shader affects color. Once the `p5.Shader` object is created, it can be used with the shader() function, as in `shader(myShader)`. A shader can optionally describe hooks, which are functions in GLSL that users may choose to provide to customize the behavior of the shader. For the vertex or the fragment shader, users can pass in an object where each key is the type and name of a hook function, and each value is a string with the parameter list and default implementation of the hook. For example, to let users optionally run code at the start of the vertex shader, the options object could include: { vertex: { 'void beforeVertex': '() {}' } } Then, in your vertex shader source, you can run a hook by calling a function with the same name prefixed by `HOOK_`: void main() { HOOK_beforeVertex(); // Add the rest of your shader code here! } Note: createShader(), createFilterShader(), and loadShader() are the recommended ways to create an instance of this class. renderer WebGL context for this shader. p5.RendererGL vertSrc source code for the vertex shader program. String fragSrc source code for the fragment shader program. String options An optional object describing how this shader can be augmented with hooks. It can include: * `vertex`: An object describing the available vertex shader hooks. * `fragment`: An object describing the available frament shader hooks. Object ` // Note: A "uniform" is a global variable within a shader program. // Create a string with the vertex shader program. // The vertex shader is called for each vertex. let vertSrc = ` precision highp float; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; attribute vec3 aPosition; attribute vec2 aTexCoord; varying vec2 vTexCoord; void main() { vTexCoord = aTexCoord; vec4 positionVec4 = vec4(aPosition, 1.0); gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4; } `; // Create a string with the fragment shader program. // The fragment shader is called for each pixel. let fragSrc = ` precision highp float; void main() { // Set each pixel's RGBA value to yellow. gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); } `; function setup() { createCanvas(100, 100, WEBGL); // Create a p5.Shader object. let myShader = createShader(vertSrc, fragSrc); // Apply the p5.Shader object. shader(myShader); // Style the drawing surface. noStroke(); // Add a plane as a drawing surface. plane(100, 100); describe('A yellow square.'); } ` ` // Note: A "uniform" is a global variable within a shader program. let mandelbrot; // Load the shader and create a p5.Shader object. function preload() { mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag'); } function setup() { createCanvas(100, 100, WEBGL); // Use the p5.Shader object. shader(mandelbrot); // Set the shader uniform p to an array. mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]); describe('A fractal image zooms in and out of focus.'); } function draw() { // Set the shader uniform r to a value that oscillates between 0 and 2. mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1); // Add a quad as a display surface for the shader. quad(-1, -1, 1, -1, 1, 1, -1, 1); } ` ## p5.sound p5.sound p5.sound p5.sound p5.sound ## p5.SoundFile p5.SoundFile p5.SoundFile p5.sound p5.sound SoundFile object with a path to a file. The p5.SoundFile may not be available immediately because it loads the file information asynchronously. To do something with the sound as soon as it loads pass the name of a function as the second parameter. Only one file path is required. However, audio file formats (i.e. mp3, ogg, wav and m4a/aac) are not supported by all web browsers. If you want to ensure compatability, instead of a single file path, you may include an Array of filepaths, and the browser will choose a format that works. path path to a sound file (String). Optionally, you may include multiple file formats in an array. Alternately, accepts an object from the HTML5 File API, or a p5.File. String|Array successCallback Name of a function to call once file loads Function errorCallback Name of a function to call if file fails to load. This function will receive an error or XMLHttpRequest object with information about what went wrong. Function whileLoadingCallback Name of a function to call while file is loading. That function will receive progress of the request to load the sound file (between 0 and 1) as its first parameter. This progress does not account for the additional time needed to decode the audio data. Function ` let mySound; function preload() { soundFormats('mp3', 'ogg'); mySound = loadSound('assets/doorbell'); } function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(canvasPressed); background(220); text('tap here to play', 10, 20); } function canvasPressed() { // playing a sound file on a user gesture // is equivalent to `userStartAudio()` mySound.play(); } ` ## p5.Amplitude p5.Amplitude p5.Amplitude p5.sound p5.sound Amplitude measures volume between 0.0 and 1.0. Listens to all p5sound by default, or use setInput() to listen to a specific sound source. Accepts an optional smoothing value, which defaults to 0. smoothing between 0.0 and .999 to smooth amplitude readings (defaults to 0) Number ` let sound, amplitude; function preload(){ sound = loadSound('assets/beat.mp3'); } function setup() { let cnv = createCanvas(100,100); cnv.mouseClicked(togglePlay); amplitude = new p5.Amplitude(); } function draw() { background(220); text('tap to play', 20, 20); let level = amplitude.getLevel(); let size = map(level, 0, 1, 0, 200); ellipse(width/2, height/2, size, size); } function togglePlay() { if (sound.isPlaying() ){ sound.pause(); } else { sound.loop(); amplitude = new p5.Amplitude(); amplitude.setInput(sound); } } ` ## p5.FFT p5.FFT p5.FFT p5.sound p5.sound FFT (Fast Fourier Transform) is an analysis algorithm that isolates individual audio frequencies within a waveform. Once instantiated, a p5.FFT object can return an array based on two types of analyses: • `FFT.waveform()` computes amplitude values along the time domain. The array indices correspond to samples across a brief moment in time. Each value represents amplitude of the waveform at that sample of time. • `FFT.analyze() ` computes amplitude values along the frequency domain. The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Use with `getEnergy()` to measure amplitude at specific frequencies, or within a range of frequencies. FFT analyzes a very short snapshot of sound called a sample buffer. It returns an array of amplitude measurements, referred to as `bins`. The array is 1024 bins long by default. You can change the bin array length, but it must be a power of 2 between 16 and 1024 in order for the FFT algorithm to function correctly. The actual size of the FFT buffer is twice the number of bins, so given a standard sample rate, the buffer is 2048/44100 seconds long. smoothing Smooth results of Freq Spectrum. 0.0 < smoothing < 1.0. Defaults to 0.8. Number bins Length of resulting array. Must be a power of two between 16 and 1024. Defaults to 1024. Number ` function preload(){ sound = loadSound('assets/Damscray_DancingTiger.mp3'); } function setup(){ let cnv = createCanvas(100,100); cnv.mouseClicked(togglePlay); fft = new p5.FFT(); sound.amp(0.2); } function draw(){ background(220); let spectrum = fft.analyze(); noStroke(); fill(255, 0, 255); for (let i = 0; i< spectrum.length; i++){ let x = map(i, 0, spectrum.length, 0, width); let h = -height + map(spectrum[i], 0, 255, height, 0); rect(x, height, width / spectrum.length, h ) } let waveform = fft.waveform(); noFill(); beginShape(); stroke(20); for (let i = 0; i < waveform.length; i++){ let x = map(i, 0, waveform.length, 0, width); let y = map( waveform[i], -1, 1, 0, height); vertex(x,y); } endShape(); text('tap to play', 20, 20); } function togglePlay() { if (sound.isPlaying()) { sound.pause(); } else { sound.loop(); } } ` ## p5.Oscillator p5.Oscillator p5.Oscillator p5.sound p5.sound Creates a signal that oscillates between -1.0 and 1.0. By default, the oscillation takes the form of a sinusoidal shape ('sine'). Additional types include 'triangle', 'sawtooth' and 'square'. The frequency defaults to 440 oscillations per second (440Hz, equal to the pitch of an 'A' note). Set the type of oscillation with setType(), or by instantiating a specific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc. freq frequency defaults to 440Hz Number type type of oscillator. Options: 'sine' (default), 'triangle', 'sawtooth', 'square' String ` let osc, playing, freq, amp; function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(playOscillator); osc = new p5.Oscillator('sine'); } function draw() { background(220) freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500); amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1); text('tap to play', 20, 20); text('freq: ' + freq, 20, 40); text('amp: ' + amp, 20, 60); if (playing) { // smooth the transitions by 0.1 seconds osc.freq(freq, 0.1); osc.amp(amp, 0.1); } } function playOscillator() { // starting an oscillator on a user gesture will enable audio // in browsers that have a strict autoplay policy. // See also: userStartAudio(); osc.start(); playing = true; } function mouseReleased() { // ramp amplitude to 0 over 0.5 seconds osc.amp(0, 0.5); playing = false; } ` ## p5.SinOsc p5.SinOsc p5.SinOsc p5.sound p5.sound Constructor: `new p5.SinOsc()`. This creates a Sine Wave Oscillator and is equivalent to ` new p5.Oscillator('sine') ` or creating a p5.Oscillator and then calling its method `setType('sine')`. See p5.Oscillator for methods. p5.Oscillator freq Set the frequency Number ## p5.TriOsc p5.TriOsc p5.TriOsc p5.sound p5.sound Constructor: `new p5.TriOsc()`. This creates a Triangle Wave Oscillator and is equivalent to `new p5.Oscillator('triangle') ` or creating a p5.Oscillator and then calling its method `setType('triangle')`. See p5.Oscillator for methods. p5.Oscillator freq Set the frequency Number ## p5.SawOsc p5.SawOsc p5.SawOsc p5.sound p5.sound Constructor: `new p5.SawOsc()`. This creates a SawTooth Wave Oscillator and is equivalent to ` new p5.Oscillator('sawtooth') ` or creating a p5.Oscillator and then calling its method `setType('sawtooth')`. See p5.Oscillator for methods. p5.Oscillator freq Set the frequency Number ## p5.SqrOsc p5.SqrOsc p5.SqrOsc p5.sound p5.sound Constructor: `new p5.SqrOsc()`. This creates a Square Wave Oscillator and is equivalent to ` new p5.Oscillator('square') ` or creating a p5.Oscillator and then calling its method `setType('square')`. See p5.Oscillator for methods. p5.Oscillator freq Set the frequency Number ## p5.Envelope p5.Envelope p5.Envelope p5.sound p5.sound Envelopes are pre-defined amplitude distribution over time. Typically, envelopes are used to control the output volume of an object, a series of fades referred to as Attack, Decay, Sustain and Release ( ADSR ). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can control an Oscillator's frequency like this: `osc.freq(env)`. Use `setRange` to change the attack/release level. Use `setADSR` to change attackTime, decayTime, sustainPercent and releaseTime. Use the `play` method to play the entire envelope, the `ramp` method for a pingable trigger, or `triggerAttack`/ `triggerRelease` to trigger noteOn/noteOff. ` let t1 = 0.1; // attack time in seconds let l1 = 0.7; // attack level 0.0 to 1.0 let t2 = 0.3; // decay time in seconds let l2 = 0.1; // decay level 0.0 to 1.0 let env; let triOsc; function setup() { let cnv = createCanvas(100, 100); background(220); text('tap to play', 20, 20); cnv.mousePressed(playSound); env = new p5.Envelope(t1, l1, t2, l2); triOsc = new p5.Oscillator('triangle'); } function playSound() { // starting the oscillator ensures that audio is enabled. triOsc.start(); env.play(triOsc); } ` ## p5.Noise p5.Noise p5.Noise p5.sound p5.sound Noise is a type of oscillator that generates a buffer with random values. p5.Oscillator type Type of noise can be 'white' (default), 'brown' or 'pink'. String ## p5.Pulse p5.Pulse p5.Pulse p5.sound p5.sound Creates a Pulse object, an oscillator that implements Pulse Width Modulation. The pulse is created with two oscillators. Accepts a parameter for frequency, and to set the width between the pulses. See `p5.Oscillator` for a full list of methods. p5.Oscillator freq Frequency in oscillations per second (Hz) Number w Width between the pulses (0 to 1.0, defaults to 0) Number ` let pulse; function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(startPulse); background(220); pulse = new p5.Pulse(); pulse.amp(0.5); pulse.freq(220); } function startPulse() { pulse.start(); pulse.amp(0.5, 0.02); } function mouseReleased() { pulse.amp(0, 0.2); } function draw() { background(220); text('tap to play', 5, 20, width - 20); let w = map(mouseX, 0, width, 0, 1); w = constrain(w, 0, 1); pulse.width(w); text('pulse width: ' + w, 5, height - 20); } ` ## p5.AudioIn p5.AudioIn p5.AudioIn p5.sound p5.sound Get audio from an input, i.e. your computer's microphone. Turn the mic on/off with the start() and stop() methods. When the mic is on, its volume can be measured with getLevel or by connecting an FFT object. If you want to hear the AudioIn, use the .connect() method. AudioIn does not connect to p5.sound output by default to prevent feedback. Note: This uses the getUserMedia/ Stream API, which is not supported by certain browsers. Access in Chrome browser is limited to localhost and https, but access over http may be limited. errorCallback A function to call if there is an error accessing the AudioIn. For example, Safari and iOS devices do not currently allow microphone access. Function ` let mic; function setup(){ let cnv = createCanvas(100, 100); cnv.mousePressed(userStartAudio); textAlign(CENTER); mic = new p5.AudioIn(); mic.start(); } function draw(){ background(0); fill(255); text('tap to start', width/2, 20); micLevel = mic.getLevel(); let y = height - micLevel * height; ellipse(width/2, y, 10, 10); } ` ## p5.Effect p5.Effect p5.Effect p5.sound p5.sound Effect is a base class for audio effects in p5. This module handles the nodes and methods that are common and useful for current and future effects. This class is extended by p5.Distortion, p5.Compressor, p5.Delay, p5.Filter, p5.Reverb. ac Reference to the audio context of the p5 object Object input Gain Node effect wrapper AudioNode output Gain Node effect wrapper AudioNode _drywet Tone.JS CrossFade node (defaults to value: 1) Object wet Effects that extend this class should connect to the wet signal to this gain node, so that dry and wet signals are mixed properly. AudioNode ## p5.Filter p5.Filter p5.Filter p5.sound p5.sound A p5.Filter uses a Web Audio Biquad Filter to filter the frequency response of an input source. Subclasses include: `p5.LowPass`: Allows frequencies below the cutoff frequency to pass through, and attenuates frequencies above the cutoff. `p5.HighPass`: The opposite of a lowpass filter. `p5.BandPass`: Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. The `.res()` method controls either width of the bandpass, or resonance of the low/highpass cutoff frequency. This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. p5.Effect type 'lowpass' (default), 'highpass', 'bandpass' String ` let fft, noise, filter; function setup() { let cnv = createCanvas(100,100); cnv.mousePressed(makeNoise); fill(255, 0, 255); filter = new p5.BandPass(); noise = new p5.Noise(); noise.disconnect(); noise.connect(filter); fft = new p5.FFT(); } function draw() { background(220); // set the BandPass frequency based on mouseX let freq = map(mouseX, 0, width, 20, 10000); freq = constrain(freq, 0, 22050); filter.freq(freq); // give the filter a narrow band (lower res = wider bandpass) filter.res(50); // draw filtered spectrum let spectrum = fft.analyze(); noStroke(); for (let i = 0; i < spectrum.length; i++) { let x = map(i, 0, spectrum.length, 0, width); let h = -height + map(spectrum[i], 0, 255, height, 0); rect(x, height, width/spectrum.length, h); } if (!noise.started) { text('tap here and drag to change frequency', 10, 20, width - 20); } else { text('Frequency: ' + round(freq)+'Hz', 20, 20, width - 20); } } function makeNoise() { // see also: `userStartAudio()` noise.start(); noise.amp(0.5, 0.2); } function mouseReleased() { noise.amp(0, 0.2); } ` ## p5.LowPass p5.LowPass p5.LowPass p5.sound p5.sound Constructor: `new p5.LowPass()` Filter. This is the same as creating a p5.Filter and then calling its method `setType('lowpass')`. See p5.Filter for methods. p5.Filter ## p5.HighPass p5.HighPass p5.HighPass p5.sound p5.sound Constructor: `new p5.HighPass()` Filter. This is the same as creating a p5.Filter and then calling its method `setType('highpass')`. See p5.Filter for methods. p5.Filter ## p5.BandPass p5.BandPass p5.BandPass p5.sound p5.sound Constructor: `new p5.BandPass()` Filter. This is the same as creating a p5.Filter and then calling its method `setType('bandpass')`. See p5.Filter for methods. p5.Filter ## p5.EQ p5.EQ p5.EQ p5.sound p5.sound p5.EQ is an audio effect that performs the function of a multiband audio equalizer. Equalization is used to adjust the balance of frequency compoenents of an audio signal. This process is commonly used in sound production and recording to change the waveform before it reaches a sound output device. EQ can also be used as an audio effect to create interesting distortions by filtering out parts of the spectrum. p5.EQ is built using a chain of Web Audio Biquad Filter Nodes and can be instantiated with 3 or 8 bands. Bands can be added or removed from the EQ by directly modifying p5.EQ.bands (the array that stores filters). This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. p5.Effect _eqsize Constructor will accept 3 or 8, defaults to 3 Number ### return p5.EQ object Object ` let eq, soundFile let eqBandIndex = 0; let eqBandNames = ['lows', 'mids', 'highs']; function preload() { soundFormats('mp3', 'ogg'); soundFile = loadSound('assets/beat'); } function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(toggleSound); eq = new p5.EQ(eqBandNames.length); soundFile.disconnect(); eq.process(soundFile); } function draw() { background(30); noStroke(); fill(255); textAlign(CENTER); text('filtering ', 50, 25); fill(255, 40, 255); textSize(26); text(eqBandNames[eqBandIndex], 50, 55); fill(255); textSize(9); if (!soundFile.isPlaying()) { text('tap to play', 50, 80); } else { text('tap to filter next band', 50, 80) } } function toggleSound() { if (!soundFile.isPlaying()) { soundFile.play(); } else { eqBandIndex = (eqBandIndex + 1) % eq.bands.length; } for (let i = 0; i < eq.bands.length; i++) { eq.bands[i].gain(0); } // filter the band we want to filter eq.bands[eqBandIndex].gain(-40); } ` ## p5.Panner3D p5.Panner3D p5.Panner3D p5.sound p5.sound Panner3D is based on the Web Audio Spatial Panner Node. This panner is a spatial processing node that allows audio to be positioned and oriented in 3D space. The position is relative to an Audio Context Listener, which can be accessed by `p5.soundOut.audiocontext.listener` ## p5.Delay p5.Delay p5.Delay p5.sound p5.sound Delay is an echo effect. It processes an existing sound source, and outputs a delayed version of that sound. The p5.Delay can produce different effects depending on the delayTime, feedback, filter, and type. In the example below, a feedback of 0.5 (the default value) will produce a looping delay that decreases in volume by 50% each repeat. A filter will cut out the high frequencies so that the delay does not sound as piercing as the original source. This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. p5.Effect ` let osc; function setup() { let cnv = createCanvas(100, 100); background(220); textAlign(CENTER); text('tap to play', width/2, height/2); osc = new p5.Oscillator('square'); osc.amp(0.5); delay = new p5.Delay(); // delay.process() accepts 4 parameters: // source, delayTime (in seconds), feedback, filter frequency delay.process(osc, 0.12, .7, 2300); cnv.mousePressed(oscStart); } function oscStart() { osc.start(); } function mouseReleased() { osc.stop(); } ` ## p5.Reverb p5.Reverb p5.Reverb p5.sound p5.sound Reverb adds depth to a sound through a large number of decaying echoes. It creates the perception that sound is occurring in a physical space. The p5.Reverb has parameters for Time (how long does the reverb last) and decayRate (how much the sound decays with each echo) that can be set with the .set() or .process() methods. The p5.Convolver extends p5.Reverb allowing you to recreate the sound of actual physical spaces through convolution. This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. p5.Effect ` let soundFile, reverb; function preload() { soundFile = loadSound('assets/Damscray_DancingTiger.mp3'); } function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(playSound); reverb = new p5.Reverb(); soundFile.disconnect(); // so we'll only hear reverb... // connect soundFile to reverb, process w/ // 3 second reverbTime, decayRate of 2% reverb.process(soundFile, 3, 2); } function draw() { let dryWet = constrain(map(mouseX, 0, width, 0, 1), 0, 1); // 1 = all reverb, 0 = no reverb reverb.drywet(dryWet); background(220); text('tap to play', 10, 20); text('dry/wet: ' + round(dryWet * 100) + '%', 10, height - 20); } function playSound() { soundFile.play(); } ` ## p5.Convolver p5.Convolver p5.Convolver p5.sound p5.sound p5.Convolver extends p5.Reverb. It can emulate the sound of real physical spaces through a process called convolution. Convolution multiplies any audio input by an "impulse response" to simulate the dispersion of sound over time. The impulse response is generated from an audio file that you provide. One way to generate an impulse response is to pop a balloon in a reverberant space and record the echo. Convolution can also be used to experiment with sound. Use the method `createConvolution(path)` to instantiate a p5.Convolver with a path to your impulse response audio file. p5.Effect path path to a sound file String callback function to call when loading succeeds Function errorCallback function to call if loading fails. This function will receive an error or XMLHttpRequest object with information about what went wrong. Function ` let cVerb, sound; function preload() { // We have both MP3 and OGG versions of all sound assets soundFormats('ogg', 'mp3'); // Try replacing 'bx-spring' with other soundfiles like // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox' cVerb = createConvolver('assets/bx-spring.mp3'); // Try replacing 'Damscray_DancingTiger' with // 'beat', 'doorbell', lucky_dragons_-_power_melody' sound = loadSound('assets/Damscray_DancingTiger.mp3'); } function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(playSound); background(220); text('tap to play', 20, 20); // disconnect from main output... sound.disconnect(); // ...and process with cVerb // so that we only hear the convolution cVerb.process(sound); } function playSound() { sound.play(); } ` ## p5.Phrase p5.Phrase p5.Phrase p5.sound p5.sound A phrase is a pattern of musical events over time, i.e. a series of notes and rests. Phrases must be added to a p5.Part for playback, and each part can play multiple phrases at the same time. For example, one Phrase might be a kick drum, another could be a snare, and another could be the bassline. The first parameter is a name so that the phrase can be modified or deleted later. The callback is a a function that this phrase will call at every step—for example it might be called `playNote(value){}`. The array determines which value is passed into the callback at each step of the phrase. It can be numbers, an object with multiple numbers, or a zero (0) indicates a rest so the callback won't be called). name Name so that you can access the Phrase. String callback The name of a function that this phrase will call. Typically it will play a sound, and accept two parameters: a time at which to play the sound (in seconds from now), and a value from the sequence array. The time should be passed into the play() or start() method to ensure precision. Function sequence Array of values to pass into the callback at each step of the phrase. Array ` let mySound, myPhrase, myPart; let pattern = [1,0,0,2,0,2,0,0]; function preload() { mySound = loadSound('assets/beatbox.mp3'); } function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(playMyPart); background(220); text('tap to play', width/2, height/2); textAlign(CENTER, CENTER); myPhrase = new p5.Phrase('bbox', onEachStep, pattern); myPart = new p5.Part(); myPart.addPhrase(myPhrase); myPart.setBPM(60); } function onEachStep(time, playbackRate) { mySound.rate(playbackRate); mySound.play(time); } function playMyPart() { userStartAudio(); myPart.start(); } ` ## p5.Part p5.Part p5.Part p5.sound p5.sound A p5.Part plays back one or more p5.Phrases. Instantiate a part with steps and tatums. By default, each step represents a 1/16th note. See p5.Phrase for more about musical timing. steps Steps in the part Number tatums Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note) Number ` let box, drum, myPart; let boxPat = [1,0,0,2,0,2,0,0]; let drumPat = [0,1,1,0,2,0,1,0]; function preload() { box = loadSound('assets/beatbox.mp3'); drum = loadSound('assets/drum.mp3'); } function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(playMyPart); background(220); textAlign(CENTER, CENTER); text('tap to play', width/2, height/2); let boxPhrase = new p5.Phrase('box', playBox, boxPat); let drumPhrase = new p5.Phrase('drum', playDrum, drumPat); myPart = new p5.Part(); myPart.addPhrase(boxPhrase); myPart.addPhrase(drumPhrase); myPart.setBPM(60); } function playBox(time, playbackRate) { box.rate(playbackRate); box.play(time); } function playDrum(time, playbackRate) { drum.rate(playbackRate); drum.play(time); } function playMyPart() { userStartAudio(); myPart.start(); } ` ## p5.Score p5.Score p5.Score p5.sound p5.sound A Score consists of a series of Parts. The parts will be played back in order. For example, you could have an A part, a B part, and a C part, and play them back in this order `new p5.Score(a, a, b, a, c)` parts One or multiple parts, to be played in sequence. p5.Part ## p5.SoundLoop p5.SoundLoop p5.SoundLoop p5.sound p5.sound SoundLoop callback this function will be called on each iteration of theloop Function interval amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second. Number|String ` let synth, soundLoop; let notePattern = [60, 62, 64, 67, 69, 72]; function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(canvasPressed); colorMode(HSB); background(0, 0, 86); text('tap to start/stop', 10, 20); //the looper's callback is passed the timeFromNow //this value should be used as a reference point from //which to schedule sounds let intervalInSeconds = 0.2; soundLoop = new p5.SoundLoop(onSoundLoop, intervalInSeconds); synth = new p5.MonoSynth(); } function canvasPressed() { // ensure audio is enabled userStartAudio(); if (soundLoop.isPlaying) { soundLoop.stop(); } else { // start the loop soundLoop.start(); } } function onSoundLoop(timeFromNow) { let noteIndex = (soundLoop.iterations - 1) % notePattern.length; let note = midiToFreq(notePattern[noteIndex]); synth.play(note, 0.5, timeFromNow); background(noteIndex * 360 / notePattern.length, 50, 100); } ` ## p5.Compressor p5.Compressor p5.Compressor p5.sound p5.sound Compressor is an audio effect class that performs dynamics compression on an audio input source. This is a very commonly used technique in music and sound production. Compression creates an overall louder, richer, and fuller sound by lowering the volume of louds and raising that of softs. Compression can be used to avoid clipping (sound distortion due to peaks in volume) and is especially useful when many sounds are played at once. Compression can be used on indivudal sound sources in addition to the main output. This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. p5.Effect ## p5.PeakDetect p5.PeakDetect p5.PeakDetect p5.sound p5.sound PeakDetect works in conjunction with p5.FFT to look for onsets in some or all of the frequency spectrum. To use p5.PeakDetect, call `update` in the draw loop and pass in a p5.FFT object. You can listen for a specific part of the frequency spectrum by setting the range between `freq1` and `freq2`. `threshold` is the threshold for detecting a peak, scaled between 0 and 1. It is logarithmic, so 0.1 is half as loud as 1.0. The update method is meant to be run in the draw loop, and frames determines how many loops must pass before another peak can be detected. For example, if the frameRate() = 60, you could detect the beat of a 120 beat-per-minute song with this equation: ` framesPerPeak = 60 / (estimatedBPM / 60 );` Based on example contribtued by @b2renger, and a simple beat detection explanation by Felix Turner. freq1 lowFrequency - defaults to 20Hz Number freq2 highFrequency - defaults to 20000 Hz Number threshold Threshold for detecting a beat between 0 and 1 scaled logarithmically where 0.1 is 1/2 the loudness of 1.0. Defaults to 0.35. Number framesPerPeak Defaults to 20. Number ` var cnv, soundFile, fft, peakDetect; var ellipseWidth = 10; function preload() { soundFile = loadSound('assets/beat.mp3'); } function setup() { background(0); noStroke(); fill(255); textAlign(CENTER); // p5.PeakDetect requires a p5.FFT fft = new p5.FFT(); peakDetect = new p5.PeakDetect(); } function draw() { background(0); text('click to play/pause', width/2, height/2); // peakDetect accepts an fft post-analysis fft.analyze(); peakDetect.update(fft); if ( peakDetect.isDetected ) { ellipseWidth = 50; } else { ellipseWidth *= 0.95; } ellipse(width/2, height/2, ellipseWidth, ellipseWidth); } // toggle play/stop when canvas is clicked function mouseClicked() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { if (soundFile.isPlaying() ) { soundFile.stop(); } else { soundFile.play(); } } } ` ## p5.SoundRecorder p5.SoundRecorder p5.SoundRecorder p5.sound p5.sound Record sounds for playback and/or to save as a .wav file. The p5.SoundRecorder records all sound output from your sketch, or can be assigned a specific source with setInput(). The record() method accepts a p5.SoundFile as a parameter. When playback is stopped (either after the given amount of time, or with the stop() method), the p5.SoundRecorder will send its recording to that p5.SoundFile for playback. ` let mic, recorder, soundFile; let state = 0; function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(canvasPressed); background(220); textAlign(CENTER, CENTER); // create an audio in mic = new p5.AudioIn(); // prompts user to enable their browser mic mic.start(); // create a sound recorder recorder = new p5.SoundRecorder(); // connect the mic to the recorder recorder.setInput(mic); // this sound file will be used to // playback & save the recording soundFile = new p5.SoundFile(); text('tap to record', width/2, height/2); } function canvasPressed() { // ensure audio is enabled userStartAudio(); // make sure user enabled the mic if (state === 0 && mic.enabled) { // record to our p5.SoundFile recorder.record(soundFile); background(255,0,0); text('Recording!', width/2, height/2); state++; } else if (state === 1) { background(0,255,0); // stop recorder and // send result to soundFile recorder.stop(); text('Done! Tap to play and download', width/2, height/2, width - 20); state++; } else if (state === 2) { soundFile.play(); // play the result! save(soundFile, 'mySound.wav'); state++; } } ` ## p5.Distortion p5.Distortion p5.Distortion p5.sound p5.sound A Distortion effect created with a Waveshaper Node, with an approach adapted from Kevin Ennis This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. p5.Effect amount Unbounded distortion amount. Normal values range from 0-1. Number 0.25 oversample 'none', '2x', or '4x'. String 'none' ## p5.Gain p5.Gain p5.Gain p5.sound p5.sound A gain node is usefull to set the relative volume of sound. It's typically used to build mixers. ` // load two soundfile and crossfade beetween them let sound1,sound2; let sound1Gain, sound2Gain, mixGain; function preload(){ soundFormats('ogg', 'mp3'); sound1 = loadSound('assets/Damscray_-_Dancing_Tiger_01'); sound2 = loadSound('assets/beat'); } function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(startSound); // create a 'mix' gain bus to which we will connect both soundfiles mixGain = new p5.Gain(); mixGain.connect(); sound1.disconnect(); // diconnect from p5 output sound1Gain = new p5.Gain(); // setup a gain node sound1Gain.setInput(sound1); // connect the first sound to its input sound1Gain.connect(mixGain); // connect its output to the final mix bus sound2.disconnect(); sound2Gain = new p5.Gain(); sound2Gain.setInput(sound2); sound2Gain.connect(mixGain); } function startSound() { sound1.loop(); sound2.loop(); loop(); } function mouseReleased() { sound1.stop(); sound2.stop(); } function draw(){ background(220); textAlign(CENTER); textSize(11); fill(0); if (!sound1.isPlaying()) { text('tap and drag to play', width/2, height/2); return; } // map the horizontal position of the mouse to values useable for volume * control of sound1 var sound1Volume = constrain(map(mouseX,width,0,0,1), 0, 1); var sound2Volume = 1-sound1Volume; sound1Gain.amp(sound1Volume); sound2Gain.amp(sound2Volume); // map the vertical position of the mouse to values useable for 'output * volume control' var outputVolume = constrain(map(mouseY,height,0,0,1), 0, 1); mixGain.amp(outputVolume); text('output', width/2, height - outputVolume * height * 0.9) fill(255, 0, 255); textAlign(LEFT); text('sound1', 5, height - sound1Volume * height * 0.9); textAlign(RIGHT); text('sound2', width - 5, height - sound2Volume * height * 0.9); } ` ## p5.AudioVoice p5.AudioVoice p5.AudioVoice p5.sound p5.sound Base class for monophonic synthesizers. Any extensions of this class should follow the API and implement the methods below in order to remain compatible with p5.PolySynth(); ## p5.MonoSynth p5.MonoSynth p5.MonoSynth p5.sound p5.sound A MonoSynth is used as a single voice for sound synthesis. This is a class to be used in conjunction with the PolySynth class. Custom synthetisers should be built inheriting from this class. ` let monoSynth; function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(playSynth); background(220); textAlign(CENTER); text('tap to play', width/2, height/2); monoSynth = new p5.MonoSynth(); } function playSynth() { userStartAudio(); let note = random(['Fb4', 'G4']); // note velocity (volume, from 0 to 1) let velocity = random(); // time from now (in seconds) let time = 0; // note duration (in seconds) let dur = 1/6; monoSynth.play(note, velocity, time, dur); } ` ## p5.OnsetDetect p5.OnsetDetect p5.OnsetDetect p5.sound p5.sound Listen for onsets (a sharp increase in volume) within a given frequency range. freqLow Low frequency Number freqHigh High frequency Number threshold Amplitude threshold between 0 (no energy) and 1 (maximum) Number callback Function to call when an onset is detected Function ## p5.PolySynth p5.PolySynth p5.PolySynth p5.sound p5.sound An AudioVoice is used as a single voice for sound synthesis. The PolySynth class holds an array of AudioVoice, and deals with voices allocations, with setting notes to be played, and parameters to be set. synthVoice A monophonic synth voice inheriting the AudioVoice class. Defaults to p5.MonoSynth Number maxVoices Number of voices, defaults to 8; Number ` let polySynth; function setup() { let cnv = createCanvas(100, 100); cnv.mousePressed(playSynth); background(220); text('click to play', 20, 20); polySynth = new p5.PolySynth(); } function playSynth() { userStartAudio(); // note duration (in seconds) let dur = 1.5; // time from now (in seconds) let time = 0; // velocity (volume, from 0 to 1) let vel = 0.1; // notes can overlap with each other polySynth.play('G2', vel, 0, dur); polySynth.play('C3', vel, time += 1/3, dur); polySynth.play('G3', vel, time += 1/3, dur); } ` # elements Creates a screen reader-accessible description of the canvas. The first parameter, `text`, is the description of the canvas. The second parameter, `display`, is optional. It determines how the description is displayed. If `LABEL` is passed, as in `describe('A description.', LABEL)`, the description will be visible in a div element next to the canvas. If `FALLBACK` is passed, as in `describe('A description.', FALLBACK)`, the description will only be visible to screen readers. This is the default mode. Read Writing accessible canvas descriptions to learn more about making sketches accessible. method describe text description of the canvas. String display either LABEL or FALLBACK. Constant ` function setup() { background('pink'); // Draw a heart. fill('red'); noStroke(); circle(67, 67, 20); circle(83, 67, 20); triangle(91, 73, 75, 95, 59, 73); // Add a general description of the canvas. describe('A pink square with a red heart in the bottom-right corner.'); } ` ` function setup() { background('pink'); // Draw a heart. fill('red'); noStroke(); circle(67, 67, 20); circle(83, 67, 20); triangle(91, 73, 75, 95, 59, 73); // Add a general description of the canvas // and display it for debugging. describe('A pink square with a red heart in the bottom-right corner.', LABEL); } ` ` function draw() { background(200); // The expression // frameCount % 100 // causes x to increase from 0 // to 99, then restart from 0. let x = frameCount % 100; // Draw the circle. fill(0, 255, 0); circle(x, 50, 40); // Add a general description of the canvas. describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`); } ` ` function draw() { background(200); // The expression // frameCount % 100 // causes x to increase from 0 // to 99, then restart from 0. let x = frameCount % 100; // Draw the circle. fill(0, 255, 0); circle(x, 50, 40); // Add a general description of the canvas // and display it for debugging. describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL); } ` p5 Environment Environment Creates a screen reader-accessible description of elements in the canvas. Elements are shapes or groups of shapes that create meaning together. For example, a few overlapping circles could make an "eye" element. The first parameter, `name`, is the name of the element. The second parameter, `text`, is the description of the element. The third parameter, `display`, is optional. It determines how the description is displayed. If `LABEL` is passed, as in `describe('A description.', LABEL)`, the description will be visible in a div element next to the canvas. Using `LABEL` creates unhelpful duplicates for screen readers. Only use `LABEL` during development. If `FALLBACK` is passed, as in `describe('A description.', FALLBACK)`, the description will only be visible to screen readers. This is the default mode. Read Writing accessible canvas descriptions to learn more about making sketches accessible. method describeElement name name of the element. String text description of the element. String display either LABEL or FALLBACK. Constant ` function setup() { background('pink'); // Describe the first element // and draw it. describeElement('Circle', 'A yellow circle in the top-left corner.'); noStroke(); fill('yellow'); circle(25, 25, 40); // Describe the second element // and draw it. describeElement('Heart', 'A red heart in the bottom-right corner.'); fill('red'); circle(66.6, 66.6, 20); circle(83.2, 66.6, 20); triangle(91.2, 72.6, 75, 95, 58.6, 72.6); // Add a general description of the canvas. describe('A red heart and yellow circle over a pink background.'); } ` ` function setup() { background('pink'); // Describe the first element // and draw it. Display the // description for debugging. describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL); noStroke(); fill('yellow'); circle(25, 25, 40); // Describe the second element // and draw it. Display the // description for debugging. describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL); fill('red'); circle(66.6, 66.6, 20); circle(83.2, 66.6, 20); triangle(91.2, 72.6, 75, 95, 58.6, 72.6); // Add a general description of the canvas. describe('A red heart and yellow circle over a pink background.'); } ` p5 Environment Environment Creates a screen reader-accessible description of shapes on the canvas. `textOutput()` adds a general description, list of shapes, and table of shapes to the web page. The general description includes the canvas size, canvas color, and number of shapes. For example, `Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:`. A list of shapes follows the general description. The list describes the color, location, and area of each shape. For example, `a red circle at middle covering 3% of the canvas`. Each shape can be selected to get more details. `textOutput()` uses its table of shapes as a list. The table describes the shape, color, location, coordinates and area. For example, `red circle location = middle area = 3%`. This is different from gridOutput(), which uses its table as a grid. The `display` parameter is optional. It determines how the description is displayed. If `LABEL` is passed, as in `textOutput(LABEL)`, the description will be visible in a div element next to the canvas. Using `LABEL` creates unhelpful duplicates for screen readers. Only use `LABEL` during development. If `FALLBACK` is passed, as in `textOutput(FALLBACK)`, the description will only be visible to screen readers. This is the default mode. Read Writing accessible canvas descriptions to learn more about making sketches accessible. method textOutput display either FALLBACK or LABEL. Constant ` function setup() { // Add the text description. textOutput(); // Draw a couple of shapes. background(200); fill(255, 0, 0); circle(20, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle and a blue square on a gray background.'); } ` ` function setup() { // Add the text description and // display it for debugging. textOutput(LABEL); // Draw a couple of shapes. background(200); fill(255, 0, 0); circle(20, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle and a blue square on a gray background.'); } ` ` function draw() { // Add the text description. textOutput(); // Draw a moving circle. background(200); let x = frameCount * 0.1; fill(255, 0, 0); circle(x, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle moves from left to right above a blue square.'); } ` ` function draw() { // Add the text description and // display it for debugging. textOutput(LABEL); // Draw a moving circle. background(200); let x = frameCount * 0.1; fill(255, 0, 0); circle(x, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle moves from left to right above a blue square.'); } ` p5 Environment Environment Creates a screen reader-accessible description of shapes on the canvas. `gridOutput()` adds a general description, table of shapes, and list of shapes to the web page. The general description includes the canvas size, canvas color, and number of shapes. For example, `gray canvas, 100 by 100 pixels, contains 2 shapes: 1 circle 1 square`. `gridOutput()` uses its table of shapes as a grid. Each shape in the grid is placed in a cell whose row and column correspond to the shape's location on the canvas. The grid cells describe the color and type of shape at that location. For example, `red circle`. These descriptions can be selected individually to get more details. This is different from textOutput(), which uses its table as a list. A list of shapes follows the table. The list describes the color, type, location, and area of each shape. For example, `red circle, location = middle, area = 3 %`. The `display` parameter is optional. It determines how the description is displayed. If `LABEL` is passed, as in `gridOutput(LABEL)`, the description will be visible in a div element next to the canvas. Using `LABEL` creates unhelpful duplicates for screen readers. Only use `LABEL` during development. If `FALLBACK` is passed, as in `gridOutput(FALLBACK)`, the description will only be visible to screen readers. This is the default mode. Read Writing accessible canvas descriptions to learn more about making sketches accessible. method gridOutput display either FALLBACK or LABEL. Constant ` function setup() { // Add the grid description. gridOutput(); // Draw a couple of shapes. background(200); fill(255, 0, 0); circle(20, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle and a blue square on a gray background.'); } ` ` function setup() { // Add the grid description and // display it for debugging. gridOutput(LABEL); // Draw a couple of shapes. background(200); fill(255, 0, 0); circle(20, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle and a blue square on a gray background.'); } ` ` function draw() { // Add the grid description. gridOutput(); // Draw a moving circle. background(200); let x = frameCount * 0.1; fill(255, 0, 0); circle(x, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle moves from left to right above a blue square.'); } ` ` function draw() { // Add the grid description and // display it for debugging. gridOutput(LABEL); // Draw a moving circle. background(200); let x = frameCount * 0.1; fill(255, 0, 0); circle(x, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle moves from left to right above a blue square.'); } ` p5 Environment Environment Conversions adapted from http://www.easyrgb.com/en/math.php. In these functions, hue is always in the range [0, 1], just like all other components are in the range [0, 1]. 'Brightness' and 'value' are used interchangeably. p5 Color Color Conversion Convert an HSBA array to HSLA. p5 Color Color Conversion Convert an HSBA array to RGBA. p5 Color Color Conversion Convert an HSLA array to HSBA. p5 Color Color Conversion Convert an HSLA array to RGBA. We need to change basis from HSLA to something that can be more easily be projected onto RGBA. We will choose hue and brightness as our first two components, and pick a convenient third one ('zest') so that we don't need to calculate formal HSBA saturation. p5 Color Color Conversion Convert an RGBA array to HSBA. p5 Color Color Conversion Convert an RGBA array to HSLA. p5 Color Color Conversion Gets the alpha (transparency) value of a color. `alpha()` extracts the alpha value from a p5.Color object, an array of color components, or a CSS color string. method alpha color p5.Color object, array of color components, or CSS color string. p5.Color|Number[]|String ### return the alpha value. Number ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object. let c = color(0, 126, 255, 102); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'alphaValue' to 102. let alphaValue = alpha(c); // Draw the right rectangle. fill(alphaValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light blue and the right one is charcoal gray.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a color array. let c = [0, 126, 255, 102]; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'alphaValue' to 102. let alphaValue = alpha(c); // Draw the left rectangle. fill(alphaValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light blue and the right one is charcoal gray.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a CSS color string. let c = 'rgba(0, 126, 255, 0.4)'; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'alphaValue' to 102. let alphaValue = alpha(c); // Draw the right rectangle. fill(alphaValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light blue and the right one is charcoal gray.'); } ` p5 Color Creating & Reading Gets the blue value of a color. `blue()` extracts the blue value from a p5.Color object, an array of color components, or a CSS color string. By default, `blue()` returns a color's blue value in the range 0 to 255. If the colorMode() is set to RGB, it returns the blue value in the given range. method blue color p5.Color object, array of color components, or CSS color string. p5.Color|Number[]|String ### return the blue value. Number ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using RGB values. let c = color(175, 100, 220); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'blueValue' to 220. let blueValue = blue(c); // Draw the right rectangle. fill(0, 0, blueValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is royal blue.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a color array. let c = [175, 100, 220]; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'blueValue' to 220. let blueValue = blue(c); // Draw the right rectangle. fill(0, 0, blueValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is royal blue.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a CSS color string. let c = 'rgb(175, 100, 220)'; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'blueValue' to 220. let blueValue = blue(c); // Draw the right rectangle. fill(0, 0, blueValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is royal blue.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use RGB color with values in the range 0-100. colorMode(RGB, 100); // Create a p5.Color object using RGB values. let c = color(69, 39, 86); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'blueValue' to 86. let blueValue = blue(c); // Draw the right rectangle. fill(0, 0, blueValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is royal blue.'); } ` p5 Color Creating & Reading Gets the brightness value of a color. `brightness()` extracts the HSB brightness value from a p5.Color object, an array of color components, or a CSS color string. By default, `brightness()` returns a color's HSB brightness in the range 0 to 100. If the colorMode() is set to HSB, it returns the brightness value in the given range. method brightness color p5.Color object, array of color components, or CSS color string. p5.Color|Number[]|String ### return the brightness value. Number ` function setup() { createCanvas(100, 100); background(200); // Use HSB color. colorMode(HSB); // Create a p5.Color object. let c = color(0, 50, 100); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'brightValue' to 100. let brightValue = brightness(c); // Draw the right rectangle. fill(brightValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is white.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use HSB color. colorMode(HSB); // Create a color array. let c = [0, 50, 100]; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'brightValue' to 100. let brightValue = brightness(c); // Draw the right rectangle. fill(brightValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is white.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use HSB color. colorMode(HSB); // Create a CSS color string. let c = 'rgb(255, 128, 128)'; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'brightValue' to 100. let brightValue = brightness(c); // Draw the right rectangle. fill(brightValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is white.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use HSB color with values in the range 0-255. colorMode(HSB, 255); // Create a p5.Color object. let c = color(0, 127, 255); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'brightValue' to 255. let brightValue = brightness(c); // Draw the right rectangle. fill(brightValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is white.'); } ` p5 Color Creating & Reading Creates a p5.Color object. By default, the parameters are interpreted as RGB values. Calling `color(255, 204, 0)` will return a bright yellow color. The way these parameters are interpreted may be changed with the colorMode() function. The version of `color()` with one parameter interprets the value one of two ways. If the parameter is a number, it's interpreted as a grayscale value. If the parameter is a string, it's interpreted as a CSS color string. The version of `color()` with two parameters interprets the first one as a grayscale value. The second parameter sets the alpha (transparency) value. The version of `color()` with three parameters interprets them as RGB, HSB, or HSL colors, depending on the current `colorMode()`. The version of `color()` with four parameters interprets them as RGBA, HSBA, or HSLA colors, depending on the current `colorMode()`. The last parameter sets the alpha (transparency) value. method color ### return resulting color. p5.Color ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using RGB values. let c = color(255, 204, 0); // Draw the square. fill(c); noStroke(); square(30, 20, 55); describe('A yellow square on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using RGB values. let c1 = color(255, 204, 0); // Draw the left circle. fill(c1); noStroke(); circle(25, 25, 80); // Create a p5.Color object using a grayscale value. let c2 = color(65); // Draw the right circle. fill(c2); circle(75, 75, 80); describe( 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using a named color. let c = color('magenta'); // Draw the square. fill(c); noStroke(); square(20, 20, 60); describe('A magenta square on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using a hex color code. let c1 = color('#0f0'); // Draw the left rectangle. fill(c1); noStroke(); rect(0, 10, 45, 80); // Create a p5.Color object using a hex color code. let c2 = color('#00ff00'); // Draw the right rectangle. fill(c2); rect(55, 10, 45, 80); describe('Two bright green rectangles on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using a RGB color string. let c1 = color('rgb(0, 0, 255)'); // Draw the top-left square. fill(c1); square(10, 10, 35); // Create a p5.Color object using a RGB color string. let c2 = color('rgb(0%, 0%, 100%)'); // Draw the top-right square. fill(c2); square(55, 10, 35); // Create a p5.Color object using a RGBA color string. let c3 = color('rgba(0, 0, 255, 1)'); // Draw the bottom-left square. fill(c3); square(10, 55, 35); // Create a p5.Color object using a RGBA color string. let c4 = color('rgba(0%, 0%, 100%, 1)'); // Draw the bottom-right square. fill(c4); square(55, 55, 35); describe('Four blue squares in the corners of a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using a HSL color string. let c1 = color('hsl(160, 100%, 50%)'); // Draw the left rectangle. noStroke(); fill(c1); rect(0, 10, 45, 80); // Create a p5.Color object using a HSLA color string. let c2 = color('hsla(160, 100%, 50%, 0.5)'); // Draw the right rectangle. fill(c2); rect(55, 10, 45, 80); describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using a HSB color string. let c1 = color('hsb(160, 100%, 50%)'); // Draw the left rectangle. noStroke(); fill(c1); rect(0, 10, 45, 80); // Create a p5.Color object using a HSBA color string. let c2 = color('hsba(160, 100%, 50%, 0.5)'); // Draw the right rectangle. fill(c2); rect(55, 10, 45, 80); describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object using RGB values. let c1 = color(50, 55, 100); // Draw the left rectangle. fill(c1); rect(0, 10, 45, 80); // Switch the color mode to HSB. colorMode(HSB, 100); // Create a p5.Color object using HSB values. let c2 = color(50, 55, 100); // Draw the right rectangle. fill(c2); rect(55, 10, 45, 80); describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.'); } ` p5 Color Creating & Reading gray number specifying value between white and black. Number alpha alpha value relative to current color range (default is 0-255). Number ##### return resulting color. p5.Color v1 red or hue value relative to the current color range. Number v2 green or saturation value relative to the current color range. Number v3 blue or brightness value relative to the current color range. Number alpha Number ##### return p5.Color value a color string. String ##### return p5.Color values an array containing the red, green, blue, and alpha components of the color. Number[] ##### return p5.Color color p5.Color ##### return p5.Color Gets the green value of a color. `green()` extracts the green value from a p5.Color object, an array of color components, or a CSS color string. By default, `green()` returns a color's green value in the range 0 to 255. If the colorMode() is set to RGB, it returns the green value in the given range. method green color p5.Color object, array of color components, or CSS color string. p5.Color|Number[]|String ### return the green value. Number ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object. let c = color(175, 100, 220); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'greenValue' to 100. let greenValue = green(c); // Draw the right rectangle. fill(0, greenValue, 0); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is dark green.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a color array. let c = [175, 100, 220]; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'greenValue' to 100. let greenValue = green(c); // Draw the right rectangle. fill(0, greenValue, 0); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is dark green.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a CSS color string. let c = 'rgb(175, 100, 220)'; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'greenValue' to 100. let greenValue = green(c); // Draw the right rectangle. fill(0, greenValue, 0); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is dark green.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use RGB color with values in the range 0-100. colorMode(RGB, 100); // Create a p5.Color object using RGB values. let c = color(69, 39, 86); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'greenValue' to 39. let greenValue = green(c); // Draw the right rectangle. fill(0, greenValue, 0); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is dark green.'); } ` p5 Color Creating & Reading Gets the hue value of a color. `hue()` extracts the hue value from a p5.Color object, an array of color components, or a CSS color string. Hue describes a color's position on the color wheel. By default, `hue()` returns a color's HSL hue in the range 0 to 360. If the colorMode() is set to HSB or HSL, it returns the hue value in the given mode. method hue color p5.Color object, array of color components, or CSS color string. p5.Color|Number[]|String ### return the hue value. Number ` function setup() { createCanvas(100, 100); background(200); // Use HSL color. colorMode(HSL); // Create a p5.Color object. let c = color(0, 50, 100); // Draw the left rectangle. noStroke(); fill(c); rect(15, 20, 35, 60); // Set 'hueValue' to 0. let hueValue = hue(c); // Draw the right rectangle. fill(hueValue); rect(50, 20, 35, 60); describe( 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Use HSL color. colorMode(HSL); // Create a color array. let c = [0, 50, 100]; // Draw the left rectangle. noStroke(); fill(c); rect(15, 20, 35, 60); // Set 'hueValue' to 0. let hueValue = hue(c); // Draw the right rectangle. fill(hueValue); rect(50, 20, 35, 60); describe( 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Use HSL color. colorMode(HSL); // Create a CSS color string. let c = 'rgb(255, 128, 128)'; // Draw the left rectangle. noStroke(); fill(c); rect(15, 20, 35, 60); // Set 'hueValue' to 0. let hueValue = hue(c); // Draw the right rectangle. fill(hueValue); rect(50, 20, 35, 60); describe( 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.' ); } ` p5 Color Creating & Reading Blends two colors to find a third color between them. The `amt` parameter specifies the amount to interpolate between the two values. 0 is equal to the first color, 0.1 is very near the first color, 0.5 is halfway between the two colors, and so on. Negative numbers are set to 0. Numbers greater than 1 are set to 1. This differs from the behavior of lerp. It's necessary because numbers outside of the interval [0, 1] will produce strange and unexpected colors. The way that colors are interpolated depends on the current colorMode(). method lerpColor c1 interpolate from this color (any value created by the color() function). p5.Color c2 interpolate to this color (any value created by the color() function). p5.Color amt number between 0 and 1. Number ### return interpolated color. p5.Color ` function setup() { createCanvas(100, 100); background(200); // Create p5.Color objects to interpolate between. let from = color(218, 165, 32); let to = color(72, 61, 139); // Create intermediate colors. let interA = lerpColor(from, to, 0.33); let interB = lerpColor(from, to, 0.66); // Draw the left rectangle. noStroke(); fill(from); rect(10, 20, 20, 60); // Draw the left-center rectangle. fill(interA); rect(30, 20, 20, 60); // Draw the right-center rectangle. fill(interB); rect(50, 20, 20, 60); // Draw the right rectangle. fill(to); rect(70, 20, 20, 60); describe( 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.' ); } ` p5 Color Creating & Reading Blends multiple colors to find a color between them. The `amt` parameter specifies the amount to interpolate between the color stops which are colors at each `amt` value "location" with `amt` values that are between 2 color stops interpolating between them based on its relative distance to both. The way that colors are interpolated depends on the current colorMode(). method paletteLerp colors_stops color stops to interpolate from [p5.Color, Number][] amt number to use to interpolate relative to color stops Number ### return interpolated color. p5.Color ` function setup() { createCanvas(400, 400); } function draw() { // The background goes from white to red to green to blue fill background(paletteLerp([ ['white', 0], ['red', 0.05], ['green', 0.25], ['blue', 1] ], millis() / 10000 % 1)); } ` p5 Color Creating & Reading Gets the lightness value of a color. `lightness()` extracts the HSL lightness value from a p5.Color object, an array of color components, or a CSS color string. By default, `lightness()` returns a color's HSL lightness in the range 0 to 100. If the colorMode() is set to HSL, it returns the lightness value in the given range. method lightness color p5.Color object, array of color components, or CSS color string. p5.Color|Number[]|String ### return the lightness value. Number ` function setup() { createCanvas(100, 100); background(50); // Use HSL color. colorMode(HSL); // Create a p5.Color object using HSL values. let c = color(0, 100, 75); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'lightValue' to 75. let lightValue = lightness(c); // Draw the right rectangle. fill(lightValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is gray.'); } ` ` function setup() { createCanvas(100, 100); background(50); // Use HSL color. colorMode(HSL); // Create a color array. let c = [0, 100, 75]; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'lightValue' to 75. let lightValue = lightness(c); // Draw the right rectangle. fill(lightValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is gray.'); } ` ` function setup() { createCanvas(100, 100); background(50); // Use HSL color. colorMode(HSL); // Create a CSS color string. let c = 'rgb(255, 128, 128)'; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'lightValue' to 75. let lightValue = lightness(c); // Draw the right rectangle. fill(lightValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is gray.'); } ` ` function setup() { createCanvas(100, 100); background(50); // Use HSL color with values in the range 0-255. colorMode(HSL, 255); // Create a p5.Color object using HSL values. let c = color(0, 255, 191.5); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'lightValue' to 191.5. let lightValue = lightness(c); // Draw the right rectangle. fill(lightValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is gray.'); } ` p5 Color Creating & Reading Gets the red value of a color. `red()` extracts the red value from a p5.Color object, an array of color components, or a CSS color string. By default, `red()` returns a color's red value in the range 0 to 255. If the colorMode() is set to RGB, it returns the red value in the given range. method red color p5.Color object, array of color components, or CSS color string. p5.Color|Number[]|String ### return the red value. Number ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object. let c = color(175, 100, 220); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'redValue' to 175. let redValue = red(c); // Draw the right rectangle. fill(redValue, 0, 0); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is red.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a color array. let c = [175, 100, 220]; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'redValue' to 175. let redValue = red(c); // Draw the right rectangle. fill(redValue, 0, 0); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is red.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create a CSS color string. let c = 'rgb(175, 100, 220)'; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'redValue' to 175. let redValue = red(c); // Draw the right rectangle. fill(redValue, 0, 0); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is red.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use RGB color with values in the range 0-100. colorMode(RGB, 100); // Create a p5.Color object. let c = color(69, 39, 86); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'redValue' to 69. let redValue = red(c); // Draw the right rectangle. fill(redValue, 0, 0); rect(50, 15, 35, 70); describe('Two rectangles. The left one is light purple and the right one is red.'); } ` p5 Color Creating & Reading Gets the saturation value of a color. `saturation()` extracts the saturation value from a p5.Color object, an array of color components, or a CSS color string. Saturation is scaled differently in HSB and HSL. By default, `saturation()` returns a color's HSL saturation in the range 0 to 100. If the colorMode() is set to HSB or HSL, it returns the saturation value in the given mode. method saturation color p5.Color object, array of color components, or CSS color string. p5.Color|Number[]|String ### return the saturation value Number ` function setup() { createCanvas(100, 100); background(50); // Use HSB color. colorMode(HSB); // Create a p5.Color object. let c = color(0, 50, 100); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'satValue' to 50. let satValue = saturation(c); // Draw the right rectangle. fill(satValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is dark gray.'); } ` ` function setup() { createCanvas(100, 100); background(50); // Use HSB color. colorMode(HSB); // Create a color array. let c = [0, 50, 100]; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'satValue' to 100. let satValue = saturation(c); // Draw the right rectangle. fill(satValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is gray.'); } ` ` function setup() { createCanvas(100, 100); background(50); // Use HSB color. colorMode(HSB); // Create a CSS color string. let c = 'rgb(255, 128, 128)'; // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'satValue' to 100. let satValue = saturation(c); // Draw the right rectangle. fill(satValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is gray.'); } ` ` function setup() { createCanvas(100, 100); background(50); // Use HSL color. colorMode(HSL); // Create a p5.Color object. let c = color(0, 100, 75); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'satValue' to 100. let satValue = saturation(c); // Draw the right rectangle. fill(satValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is white.'); } ` ` function setup() { createCanvas(100, 100); background(50); // Use HSL color with values in the range 0-255. colorMode(HSL, 255); // Create a p5.Color object. let c = color(0, 255, 191.5); // Draw the left rectangle. noStroke(); fill(c); rect(15, 15, 35, 70); // Set 'satValue' to 255. let satValue = saturation(c); // Draw the right rectangle. fill(satValue); rect(50, 15, 35, 70); describe('Two rectangles. The left one is salmon pink and the right one is white.'); } ` p5 Color Creating & Reading CSS named colors. p5 Color Creating & Reading These regular expressions are used to build up the patterns for matching viable CSS color strings: fragmenting the regexes in this way increases the legibility and comprehensibility of the code. Note that RGB values of .9 are not parsed by IE, but are supported here for color string consistency. p5 Color Creating & Reading Full color string patterns. The capture groups are necessary. p5 Color Creating & Reading Returns the color formatted as a `String`. Calling `myColor.toString()` can be useful for debugging, as in `print(myColor.toString())`. It's also helpful for using p5.js with other libraries. The parameter, `format`, is optional. If a format string is passed, as in `myColor.toString('#rrggbb')`, it will determine how the color string is formatted. By default, color strings are formatted as `'rgba(r, g, b, a)'`. method toString format how the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages. String ### return the formatted string. String ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object. let myColor = color('darkorchid'); // Style the text. textAlign(CENTER); textSize(16); // Display the text. text(myColor.toString('#rrggbb'), 50, 50); describe('The text "#9932cc" written in purple on a gray background.'); } ` p5.Color Color Creating & Reading Sets the red component of a color. The range depends on the colorMode(). In the default RGB mode it's between 0 and 255. method setRed red the new red value. Number ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object. let c = color(255, 128, 128); // Draw the left rectangle. noStroke(); fill(c); rect(15, 20, 35, 60); // Change the red value. c.setRed(64); // Draw the right rectangle. fill(c); rect(50, 20, 35, 60); describe('Two rectangles. The left one is salmon pink and the right one is teal.'); } ` p5.Color Color Creating & Reading Sets the green component of a color. The range depends on the colorMode(). In the default RGB mode it's between 0 and 255. method setGreen green the new green value. Number ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object. let c = color(255, 128, 128); // Draw the left rectangle. noStroke(); fill(c); rect(15, 20, 35, 60); // Change the green value. c.setGreen(255); // Draw the right rectangle. fill(c); rect(50, 20, 35, 60); describe('Two rectangles. The left one is salmon pink and the right one is yellow.'); } ` p5.Color Color Creating & Reading Sets the blue component of a color. The range depends on the colorMode(). In the default RGB mode it's between 0 and 255. method setBlue blue the new blue value. Number ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object. let c = color(255, 128, 128); // Draw the left rectangle. noStroke(); fill(c); rect(15, 20, 35, 60); // Change the blue value. c.setBlue(255); // Draw the right rectangle. fill(c); rect(50, 20, 35, 60); describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.'); } ` p5.Color Color Creating & Reading Sets the alpha (transparency) value of a color. The range depends on the colorMode(). In the default RGB mode it's between 0 and 255. method setAlpha alpha the new alpha value. Number ` function setup() { createCanvas(100, 100); background(200); // Create a p5.Color object. let c = color(255, 128, 128); // Draw the left rectangle. noStroke(); fill(c); rect(15, 20, 35, 60); // Change the alpha value. c.setAlpha(128); // Draw the right rectangle. fill(c); rect(50, 20, 35, 60); describe('Two rectangles. The left one is salmon pink and the right one is faded pink.'); } ` p5.Color Color Creating & Reading Hue is the same in HSB and HSL, but the maximum value may be different. This function will return the HSB-normalized saturation when supplied with an HSB color object, but will default to the HSL-normalized saturation otherwise. p5.Color Color Creating & Reading Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object, but will default to the HSL saturation otherwise. p5.Color Color Creating & Reading For HSB and HSL, interpret the gray level as a brightness/lightness value (they are equivalent when chroma is zero). For RGB, normalize the gray level according to the blue maximum. p5.Color Color Creating & Reading Starts defining a shape that will mask any shapes drawn afterward. Any shapes drawn between `beginClip()` and endClip() will add to the mask shape. The mask will apply to anything drawn after endClip(). The parameter, `options`, is optional. If an object with an `invert` property is passed, as in `beginClip({ invert: true })`, it will be used to set the masking mode. `{ invert: true }` inverts the mask, creating holes in shapes that are masked. `invert` is `false` by default. Masks can be contained between the push() and pop() functions. Doing so allows unmasked shapes to be drawn after masked shapes. Masks can also be defined in a callback function that's passed to clip(). method beginClip options an object containing clip settings. Object ` function setup() { createCanvas(100, 100); background(200); // Create a mask. beginClip(); triangle(15, 37, 30, 13, 43, 37); circle(45, 45, 7); endClip(); // Draw a backing shape. square(5, 5, 45); describe('A white triangle and circle on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create an inverted mask. beginClip({ invert: true }); triangle(15, 37, 30, 13, 43, 37); circle(45, 45, 7); endClip(); // Draw a backing shape. square(5, 5, 45); describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.'); } ` ` function setup() { createCanvas(100, 100); background(200); noStroke(); // Draw a masked shape. push(); // Create a mask. beginClip(); triangle(15, 37, 30, 13, 43, 37); circle(45, 45, 7); endClip(); // Draw a backing shape. square(5, 5, 45); pop(); // Translate the origin to the center. translate(50, 50); // Draw an inverted masked shape. push(); // Create an inverted mask. beginClip({ invert: true }); triangle(15, 37, 30, 13, 43, 37); circle(45, 45, 7); endClip(); // Draw a backing shape. square(5, 5, 45); pop(); describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A silhouette of a rotating torus colored fuchsia.'); } function draw() { background(200); // Create a mask. beginClip(); push(); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); scale(0.5); torus(30, 15); pop(); endClip(); // Draw a backing shape. noStroke(); fill('fuchsia'); plane(100); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.'); } function draw() { background(200); // Create a mask. beginClip(); push(); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); scale(0.5); torus(30, 15); pop(); endClip(); // Draw a backing shape. noStroke(); beginShape(QUAD_STRIP); fill(0, 255, 255); vertex(-width / 2, -height / 2); vertex(width / 2, -height / 2); fill(100, 0, 100); vertex(-width / 2, height / 2); vertex(width / 2, height / 2); endShape(); } ` p5 Color Setting Ends defining a mask that was started with beginClip(). method endClip ` function setup() { createCanvas(100, 100); background(200); // Create a mask. beginClip(); triangle(15, 37, 30, 13, 43, 37); circle(45, 45, 7); endClip(); // Draw a backing shape. square(5, 5, 45); describe('A white triangle and circle on a gray background.'); } ` p5 Color Setting Defines a shape that will mask any shapes drawn afterward. The first parameter, `callback`, is a function that defines the mask. Any shapes drawn in `callback` will add to the mask shape. The mask will apply to anything drawn after `clip()` is called. The second parameter, `options`, is optional. If an object with an `invert` property is passed, as in `beginClip({ invert: true })`, it will be used to set the masking mode. `{ invert: true }` inverts the mask, creating holes in shapes that are masked. `invert` is `false` by default. Masks can be contained between the push() and pop() functions. Doing so allows unmasked shapes to be drawn after masked shapes. Masks can also be defined with beginClip() and endClip(). method clip callback a function that draws the mask shape. Function options an object containing clip settings. Object ` function setup() { createCanvas(100, 100); background(200); // Create a mask. clip(mask); // Draw a backing shape. square(5, 5, 45); describe('A white triangle and circle on a gray background.'); } // Declare a function that defines the mask. function mask() { triangle(15, 37, 30, 13, 43, 37); circle(45, 45, 7); } ` ` function setup() { createCanvas(100, 100); background(200); // Create an inverted mask. clip(mask, { invert: true }); // Draw a backing shape. square(5, 5, 45); describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.'); } // Declare a function that defines the mask. function mask() { triangle(15, 37, 30, 13, 43, 37); circle(45, 45, 7); } ` ` function setup() { createCanvas(100, 100); background(200); noStroke(); // Draw a masked shape. push(); // Create a mask. clip(mask); // Draw a backing shape. square(5, 5, 45); pop(); // Translate the origin to the center. translate(50, 50); // Draw an inverted masked shape. push(); // Create an inverted mask. clip(mask, { invert: true }); // Draw a backing shape. square(5, 5, 45); pop(); describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.'); } // Declare a function that defines the mask. function mask() { triangle(15, 37, 30, 13, 43, 37); circle(45, 45, 7); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A silhouette of a rotating torus colored fuchsia.'); } function draw() { background(200); // Create a mask. clip(mask); // Draw a backing shape. noStroke(); fill('fuchsia'); plane(100); } // Declare a function that defines the mask. function mask() { push(); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); scale(0.5); torus(30, 15); pop(); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.'); } function draw() { background(200); // Create a mask. clip(mask); // Draw a backing shape. noStroke(); beginShape(QUAD_STRIP); fill(0, 255, 255); vertex(-width / 2, -height / 2); vertex(width / 2, -height / 2); fill(100, 0, 100); vertex(-width / 2, height / 2); vertex(width / 2, height / 2); endShape(); } // Declare a function that defines the mask. function mask() { push(); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); scale(0.5); torus(30, 15); pop(); } ` p5 Color Setting Sets the color used for the background of the canvas. By default, the background is transparent. `background()` is typically used within draw() to clear the display window at the beginning of each frame. It can also be used inside setup() to set the background on the first frame of animation. The version of `background()` with one parameter interprets the value one of four ways. If the parameter is a `Number`, it's interpreted as a grayscale value. If the parameter is a `String`, it's interpreted as a CSS color string. RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the parameter is a p5.Color object, it will be used as the background color. If the parameter is a p5.Image object, it will be used as the background image. The version of `background()` with two parameters interprets the first one as a grayscale value. The second parameter sets the alpha (transparency) value. The version of `background()` with three parameters interprets them as RGB, HSB, or HSL colors, depending on the current colorMode(). By default, colors are specified in RGB values. Calling `background(255, 204, 0)` sets the background a bright yellow color. method background ` function setup() { createCanvas(100, 100); // A grayscale value. background(51); describe('A canvas with a dark charcoal gray background.'); } ` ` function setup() { createCanvas(100, 100); // A grayscale value and an alpha value. background(51, 0.4); describe('A canvas with a transparent gray background.'); } ` ` function setup() { createCanvas(100, 100); // R, G & B values. background(255, 204, 0); describe('A canvas with a yellow background.'); } ` ` function setup() { createCanvas(100, 100); // Use HSB color. colorMode(HSB); // H, S & B values. background(255, 204, 100); describe('A canvas with a royal blue background.'); } ` ` function setup() { createCanvas(100, 100); // A CSS named color. background('red'); describe('A canvas with a red background.'); } ` ` function setup() { createCanvas(100, 100); // Three-digit hex RGB notation. background('#fae'); describe('A canvas with a pink background.'); } ` ` function setup() { createCanvas(100, 100); // Six-digit hex RGB notation. background('#222222'); describe('A canvas with a black background.'); } ` ` function setup() { createCanvas(100, 100); // Integer RGB notation. background('rgb(0, 255, 0)'); describe('A canvas with a bright green background.'); } ` ` function setup() { createCanvas(100, 100); // Integer RGBA notation. background('rgba(0, 255, 0, 0.25)'); describe('A canvas with a transparent green background.'); } ` ` function setup() { createCanvas(100, 100); // Percentage RGB notation. background('rgb(100%, 0%, 10%)'); describe('A canvas with a red background.'); } ` ` function setup() { createCanvas(100, 100); // Percentage RGBA notation. background('rgba(100%, 0%, 100%, 0.5)'); describe('A canvas with a transparent purple background.'); } ` ` function setup() { createCanvas(100, 100); // A p5.Color object. let c = color(0, 0, 255); background(c); describe('A canvas with a blue background.'); } ` p5 Color Setting color any value created by the color() function p5.Color colorstring color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex. String a opacity of the background relative to current color range (default is 0-255). Number gray specifies a value between white and black. Number a Number v1 red value if color mode is RGB, or hue value if color mode is HSB. Number v2 green value if color mode is RGB, or saturation value if color mode is HSB. Number v3 blue value if color mode is RGB, or brightness value if color mode is HSB. Number a Number values an array containing the red, green, blue and alpha components of the color. Number[] image image created with loadImage() or createImage(), to set as background. (must be same size as the sketch window). p5.Image a Number Clears the pixels on the canvas. `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't clear objects created by `createX()` functions such as createGraphics(), createVideo(), and createImg(). These objects will remain unchanged after calling `clear()` and can be redrawn. In WebGL mode, this function can clear the screen to a specific color. It interprets four numeric parameters as normalized RGBA color values. It also clears the depth buffer. If you are not using the WebGL renderer, these parameters will have no effect. method clear ` function setup() { createCanvas(100, 100); background(200); describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.'); } function draw() { circle(mouseX, mouseY, 20); } function mousePressed() { clear(); background(200); } ` ` let pg; function setup() { createCanvas(100, 100); background(200); pg = createGraphics(60, 60); pg.background(200); pg.noStroke(); pg.circle(pg.width / 2, pg.height / 2, 15); image(pg, 20, 20); describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.'); } function mousePressed() { clear(); image(pg, 20, 20); } ` r normalized red value. Number g normalized green value. Number b normalized blue value. Number a normalized alpha value. Number p5 Color Setting Changes the way color values are interpreted. By default, the `Number` parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to calling `colorMode(RGB, 255)`. Pure red is `color(255, 0, 0)` in this model. Calling `colorMode(RGB, 100)` sets colors to use RGB color values between 0 and 100. Pure red is `color(100, 0, 0)` in this model. Calling `colorMode(HSB)` or `colorMode(HSL)` changes to HSB or HSL system instead of RGB. Pure red is `color(0, 100, 100)` in HSB and `color(0, 100, 50)` in HSL. p5.Color objects remember the mode that they were created in. Changing modes doesn't affect their appearance. method colorMode ` function setup() { createCanvas(100, 100); background(200); // Fill with pure red. fill(255, 0, 0); circle(50, 50, 25); describe('A gray square with a red circle at its center.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use RGB color with values in the range 0-100. colorMode(RGB, 100); // Fill with pure red. fill(100, 0, 0); circle(50, 50, 25); describe('A gray square with a red circle at its center.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use HSB color. colorMode(HSB); // Fill with pure red. fill(0, 100, 100); circle(50, 50, 25); describe('A gray square with a red circle at its center.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use HSL color. colorMode(HSL); // Fill with pure red. fill(0, 100, 50); circle(50, 50, 25); describe('A gray square with a red circle at its center.'); } ` ` function setup() { createCanvas(100, 100); // Use RGB color with values in the range 0-100. colorMode(RGB, 100); for (let x = 0; x < 100; x += 1) { for (let y = 0; y < 100; y += 1) { stroke(x, y, 0); point(x, y); } } describe( 'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.' ); } ` ` function setup() { createCanvas(100, 100); // Use HSB color with values in the range 0-100. colorMode(HSB, 100); for (let x = 0; x < 100; x += 1) { for (let y = 0; y < 100; y += 1) { stroke(x, y, 100); point(x, y); } } describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.'); } ` ` function setup() { createCanvas(100, 100); // Create a p5.Color object. let myColor = color(180, 175, 230); background(myColor); // Use RGB color with values in the range 0-1. colorMode(RGB, 1); // Get the red, green, and blue color components. let redValue = red(myColor); let greenValue = green(myColor); let blueValue = blue(myColor); // Round the color components for display. redValue = round(redValue, 2); greenValue = round(greenValue, 2); blueValue = round(blueValue, 2); // Display the color components. text(`Red: ${redValue}`, 10, 10, 80, 80); text(`Green: ${greenValue}`, 10, 40, 80, 80); text(`Blue: ${blueValue}`, 10, 70, 80, 80); describe('A purple canvas with the red, green, and blue decimal values of the color written on it.'); } ` ` function setup() { createCanvas(100, 100); background(255); // Use RGB color with alpha values in the range 0-1. colorMode(RGB, 255, 255, 255, 1); noFill(); strokeWeight(4); stroke(255, 0, 10, 0.3); circle(40, 40, 50); circle(50, 60, 50); describe('Two overlapping translucent pink circle outlines.'); } ` p5 Color Setting mode either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness). Constant max range for all values. Number mode Constant max1 range for the red or hue depending on the current color mode. Number max2 range for the green or saturation depending on the current color mode. Number max3 range for the blue or brightness/lightness depending on the current color mode. Number maxA range for the alpha. Number Sets the color used to fill shapes. Calling `fill(255, 165, 0)` or `fill('orange')` means all shapes drawn after the fill command will be filled with the color orange. The version of `fill()` with one parameter interprets the value one of three ways. If the parameter is a `Number`, it's interpreted as a grayscale value. If the parameter is a `String`, it's interpreted as a CSS color string. A p5.Color object can also be provided to set the fill color. The version of `fill()` with three parameters interprets them as RGB, HSB, or HSL colors, depending on the current colorMode(). The default color space is RGB, with each value in the range from 0 to 255. method fill ` function setup() { createCanvas(100, 100); background(200); // A grayscale value. fill(51); square(20, 20, 60); describe('A dark charcoal gray square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // R, G & B values. fill(255, 204, 0); square(20, 20, 60); describe('A yellow square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(100); // Use HSB color. colorMode(HSB); // H, S & B values. fill(255, 204, 100); square(20, 20, 60); describe('A royal blue square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // A CSS named color. fill('red'); square(20, 20, 60); describe('A red square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Three-digit hex RGB notation. fill('#fae'); square(20, 20, 60); describe('A pink square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Six-digit hex RGB notation. fill('#A251FA'); square(20, 20, 60); describe('A purple square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Integer RGB notation. fill('rgb(0, 255, 0)'); square(20, 20, 60); describe('A bright green square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Integer RGBA notation. fill('rgba(0, 255, 0, 0.25)'); square(20, 20, 60); describe('A soft green rectange with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Percentage RGB notation. fill('rgb(100%, 0%, 10%)'); square(20, 20, 60); describe('A red square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Percentage RGBA notation. fill('rgba(100%, 0%, 100%, 0.5)'); square(20, 20, 60); describe('A dark fuchsia square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // A p5.Color object. let c = color(0, 0, 255); fill(c); square(20, 20, 60); describe('A blue square with a black outline.'); } ` p5 Color Setting v1 red value if color mode is RGB or hue value if color mode is HSB. Number v2 green value if color mode is RGB or saturation value if color mode is HSB. Number v3 blue value if color mode is RGB or brightness value if color mode is HSB. Number alpha alpha value, controls transparency (0 - transparent, 255 - opaque). Number value a color string. String gray a grayscale value. Number alpha Number values an array containing the red, green, blue & and alpha components of the color. Number[] color the fill color. p5.Color Disables setting the fill color for shapes. Calling `noFill()` is the same as making the fill completely transparent, as in `fill(0, 0)`. If both noStroke() and `noFill()` are called, nothing will be drawn to the screen. method noFill ` function setup() { createCanvas(100, 100); background(200); // Draw the top square. square(32, 10, 35); // Draw the bottom square. noFill(); square(32, 55, 35); describe('A white square on above an empty square. Both squares have black outlines.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A purple cube wireframe spinning on a black canvas.'); } function draw() { background(0); // Style the box. noFill(); stroke(100, 100, 240); // Rotate the coordinates. rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); // Draw the box. box(45); } ` p5 Color Setting Disables drawing points, lines, and the outlines of shapes. Calling `noStroke()` is the same as making the stroke completely transparent, as in `stroke(0, 0)`. If both `noStroke()` and noFill() are called, nothing will be drawn to the screen. method noStroke ` function setup() { createCanvas(100, 100); background(200); noStroke(); square(20, 20, 60); describe('A white square with no outline.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A pink cube with no edge outlines spinning on a black canvas.'); } function draw() { background(0); // Style the box. noStroke(); fill(240, 150, 150); // Rotate the coordinates. rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); // Draw the box. box(45); } ` p5 Color Setting Sets the color used to draw points, lines, and the outlines of shapes. Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn after calling `stroke()` will be filled with the color orange. The way these parameters are interpreted may be changed with the colorMode() function. The version of `stroke()` with one parameter interprets the value one of three ways. If the parameter is a `Number`, it's interpreted as a grayscale value. If the parameter is a `String`, it's interpreted as a CSS color string. A p5.Color object can also be provided to set the stroke color. The version of `stroke()` with two parameters interprets the first one as a grayscale value. The second parameter sets the alpha (transparency) value. The version of `stroke()` with three parameters interprets them as RGB, HSB, or HSL colors, depending on the current `colorMode()`. The version of `stroke()` with four parameters interprets them as RGBA, HSBA, or HSLA colors, depending on the current `colorMode()`. The last parameter sets the alpha (transparency) value. method stroke ` function setup() { createCanvas(100, 100); background(200); // A grayscale value. strokeWeight(4); stroke(51); square(20, 20, 60); describe('A white square with a dark charcoal gray outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // R, G & B values. stroke(255, 204, 0); strokeWeight(4); square(20, 20, 60); describe('A white square with a yellow outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Use HSB color. colorMode(HSB); // H, S & B values. strokeWeight(4); stroke(255, 204, 100); square(20, 20, 60); describe('A white square with a royal blue outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // A CSS named color. stroke('red'); strokeWeight(4); square(20, 20, 60); describe('A white square with a red outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Three-digit hex RGB notation. stroke('#fae'); strokeWeight(4); square(20, 20, 60); describe('A white square with a pink outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Six-digit hex RGB notation. stroke('#222222'); strokeWeight(4); square(20, 20, 60); describe('A white square with a black outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Integer RGB notation. stroke('rgb(0, 255, 0)'); strokeWeight(4); square(20, 20, 60); describe('A whiite square with a bright green outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Integer RGBA notation. stroke('rgba(0, 255, 0, 0.25)'); strokeWeight(4); square(20, 20, 60); describe('A white square with a soft green outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Percentage RGB notation. stroke('rgb(100%, 0%, 10%)'); strokeWeight(4); square(20, 20, 60); describe('A white square with a red outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Percentage RGBA notation. stroke('rgba(100%, 0%, 100%, 0.5)'); strokeWeight(4); square(20, 20, 60); describe('A white square with a dark fuchsia outline.'); } ` ` function setup() { createCanvas(100, 100); background(200); // A p5.Color object. stroke(color(0, 0, 255)); strokeWeight(4); square(20, 20, 60); describe('A white square with a blue outline.'); } ` p5 Color Setting v1 red value if color mode is RGB or hue value if color mode is HSB. Number v2 green value if color mode is RGB or saturation value if color mode is HSB. Number v3 blue value if color mode is RGB or brightness value if color mode is HSB. Number alpha alpha value, controls transparency (0 - transparent, 255 - opaque). Number value a color string. String gray a grayscale value. Number alpha Number values an array containing the red, green, blue, and alpha components of the color. Number[] color the stroke color. p5.Color Starts using shapes to erase parts of the canvas. All drawing that follows `erase()` will subtract from the canvas, revealing the web page underneath. The erased areas will become transparent, allowing the content behind the canvas to show through. The fill(), stroke(), and blendMode() have no effect once `erase()` is called. The `erase()` function has two optional parameters. The first parameter sets the strength of erasing by the shape's interior. A value of 0 means that no erasing will occur. A value of 255 means that the shape's interior will fully erase the content underneath. The default value is 255 (full strength). The second parameter sets the strength of erasing by the shape's edge. A value of 0 means that no erasing will occur. A value of 255 means that the shape's edge will fully erase the content underneath. The default value is 255 (full strength). To cancel the erasing effect, use the noErase() function. `erase()` has no effect on drawing done with the image() and background() functions. method erase strengthFill a number (0-255) for the strength of erasing under a shape's interior. Defaults to 255, which is full strength. Number strengthStroke a number (0-255) for the strength of erasing under a shape's edge. Defaults to 255, which is full strength. Number ` function setup() { createCanvas(100, 100); background(100, 100, 250); // Draw a pink square. fill(250, 100, 100); square(20, 20, 60); // Erase a circular area. erase(); circle(25, 30, 30); noErase(); describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.'); } ` ` function setup() { createCanvas(100, 100); background(100, 100, 250); // Draw a pink square. fill(250, 100, 100); square(20, 20, 60); // Erase a circular area. strokeWeight(5); erase(150, 255); circle(25, 30, 30); noErase(); describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.'); } ` p5 Color Setting Ends erasing that was started with erase(). The fill(), stroke(), and blendMode() settings will return to what they were prior to calling erase(). method noErase ` function setup() { createCanvas(100, 100); background(235, 145, 15); // Draw the left rectangle. noStroke(); fill(30, 45, 220); rect(30, 10, 10, 80); // Erase a circle. erase(); circle(50, 50, 60); noErase(); // Draw the right rectangle. rect(70, 10, 10, 80); describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.'); } ` p5 Color Setting p5 Color Prints out all the colors in the color pallete with white text. For color blindness testing. p5 Color p5 Color p5 Color p5 Color p5 Color This function does 3 things: 1. Bounds the desired start/stop angles for an arc (in radians) so that: 0 <= start < TWO_PI ; start <= stop < start + TWO_PI This means that the arc rendering functions don't have to be concerned with what happens if stop is smaller than start, or if the arc 'goes round more than once', etc.: they can just start at start and increase until stop and the correct arc will be drawn. 2. Optionally adjusts the angles within each quadrant to counter the naive scaling of the underlying ellipse up from the unit circle. Without this, the angles become arbitrary when width != height: 45 degrees might be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on a 'tall' ellipse. 3. Flags up when start and stop correspond to the same place on the underlying ellipse. This is useful if you want to do something special there (like rendering a whole ellipse instead). p5 Shape 2D Primitives Draws an arc. An arc is a section of an ellipse defined by the `x`, `y`, `w`, and `h` parameters. `x` and `y` set the location of the arc's center. `w` and `h` set the arc's width and height. See ellipse() and ellipseMode() for more details. The fifth and sixth parameters, `start` and `stop`, set the angles between which to draw the arc. Arcs are always drawn clockwise from `start` to `stop`. The fifth and sixth parameters, start and stop, set the angles between which to draw the arc. Arcs are always drawn clockwise from start to stop. By default, angles are given in radians, but if angleMode (DEGREES) is set, the function interprets the values in degrees. The seventh parameter, `mode`, is optional. It determines the arc's fill style. The fill modes are a semi-circle (`OPEN`), a closed semi-circle (`CHORD`), or a closed pie segment (`PIE`). The eighth parameter, `detail`, is also optional. It determines how many vertices are used to draw the arc in WebGL mode. The default value is 25. method arc x x-coordinate of the arc's ellipse. Number y y-coordinate of the arc's ellipse. Number w width of the arc's ellipse by default. Number h height of the arc's ellipse by default. Number start angle to start the arc, specified in radians. Number stop angle to stop the arc, specified in radians. Number mode optional parameter to determine the way of drawing the arc. either CHORD, PIE, or OPEN. Constant detail optional parameter for WebGL mode only. This is to specify the number of vertices that makes up the perimeter of the arc. Default value is 25. Won't draw a stroke for a detail of more than 50. Integer ` function setup() { createCanvas(100, 100); background(200); arc(50, 50, 80, 80, 0, PI + HALF_PI); describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.'); } ` ` function setup() { createCanvas(100, 100); background(200); arc(50, 50, 80, 40, 0, PI + HALF_PI); describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Bottom-right. arc(50, 55, 50, 50, 0, HALF_PI); noFill(); // Bottom-left. arc(50, 55, 60, 60, HALF_PI, PI); // Top-left. arc(50, 55, 70, 70, PI, PI + QUARTER_PI); // Top-right. arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI); describe( 'A shattered outline of an circle with a quarter of a white circle at the bottom-right.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Default fill mode. arc(50, 50, 80, 80, 0, PI + QUARTER_PI); describe('A white circle with the top-right third missing. The bottom is outlined in black.'); } ` ` function setup() { createCanvas(100, 100); background(200); // OPEN fill mode. arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN); describe( 'A white circle missing a section from the top-right. The bottom is outlined in black.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // CHORD fill mode. arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD); describe('A white circle with a black outline missing a section from the top-right.'); } ` ` function setup() { createCanvas(100, 100); background(200); // PIE fill mode. arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE); describe('A white circle with a black outline. The top-right third is missing.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); // PIE fill mode. arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE); describe('A white circle with a black outline. The top-right third is missing.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); // PIE fill mode with 5 vertices. arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5); describe('A white circle with a black outline. The top-right third is missing.'); } ` ` function setup() { createCanvas(100, 100); describe('A yellow circle on a black background. The circle opens and closes its mouth.'); } function draw() { background(0); // Style the arc. noStroke(); fill(255, 255, 0); // Update start and stop angles. let biteSize = PI / 16; let startAngle = biteSize * sin(frameCount * 0.1) + biteSize; let endAngle = TWO_PI - startAngle; // Draw the arc. arc(50, 50, 80, 80, startAngle, endAngle, PIE); } ` p5 Shape 2D Primitives Draws an ellipse (oval). An ellipse is a round shape defined by the `x`, `y`, `w`, and `h` parameters. `x` and `y` set the location of its center. `w` and `h` set its width and height. See ellipseMode() for other ways to set its position. If no height is set, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The fifth parameter, `detail`, is also optional. It determines how many vertices are used to draw the ellipse in WebGL mode. The default value is 25. method ellipse ` function setup() { createCanvas(100, 100); background(200); ellipse(50, 50, 80, 80); describe('A white circle on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); ellipse(50, 50, 80); describe('A white circle on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); ellipse(50, 50, 80, 40); describe('A white ellipse on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); ellipse(0, 0, 80, 40); describe('A white ellipse on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); // Use 6 vertices. ellipse(0, 0, 80, 40, 6); describe('A white hexagon on a gray canvas.'); } ` p5 Shape 2D Primitives x x-coordinate of the center of the ellipse. Number y y-coordinate of the center of the ellipse. Number w width of the ellipse. Number h height of the ellipse. Number x Number y Number w Number h Number detail optional parameter for WebGL mode only. This is to specify the number of vertices that makes up the perimeter of the ellipse. Default value is 25. Won't draw a stroke for a detail of more than 50. Integer Draws a circle. A circle is a round shape defined by the `x`, `y`, and `d` parameters. `x` and `y` set the location of its center. `d` sets its width and height (diameter). Every point on the circle's edge is the same distance, `0.5 * d`, from its center. `0.5 * d` (half the diameter) is the circle's radius. See ellipseMode() for other ways to set its position. method circle x x-coordinate of the center of the circle. Number y y-coordinate of the center of the circle. Number d diameter of the circle. Number ` function setup() { createCanvas(100, 100); background(200); circle(50, 50, 25); describe('A white circle with black outline in the middle of a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); circle(0, 0, 25); describe('A white circle with black outline in the middle of a gray canvas.'); } ` p5 Shape 2D Primitives Draws a straight line between two points. A line's default width is one pixel. The version of `line()` with four parameters draws the line in 2D. To color a line, use the stroke() function. To change its width, use the strokeWeight() function. A line can't be filled, so the fill() function won't affect the line's color. The version of `line()` with six parameters allows the line to be drawn in 3D space. Doing so requires adding the `WEBGL` argument to createCanvas(). method line ` function setup() { createCanvas(100, 100); background(200); line(30, 20, 85, 75); describe( 'A black line on a gray canvas running from top-center to bottom-right.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Style the line. stroke('magenta'); strokeWeight(5); line(30, 20, 85, 75); describe( 'A thick, magenta line on a gray canvas running from top-center to bottom-right.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Top. line(30, 20, 85, 20); // Right. stroke(126); line(85, 20, 85, 75); // Bottom. stroke(255); line(85, 75, 30, 75); describe( 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.' ); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); line(-20, -30, 35, 25); describe( 'A black line on a gray canvas running from top-center to bottom-right.' ); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A black line connecting two spheres. The scene spins slowly.'); } function draw() { background(200); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Draw a line. line(0, 0, 0, 30, 20, -10); // Draw the center sphere. sphere(10); // Translate to the second point. translate(30, 20, -10); // Draw the bottom-right sphere. sphere(10); } ` p5 Shape 2D Primitives x1 the x-coordinate of the first point. Number y1 the y-coordinate of the first point. Number x2 the x-coordinate of the second point. Number y2 the y-coordinate of the second point. Number x1 Number y1 Number z1 the z-coordinate of the first point. Number x2 Number y2 Number z2 the z-coordinate of the second point. Number Draws a single point in space. A point's default width is one pixel. To color a point, use the stroke() function. To change its width, use the strokeWeight() function. A point can't be filled, so the fill() function won't affect the point's color. The version of `point()` with two parameters allows the point's location to be set with its x- and y-coordinates, as in `point(10, 20)`. The version of `point()` with three parameters allows the point to be drawn in 3D space with x-, y-, and z-coordinates, as in `point(10, 20, 30)`. Doing so requires adding the `WEBGL` argument to createCanvas(). The version of `point()` with one parameter allows the point's location to be set with a p5.Vector object. method point ` function setup() { createCanvas(100, 100); background(200); // Top-left. point(30, 20); // Top-right. point(85, 20); // Bottom-right. point(85, 75); // Bottom-left. point(30, 75); describe( 'Four small, black points drawn on a gray canvas. The points form the corners of a square.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Top-left. point(30, 20); // Top-right. point(70, 20); // Style the next points. stroke('purple'); strokeWeight(10); // Bottom-right. point(70, 80); // Bottom-left. point(30, 80); describe( 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Top-left. let a = createVector(30, 20); point(a); // Top-right. let b = createVector(70, 20); point(b); // Bottom-right. let c = createVector(70, 80); point(c); // Bottom-left. let d = createVector(30, 80); point(d); describe( 'Four small, black points drawn on a gray canvas. The points form the corners of a square.' ); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('Two purple points drawn on a gray canvas.'); } function draw() { background(200); // Style the points. stroke('purple'); strokeWeight(10); // Top-left. point(-20, -30); // Bottom-right. point(20, 30); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('Two purple points drawn on a gray canvas. The scene spins slowly.'); } function draw() { background(200); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Style the points. stroke('purple'); strokeWeight(10); // Top-left. point(-20, -30, 0); // Bottom-right. point(20, 30, -50); } ` p5 Shape 2D Primitives x the x-coordinate. Number y the y-coordinate. Number z the z-coordinate (for WebGL mode). Number coordinateVector the coordinate vector. p5.Vector Draws a quadrilateral (four-sided shape). Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The first pair of parameters `(x1, y1)` sets the quad's first point. The next three pairs of parameters set the coordinates for its next three points `(x2, y2)`, `(x3, y3)`, and `(x4, y4)`. Points should be added in either clockwise or counter-clockwise order. The version of `quad()` with twelve parameters allows the quad to be drawn in 3D space. Doing so requires adding the `WEBGL` argument to createCanvas(). The thirteenth and fourteenth parameters are optional. In WebGL mode, they set the number of segments used to draw the quadrilateral in the x- and y-directions. They're both 2 by default. method quad ` function setup() { createCanvas(100, 100); background(200); quad(20, 20, 80, 20, 80, 80, 20, 80); describe('A white square with a black outline drawn on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); quad(20, 30, 80, 30, 80, 70, 20, 70); describe('A white rectangle with a black outline drawn on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); quad(50, 62, 86, 50, 50, 38, 14, 50); describe('A white rhombus with a black outline drawn on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); quad(20, 50, 80, 30, 80, 70, 20, 70); describe('A white trapezoid with a black outline drawn on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); quad(-30, -30, 30, -30, 30, 30, -30, 30); describe('A white square with a black outline drawn on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A wavy white surface spins around on gray canvas.'); } function draw() { background(200); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Draw the quad. quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20); } ` p5 Shape 2D Primitives x1 the x-coordinate of the first point. Number y1 the y-coordinate of the first point. Number x2 the x-coordinate of the second point. Number y2 the y-coordinate of the second point. Number x3 the x-coordinate of the third point. Number y3 the y-coordinate of the third point. Number x4 the x-coordinate of the fourth point. Number y4 the y-coordinate of the fourth point. Number detailX number of segments in the x-direction. Integer detailY number of segments in the y-direction. Integer x1 Number y1 Number z1 the z-coordinate of the first point. Number x2 Number y2 Number z2 the z-coordinate of the second point. Number x3 Number y3 Number z3 the z-coordinate of the third point. Number x4 Number y4 Number z4 the z-coordinate of the fourth point. Number detailX Integer detailY Integer Draws a rectangle. A rectangle is a four-sided shape defined by the `x`, `y`, `w`, and `h` parameters. `x` and `y` set the location of its top-left corner. `w` sets its width and `h` sets its height. Every angle in the rectangle measures 90˚. See rectMode() for other ways to define rectangles. The version of `rect()` with five parameters creates a rounded rectangle. The fifth parameter sets the radius for all four corners. The version of `rect()` with eight parameters also creates a rounded rectangle. Each of the last four parameters set the radius of a corner. The radii start with the top-left corner and move clockwise around the rectangle. If any of these parameters are omitted, they are set to the value of the last radius that was set. method rect ` function setup() { createCanvas(100, 100); background(200); rect(30, 20, 55, 55); describe('A white square with a black outline on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); rect(30, 20, 55, 40); describe('A white rectangle with a black outline on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Give all corners a radius of 20. rect(30, 20, 55, 50, 20); describe('A white rectangle with a black outline and round edges on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Give each corner a unique radius. rect(30, 20, 55, 50, 20, 15, 10, 5); describe('A white rectangle with a black outline and round edges of different radii.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); rect(-20, -30, 55, 55); describe('A white square with a black outline on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A white square spins around on gray canvas.'); } function draw() { background(200); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Draw the rectangle. rect(-20, -30, 55, 55); } ` p5 Shape 2D Primitives x x-coordinate of the rectangle. Number y y-coordinate of the rectangle. Number w width of the rectangle. Number h height of the rectangle. Number tl optional radius of top-left corner. Number tr optional radius of top-right corner. Number br optional radius of bottom-right corner. Number bl optional radius of bottom-left corner. Number x Number y Number w Number h Number detailX number of segments in the x-direction (for WebGL mode). Integer detailY number of segments in the y-direction (for WebGL mode). Integer Draws a square. A square is a four-sided shape defined by the `x`, `y`, and `s` parameters. `x` and `y` set the location of its top-left corner. `s` sets its width and height. Every angle in the square measures 90˚ and all its sides are the same length. See rectMode() for other ways to define squares. The version of `square()` with four parameters creates a rounded square. The fourth parameter sets the radius for all four corners. The version of `square()` with seven parameters also creates a rounded square. Each of the last four parameters set the radius of a corner. The radii start with the top-left corner and move clockwise around the square. If any of these parameters are omitted, they are set to the value of the last radius that was set. method square x x-coordinate of the square. Number y y-coordinate of the square. Number s side size of the square. Number tl optional radius of top-left corner. Number tr optional radius of top-right corner. Number br optional radius of bottom-right corner. Number bl optional radius of bottom-left corner. Number ` function setup() { createCanvas(100, 100); background(200); square(30, 20, 55); describe('A white square with a black outline in on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Give all corners a radius of 20. square(30, 20, 55, 20); describe( 'A white square with a black outline and round edges on a gray canvas.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Give each corner a unique radius. square(30, 20, 55, 20, 15, 10, 5); describe('A white square with a black outline and round edges of different radii.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); square(-20, -30, 55); describe('A white square with a black outline in on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A white square spins around on gray canvas.'); } function draw() { background(200); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Draw the square. square(-20, -30, 55); } ` p5 Shape 2D Primitives Draws a triangle. A triangle is a three-sided shape defined by three points. The first two parameters specify the triangle's first point `(x1, y1)`. The middle two parameters specify its second point `(x2, y2)`. And the last two parameters specify its third point `(x3, y3)`. method triangle x1 x-coordinate of the first point. Number y1 y-coordinate of the first point. Number x2 x-coordinate of the second point. Number y2 y-coordinate of the second point. Number x3 x-coordinate of the third point. Number y3 y-coordinate of the third point. Number ` function setup() { createCanvas(100, 100); background(200); triangle(30, 75, 58, 20, 86, 75); describe('A white triangle with a black outline on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); triangle(-20, 25, 8, -30, 36, 25); describe('A white triangle with a black outline on a gray canvas.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A white triangle spins around on a gray canvas.'); } function draw() { background(200); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Draw the triangle. triangle(-20, 25, 8, -30, 36, 25); } ` p5 Shape 2D Primitives Changes where ellipses, circles, and arcs are drawn. By default, the first two parameters of ellipse(), circle(), and arc() are the x- and y-coordinates of the shape's center. The next parameters set the shape's width and height. This is the same as calling `ellipseMode(CENTER)`. `ellipseMode(RADIUS)` also uses the first two parameters to set the x- and y-coordinates of the shape's center. The next parameters are half of the shapes's width and height. Calling `ellipse(0, 0, 10, 15)` draws a shape with a width of 20 and height of 30. `ellipseMode(CORNER)` uses the first two parameters as the upper-left corner of the shape. The next parameters are its width and height. `ellipseMode(CORNERS)` uses the first two parameters as the location of one corner of the ellipse's bounding box. The next parameters are the location of the opposite corner. The argument passed to `ellipseMode()` must be written in ALL CAPS because the constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this way. JavaScript is a case-sensitive language. method ellipseMode mode either CENTER, RADIUS, CORNER, or CORNERS Constant ` function setup() { createCanvas(100, 100); background(200); // White ellipse. ellipseMode(RADIUS); fill(255); ellipse(50, 50, 30, 30); // Gray ellipse. ellipseMode(CENTER); fill(100); ellipse(50, 50, 30, 30); describe('A white circle with a gray circle at its center. Both circles have black outlines.'); } ` ` function setup() { createCanvas(100, 100); background(200); // White ellipse. ellipseMode(CORNER); fill(255); ellipse(25, 25, 50, 50); // Gray ellipse. ellipseMode(CORNERS); fill(100); ellipse(25, 25, 50, 50); describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.'); } ` p5 Shape Attributes Draws certain features with jagged (aliased) edges. smooth() is active by default. In 2D mode, `noSmooth()` is helpful for scaling up images without blurring. The functions don't affect shapes or fonts. In WebGL mode, `noSmooth()` causes all shapes to be drawn with jagged (aliased) edges. The functions don't affect images or fonts. method noSmooth ` let heart; // Load a pixelated heart image from an image data string. function preload() { heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII='); } function setup() { createCanvas(100, 100); background(50); // Antialiased hearts. image(heart, 10, 10); image(heart, 20, 10, 16, 16); image(heart, 40, 10, 32, 32); // Aliased hearts. noSmooth(); image(heart, 10, 60); image(heart, 20, 60, 16, 16); image(heart, 40, 60, 32, 32); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); circle(0, 0, 80); describe('A white circle on a gray background.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); // Disable smoothing. noSmooth(); background(200); circle(0, 0, 80); describe('A pixelated white circle on a gray background.'); } ` p5 Shape Attributes Changes where rectangles and squares are drawn. By default, the first two parameters of rect() and square(), are the x- and y-coordinates of the shape's upper left corner. The next parameters set the shape's width and height. This is the same as calling `rectMode(CORNER)`. `rectMode(CORNERS)` also uses the first two parameters as the location of one of the corners. The next parameters are the location of the opposite corner. This mode only works for rect(). `rectMode(CENTER)` uses the first two parameters as the x- and y-coordinates of the shape's center. The next parameters are its width and height. `rectMode(RADIUS)` also uses the first two parameters as the x- and y-coordinates of the shape's center. The next parameters are half of the shape's width and height. The argument passed to `rectMode()` must be written in ALL CAPS because the constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this way. JavaScript is a case-sensitive language. method rectMode mode either CORNER, CORNERS, CENTER, or RADIUS Constant ` function setup() { createCanvas(100, 100); background(200); rectMode(CORNER); fill(255); rect(25, 25, 50, 50); rectMode(CORNERS); fill(100); rect(25, 25, 50, 50); describe('A small gray square drawn at the top-left corner of a white square.'); } ` ` function setup() { createCanvas(100, 100); background(200); rectMode(RADIUS); fill(255); rect(50, 50, 30, 30); rectMode(CENTER); fill(100); rect(50, 50, 30, 30); describe('A small gray square drawn at the center of a white square.'); } ` ` function setup() { createCanvas(100, 100); background(200); rectMode(CORNER); fill(255); square(25, 25, 50); describe('A white square.'); } ` ` function setup() { createCanvas(100, 100); background(200); rectMode(RADIUS); fill(255); square(50, 50, 30); rectMode(CENTER); fill(100); square(50, 50, 30); describe('A small gray square drawn at the center of a white square.'); } ` p5 Shape Attributes Draws certain features with smooth (antialiased) edges. `smooth()` is active by default. In 2D mode, noSmooth() is helpful for scaling up images without blurring. The functions don't affect shapes or fonts. In WebGL mode, noSmooth() causes all shapes to be drawn with jagged (aliased) edges. The functions don't affect images or fonts. method smooth ` let heart; // Load a pixelated heart image from an image data string. function preload() { heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII='); } function setup() { createCanvas(100, 100); background(50); // Antialiased hearts. image(heart, 10, 10); image(heart, 20, 10, 16, 16); image(heart, 40, 10, 32, 32); // Aliased hearts. noSmooth(); image(heart, 10, 60); image(heart, 20, 60, 16, 16); image(heart, 40, 60, 32, 32); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); circle(0, 0, 80); describe('A white circle on a gray background.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); // Disable smoothing. noSmooth(); background(200); circle(0, 0, 80); describe('A pixelated white circle on a gray background.'); } ` p5 Shape Attributes Sets the style for rendering the ends of lines. The caps for line endings are either rounded (`ROUND`), squared (`SQUARE`), or extended (`PROJECT`). The default cap is `ROUND`. The argument passed to `strokeCap()` must be written in ALL CAPS because the constants `ROUND`, `SQUARE`, and `PROJECT` are defined this way. JavaScript is a case-sensitive language. method strokeCap cap either ROUND, SQUARE, or PROJECT Constant ` function setup() { createCanvas(100, 100); background(200); strokeWeight(12); // Top. strokeCap(ROUND); line(20, 30, 80, 30); // Middle. strokeCap(SQUARE); line(20, 50, 80, 50); // Bottom. strokeCap(PROJECT); line(20, 70, 80, 70); describe( 'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.' ); } ` p5 Shape Attributes Sets the style of the joints that connect line segments. Joints are either mitered (`MITER`), beveled (`BEVEL`), or rounded (`ROUND`). The default joint is `MITER` in 2D mode and `ROUND` in WebGL mode. The argument passed to `strokeJoin()` must be written in ALL CAPS because the constants `MITER`, `BEVEL`, and `ROUND` are defined this way. JavaScript is a case-sensitive language. method strokeJoin join either MITER, BEVEL, or ROUND Constant ` function setup() { createCanvas(100, 100); background(200); // Style the line. noFill(); strokeWeight(10); strokeJoin(MITER); // Draw the line. beginShape(); vertex(35, 20); vertex(65, 50); vertex(35, 80); endShape(); describe('A right-facing arrowhead shape with a pointed tip in center of canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Style the line. noFill(); strokeWeight(10); strokeJoin(BEVEL); // Draw the line. beginShape(); vertex(35, 20); vertex(65, 50); vertex(35, 80); endShape(); describe('A right-facing arrowhead shape with a flat tip in center of canvas.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Style the line. noFill(); strokeWeight(10); strokeJoin(ROUND); // Draw the line. beginShape(); vertex(35, 20); vertex(65, 50); vertex(35, 80); endShape(); describe('A right-facing arrowhead shape with a rounded tip in center of canvas.'); } ` p5 Shape Attributes Sets the width of the stroke used for points, lines, and the outlines of shapes. Note: `strokeWeight()` is affected by transformations, especially calls to scale(). method strokeWeight weight the weight of the stroke (in pixels). Number ` function setup() { createCanvas(100, 100); background(200); // Top. line(20, 20, 80, 20); // Middle. strokeWeight(4); line(20, 40, 80, 40); // Bottom. strokeWeight(10); line(20, 70, 80, 70); describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Top. line(20, 20, 80, 20); // Scale by a factor of 5. scale(5); // Bottom. Coordinates are adjusted for scaling. line(4, 8, 16, 8); describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.'); } ` p5 Shape Attributes Draws a Bézier curve. Bézier curves can form shapes and curves that slope gently. They're defined by two anchor points and two control points. Bézier curves provide more control than the spline curves created with the curve() function. The first two parameters, `x1` and `y1`, set the first anchor point. The first anchor point is where the curve starts. The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two control points. The control points "pull" the curve towards them. The seventh and eighth parameters, `x4` and `y4`, set the last anchor point. The last anchor point is where the curve ends. Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of `bezier()` has twelve arguments because each point has x-, y-, and z-coordinates. method bezier ` function setup() { createCanvas(100, 100); background(200); // Draw the anchor points in black. stroke(0); strokeWeight(5); point(85, 20); point(15, 80); // Draw the control points in red. stroke(255, 0, 0); point(10, 10); point(90, 90); // Draw a black bezier curve. noFill(); stroke(0); strokeWeight(1); bezier(85, 20, 10, 10, 90, 90, 15, 80); // Draw red lines from the anchor points to the control points. stroke(255, 0, 0); line(85, 20, 10, 10); line(15, 80, 90, 90); describe( 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.' ); } ` ` // Click the mouse near the red dot in the top-left corner // and drag to change the curve's shape. let x2 = 10; let y2 = 10; let isChanging = false; function setup() { createCanvas(100, 100); describe( 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.' ); } function draw() { background(200); // Draw the anchor points in black. stroke(0); strokeWeight(5); point(85, 20); point(15, 80); // Draw the control points in red. stroke(255, 0, 0); point(x2, y2); point(90, 90); // Draw a black bezier curve. noFill(); stroke(0); strokeWeight(1); bezier(85, 20, x2, y2, 90, 90, 15, 80); // Draw red lines from the anchor points to the control points. stroke(255, 0, 0); line(85, 20, x2, y2); line(15, 80, 90, 90); } // Start changing the first control point if the user clicks near it. function mousePressed() { if (dist(mouseX, mouseY, x2, y2) < 20) { isChanging = true; } } // Stop changing the first control point when the user releases the mouse. function mouseReleased() { isChanging = false; } // Update the first control point while the user drags the mouse. function mouseDragged() { if (isChanging === true) { x2 = mouseX; y2 = mouseY; } } ` ` function setup() { createCanvas(100, 100); background('skyblue'); // Draw the red balloon. fill('red'); bezier(50, 60, 5, 15, 95, 15, 50, 60); // Draw the balloon string. line(50, 60, 50, 80); describe('A red balloon in a blue sky.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.'); } function draw() { background('skyblue'); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Draw the red balloon. fill('red'); bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0); // Draw the balloon string. line(0, 0, 0, 0, 20, 0); } ` p5 Shape Curves x1 x-coordinate of the first anchor point. Number y1 y-coordinate of the first anchor point. Number x2 x-coordinate of the first control point. Number y2 y-coordinate of the first control point. Number x3 x-coordinate of the second control point. Number y3 y-coordinate of the second control point. Number x4 x-coordinate of the second anchor point. Number y4 y-coordinate of the second anchor point. Number x1 Number y1 Number z1 z-coordinate of the first anchor point. Number x2 Number y2 Number z2 z-coordinate of the first control point. Number x3 Number y3 Number z3 z-coordinate of the second control point. Number x4 Number y4 Number z4 z-coordinate of the second anchor point. Number Sets the number of segments used to draw Bézier curves in WebGL mode. In WebGL mode, smooth shapes are drawn using many flat segments. Adding more flat segments makes shapes appear smoother. The parameter, `detail`, is the number of segments to use while drawing a Bézier curve. For example, calling `bezierDetail(5)` will use 5 segments to draw curves with the bezier() function. By default,`detail` is 20. Note: `bezierDetail()` has no effect in 2D mode. method bezierDetail detail number of segments to use. Defaults to 20. Number ` // Draw the original curve. function setup() { createCanvas(100, 100); background(200); // Draw the anchor points in black. stroke(0); strokeWeight(5); point(85, 20); point(15, 80); // Draw the control points in red. stroke(255, 0, 0); point(10, 10); point(90, 90); // Draw a black bezier curve. noFill(); stroke(0); strokeWeight(1); bezier(85, 20, 10, 10, 90, 90, 15, 80); // Draw red lines from the anchor points to the control points. stroke(255, 0, 0); line(85, 20, 10, 10); line(15, 80, 90, 90); describe( 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.' ); } ` ` // Draw the curve with less detail. function setup() { createCanvas(100, 100, WEBGL); background(200); // Set the curveDetail() to 5. bezierDetail(5); // Draw the anchor points in black. stroke(0); strokeWeight(5); point(35, -30, 0); point(-35, 30, 0); // Draw the control points in red. stroke(255, 0, 0); point(-40, -40, 0); point(40, 40, 0); // Draw a black bezier curve. noFill(); stroke(0); strokeWeight(1); bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0); // Draw red lines from the anchor points to the control points. stroke(255, 0, 0); line(35, -30, -40, -40); line(-35, 30, 40, 40); describe( 'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.' ); } ` p5 Shape Curves Calculates coordinates along a Bézier curve using interpolation. `bezierPoint()` calculates coordinates along a Bézier curve using the anchor and control points. It expects points in the same order as the bezier() function. `bezierPoint()` works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the curve. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the curve. The first parameter, `a`, is the coordinate of the first anchor point. The second and third parameters, `b` and `c`, are the coordinates of the control points. The fourth parameter, `d`, is the coordinate of the last anchor point. The fifth parameter, `t`, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them. method bezierPoint a coordinate of first anchor point. Number b coordinate of first control point. Number c coordinate of second control point. Number d coordinate of second anchor point. Number t amount to interpolate between 0 and 1. Number ### return coordinate of the point on the curve. Number ` function setup() { createCanvas(100, 100); background(200); // Set the coordinates for the curve's anchor and control points. let x1 = 85; let x2 = 10; let x3 = 90; let x4 = 15; let y1 = 20; let y2 = 10; let y3 = 90; let y4 = 80; // Style the curve. noFill(); // Draw the curve. bezier(x1, y1, x2, y2, x3, y3, x4, y4); // Draw circles along the curve's path. fill(255); // Top-right. let x = bezierPoint(x1, x2, x3, x4, 0); let y = bezierPoint(y1, y2, y3, y4, 0); circle(x, y, 5); // Center. x = bezierPoint(x1, x2, x3, x4, 0.5); y = bezierPoint(y1, y2, y3, y4, 0.5); circle(x, y, 5); // Bottom-left. x = bezierPoint(x1, x2, x3, x4, 1); y = bezierPoint(y1, y2, y3, y4, 1); circle(x, y, 5); describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.'); } ` ` function setup() { createCanvas(100, 100); describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.'); } function draw() { background(200); // Set the coordinates for the curve's anchor and control points. let x1 = 85; let x2 = 10; let x3 = 90; let x4 = 15; let y1 = 20; let y2 = 10; let y3 = 90; let y4 = 80; // Draw the curve. noFill(); bezier(x1, y1, x2, y2, x3, y3, x4, y4); // Calculate the circle's coordinates. let t = 0.5 * sin(frameCount * 0.01) + 0.5; let x = bezierPoint(x1, x2, x3, x4, t); let y = bezierPoint(y1, y2, y3, y4, t); // Draw the circle. fill(255); circle(x, y, 5); } ` p5 Shape Curves Calculates coordinates along a line that's tangent to a Bézier curve. Tangent lines skim the surface of a curve. A tangent line's slope equals the curve's slope at the point where it intersects. `bezierTangent()` calculates coordinates along a tangent line using the Bézier curve's anchor and control points. It expects points in the same order as the bezier() function. `bezierTangent()` works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the tangent line. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the tangent line. The first parameter, `a`, is the coordinate of the first anchor point. The second and third parameters, `b` and `c`, are the coordinates of the control points. The fourth parameter, `d`, is the coordinate of the last anchor point. The fifth parameter, `t`, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them. method bezierTangent a coordinate of first anchor point. Number b coordinate of first control point. Number c coordinate of second control point. Number d coordinate of second anchor point. Number t amount to interpolate between 0 and 1. Number ### return coordinate of a point on the tangent line. Number ` function setup() { createCanvas(100, 100); background(200); // Set the coordinates for the curve's anchor and control points. let x1 = 85; let x2 = 10; let x3 = 90; let x4 = 15; let y1 = 20; let y2 = 10; let y3 = 90; let y4 = 80; // Style the curve. noFill(); // Draw the curve. bezier(x1, y1, x2, y2, x3, y3, x4, y4); // Draw tangents along the curve's path. fill(255); // Top-right circle. stroke(0); let x = bezierPoint(x1, x2, x3, x4, 0); let y = bezierPoint(y1, y2, y3, y4, 0); circle(x, y, 5); // Top-right tangent line. // Scale the tangent point to draw a shorter line. stroke(255, 0, 0); let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0); let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0); line(x + tx, y + ty, x - tx, y - ty); // Center circle. stroke(0); x = bezierPoint(x1, x2, x3, x4, 0.5); y = bezierPoint(y1, y2, y3, y4, 0.5); circle(x, y, 5); // Center tangent line. // Scale the tangent point to draw a shorter line. stroke(255, 0, 0); tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5); ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5); line(x + tx, y + ty, x - tx, y - ty); // Bottom-left circle. stroke(0); x = bezierPoint(x1, x2, x3, x4, 1); y = bezierPoint(y1, y2, y3, y4, 1); circle(x, y, 5); // Bottom-left tangent. // Scale the tangent point to draw a shorter line. stroke(255, 0, 0); tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1); ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1); line(x + tx, y + ty, x - tx, y - ty); describe( 'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.' ); } ` p5 Shape Curves Draws a curve using a Catmull-Rom spline. Spline curves can form shapes and curves that slope gently. They’re like cables that are attached to a set of points. Splines are defined by two anchor points and two control points. The first two parameters, `x1` and `y1`, set the first control point. This point isn’t drawn and can be thought of as the curve’s starting point. The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two anchor points. The anchor points are the start and end points of the curve’s visible segment. The seventh and eighth parameters, `x4` and `y4`, set the last control point. This point isn’t drawn and can be thought of as the curve’s ending point. Spline curves can also be drawn in 3D using WebGL mode. The 3D version of `curve()` has twelve arguments because each point has x-, y-, and z-coordinates. method curve ` function setup() { createCanvas(100, 100); background(200); // Draw a black spline curve. noFill(); strokeWeight(1); stroke(0); curve(5, 26, 73, 24, 73, 61, 15, 65); // Draw red spline curves from the anchor points to the control points. stroke(255, 0, 0); curve(5, 26, 5, 26, 73, 24, 73, 61); curve(73, 24, 73, 61, 15, 65, 15, 65); // Draw the anchor points in black. strokeWeight(5); stroke(0); point(73, 24); point(73, 61); // Draw the control points in red. stroke(255, 0, 0); point(5, 26); point(15, 65); describe( 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.' ); } ` ` let x1 = 5; let y1 = 26; let isChanging = false; function setup() { createCanvas(100, 100); describe( 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.' ); } function draw() { background(200); // Draw a black spline curve. noFill(); strokeWeight(1); stroke(0); curve(x1, y1, 73, 24, 73, 61, 15, 65); // Draw red spline curves from the anchor points to the control points. stroke(255, 0, 0); curve(x1, y1, x1, y1, 73, 24, 73, 61); curve(73, 24, 73, 61, 15, 65, 15, 65); // Draw the anchor points in black. strokeWeight(5); stroke(0); point(73, 24); point(73, 61); // Draw the control points in red. stroke(255, 0, 0); point(x1, y1); point(15, 65); } // Start changing the first control point if the user clicks near it. function mousePressed() { if (dist(mouseX, mouseY, x1, y1) < 20) { isChanging = true; } } // Stop changing the first control point when the user releases the mouse. function mouseReleased() { isChanging = false; } // Update the first control point while the user drags the mouse. function mouseDragged() { if (isChanging === true) { x1 = mouseX; y1 = mouseY; } } ` ` function setup() { createCanvas(100, 100); background('skyblue'); // Draw the red balloon. fill('red'); curve(-150, 275, 50, 60, 50, 60, 250, 275); // Draw the balloon string. line(50, 60, 50, 80); describe('A red balloon in a blue sky.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A red balloon in a blue sky.'); } function draw() { background('skyblue'); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Draw the red balloon. fill('red'); curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0); // Draw the balloon string. line(0, 10, 0, 0, 30, 0); } ` p5 Shape Curves x1 x-coordinate of the first control point. Number y1 y-coordinate of the first control point. Number x2 x-coordinate of the first anchor point. Number y2 y-coordinate of the first anchor point. Number x3 x-coordinate of the second anchor point. Number y3 y-coordinate of the second anchor point. Number x4 x-coordinate of the second control point. Number y4 y-coordinate of the second control point. Number x1 Number y1 Number z1 z-coordinate of the first control point. Number x2 Number y2 Number z2 z-coordinate of the first anchor point. Number x3 Number y3 Number z3 z-coordinate of the second anchor point. Number x4 Number y4 Number z4 z-coordinate of the second control point. Number Sets the number of segments used to draw spline curves in WebGL mode. In WebGL mode, smooth shapes are drawn using many flat segments. Adding more flat segments makes shapes appear smoother. The parameter, `detail`, is the number of segments to use while drawing a spline curve. For example, calling `curveDetail(5)` will use 5 segments to draw curves with the curve() function. By default,`detail` is 20. Note: `curveDetail()` has no effect in 2D mode. method curveDetail resolution number of segments to use. Defaults to 20. Number ` function setup() { createCanvas(100, 100); background(200); // Draw a black spline curve. noFill(); strokeWeight(1); stroke(0); curve(5, 26, 73, 24, 73, 61, 15, 65); // Draw red spline curves from the anchor points to the control points. stroke(255, 0, 0); curve(5, 26, 5, 26, 73, 24, 73, 61); curve(73, 24, 73, 61, 15, 65, 15, 65); // Draw the anchor points in black. strokeWeight(5); stroke(0); point(73, 24); point(73, 61); // Draw the control points in red. stroke(255, 0, 0); point(5, 26); point(15, 65); describe( 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.' ); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); // Set the curveDetail() to 3. curveDetail(3); // Draw a black spline curve. noFill(); strokeWeight(1); stroke(0); curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0); // Draw red spline curves from the anchor points to the control points. stroke(255, 0, 0); curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0); curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0); // Draw the anchor points in black. strokeWeight(5); stroke(0); point(23, -26); point(23, 11); // Draw the control points in red. stroke(255, 0, 0); point(-45, -24); point(-35, 15); describe( 'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.' ); } ` p5 Shape Curves Adjusts the way curve() and curveVertex() draw. Spline curves are like cables that are attached to a set of points. `curveTightness()` adjusts how tightly the cable is attached to the points. The parameter, `tightness`, determines how the curve fits to the vertex points. By default, `tightness` is set to 0. Setting tightness to 1, as in `curveTightness(1)`, connects the curve's points using straight lines. Values in the range from –5 to 5 deform curves while leaving them recognizable. method curveTightness amount amount of tightness. Number ` // Move the mouse left and right to see the curve change. function setup() { createCanvas(100, 100); describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right'); } function draw() { background(200); // Set the curve's tightness using the mouse. let t = map(mouseX, 0, 100, -5, 5, true); curveTightness(t); // Draw the curve. noFill(); beginShape(); curveVertex(10, 26); curveVertex(10, 26); curveVertex(83, 24); curveVertex(83, 61); curveVertex(25, 65); curveVertex(25, 65); endShape(); } ` p5 Shape Curves Calculates coordinates along a spline curve using interpolation. `curvePoint()` calculates coordinates along a spline curve using the anchor and control points. It expects points in the same order as the curve() function. `curvePoint()` works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the curve. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the curve. The first parameter, `a`, is the coordinate of the first control point. The second and third parameters, `b` and `c`, are the coordinates of the anchor points. The fourth parameter, `d`, is the coordinate of the last control point. The fifth parameter, `t`, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them. method curvePoint a coordinate of first control point. Number b coordinate of first anchor point. Number c coordinate of second anchor point. Number d coordinate of second control point. Number t amount to interpolate between 0 and 1. Number ### return coordinate of a point on the curve. Number ` function setup() { createCanvas(100, 100); background(200); // Set the coordinates for the curve's anchor and control points. let x1 = 5; let y1 = 26; let x2 = 73; let y2 = 24; let x3 = 73; let y3 = 61; let x4 = 15; let y4 = 65; // Draw the curve. noFill(); curve(x1, y1, x2, y2, x3, y3, x4, y4); // Draw circles along the curve's path. fill(255); // Top. let x = curvePoint(x1, x2, x3, x4, 0); let y = curvePoint(y1, y2, y3, y4, 0); circle(x, y, 5); // Center. x = curvePoint(x1, x2, x3, x4, 0.5); y = curvePoint(y1, y2, y3, y4, 0.5); circle(x, y, 5); // Bottom. x = curvePoint(x1, x2, x3, x4, 1); y = curvePoint(y1, y2, y3, y4, 1); circle(x, y, 5); describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.'); } ` ` function setup() { createCanvas(100, 100); describe('A black curve on a gray square. A white circle moves back and forth along the curve.'); } function draw() { background(200); // Set the coordinates for the curve's anchor and control points. let x1 = 5; let y1 = 26; let x2 = 73; let y2 = 24; let x3 = 73; let y3 = 61; let x4 = 15; let y4 = 65; // Draw the curve. noFill(); curve(x1, y1, x2, y2, x3, y3, x4, y4); // Calculate the circle's coordinates. let t = 0.5 * sin(frameCount * 0.01) + 0.5; let x = curvePoint(x1, x2, x3, x4, t); let y = curvePoint(y1, y2, y3, y4, t); // Draw the circle. fill(255); circle(x, y, 5); } ` p5 Shape Curves Calculates coordinates along a line that's tangent to a spline curve. Tangent lines skim the surface of a curve. A tangent line's slope equals the curve's slope at the point where it intersects. `curveTangent()` calculates coordinates along a tangent line using the spline curve's anchor and control points. It expects points in the same order as the curve() function. `curveTangent()` works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the tangent line. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the tangent line. The first parameter, `a`, is the coordinate of the first control point. The second and third parameters, `b` and `c`, are the coordinates of the anchor points. The fourth parameter, `d`, is the coordinate of the last control point. The fifth parameter, `t`, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them. method curveTangent a coordinate of first control point. Number b coordinate of first anchor point. Number c coordinate of second anchor point. Number d coordinate of second control point. Number t amount to interpolate between 0 and 1. Number ### return coordinate of a point on the tangent line. Number ` function setup() { createCanvas(100, 100); background(200); // Set the coordinates for the curve's anchor and control points. let x1 = 5; let y1 = 26; let x2 = 73; let y2 = 24; let x3 = 73; let y3 = 61; let x4 = 15; let y4 = 65; // Draw the curve. noFill(); curve(x1, y1, x2, y2, x3, y3, x4, y4); // Draw tangents along the curve's path. fill(255); // Top circle. stroke(0); let x = curvePoint(x1, x2, x3, x4, 0); let y = curvePoint(y1, y2, y3, y4, 0); circle(x, y, 5); // Top tangent line. // Scale the tangent point to draw a shorter line. stroke(255, 0, 0); let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0); let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0); line(x + tx, y + ty, x - tx, y - ty); // Center circle. stroke(0); x = curvePoint(x1, x2, x3, x4, 0.5); y = curvePoint(y1, y2, y3, y4, 0.5); circle(x, y, 5); // Center tangent line. // Scale the tangent point to draw a shorter line. stroke(255, 0, 0); tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5); ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5); line(x + tx, y + ty, x - tx, y - ty); // Bottom circle. stroke(0); x = curvePoint(x1, x2, x3, x4, 1); y = curvePoint(y1, y2, y3, y4, 1); circle(x, y, 5); // Bottom tangent line. // Scale the tangent point to draw a shorter line. stroke(255, 0, 0); tx = 0.2 * curveTangent(x1, x2, x3, x4, 1); ty = 0.2 * curveTangent(y1, y2, y3, y4, 1); line(x + tx, y + ty, x - tx, y - ty); describe( 'A black curve on a gray square. A white circle moves back and forth along the curve.' ); } ` p5 Shape Curves Begins creating a hole within a flat shape. The `beginContour()` and endContour() functions allow for creating negative space within custom shapes that are flat. `beginContour()` begins adding vertices to a negative space and endContour() stops adding them. `beginContour()` and endContour() must be called between beginShape() and endShape(). Transformations such as translate(), rotate(), and scale() don't work between `beginContour()` and endContour(). It's also not possible to use other shapes, such as ellipse() or rect(), between `beginContour()` and endContour(). Note: The vertices that define a negative space must "wind" in the opposite direction from the outer shape. First, draw vertices for the outer shape clockwise order. Then, draw vertices for the negative space in counter-clockwise order. method beginContour ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. beginShape(); // Exterior vertices, clockwise winding. vertex(10, 10); vertex(90, 10); vertex(90, 90); vertex(10, 90); // Interior vertices, counter-clockwise winding. beginContour(); vertex(30, 30); vertex(30, 70); vertex(70, 70); vertex(70, 30); endContour(); // Stop drawing the shape. endShape(CLOSE); describe('A white square with a square hole in its center drawn on a gray background.'); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white square with a square hole in its center drawn on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Start drawing the shape. beginShape(); // Exterior vertices, clockwise winding. vertex(-40, -40); vertex(40, -40); vertex(40, 40); vertex(-40, 40); // Interior vertices, counter-clockwise winding. beginContour(); vertex(-20, -20); vertex(-20, 20); vertex(20, 20); vertex(20, -20); endContour(); // Stop drawing the shape. endShape(CLOSE); } ` p5 Shape Vertex Begins adding vertices to a custom shape. The `beginShape()` and endShape() functions allow for creating custom shapes in 2D or 3D. `beginShape()` begins adding vertices to a custom shape and endShape() stops adding them. The parameter, `kind`, sets the kind of shape to make. By default, any irregular polygon can be drawn. The available modes for kind are: * `POINTS` to draw a series of points. * `LINES` to draw a series of unconnected line segments. * `TRIANGLES` to draw a series of separate triangles. * `TRIANGLE_FAN` to draw a series of connected triangles sharing the first vertex in a fan-like fashion. * `TRIANGLE_STRIP` to draw a series of connected triangles in strip fashion. * `QUADS` to draw a series of separate quadrilaterals (quads). * `QUAD_STRIP` to draw quad strip using adjacent edges to form the next quad. * `TESS` to create a filling curve by explicit tessellation (WebGL only). After calling `beginShape()`, shapes can be built by calling vertex(), bezierVertex(), quadraticVertex(), and/or curveVertex(). Calling endShape() will stop adding vertices to the shape. Each shape will be outlined with the current stroke color and filled with the current fill color. Transformations such as translate(), rotate(), and scale() don't work between `beginShape()` and endShape(). It's also not possible to use other shapes, such as ellipse() or rect(), between `beginShape()` and endShape(). method beginShape kind either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS. Constant ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. beginShape(); // Add vertices. vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); // Stop drawing the shape. endShape(CLOSE); describe('A white square on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. // Only draw the vertices (points). beginShape(POINTS); // Add vertices. vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); // Stop drawing the shape. endShape(); describe('Four black dots that form a square are drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. // Only draw lines between alternating pairs of vertices. beginShape(LINES); // Add vertices. vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); // Stop drawing the shape. endShape(); describe('Two horizontal black lines on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Style the shape. noFill(); // Start drawing the shape. beginShape(); // Add vertices. vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); // Stop drawing the shape. endShape(); describe('Three black lines form a sideways U shape on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Style the shape. noFill(); // Start drawing the shape. beginShape(); // Add vertices. vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); // Stop drawing the shape. // Connect the first and last vertices. endShape(CLOSE); describe('A black outline of a square drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. // Draw a series of triangles. beginShape(TRIANGLES); // Left triangle. vertex(30, 75); vertex(40, 20); vertex(50, 75); // Right triangle. vertex(60, 20); vertex(70, 75); vertex(80, 20); // Stop drawing the shape. endShape(); describe('Two white triangles drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. // Draw a series of triangles. beginShape(TRIANGLE_STRIP); // Add vertices. vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); // Stop drawing the shape. endShape(); describe('Five white triangles that are interleaved drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. // Draw a series of triangles that share their first vertex. beginShape(TRIANGLE_FAN); // Add vertices. vertex(57.5, 50); vertex(57.5, 15); vertex(92, 50); vertex(57.5, 85); vertex(22, 50); vertex(57.5, 15); // Stop drawing the shape. endShape(); describe('Four white triangles form a square are drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. // Draw a series of quadrilaterals. beginShape(QUADS); // Left rectangle. vertex(30, 20); vertex(30, 75); vertex(50, 75); vertex(50, 20); // Right rectangle. vertex(65, 20); vertex(65, 75); vertex(85, 75); vertex(85, 20); // Stop drawing the shape. endShape(); describe('Two white rectangles drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. // Draw a series of quadrilaterals. beginShape(QUAD_STRIP); // Add vertices. vertex(30, 20); vertex(30, 75); vertex(50, 20); vertex(50, 75); vertex(65, 20); vertex(65, 75); vertex(85, 20); vertex(85, 75); // Stop drawing the shape. endShape(); describe('Three white rectangles that share edges are drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); // Start drawing the shape. // Draw a series of quadrilaterals. beginShape(TESS); // Add the vertices. vertex(-30, -30, 0); vertex(30, -30, 0); vertex(30, -10, 0); vertex(-10, -10, 0); vertex(-10, 10, 0); vertex(30, 10, 0); vertex(30, 30, 0); vertex(-30, 30, 0); // Stop drawing the shape. // Connect the first and last vertices. endShape(CLOSE); describe('A blocky C shape drawn in white on a gray background.'); } ` ` // Click and drag with the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A blocky C shape drawn in red, blue, and green on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Start drawing the shape. // Draw a series of quadrilaterals. beginShape(TESS); // Add the vertices. fill('red'); stroke('red'); vertex(-30, -30, 0); vertex(30, -30, 0); vertex(30, -10, 0); fill('green'); stroke('green'); vertex(-10, -10, 0); vertex(-10, 10, 0); vertex(30, 10, 0); fill('blue'); stroke('blue'); vertex(30, 30, 0); vertex(-30, 30, 0); // Stop drawing the shape. // Connect the first and last vertices. endShape(CLOSE); } ` p5 Shape Vertex Adds a Bézier curve segment to a custom shape. `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves it creates are defined like those made by the bezier() function. `bezierVertex()` must be called between the beginShape() and endShape() functions. The curved segment uses the previous vertex as the first anchor point, so there must be at least one call to vertex() before `bezierVertex()` can be used. The first four parameters, `x2`, `y2`, `x3`, and `y3`, set the curve’s two control points. The control points "pull" the curve towards them. The fifth and sixth parameters, `x4`, and `y4`, set the last anchor point. The last anchor point is where the curve ends. Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of `bezierVertex()` has eight arguments because each point has x-, y-, and z-coordinates. Note: `bezierVertex()` won’t work when an argument is passed to beginShape(). method bezierVertex ` function setup() { createCanvas(100, 100); background(200); // Style the shape. noFill(); // Start drawing the shape. beginShape(); // Add the first anchor point. vertex(30, 20); // Add the Bézier vertex. bezierVertex(80, 0, 80, 75, 30, 75); // Stop drawing the shape. endShape(); describe('A black C curve on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Draw the anchor points in black. stroke(0); strokeWeight(5); point(30, 20); point(30, 75); // Draw the control points in red. stroke(255, 0, 0); point(80, 0); point(80, 75); // Style the shape. noFill(); stroke(0); strokeWeight(1); // Start drawing the shape. beginShape(); // Add the first anchor point. vertex(30, 20); // Add the Bézier vertex. bezierVertex(80, 0, 80, 75, 30, 75); // Stop drawing the shape. endShape(); // Draw red lines from the anchor points to the control points. stroke(255, 0, 0); line(30, 20, 80, 0); line(30, 75, 80, 75); describe( 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.' ); } ` ` // Click the mouse near the red dot in the top-right corner // and drag to change the curve's shape. let x2 = 80; let y2 = 0; let isChanging = false; function setup() { createCanvas(100, 100); describe( 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.' ); } function draw() { background(200); // Draw the anchor points in black. stroke(0); strokeWeight(5); point(30, 20); point(30, 75); // Draw the control points in red. stroke(255, 0, 0); point(x2, y2); point(80, 75); // Style the shape. noFill(); stroke(0); strokeWeight(1); // Start drawing the shape. beginShape(); // Add the first anchor point. vertex(30, 20); // Add the Bézier vertex. bezierVertex(x2, y2, 80, 75, 30, 75); // Stop drawing the shape. endShape(); // Draw red lines from the anchor points to the control points. stroke(255, 0, 0); line(30, 20, x2, y2); line(30, 75, 80, 75); } // Start changing the first control point if the user clicks near it. function mousePressed() { if (dist(mouseX, mouseY, x2, y2) < 20) { isChanging = true; } } // Stop changing the first control point when the user releases the mouse. function mouseReleased() { isChanging = false; } // Update the first control point while the user drags the mouse. function mouseDragged() { if (isChanging === true) { x2 = mouseX; y2 = mouseY; } } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. beginShape(); // Add the first anchor point. vertex(30, 20); // Add the Bézier vertices. bezierVertex(80, 0, 80, 75, 30, 75); bezierVertex(50, 80, 60, 25, 30, 20); // Stop drawing the shape. endShape(); describe('A crescent moon shape drawn in white on a gray background.'); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.'); } function draw() { background('midnightblue'); // Enable orbiting with the mouse. orbitControl(); // Style the moons. noStroke(); fill('lemonchiffon'); // Draw the first moon. beginShape(); vertex(-20, -30, 0); bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0); bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0); endShape(); // Draw the second moon. beginShape(); vertex(-20, -30, -20); bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20); bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20); endShape(); } ` p5 Shape Vertex x2 x-coordinate of the first control point. Number y2 y-coordinate of the first control point. Number x3 x-coordinate of the second control point. Number y3 y-coordinate of the second control point. Number x4 x-coordinate of the anchor point. Number y4 y-coordinate of the anchor point. Number x2 Number y2 Number z2 z-coordinate of the first control point. Number x3 Number y3 Number z3 z-coordinate of the second control point. Number x4 Number y4 Number z4 z-coordinate of the anchor point. Number Adds a spline curve segment to a custom shape. `curveVertex()` adds a curved segment to custom shapes. The spline curves it creates are defined like those made by the curve() function. `curveVertex()` must be called between the beginShape() and endShape() functions. Spline curves can form shapes and curves that slope gently. They’re like cables that are attached to a set of points. Splines are defined by two anchor points and two control points. `curveVertex()` must be called at least four times between beginShape() and endShape() in order to draw a curve: beginShape(); // Add the first control point. curveVertex(84, 91); // Add the anchor points to draw between. curveVertex(68, 19); curveVertex(21, 17); // Add the second control point. curveVertex(32, 91); endShape(); The code snippet above would only draw the curve between the anchor points, similar to the curve() function. The segments between the control and anchor points can be drawn by calling `curveVertex()` with the coordinates of the control points: beginShape(); // Add the first control point and draw a segment to it. curveVertex(84, 91); curveVertex(84, 91); // Add the anchor points to draw between. curveVertex(68, 19); curveVertex(21, 17); // Add the second control point. curveVertex(32, 91); // Uncomment the next line to draw the segment to the second control point. // curveVertex(32, 91); endShape(); The first two parameters, `x` and `y`, set the vertex’s location. For example, calling `curveVertex(10, 10)` adds a point to the curve at `(10, 10)`. Spline curves can also be drawn in 3D using WebGL mode. The 3D version of `curveVertex()` has three arguments because each point has x-, y-, and z-coordinates. By default, the vertex’s z-coordinate is set to 0. Note: `curveVertex()` won’t work when an argument is passed to beginShape(). method curveVertex ` function setup() { createCanvas(100, 100); background(200); // Style the shape. noFill(); strokeWeight(1); // Start drawing the shape. beginShape(); // Add the first control point. curveVertex(32, 91); // Add the anchor points. curveVertex(21, 17); curveVertex(68, 19); // Add the second control point. curveVertex(84, 91); // Stop drawing the shape. endShape(); // Style the anchor and control points. strokeWeight(5); // Draw the anchor points in black. stroke(0); point(21, 17); point(68, 19); // Draw the control points in red. stroke(255, 0, 0); point(32, 91); point(84, 91); describe( 'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Style the shape. noFill(); strokeWeight(1); // Start drawing the shape. beginShape(); // Add the first control point and draw a segment to it. curveVertex(32, 91); curveVertex(32, 91); // Add the anchor points. curveVertex(21, 17); curveVertex(68, 19); // Add the second control point. curveVertex(84, 91); // Stop drawing the shape. endShape(); // Style the anchor and control points. strokeWeight(5); // Draw the anchor points in black. stroke(0); point(21, 17); point(68, 19); // Draw the control points in red. stroke(255, 0, 0); point(32, 91); point(84, 91); describe( 'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.' ); } ` ` function setup() { createCanvas(100, 100); background(200); // Style the shape. noFill(); strokeWeight(1); // Start drawing the shape. beginShape(); // Add the first control point and draw a segment to it. curveVertex(32, 91); curveVertex(32, 91); // Add the anchor points. curveVertex(21, 17); curveVertex(68, 19); // Add the second control point and draw a segment to it. curveVertex(84, 91); curveVertex(84, 91); // Stop drawing the shape. endShape(); // Style the anchor and control points. strokeWeight(5); // Draw the anchor points in black. stroke(0); point(21, 17); point(68, 19); // Draw the control points in red. stroke(255, 0, 0); point(32, 91); point(84, 91); describe( 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.' ); } ` ` // Click the mouse near the red dot in the bottom-left corner // and drag to change the curve's shape. let x1 = 32; let y1 = 91; let isChanging = false; function setup() { createCanvas(100, 100); describe( 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.' ); } function draw() { background(200); // Style the shape. noFill(); stroke(0); strokeWeight(1); // Start drawing the shape. beginShape(); // Add the first control point and draw a segment to it. curveVertex(x1, y1); curveVertex(x1, y1); // Add the anchor points. curveVertex(21, 17); curveVertex(68, 19); // Add the second control point and draw a segment to it. curveVertex(84, 91); curveVertex(84, 91); // Stop drawing the shape. endShape(); // Style the anchor and control points. strokeWeight(5); // Draw the anchor points in black. stroke(0); point(21, 17); point(68, 19); // Draw the control points in red. stroke(255, 0, 0); point(x1, y1); point(84, 91); } // Start changing the first control point if the user clicks near it. function mousePressed() { if (dist(mouseX, mouseY, x1, y1) < 20) { isChanging = true; } } // Stop changing the first control point when the user releases the mouse. function mouseReleased() { isChanging = false; } // Update the first control point while the user drags the mouse. function mouseDragged() { if (isChanging === true) { x1 = mouseX; y1 = mouseY; } } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. beginShape(); // Add the first control point and draw a segment to it. curveVertex(32, 91); curveVertex(32, 91); // Add the anchor points. curveVertex(21, 17); curveVertex(68, 19); // Add the second control point. curveVertex(84, 91); curveVertex(84, 91); // Stop drawing the shape. endShape(); describe('A ghost shape drawn in white on a gray background.'); } ` p5 Shape Vertex x x-coordinate of the vertex Number y y-coordinate of the vertex Number x Number y Number z z-coordinate of the vertex. Number Stops creating a hole within a flat shape. The beginContour() and `endContour()` functions allow for creating negative space within custom shapes that are flat. beginContour() begins adding vertices to a negative space and `endContour()` stops adding them. beginContour() and `endContour()` must be called between beginShape() and endShape(). Transformations such as translate(), rotate(), and scale() don't work between beginContour() and `endContour()`. It's also not possible to use other shapes, such as ellipse() or rect(), between beginContour() and `endContour()`. Note: The vertices that define a negative space must "wind" in the opposite direction from the outer shape. First, draw vertices for the outer shape clockwise order. Then, draw vertices for the negative space in counter-clockwise order. method endContour ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. beginShape(); // Exterior vertices, clockwise winding. vertex(10, 10); vertex(90, 10); vertex(90, 90); vertex(10, 90); // Interior vertices, counter-clockwise winding. beginContour(); vertex(30, 30); vertex(30, 70); vertex(70, 70); vertex(70, 30); endContour(); // Stop drawing the shape. endShape(CLOSE); describe('A white square with a square hole in its center drawn on a gray background.'); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white square with a square hole in its center drawn on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Start drawing the shape. beginShape(); // Exterior vertices, clockwise winding. vertex(-40, -40); vertex(40, -40); vertex(40, 40); vertex(-40, 40); // Interior vertices, counter-clockwise winding. beginContour(); vertex(-20, -20); vertex(-20, 20); vertex(20, 20); vertex(20, -20); endContour(); // Stop drawing the shape. endShape(CLOSE); } ` p5 Shape Vertex Begins adding vertices to a custom shape. The beginShape() and `endShape()` functions allow for creating custom shapes in 2D or 3D. beginShape() begins adding vertices to a custom shape and `endShape()` stops adding them. The first parameter, `mode`, is optional. By default, the first and last vertices of a shape aren't connected. If the constant `CLOSE` is passed, as in `endShape(CLOSE)`, then the first and last vertices will be connected. The second parameter, `count`, is also optional. In WebGL mode, it’s more efficient to draw many copies of the same shape using a technique called instancing. The `count` parameter tells WebGL mode how many copies to draw. For example, calling `endShape(CLOSE, 400)` after drawing a custom shape will make it efficient to draw 400 copies. This feature requires writing a custom shader. After calling beginShape(), shapes can be built by calling vertex(), bezierVertex(), quadraticVertex(), and/or curveVertex(). Calling `endShape()` will stop adding vertices to the shape. Each shape will be outlined with the current stroke color and filled with the current fill color. Transformations such as translate(), rotate(), and scale() don't work between beginShape() and `endShape()`. It's also not possible to use other shapes, such as ellipse() or rect(), between beginShape() and `endShape()`. method endShape mode use CLOSE to close the shape Constant count number of times you want to draw/instance the shape (for WebGL mode). Integer ` function setup() { createCanvas(100, 100); background(200); // Style the shapes. noFill(); // Left triangle. beginShape(); vertex(20, 20); vertex(45, 20); vertex(45, 80); endShape(CLOSE); // Right triangle. beginShape(); vertex(50, 20); vertex(75, 20); vertex(75, 80); endShape(); describe( 'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.' ); } ` ` // Note: A "uniform" is a global variable within a shader program. // Create a string with the vertex shader program. // The vertex shader is called for each vertex. let vertSrc = `#version 300 es precision mediump float; in vec3 aPosition; flat out int instanceID; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { // Copy the instance ID to the fragment shader. instanceID = gl_InstanceID; vec4 positionVec4 = vec4(aPosition, 1.0); // gl_InstanceID represents a numeric value for each instance. // Using gl_InstanceID allows us to move each instance separately. // Here we move each instance horizontally by ID * 23. float xOffset = float(gl_InstanceID) * 23.0; // Apply the offset to the final position. gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 - vec4(xOffset, 0.0, 0.0, 0.0)); } `; // Create a string with the fragment shader program. // The fragment shader is called for each pixel. let fragSrc = `#version 300 es precision mediump float; out vec4 outColor; flat in int instanceID; uniform float numInstances; void main() { vec4 red = vec4(1.0, 0.0, 0.0, 1.0); vec4 blue = vec4(0.0, 0.0, 1.0, 1.0); // Normalize the instance ID. float normId = float(instanceID) / numInstances; // Mix between two colors using the normalized instance ID. outColor = mix(red, blue, normId); } `; function setup() { createCanvas(100, 100, WEBGL); // Create a p5.Shader object. let myShader = createShader(vertSrc, fragSrc); background(220); // Compile and apply the p5.Shader. shader(myShader); // Set the numInstances uniform. myShader.setUniform('numInstances', 4); // Translate the origin to help align the drawing. translate(25, -10); // Style the shapes. noStroke(); // Draw the shapes. beginShape(); vertex(0, 0); vertex(0, 20); vertex(20, 20); vertex(20, 0); vertex(0, 0); endShape(CLOSE, 4); describe('A row of four squares. Their colors transition from purple on the left to red on the right'); } ` p5 Shape Vertex Adds a quadratic Bézier curve segment to a custom shape. `quadraticVertex()` adds a curved segment to custom shapes. The Bézier curve segments it creates are similar to those made by the bezierVertex() function. `quadraticVertex()` must be called between the beginShape() and endShape() functions. The curved segment uses the previous vertex as the first anchor point, so there must be at least one call to vertex() before `quadraticVertex()` can be used. The first two parameters, `cx` and `cy`, set the curve’s control point. The control point "pulls" the curve towards its. The last two parameters, `x3`, and `y3`, set the last anchor point. The last anchor point is where the curve ends. Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of `bezierVertex()` has eight arguments because each point has x-, y-, and z-coordinates. Note: `quadraticVertex()` won’t work when an argument is passed to beginShape(). method quadraticVertex ` function setup() { createCanvas(100, 100); background(200); // Style the curve. noFill(); // Draw the curve. beginShape(); vertex(20, 20); quadraticVertex(80, 20, 50, 50); endShape(); describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Draw the curve. noFill(); beginShape(); vertex(20, 20); quadraticVertex(80, 20, 50, 50); endShape(); // Draw red lines from the anchor points to the control point. stroke(255, 0, 0); line(20, 20, 80, 20); line(50, 50, 80, 20); // Draw the anchor points in black. strokeWeight(5); stroke(0); point(20, 20); point(50, 50); // Draw the control point in red. stroke(255, 0, 0); point(80, 20); describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.'); } ` ` // Click the mouse near the red dot in the top-right corner // and drag to change the curve's shape. let x2 = 80; let y2 = 20; let isChanging = false; function setup() { createCanvas(100, 100); describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.'); } function draw() { background(200); // Style the curve. noFill(); strokeWeight(1); stroke(0); // Draw the curve. beginShape(); vertex(20, 20); quadraticVertex(x2, y2, 50, 50); endShape(); // Draw red lines from the anchor points to the control point. stroke(255, 0, 0); line(20, 20, x2, y2); line(50, 50, x2, y2); // Draw the anchor points in black. strokeWeight(5); stroke(0); point(20, 20); point(50, 50); // Draw the control point in red. stroke(255, 0, 0); point(x2, y2); } // Start changing the first control point if the user clicks near it. function mousePressed() { if (dist(mouseX, mouseY, x2, y2) < 20) { isChanging = true; } } // Stop changing the first control point when the user releases the mouse. function mouseReleased() { isChanging = false; } // Update the first control point while the user drags the mouse. function mouseDragged() { if (isChanging === true) { x2 = mouseX; y2 = mouseY; } } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. beginShape(); // Add the curved segments. vertex(20, 20); quadraticVertex(80, 20, 50, 50); quadraticVertex(20, 80, 80, 80); // Add the straight segments. vertex(80, 10); vertex(20, 10); vertex(20, 20); // Stop drawing the shape. endShape(); describe('A white puzzle piece drawn on a gray background.'); } ` ` // Click the and drag the mouse to view the scene from a different angle. function setup() { createCanvas(100, 100, WEBGL); describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.'); } function draw() { background(50); // Enable orbiting with the mouse. orbitControl(); // Style the first puzzle piece. noStroke(); fill(255); // Draw the first puzzle piece. beginShape(); vertex(-30, -30, 0); quadraticVertex(30, -30, 0, 0, 0, 0); quadraticVertex(-30, 30, 0, 30, 30, 0); vertex(30, -40, 0); vertex(-30, -40, 0); vertex(-30, -30, 0); endShape(); // Style the second puzzle piece. stroke(255); noFill(); // Draw the second puzzle piece. beginShape(); vertex(-30, -30, -20); quadraticVertex(30, -30, -20, 0, 0, -20); quadraticVertex(-30, 30, -20, 30, 30, -20); vertex(30, -40, -20); vertex(-30, -40, -20); vertex(-30, -30, -20); endShape(); } ` p5 Shape Vertex cx x-coordinate of the control point. Number cy y-coordinate of the control point. Number x3 x-coordinate of the anchor point. Number y3 y-coordinate of the anchor point. Number cx Number cy Number cz z-coordinate of the control point. Number x3 Number y3 Number z3 z-coordinate of the anchor point. Number Adds a vertex to a custom shape. `vertex()` sets the coordinates of vertices drawn between the beginShape() and endShape() functions. The first two parameters, `x` and `y`, set the x- and y-coordinates of the vertex. The third parameter, `z`, is optional. It sets the z-coordinate of the vertex in WebGL mode. By default, `z` is 0. The fourth and fifth parameters, `u` and `v`, are also optional. They set the u- and v-coordinates for the vertex’s texture when used with endShape(). By default, `u` and `v` are both 0. method vertex ` function setup() { createCanvas(100, 100); background(200); // Style the shape. strokeWeight(3); // Start drawing the shape. // Only draw the vertices. beginShape(POINTS); // Add the vertices. vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); // Stop drawing the shape. endShape(); describe('Four black dots that form a square are drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Start drawing the shape. beginShape(); // Add vertices. vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); // Stop drawing the shape. endShape(CLOSE); describe('A white square on a gray background.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); background(200); // Start drawing the shape. beginShape(); // Add vertices. vertex(-20, -30, 0); vertex(35, -30, 0); vertex(35, 25, 0); vertex(-20, 25, 0); // Stop drawing the shape. endShape(CLOSE); describe('A white square on a gray background.'); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe('A white square spins around slowly on a gray background.'); } function draw() { background(200); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Start drawing the shape. beginShape(); // Add vertices. vertex(-20, -30, 0); vertex(35, -30, 0); vertex(35, 25, 0); vertex(-20, 25, 0); // Stop drawing the shape. endShape(CLOSE); } ` ` let img; // Load an image to apply as a texture. function preload() { img = loadImage('assets/laDefense.jpg'); } function setup() { createCanvas(100, 100, WEBGL); describe('A photograph of a ceiling rotates slowly against a gray background.'); } function draw() { background(200); // Rotate around the y-axis. rotateY(frameCount * 0.01); // Style the shape. noStroke(); // Apply the texture. texture(img); textureMode(NORMAL); // Start drawing the shape beginShape(); // Add vertices. vertex(-20, -30, 0, 0, 0); vertex(35, -30, 0, 1, 0); vertex(35, 25, 0, 1, 1); vertex(-20, 25, 0, 0, 1); // Stop drawing the shape. endShape(); } ` p5 Shape Vertex x x-coordinate of the vertex. Number y y-coordinate of the vertex. Number x Number y Number z z-coordinate of the vertex. Defaults to 0. Number x Number y Number z Number u u-coordinate of the vertex's texture. Defaults to 0. Number v v-coordinate of the vertex's texture. Defaults to 0. Number Sets the normal vector for vertices in a custom 3D shape. 3D shapes created with beginShape() and endShape() are made by connecting sets of points called vertices. Each vertex added with vertex() has a normal vector that points away from it. The normal vector controls how light reflects off the shape. `normal()` can be called two ways with different parameters to define the normal vector's components. The first way to call `normal()` has three parameters, `x`, `y`, and `z`. If `Number`s are passed, as in `normal(1, 2, 3)`, they set the x-, y-, and z-components of the normal vector. The second way to call `normal()` has one parameter, `vector`. If a p5.Vector object is passed, as in `normal(myVector)`, its components will be used to set the normal vector. `normal()` changes the normal vector of vertices added to a custom shape with vertex(). `normal()` must be called between the beginShape() and endShape() functions, just like vertex(). The normal vector set by calling `normal()` will affect all following vertices until `normal()` is called again: beginShape(); // Set the vertex normal. normal(-0.4, -0.4, 0.8); // Add a vertex. vertex(-30, -30, 0); // Set the vertex normal. normal(0, 0, 1); // Add vertices. vertex(30, -30, 0); vertex(30, 30, 0); // Set the vertex normal. normal(0.4, -0.4, 0.8); // Add a vertex. vertex(-30, 30, 0); endShape(); method normal ` // Click the and drag the mouse to view the scene from a different angle. function setup() { createCanvas(100, 100, WEBGL); describe( 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.' ); } function draw() { background(0); // Enable orbiting with the mouse. orbitControl(); // Style the shape. normalMaterial(); noStroke(); // Draw the shape. beginShape(); vertex(-30, -30, 0); vertex(30, -30, 0); vertex(30, 30, 0); vertex(-30, 30, 0); endShape(); } ` ` // Click the and drag the mouse to view the scene from a different angle. function setup() { createCanvas(100, 100, WEBGL); describe( 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.' ); } function draw() { background(0); // Enable orbiting with the mouse. orbitControl(); // Style the shape. normalMaterial(); noStroke(); // Draw the shape. // Use normal() to set vertex normals. beginShape(); normal(-0.4, -0.4, 0.8); vertex(-30, -30, 0); normal(0, 0, 1); vertex(30, -30, 0); vertex(30, 30, 0); normal(0.4, -0.4, 0.8); vertex(-30, 30, 0); endShape(); } ` ` // Click the and drag the mouse to view the scene from a different angle. function setup() { createCanvas(100, 100, WEBGL); describe( 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.' ); } function draw() { background(0); // Enable orbiting with the mouse. orbitControl(); // Style the shape. normalMaterial(); noStroke(); // Create p5.Vector objects. let n1 = createVector(-0.4, -0.4, 0.8); let n2 = createVector(0, 0, 1); let n3 = createVector(0.4, -0.4, 0.8); // Draw the shape. // Use normal() to set vertex normals. beginShape(); normal(n1); vertex(-30, -30, 0); normal(n2); vertex(30, -30, 0); vertex(30, 30, 0); normal(n3); vertex(-30, 30, 0); endShape(); } ` p5 Shape Vertex vector vertex normal as a p5.Vector object. p5.Vector x x-component of the vertex normal. Number y y-component of the vertex normal. Number z z-component of the vertex normal. Number Version of this p5.js. property VERSION String p5 Constants Constants The default, two-dimensional renderer. property P2D String p5 Constants Constants One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders. `WEBGL` differs from the default `P2D` renderer in the following ways: * Coordinate System \- When drawing in `WEBGL` mode, the origin point (0,0,0) is located at the center of the screen, not the top-left corner. See the tutorial page about coordinates and transformations. * 3D Shapes \- `WEBGL` mode can be used to draw 3-dimensional shapes like box(), sphere(), cone(), and more. See the tutorial page about custom geometry to make more complex objects. * Shape Detail \- When drawing in `WEBGL` mode, you can specify how smooth curves should be drawn by using a `detail` parameter. See the wiki section about shapes for a more information and an example. * Textures \- A texture is like a skin that wraps onto a shape. See the wiki section about textures for examples of mapping images onto surfaces with textures. * Materials and Lighting \- `WEBGL` offers different types of lights like ambientLight() to place around a scene. Materials like specularMaterial() reflect the lighting to convey shape and depth. See the tutorial page for styling and appearance to experiment with different combinations. * Camera \- The viewport of a `WEBGL` sketch can be adjusted by changing camera attributes. See the tutorial page section about cameras for an explanation of camera controls. * Text \- `WEBGL` requires opentype/truetype font files to be preloaded using loadFont(). See the wiki section about text for details, along with a workaround. * Shaders \- Shaders are hardware accelerated programs that can be used for a variety of effects and graphics. See the introduction to shaders to get started with shaders in p5.js. * Graphics Acceleration \- `WEBGL` mode uses the graphics card instead of the CPU, so it may help boost the performance of your sketch (example: drawing more shapes on the screen at once). To learn more about WEBGL mode, check out all the interactive WEBGL tutorials in the "Tutorials" section of this website, or read the wiki article "Getting started with WebGL in p5". property WEBGL String p5 Constants Constants One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2), which can be used to determine what capabilities the rendering environment has. property WEBGL2 String p5 Constants Constants property ARROW String p5 Constants Constants property CROSS String p5 Constants Constants property HAND String p5 Constants Constants property MOVE String p5 Constants Constants property TEXT String p5 Constants Constants property WAIT String p5 Constants Constants A `Number` constant that's approximately 1.5708. `HALF_PI` is half the value of the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling `rotate(HALF_PI)` rotates the coordinate system `HALF_PI` radians, which is a quarter turn (90˚). Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI` radians equals 90˚, and `QUARTER_PI` radians equals 45˚. property HALF_PI Number ` function setup() { createCanvas(100, 100); background(200); // Draw an arc from 0 to HALF_PI. arc(50, 50, 80, 80, 0, HALF_PI); describe('The bottom-right quarter of a circle drawn in white on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Translate the origin to the center. translate(50, 50); // Draw a line. line(0, 0, 40, 0); // Rotate a quarter turn. rotate(HALF_PI); // Draw the same line, rotated. line(0, 0, 40, 0); describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.'); } ` ` function setup() { createCanvas(100, 100); describe( 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.' ); } function draw() { background(200); // Translate the origin to the center. translate(50, 50); // Calculate the x-coordinates. let x1 = 40 * sin(frameCount * 0.05); let x2 = 40 * sin(frameCount * 0.05 + HALF_PI); // Style the oscillators. noStroke(); // Draw the red oscillator. fill(255, 0, 0); circle(x1, 0, 20); // Draw the blue oscillator. fill(0, 0, 255); circle(x2, 0, 20); } ` p5 Constants Constants A `Number` constant that's approximately 3.1416. `PI` is the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling `rotate(PI)` rotates the coordinate system `PI` radians, which is a half turn (180˚). Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI` radians equals 90˚, and `QUARTER_PI` radians equals 45˚. property PI Number ` function setup() { createCanvas(100, 100); background(200); // Draw an arc from 0 to PI. arc(50, 50, 80, 80, 0, PI); describe('The bottom half of a circle drawn in white on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Translate the origin to the center. translate(50, 50); // Draw a line. line(0, 0, 40, 0); // Rotate a half turn. rotate(PI); // Draw the same line, rotated. line(0, 0, 40, 0); describe('A horizontal black line on a gray background.'); } ` ` function setup() { createCanvas(100, 100); describe( 'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.' ); } function draw() { background(200); // Translate the origin to the center. translate(50, 50); // Calculate the x-coordinates. let x1 = 40 * sin(frameCount * 0.05); let x2 = 40 * sin(frameCount * 0.05 + PI); // Style the oscillators. noStroke(); // Draw the red oscillator. fill(255, 0, 0); circle(x1, 0, 20); // Draw the blue oscillator. fill(0, 0, 255); circle(x2, 0, 20); } ` p5 Constants Constants A `Number` constant that's approximately 0.7854. `QUARTER_PI` is one-fourth the value of the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling `rotate(QUARTER_PI)` rotates the coordinate system `QUARTER_PI` radians, which is an eighth of a turn (45˚). Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI` radians equals 90˚, and `QUARTER_PI` radians equals 45˚. property QUARTER_PI Number ` function setup() { createCanvas(100, 100); background(200); // Draw an arc from 0 to QUARTER_PI. arc(50, 50, 80, 80, 0, QUARTER_PI); describe('A one-eighth slice of a circle drawn in white on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Translate the origin to the center. translate(50, 50); // Draw a line. line(0, 0, 40, 0); // Rotate an eighth turn. rotate(QUARTER_PI); // Draw the same line, rotated. line(0, 0, 40, 0); describe('Two black lines that form a "V" opening towards the bottom-right corner of a gray square.'); } ` ` function setup() { createCanvas(100, 100); describe( 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.' ); } function draw() { background(200); // Translate the origin to the center. translate(50, 50); // Calculate the x-coordinates. let x1 = 40 * sin(frameCount * 0.05); let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI); // Style the oscillators. noStroke(); // Draw the red oscillator. fill(255, 0, 0); circle(x1, 0, 20); // Draw the blue oscillator. fill(0, 0, 255); circle(x2, 0, 20); } ` p5 Constants Constants A `Number` constant that's approximately 6.2382. `TAU` is twice the value of the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling `rotate(TAU)` rotates the coordinate system `TAU` radians, which is one full turn (360˚). `TAU` and `TWO_PI` are equal. Note: `TAU` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI` radians equals 90˚, and `QUARTER_PI` radians equals 45˚. property TAU Number ` function setup() { createCanvas(100, 100); background(200); // Draw an arc from 0 to TAU. arc(50, 50, 80, 80, 0, TAU); describe('A white circle drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Translate the origin to the center. translate(50, 50); // Draw a line. line(0, 0, 40, 0); // Rotate a full turn. rotate(TAU); // Style the second line. strokeWeight(5); // Draw the same line, shorter and rotated. line(0, 0, 20, 0); describe( 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.' ); } ` ` function setup() { createCanvas(100, 100); describe( 'A red circle with a blue center oscillates from left to right on a gray background.' ); } function draw() { background(200); // Translate the origin to the center. translate(50, 50); // Calculate the x-coordinates. let x1 = 40 * sin(frameCount * 0.05); let x2 = 40 * sin(frameCount * 0.05 + TAU); // Style the oscillators. noStroke(); // Draw the red oscillator. fill(255, 0, 0); circle(x1, 0, 20); // Draw the blue oscillator, smaller. fill(0, 0, 255); circle(x2, 0, 10); } ` p5 Constants Constants A `Number` constant that's approximately 6.2382. `TWO_PI` is twice the value of the mathematical constant π. It's useful for many tasks that involve rotation and oscillation. For example, calling `rotate(TWO_PI)` rotates the coordinate system `TWO_PI` radians, which is one full turn (360˚). `TWO_PI` and `TAU` are equal. Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI` radians equals 90˚, and `QUARTER_PI` radians equals 45˚. property TWO_PI Number ` function setup() { createCanvas(100, 100); background(200); // Draw an arc from 0 to TWO_PI. arc(50, 50, 80, 80, 0, TWO_PI); describe('A white circle drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Translate the origin to the center. translate(50, 50); // Draw a line. line(0, 0, 40, 0); // Rotate a full turn. rotate(TWO_PI); // Style the second line. strokeWeight(5); // Draw the same line, shorter and rotated. line(0, 0, 20, 0); describe( 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.' ); } ` ` function setup() { createCanvas(100, 100); describe( 'A red circle with a blue center oscillates from left to right on a gray background.' ); } function draw() { background(200); // Translate the origin to the center. translate(50, 50); // Calculate the x-coordinates. let x1 = 40 * sin(frameCount * 0.05); let x2 = 40 * sin(frameCount * 0.05 + TWO_PI); // Style the oscillators. noStroke(); // Draw the red oscillator. fill(255, 0, 0); circle(x1, 0, 20); // Draw the blue oscillator, smaller. fill(0, 0, 255); circle(x2, 0, 10); } ` p5 Constants Constants A `String` constant that's used to set the angleMode(). By default, functions such as rotate() and sin() expect angles measured in units of radians. Calling `angleMode(DEGREES)` ensures that angles are measured in units of degrees. Note: `TWO_PI` radians equals 360˚. property DEGREES String ` function setup() { createCanvas(100, 100); background(200); // Draw a red arc from 0 to HALF_PI radians. fill(255, 0, 0); arc(50, 50, 80, 80, 0, HALF_PI); // Use degrees. angleMode(DEGREES); // Draw a blue arc from 90˚ to 180˚. fill(0, 0, 255); arc(50, 50, 80, 80, 90, 180); describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.'); } ` p5 Constants Constants A `String` constant that's used to set the angleMode(). By default, functions such as rotate() and sin() expect angles measured in units of radians. Calling `angleMode(RADIANS)` ensures that angles are measured in units of radians. Doing so can be useful if the angleMode() has been set to DEGREES. Note: `TWO_PI` radians equals 360˚. property RADIANS String ` function setup() { createCanvas(100, 100); background(200); // Use degrees. angleMode(DEGREES); // Draw a red arc from 0˚ to 90˚. fill(255, 0, 0); arc(50, 50, 80, 80, 0, 90); // Use radians. angleMode(RADIANS); // Draw a blue arc from HALF_PI to PI. fill(0, 0, 255); arc(50, 50, 80, 80, HALF_PI, PI); describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.'); } ` p5 Constants Constants property CORNER String p5 Constants Constants property CORNERS String p5 Constants Constants property RADIUS String p5 Constants Constants property RIGHT String p5 Constants Constants property LEFT String p5 Constants Constants property CENTER String p5 Constants Constants property TOP String p5 Constants Constants property BOTTOM String p5 Constants Constants property BASELINE String alphabetic p5 Constants Constants property POINTS Number 0x0000 p5 Constants Constants property LINES Number 0x0001 p5 Constants Constants property LINE_STRIP Number 0x0003 p5 Constants Constants property LINE_LOOP Number 0x0002 p5 Constants Constants property TRIANGLES Number 0x0004 p5 Constants Constants property TRIANGLE_FAN Number 0x0006 p5 Constants Constants property TRIANGLE_STRIP Number 0x0005 p5 Constants Constants property QUADS String p5 Constants Constants property QUAD_STRIP String quad_strip p5 Constants Constants property TESS String tess p5 Constants Constants property CLOSE String p5 Constants Constants property OPEN String p5 Constants Constants property CHORD String p5 Constants Constants property PIE String p5 Constants Constants property PROJECT String square p5 Constants Constants property SQUARE String butt p5 Constants Constants property ROUND String p5 Constants Constants property BEVEL String p5 Constants Constants property MITER String p5 Constants Constants property RGB String p5 Constants Constants HSB (hue, saturation, brightness) is a type of color model. You can learn more about it at HSB. property HSB String p5 Constants Constants property HSL String p5 Constants Constants AUTO allows us to automatically set the width or height of an element (but not both), based on the current height and width of the element. Only one parameter can be passed to the size function as AUTO, at a time. property AUTO String p5 Constants Constants property ALT Number p5 Constants Constants property BACKSPACE Number p5 Constants Constants property CONTROL Number p5 Constants Constants property DELETE Number p5 Constants Constants property DOWN_ARROW Number p5 Constants Constants property ENTER Number p5 Constants Constants property ESCAPE Number p5 Constants Constants property LEFT_ARROW Number p5 Constants Constants property OPTION Number p5 Constants Constants property RETURN Number p5 Constants Constants property RIGHT_ARROW Number p5 Constants Constants property SHIFT Number p5 Constants Constants property TAB Number p5 Constants Constants property UP_ARROW Number p5 Constants Constants property BLEND String source-over p5 Constants Constants property REMOVE String destination-out p5 Constants Constants property ADD String lighter p5 Constants Constants property DARKEST String p5 Constants Constants property LIGHTEST String lighten p5 Constants Constants property DIFFERENCE String p5 Constants Constants property SUBTRACT String p5 Constants Constants property EXCLUSION String p5 Constants Constants property MULTIPLY String p5 Constants Constants property SCREEN String p5 Constants Constants property REPLACE String copy p5 Constants Constants property OVERLAY String p5 Constants Constants property HARD_LIGHT String p5 Constants Constants property SOFT_LIGHT String p5 Constants Constants property DODGE String color-dodge p5 Constants Constants property BURN String color-burn p5 Constants Constants property THRESHOLD String p5 Constants Constants property GRAY String p5 Constants Constants property OPAQUE String p5 Constants Constants property INVERT String p5 Constants Constants property POSTERIZE String p5 Constants Constants property DILATE String p5 Constants Constants property ERODE String p5 Constants Constants property BLUR String p5 Constants Constants property NORMAL String p5 Constants Constants property ITALIC String p5 Constants Constants property BOLD String p5 Constants Constants property BOLDITALIC String p5 Constants Constants property CHAR String p5 Constants Constants property WORD String p5 Constants Constants property LINEAR String p5 Constants Constants property QUADRATIC String p5 Constants Constants property BEZIER String p5 Constants Constants property CURVE String p5 Constants Constants property STROKE String p5 Constants Constants property FILL String p5 Constants Constants property TEXTURE String p5 Constants Constants property IMMEDIATE String p5 Constants Constants property IMAGE String p5 Constants Constants property NEAREST String p5 Constants Constants property REPEAT String p5 Constants Constants property CLAMP String p5 Constants Constants property MIRROR String p5 Constants Constants property FLAT String p5 Constants Constants property SMOOTH String p5 Constants Constants property LANDSCAPE String p5 Constants Constants property PORTRAIT String p5 Constants Constants property GRID String p5 Constants Constants property AXES String p5 Constants Constants property LABEL String p5 Constants Constants property FALLBACK String p5 Constants Constants property CONTAIN String p5 Constants Constants property COVER String p5 Constants Constants property UNSIGNED_BYTE String p5 Constants Constants property UNSIGNED_INT String p5 Constants Constants property FLOAT String p5 Constants Constants property HALF_FLOAT String p5 Constants Constants property RGBA String p5 Constants Constants Displays text in the web browser's console. `print()` is helpful for printing values while debugging. Each call to `print()` creates a new line of text. Note: Call `print(' ')` to print a blank line. Calling `print()` without an argument opens the browser's dialog for printing documents. method print contents content to print to the console. Any ` function setup() { // Prints "hello, world" to the console. print('hello, world'); } ` ` function setup() { let name = 'ada'; // Prints "hello, ada" to the console. print(`hello, ${name}`); } ` p5 Environment Environment A `Number` variable that tracks the number of frames drawn since the sketch started. `frameCount`'s value is 0 inside setup(). It increments by 1 each time the code in draw() finishes executing. property frameCount Integer ` function setup() { createCanvas(100, 100); background(200); // Display the value of // frameCount. textSize(30); textAlign(CENTER, CENTER); text(frameCount, 50, 50); describe('The number 0 written in black in the middle of a gray square.'); } ` ` function setup() { createCanvas(100, 100); // Set the frameRate to 30. frameRate(30); textSize(30); textAlign(CENTER, CENTER); describe('A number written in black in the middle of a gray square. Its value increases rapidly.'); } function draw() { background(200); // Display the value of // frameCount. text(frameCount, 50, 50); } ` p5 Environment Environment A `Number` variable that tracks the number of milliseconds it took to draw the last frame. `deltaTime` contains the amount of time it took draw() to execute during the previous frame. It's useful for simulating physics. property deltaTime Integer ` let x = 0; let speed = 0.05; function setup() { createCanvas(100, 100); // Set the frameRate to 30. frameRate(30); describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.'); } function draw() { background(200); // Use deltaTime to calculate // a change in position. let deltaX = speed * deltaTime; // Update the x variable. x += deltaX; // Reset x to 0 if it's // greater than 100. if (x > 100) { x = 0; } // Use x to set the circle's // position. circle(x, 50, 20); } ` p5 Environment Environment A `Boolean` variable that's `true` if the browser is focused and `false` if not. Note: The browser window can only receive input if it's focused. property focused Boolean ` // Open this example in two separate browser // windows placed side-by-side to demonstrate. function setup() { createCanvas(100, 100); describe('A square changes color from green to red when the browser window is out of focus.'); } function draw() { // Change the background color // when the browser window // goes in/out of focus. if (focused === true) { background(0, 255, 0); } else { background(255, 0, 0); } } ` p5 Environment Environment Changes the cursor's appearance. The first parameter, `type`, sets the type of cursor to display. The built-in options are `ARROW`, `CROSS`, `HAND`, `MOVE`, `TEXT`, and `WAIT`. `cursor()` also recognizes standard CSS cursor properties passed as strings: `'help'`, `'wait'`, `'crosshair'`, `'not-allowed'`, `'zoom-in'`, and `'grab'`. If the path to an image is passed, as in `cursor('assets/target.png')`, then the image will be used as the cursor. Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be at most 32 by 32 pixels large. The parameters `x` and `y` are optional. If an image is used for the cursor, `x` and `y` set the location pointed to within the image. They are both 0 by default, so the cursor points to the image's top-left corner. `x` and `y` must be less than the image's width and height, respectively. method cursor type Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT. Native CSS properties: 'grab', 'progress', and so on. Path to cursor image. String|Constant x horizontal active spot of the cursor. Number y vertical active spot of the cursor. Number ` function setup() { createCanvas(100, 100); describe('A gray square. The cursor appears as crosshairs.'); } function draw() { background(200); // Set the cursor to crosshairs: + cursor(CROSS); } ` ` function setup() { createCanvas(100, 100); describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.'); } function draw() { background(200); // Divide the canvas into quadrants. line(50, 0, 50, 100); line(0, 50, 100, 50); // Change cursor based on mouse position. if (mouseX < 50 && mouseY < 50) { cursor(CROSS); } else if (mouseX > 50 && mouseY < 50) { cursor('progress'); } else if (mouseX > 50 && mouseY > 50) { cursor('https://avatars0.githubusercontent.com/u/1617169?s=16'); } else { cursor('grab'); } } ` ` function setup() { createCanvas(100, 100); describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.'); } function draw() { background(200); // Change the cursor's active spot // when the mouse is pressed. if (mouseIsPressed === true) { cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8); } else { cursor('https://avatars0.githubusercontent.com/u/1617169?s=16'); } } ` p5 Environment Environment Sets the number of frames to draw per second. Calling `frameRate()` with one numeric argument, as in `frameRate(30)`, attempts to draw 30 frames per second (FPS). The target frame rate may not be achieved depending on the sketch's processing needs. Most computers default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are fast enough for smooth animations. Calling `frameRate()` without an argument returns the current frame rate. The value returned is an approximation. method frameRate ` function setup() { createCanvas(100, 100); describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.'); } function draw() { background(200); // Set the x variable based // on the current frameCount. let x = frameCount % 100; // If the mouse is pressed, // decrease the frame rate. if (mouseIsPressed === true) { frameRate(10); } else { frameRate(60); } // Use x to set the circle's // position. circle(x, 50, 20); } ` ` function setup() { createCanvas(100, 100); describe('A number written in black on a gray background. The number decreases when the mouse is pressed.'); } function draw() { background(200); // If the mouse is pressed, do lots // of math to slow down drawing. if (mouseIsPressed === true) { for (let i = 0; i < 1000000; i += 1) { random(); } } // Get the current frame rate // and display it. let fps = frameRate(); text(fps, 50, 50); } ` p5 Environment Environment fps number of frames to draw per second. Number ##### return current frame rate. Number Returns the target frame rate. The value is either the system frame rate or the last value passed to frameRate(). method getTargetFrameRate ### return _targetFrameRate Number ` function setup() { createCanvas(100, 100); describe('The number 20 written in black on a gray background.'); } function draw() { background(200); // Set the frame rate to 20. frameRate(20); // Get the target frame rate and // display it. let fps = getTargetFrameRate(); text(fps, 43, 54); } ` p5 Environment Environment Hides the cursor from view. method noCursor ` function setup() { // Hide the cursor. noCursor(); } function draw() { background(200); circle(mouseX, mouseY, 10); describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.'); } ` p5 Environment Environment A `String` variable with the WebGL version in use. `webglVersion`'s value equals one of the following string constants: * `WEBGL2` whose value is `'webgl2'`, * `WEBGL` whose value is `'webgl'`, or * `P2D` whose value is `'p2d'`. This is the default for 2D sketches. See setAttributes() for ways to set the WebGL version. property webglVersion String ` function setup() { background(200); // Display the current WebGL version. text(webglVersion, 42, 54); describe('The text "p2d" written in black on a gray background.'); } ` ` let font; function preload() { // Load a font to use. font = loadFont('assets/inconsolata.otf'); } function setup() { // Create a canvas using WEBGL mode. createCanvas(100, 50, WEBGL); background(200); // Display the current WebGL version. fill(0); textFont(font); text(webglVersion, -15, 5); describe('The text "webgl2" written in black on a gray background.'); } ` ` let font; function preload() { // Load a font to use. font = loadFont('assets/inconsolata.otf'); } function setup() { // Create a canvas using WEBGL mode. createCanvas(100, 50, WEBGL); // Set WebGL to version 1. setAttributes({ version: 1 }); background(200); // Display the current WebGL version. fill(0); textFont(font); text(webglVersion, -14, 5); describe('The text "webgl" written in black on a gray background.'); } ` p5 Environment Environment A `Number` variable that stores the width of the screen display. `displayWidth` is useful for running full-screen programs. Its value depends on the current pixelDensity(). Note: The actual screen width can be computed as `displayWidth * pixelDensity()`. property displayWidth Number ` function setup() { // Set the canvas' width and height // using the display's dimensions. createCanvas(displayWidth, displayHeight); background(200); describe('A gray canvas that is the same size as the display.'); } ` This example does not render anything. p5 Environment Environment A `Number` variable that stores the height of the screen display. `displayHeight` is useful for running full-screen programs. Its value depends on the current pixelDensity(). Note: The actual screen height can be computed as `displayHeight * pixelDensity()`. property displayHeight Number ` function setup() { // Set the canvas' width and height // using the display's dimensions. createCanvas(displayWidth, displayHeight); background(200); describe('A gray canvas that is the same size as the display.'); } ` This example does not render anything. p5 Environment Environment A `Number` variable that stores the width of the browser's viewport. The layout viewport is the area within the browser that's available for drawing. property windowWidth Number ` function setup() { // Set the canvas' width and height // using the browser's dimensions. createCanvas(windowWidth, windowHeight); background(200); describe('A gray canvas that takes up the entire browser window.'); } ` This example does not render anything. p5 Environment Environment A `Number` variable that stores the height of the browser's viewport. The layout viewport is the area within the browser that's available for drawing. property windowHeight Number ` function setup() { // Set the canvas' width and height // using the browser's dimensions. createCanvas(windowWidth, windowHeight); background(200); describe('A gray canvas that takes up the entire browser window.'); } ` This example does not render anything. p5 Environment Environment A function that's called when the browser window is resized. Code placed in the body of `windowResized()` will run when the browser window's size changes. It's a good place to call resizeCanvas() or make other adjustments to accommodate the new window size. The `event` parameter is optional. If added to the function declaration, it can be used for debugging or other purposes. method windowResized event optional resize Event. UIEvent ` function setup() { createCanvas(windowWidth, windowHeight); describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.'); } function draw() { background(200); // Draw a circle at the center. circle(width / 2, height / 2, 50); } // Resize the canvas when the // browser's size changes. function windowResized() { resizeCanvas(windowWidth, windowHeight); } ` This example does not render anything. p5 Environment Environment Called upon each p5 instantiation instead of module import due to the possibility of the window being resized when no sketch is active. p5 Environment Environment A `Number` variable that stores the width of the canvas in pixels. `width`'s default value is 100. Calling createCanvas() or resizeCanvas() changes the value of `width`. Calling noCanvas() sets its value to 0. ` function setup() { background(200); // Display the canvas' width. text(width, 42, 54); describe('The number 100 written in black on a gray square.'); } ` ` function setup() { createCanvas(50, 100); background(200); // Display the canvas' width. text(width, 21, 54); describe('The number 50 written in black on a gray rectangle.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Display the canvas' width. text(width, 42, 54); describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.'); } // If the mouse is pressed, reisze // the canvas and display its new // width. function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { resizeCanvas(50, 100); background(200); text(width, 21, 54); } } ` property width Number p5 Environment Environment A `Number` variable that stores the height of the canvas in pixels. `height`'s default value is 100. Calling createCanvas() or resizeCanvas() changes the value of `height`. Calling noCanvas() sets its value to 0. ` function setup() { background(200); // Display the canvas' height. text(height, 42, 54); describe('The number 100 written in black on a gray square.'); } ` ` function setup() { createCanvas(100, 50); background(200); // Display the canvas' height. text(height, 42, 27); describe('The number 50 written in black on a gray rectangle.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Display the canvas' height. text(height, 42, 54); describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.'); } // If the mouse is pressed, reisze // the canvas and display its new // height. function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { resizeCanvas(100, 50); background(200); text(height, 42, 27); } } ` property height Number p5 Environment Environment Toggles full-screen mode or returns the current mode. Calling `fullscreen(true)` makes the sketch full-screen. Calling `fullscreen(false)` makes the sketch its original size. Calling `fullscreen()` without an argument returns `true` if the sketch is in full-screen mode and `false` if not. Note: Due to browser restrictions, `fullscreen()` can only be called with user input such as a mouse press. method fullscreen val whether the sketch should be in fullscreen mode. Boolean ### return current fullscreen state. Boolean ` function setup() { background(200); describe('A gray canvas that switches between default and full-screen display when clicked.'); } // If the mouse is pressed, // toggle full-screen mode. function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { let fs = fullscreen(); fullscreen(!fs); } } ` p5 Environment Environment Sets the pixel density or returns the current density. Computer displays are grids of little lights called pixels. A display's pixel density describes how many pixels it packs into an area. Displays with smaller pixels have a higher pixel density and create sharper images. `pixelDensity()` sets the pixel scaling for high pixel density displays. By default, the pixel density is set to match the display's density. Calling `pixelDensity(1)` turn this off. Calling `pixelDensity()` without an argument returns the current pixel density. method pixelDensity ` function setup() { // Set the pixel density to 1. pixelDensity(1); // Create a canvas and draw // a circle. createCanvas(100, 100); background(200); circle(50, 50, 70); describe('A fuzzy white circle on a gray canvas.'); } ` ` function setup() { // Set the pixel density to 3. pixelDensity(3); // Create a canvas, paint the // background, and draw a // circle. createCanvas(100, 100); background(200); circle(50, 50, 70); describe('A sharp white circle on a gray canvas.'); } ` p5 Environment Environment val desired pixel density. Number ##### return current pixel density of the sketch. Number Returns the display's current pixel density. method displayDensity ### return current pixel density of the display. Number ` function setup() { // Set the pixel density to 1. pixelDensity(1); // Create a canvas and draw // a circle. createCanvas(100, 100); background(200); circle(50, 50, 70); describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.'); } function mousePressed() { // Get the current display density. let d = displayDensity(); // Use the display density to set // the sketch's pixel density. pixelDensity(d); // Paint the background and // draw a circle. background(200); circle(50, 50, 70); } ` p5 Environment Environment Returns the sketch's current URL as a `String`. method getURL ### return url String ` function setup() { background(200); // Get the sketch's URL // and display it. let url = getURL(); textWrap(CHAR); text(url, 0, 40, 100); describe('The URL "https://p5js.org/reference/p5/getURL" written in black on a gray background.'); } ` p5 Environment Environment Returns the current URL path as an `Array` of `String`s. For example, consider a sketch hosted at the URL `https://example.com/sketchbook`. Calling `getURLPath()` returns `['sketchbook']`. For a sketch hosted at the URL `https://example.com/sketchbook/monday`, `getURLPath()` returns `['sketchbook', 'monday']`. method getURLPath ### return path components. String[] ` function setup() { background(200); // Get the sketch's URL path // and display the first // part. let path = getURLPath(); text(path[0], 25, 54); describe('The word "reference" written in black on a gray background.'); } ` p5 Environment Environment Returns the current URL parameters in an `Object`. For example, calling `getURLParams()` in a sketch hosted at the URL `https://p5js.org?year=2014&month;=May&day;=15` returns `{ year: 2014, month: 'May', day: 15 }`. method getURLParams ### return URL params Object ` // Imagine this sketch is hosted at the following URL: // https://p5js.org?year=2014&month;=May&day;=15 function setup() { background(200); // Get the sketch's URL // parameters and display // them. let params = getURLParams(); text(params.day, 10, 20); text(params.month, 10, 40); text(params.year, 10, 60); describe('The text "15", "May", and "2014" written in black on separate lines.'); } ` This example does not render anything. p5 Environment Environment p5 Environment This is our i18next "backend" plugin. It tries to fetch languages from a CDN. p5 Environment Set up our translation function, with loaded languages p5 Environment Returns a list of languages we have translations loaded for p5 Environment Returns the current language selected for translation p5 Environment Sets the current language for translation Returns a promise that resolved when loading is finished, or rejects if it fails. p5 Environment p5 Environment A function that's called once to load assets before the sketch runs. Declaring the function `preload()` sets a code block to run once automatically before setup() or draw(). It's used to load assets including multimedia files, fonts, data, and 3D models: function preload() { // Code to run before the rest of the sketch. } Functions such as loadImage(), loadFont(), loadJSON(), and loadModel() are guaranteed to either finish loading or raise an error if they're called within `preload()`. Doing so ensures that assets are available when the sketch begins running. method preload ` let img; // Load an image and create a p5.Image object. function preload() { img = loadImage('assets/bricks.jpg'); } function setup() { createCanvas(100, 100); // Draw the image. image(img, 0, 0); describe('A red brick wall.'); } ` p5 Structure Structure A function that's called once when the sketch begins running. Declaring the function `setup()` sets a code block to run once automatically when the sketch starts running. It's used to perform setup tasks such as creating the canvas and initializing variables: function setup() { // Code to run once at the start of the sketch. } Code placed in `setup()` will run once before code placed in draw() begins looping. If the preload() is declared, then `setup()` will run immediately after preload() finishes loading assets. Note: `setup()` doesn’t have to be declared, but it’s common practice to do so. method setup ` function setup() { createCanvas(100, 100); background(200); // Draw the circle. circle(50, 50, 40); describe('A white circle on a gray background.'); } ` ` function setup() { createCanvas(100, 100); // Paint the background once. background(200); describe( 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.' ); } function draw() { // Draw circles repeatedly. circle(mouseX, mouseY, 40); } ` ` let img; function preload() { img = loadImage('assets/bricks.jpg'); } function setup() { createCanvas(100, 100); // Draw the image. image(img, 0, 0); describe( 'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.' ); } function draw() { // Style the circle. noStroke(); // Draw the circle. circle(mouseX, mouseY, 10); } ` p5 Structure Structure A function that's called repeatedly while the sketch runs. Declaring the function `draw()` sets a code block to run repeatedly once the sketch starts. It’s used to create animations and respond to user inputs: function draw() { // Code to run repeatedly. } This is often called the "draw loop" because p5.js calls the code in `draw()` in a loop behind the scenes. By default, `draw()` tries to run 60 times per second. The actual rate depends on many factors. The drawing rate, called the "frame rate", can be controlled by calling frameRate(). The number of times `draw()` has run is stored in the system variable frameCount(). Code placed within `draw()` begins looping after setup() runs. `draw()` will run until the user closes the sketch. `draw()` can be stopped by calling the noLoop() function. `draw()` can be resumed by calling the loop() function. method draw ` function setup() { createCanvas(100, 100); // Paint the background once. background(200); describe( 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.' ); } function draw() { // Draw circles repeatedly. circle(mouseX, mouseY, 40); } ` ` function setup() { createCanvas(100, 100); describe( 'A white circle on a gray background. The circle follows the mouse as the user moves.' ); } function draw() { // Paint the background repeatedly. background(200); // Draw circles repeatedly. circle(mouseX, mouseY, 40); } ` ` // Double-click the canvas to change the circle's color. function setup() { createCanvas(100, 100); describe( 'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.' ); } function draw() { // Paint the background repeatedly. background(200); // Draw circles repeatedly. circle(mouseX, mouseY, 40); } // Change the fill color when the user double-clicks. function doubleClicked() { fill('deeppink'); } ` p5 Structure Structure Removes the sketch from the web page. Calling `remove()` stops the draw loop and removes any HTML elements created by the sketch, including the canvas. A new sketch can be created by using the p5() constructor, as in `new p5()`. method remove ` // Double-click to remove the canvas. function setup() { createCanvas(100, 100); describe( 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.' ); } function draw() { // Paint the background repeatedly. background(200); // Draw circles repeatedly. circle(mouseX, mouseY, 40); } // Remove the sketch when the user double-clicks. function doubleClicked() { remove(); } ` p5 Structure Structure Turns off the parts of the Friendly Error System (FES) that impact performance. The FES can cause sketches to draw slowly because it does extra work behind the scenes. For example, the FES checks the arguments passed to functions, which takes time to process. Disabling the FES can significantly improve performance by turning off these checks. property disableFriendlyErrors Boolean ` // Disable the FES. p5.disableFriendlyErrors = true; function setup() { createCanvas(100, 100); background(200); // The circle() function requires three arguments. The // next line would normally display a friendly error that // points this out. Instead, nothing happens and it fails // silently. circle(50, 50); describe('A gray square.'); } ` p5 Structure Structure The element's underlying `HTMLElement` object. The HTMLElement object's properties and methods can be used directly. ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Set the border style for the // canvas. cnv.elt.style.border = '5px dashed deeppink'; describe('A gray square with a pink border drawn with dashed lines.'); } ` property elt p5.Element DOM DOM A `Number` property that stores the element's width. {Number} property width p5.Element DOM DOM A `Number` property that stores the element's height. {Number} property height p5.Element DOM DOM Attaches the element to a parent element. For example, a `
` element may be used as a box to hold two pieces of text, a header and a paragraph. The `
` is the parent element of both the header and paragraph. The parameter `parent` can have one of three types. `parent` can be a string with the parent element's ID, as in `myElement.parent('container')`. It can also be another p5.Element object, as in `myElement.parent(myDiv)`. Finally, `parent` can be an `HTMLElement` object, as in `myElement.parent(anotherElement)`. Calling `myElement.parent()` without an argument returns the element's parent. method parent ` function setup() { background(200); // Create a div element. let div = createDiv(); // Place the div in the top-left corner. div.position(10, 20); // Set its width and height. div.size(80, 60); // Set its background color to white div.style('background-color', 'white'); // Align any text to the center. div.style('text-align', 'center'); // Set its ID to "container". div.id('container'); // Create a paragraph element. let p = createP('p5*js'); // Make the div its parent // using its ID "container". p.parent('container'); describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.'); } ` ` function setup() { background(200); // Create rectangular div element. let div = createDiv(); // Place the div in the top-left corner. div.position(10, 20); // Set its width and height. div.size(80, 60); // Set its background color and align // any text to the center. div.style('background-color', 'white'); div.style('text-align', 'center'); // Create a paragraph element. let p = createP('p5*js'); // Make the div its parent. p.parent(div); describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.'); } ` ` function setup() { background(200); // Create rectangular div element. let div = createDiv(); // Place the div in the top-left corner. div.position(10, 20); // Set its width and height. div.size(80, 60); // Set its background color and align // any text to the center. div.style('background-color', 'white'); div.style('text-align', 'center'); // Create a paragraph element. let p = createP('p5*js'); // Make the div its parent // using the underlying // HTMLElement. p.parent(div.elt); describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.'); } ` p5.Element DOM DOM parent ID, p5.Element, or HTMLElement of desired parent element. String|p5.Element|Object ##### return p5.Element Sets the element's ID using a given string. Calling `myElement.id()` without an argument returns its ID as a string. method id ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Set the canvas' ID // to "mycanvas". cnv.id('mycanvas'); // Get the canvas' ID. let id = cnv.id(); text(id, 24, 54); describe('The text "mycanvas" written in black on a gray background.'); } ` p5.Element DOM DOM id ID of the element. String ##### return ID of the element. String Adds a class attribute to the element using a given string. Calling `myElement.class()` without an argument returns a string with its current classes. method class ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Add the class "small" to the // canvas element. cnv.class('small'); // Get the canvas element's class // and display it. let c = cnv.class(); text(c, 35, 54); describe('The word "small" written in black on a gray canvas.'); } ` p5.Element DOM DOM class class to add. String ##### return element's classes, if any. String Calls a function when the mouse is pressed over the element. Calling `myElement.mousePressed(false)` disables the function. Note: Some mobile browsers may also trigger this event when the element receives a quick tap. method mousePressed fxn function to call when the mouse is pressed over the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the canvas // is pressed. cnv.mousePressed(randomColor); describe('A gray square changes color when the mouse is pressed.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the mouse is pressed twice over the element. Calling `myElement.doubleClicked(false)` disables the function. method doubleClicked fxn function to call when the mouse is double clicked over the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the // canvas is double-clicked. cnv.doubleClicked(randomColor); describe('A gray square changes color when the user double-clicks the canvas.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the mouse wheel scrolls over the element. The callback function, `fxn`, is passed an `event` object. `event` has two numeric properties, `deltaY` and `deltaX`. `event.deltaY` is negative if the mouse wheel rotates away from the user. It's positive if the mouse wheel rotates toward the user. `event.deltaX` is positive if the mouse wheel moves to the right. It's negative if the mouse wheel moves to the left. Calling `myElement.mouseWheel(false)` disables the function. method mouseWheel fxn function to call when the mouse wheel is scrolled over the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the // mouse wheel moves. cnv.mouseWheel(randomColor); describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call changeBackground() when the // mouse wheel moves. cnv.mouseWheel(changeBackground); describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.'); } function changeBackground(event) { // Change the background color // based on deltaY. if (event.deltaY > 0) { background('deeppink'); } else if (event.deltaY < 0) { background('cornflowerblue'); } else { background(200); } // Draw a shape based on deltaX. if (event.deltaX > 0) { circle(50, 50, 20); } else if (event.deltaX < 0) { square(40, 40, 20); } } ` p5.Element DOM DOM Calls a function when the mouse is released over the element. Calling `myElement.mouseReleased(false)` disables the function. Note: Some mobile browsers may also trigger this event when the element receives a quick tap. method mouseReleased fxn function to call when the mouse is pressed over the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when a // mouse press ends. cnv.mouseReleased(randomColor); describe('A gray square changes color when the user releases a mouse press.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the mouse is pressed and released over the element. Calling `myElement.mouseReleased(false)` disables the function. Note: Some mobile browsers may also trigger this event when the element receives a quick tap. method mouseClicked fxn function to call when the mouse is pressed and released over the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when a // mouse press ends. cnv.mouseClicked(randomColor); describe('A gray square changes color when the user releases a mouse press.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the mouse moves over the element. Calling `myElement.mouseMoved(false)` disables the function. method mouseMoved fxn function to call when the mouse moves over the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the // mouse moves. cnv.mouseMoved(randomColor); describe('A gray square changes color when the mouse moves over the canvas.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the mouse moves onto the element. Calling `myElement.mouseOver(false)` disables the function. method mouseOver fxn function to call when the mouse moves onto the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the // mouse moves onto the canvas. cnv.mouseOver(randomColor); describe('A gray square changes color when the mouse moves onto the canvas.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the mouse moves off the element. Calling `myElement.mouseOut(false)` disables the function. method mouseOut fxn function to call when the mouse moves off the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the // mouse moves off the canvas. cnv.mouseOut(randomColor); describe('A gray square changes color when the mouse moves off the canvas.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the element is touched. Calling `myElement.touchStarted(false)` disables the function. Note: Touch functions only work on mobile devices. method touchStarted fxn function to call when the touch starts. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the // user touches the canvas. cnv.touchStarted(randomColor); describe('A gray square changes color when the user touches the canvas.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the user touches the element and moves. Calling `myElement.touchMoved(false)` disables the function. Note: Touch functions only work on mobile devices. method touchMoved fxn function to call when the touch moves over the element. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the // user touches the canvas // and moves. cnv.touchMoved(randomColor); describe('A gray square changes color when the user touches the canvas and moves.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when the user stops touching the element. Calling `myElement.touchMoved(false)` disables the function. Note: Touch functions only work on mobile devices. method touchEnded fxn function to call when the touch ends. `false` disables the function. Function|Boolean ` function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call randomColor() when the // user touches the canvas, // then lifts their finger. cnv.touchEnded(randomColor); describe('A gray square changes color when the user touches the canvas, then lifts their finger.'); } // Paint the background either // red, yellow, blue, or green. function randomColor() { let c = random(['red', 'yellow', 'blue', 'green']); background(c); } ` p5.Element DOM DOM Calls a function when a file is dragged over the element. Calling `myElement.dragOver(false)` disables the function. method dragOver fxn function to call when the file is dragged over the element. `false` disables the function. Function|Boolean ` // Drag a file over the canvas to test. function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call helloFile() when a // file is dragged over // the canvas. cnv.dragOver(helloFile); describe('A gray square. The text "hello, file" appears when a file is dragged over the square.'); } function helloFile() { text('hello, file', 50, 50); } ` p5.Element DOM DOM Calls a function when a file is dragged off the element. Calling `myElement.dragLeave(false)` disables the function. method dragLeave fxn function to call when the file is dragged off the element. `false` disables the function. Function|Boolean ` // Drag a file over, then off // the canvas to test. function setup() { // Create a canvas element and // assign it to cnv. let cnv = createCanvas(100, 100); background(200); // Call byeFile() when a // file is dragged over, // then off the canvas. cnv.dragLeave(byeFile); describe('A gray square. The text "bye, file" appears when a file is dragged over, then off the square.'); } function byeFile() { text('bye, file', 50, 50); } ` p5.Element DOM DOM Helper fxn for sharing pixel methods p5.Element DOM DOM Resets the graphics buffer's transformations and lighting. By default, the main canvas resets certain transformation and lighting values each time draw() executes. `p5.Graphics` objects must reset these values manually by calling `myGraphics.reset()`. method reset ` let pg; function setup() { createCanvas(100, 100); // Create a p5.Graphics object. pg = createGraphics(60, 60); describe('A white circle moves downward slowly within a dark square. The circle resets at the top of the dark square when the user presses the mouse.'); } function draw() { background(200); // Translate the p5.Graphics object's coordinate system. // The translation accumulates; the white circle moves. pg.translate(0, 0.1); // Draw to the p5.Graphics object. pg.background(100); pg.circle(30, 0, 10); // Display the p5.Graphics object. image(pg, 20, 20); // Translate the main canvas' coordinate system. // The translation doesn't accumulate; the dark // square is always in the same place. translate(0, 0.1); // Reset the p5.Graphics object when the // user presses the mouse. if (mouseIsPressed === true) { pg.reset(); } } ` ` let pg; function setup() { createCanvas(100, 100); // Create a p5.Graphics object. pg = createGraphics(60, 60); describe('A white circle at the center of a dark gray square. The image is drawn on a light gray background.'); } function draw() { background(200); // Translate the p5.Graphics object's coordinate system. pg.translate(30, 30); // Draw to the p5.Graphics object. pg.background(100); pg.circle(0, 0, 10); // Display the p5.Graphics object. image(pg, 20, 20); // Reset the p5.Graphics object automatically. pg.reset(); } ` ` let pg; function setup() { createCanvas(100, 100); // Create a p5.Graphics object using WebGL mode. pg = createGraphics(100, 100, WEBGL); describe("A sphere lit from above with a red light. The sphere's surface becomes glossy while the user clicks and holds the mouse."); } function draw() { background(200); // Add a red point light from the top-right. pg.pointLight(255, 0, 0, 50, -100, 50); // Style the sphere. // It should appear glossy when the // lighting values are reset. pg.noStroke(); pg.specularMaterial(255); pg.shininess(100); // Draw the sphere. pg.sphere(30); // Display the p5.Graphics object. image(pg, -50, -50); // Reset the p5.Graphics object when // the user presses the mouse. if (mouseIsPressed === true) { pg.reset(); } } ` ` let pg; function setup() { createCanvas(100, 100); // Create a p5.Graphics object using WebGL mode. pg = createGraphics(100, 100, WEBGL); describe('A sphere with a glossy surface is lit from the top-right by a red light.'); } function draw() { background(200); // Add a red point light from the top-right. pg.pointLight(255, 0, 0, 50, -100, 50); // Style the sphere. pg.noStroke(); pg.specularMaterial(255); pg.shininess(100); // Draw the sphere. pg.sphere(30); // Display the p5.Graphics object. image(pg, 0, 0); // Reset the p5.Graphics object automatically. pg.reset(); } ` p5.Graphics Rendering Rendering Removes the graphics buffer from the web page. Calling `myGraphics.remove()` removes the graphics buffer's `` element from the web page. The graphics buffer also uses a bit of memory on the CPU that can be freed like so: // Remove the graphics buffer from the web page. myGraphics.remove(); // Delete the graphics buffer from CPU memory. myGraphics = undefined; Note: All variables that reference the graphics buffer must be assigned the value `undefined` to delete the graphics buffer from CPU memory. If any variable still refers to the graphics buffer, then it won't be garbage collected. method remove ` // Double-click to remove the p5.Graphics object. let pg; function setup() { createCanvas(100, 100); // Create a p5.Graphics object. pg = createGraphics(60, 60); // Draw to the p5.Graphics object. pg.background(100); pg.circle(30, 30, 20); describe('A white circle at the center of a dark gray square disappears when the user double-clicks.'); } function draw() { background(200); // Display the p5.Graphics object if // it's available. if (pg) { image(pg, 20, 20); } } // Remove the p5.Graphics object when the // the user double-clicks. function doubleClicked() { // Remove the p5.Graphics object from the web page. pg.remove(); pg = undefined; } ` p5.Graphics Rendering Rendering Creates a new p5.Framebuffer object with the same WebGL context as the graphics buffer. p5.Framebuffer objects are separate drawing surfaces that can be used as textures in WebGL mode. They're similar to p5.Graphics objects and generally run much faster when used as textures. Creating a p5.Framebuffer object in the same context as the graphics buffer makes this speedup possible. The parameter, `options`, is optional. An object can be passed to configure the p5.Framebuffer object. The available properties are: * `format`: data format of the texture, either `UNSIGNED_BYTE`, `FLOAT`, or `HALF_FLOAT`. Default is `UNSIGNED_BYTE`. * `channels`: whether to store `RGB` or `RGBA` color channels. Default is to match the graphics buffer which is `RGBA`. * `depth`: whether to include a depth buffer. Default is `true`. * `depthFormat`: data format of depth information, either `UNSIGNED_INT` or `FLOAT`. Default is `FLOAT`. * `stencil`: whether to include a stencil buffer for masking. `depth` must be `true` for this feature to work. Defaults to the value of `depth` which is `true`. * `antialias`: whether to perform anti-aliasing. If set to `true`, as in `{ antialias: true }`, 2 samples will be used by default. The number of samples can also be set, as in `{ antialias: 4 }`. Default is to match setAttributes() which is `false` (`true` in Safari). * `width`: width of the p5.Framebuffer object. Default is to always match the graphics buffer width. * `height`: height of the p5.Framebuffer object. Default is to always match the graphics buffer height. * `density`: pixel density of the p5.Framebuffer object. Default is to always match the graphics buffer pixel density. * `textureFiltering`: how to read values from the p5.Framebuffer object. Either `LINEAR` (nearby pixels will be interpolated) or `NEAREST` (no interpolation). Generally, use `LINEAR` when using the texture as an image and `NEAREST` if reading the texture as data. Default is `LINEAR`. If the `width`, `height`, or `density` attributes are set, they won't automatically match the graphics buffer and must be changed manually. method createFramebuffer options configuration options. Object ### return new framebuffer. p5.Framebuffer ` // Click and hold a mouse button to change shapes. let pg; let torusLayer; let boxLayer; function setup() { createCanvas(100, 100); // Create a p5.Graphics object using WebGL mode. pg = createGraphics(100, 100, WEBGL); // Create the p5.Framebuffer objects. torusLayer = pg.createFramebuffer(); boxLayer = pg.createFramebuffer(); describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.'); } function draw() { // Update and draw the layers offscreen. drawTorus(); drawBox(); // Choose the layer to display. let layer; if (mouseIsPressed === true) { layer = boxLayer; } else { layer = torusLayer; } // Draw to the p5.Graphics object. pg.background(50); // Iterate from left to right. for (let x = -50; x < 50; x += 25) { // Iterate from top to bottom. for (let y = -50; y < 50; y += 25) { // Draw the layer to the p5.Graphics object pg.image(layer, x, y, 25, 25); } } // Display the p5.Graphics object. image(pg, 0, 0); } // Update and draw the torus layer offscreen. function drawTorus() { // Start drawing to the torus p5.Framebuffer. torusLayer.begin(); // Clear the drawing surface. pg.clear(); // Turn on the lights. pg.lights(); // Rotate the coordinate system. pg.rotateX(frameCount * 0.01); pg.rotateY(frameCount * 0.01); // Style the torus. pg.noStroke(); // Draw the torus. pg.torus(20); // Start drawing to the torus p5.Framebuffer. torusLayer.end(); } // Update and draw the box layer offscreen. function drawBox() { // Start drawing to the box p5.Framebuffer. boxLayer.begin(); // Clear the drawing surface. pg.clear(); // Turn on the lights. pg.lights(); // Rotate the coordinate system. pg.rotateX(frameCount * 0.01); pg.rotateY(frameCount * 0.01); // Style the box. pg.noStroke(); // Draw the box. pg.box(30); // Start drawing to the box p5.Framebuffer. boxLayer.end(); } ` ` // Click and hold a mouse button to change shapes. let pg; let torusLayer; let boxLayer; function setup() { createCanvas(100, 100); // Create an options object. let options = { width: 25, height: 25 }; // Create a p5.Graphics object using WebGL mode. pg = createGraphics(100, 100, WEBGL); // Create the p5.Framebuffer objects. // Use options for configuration. torusLayer = pg.createFramebuffer(options); boxLayer = pg.createFramebuffer(options); describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.'); } function draw() { // Update and draw the layers offscreen. drawTorus(); drawBox(); // Choose the layer to display. let layer; if (mouseIsPressed === true) { layer = boxLayer; } else { layer = torusLayer; } // Draw to the p5.Graphics object. pg.background(50); // Iterate from left to right. for (let x = -50; x < 50; x += 25) { // Iterate from top to bottom. for (let y = -50; y < 50; y += 25) { // Draw the layer to the p5.Graphics object pg.image(layer, x, y); } } // Display the p5.Graphics object. image(pg, 0, 0); } // Update and draw the torus layer offscreen. function drawTorus() { // Start drawing to the torus p5.Framebuffer. torusLayer.begin(); // Clear the drawing surface. pg.clear(); // Turn on the lights. pg.lights(); // Rotate the coordinate system. pg.rotateX(frameCount * 0.01); pg.rotateY(frameCount * 0.01); // Style the torus. pg.noStroke(); // Draw the torus. pg.torus(5, 2.5); // Start drawing to the torus p5.Framebuffer. torusLayer.end(); } // Update and draw the box layer offscreen. function drawBox() { // Start drawing to the box p5.Framebuffer. boxLayer.begin(); // Clear the drawing surface. pg.clear(); // Turn on the lights. pg.lights(); // Rotate the coordinate system. pg.rotateX(frameCount * 0.01); pg.rotateY(frameCount * 0.01); // Style the box. pg.noStroke(); // Draw the box. pg.box(7.5); // Start drawing to the box p5.Framebuffer. boxLayer.end(); } ` p5.Graphics Rendering Rendering Resize our canvas element. p5.Renderer Rendering Rendering Helper function to check font type (system or otf) p5.Renderer Rendering Rendering Helper fxn to measure ascent and descent. Adapted from http://stackoverflow.com/a/25355178 p5.Renderer Rendering Rendering p5.Renderer2D The 2D graphics canvas renderer class. extends p5.Renderer p5 Rendering Declares a new variable. A variable is a container for a value. For example, a variable might contain a creature's x-coordinate as a `Number` or its name as a `String`. Variables can change value by reassigning them as follows: // Declare the variable x and assign it the value 10. let x = 10; // Reassign x to 50. x = 50; Variables have block scope. When a variable is declared between curly braces `{}`, it only exists within the block defined by those braces. For example, the following code would throw a `ReferenceError` because `x` is declared within the `setup()` function's block: function setup() { createCanvas(100, 100); let x = 50; } function draw() { background(200); // x was declared in setup(), so it can't be referenced here. circle(x, 50, 20); } Variables declared outside of all curly braces `{}` are in the global scope. A variable that's in the global scope can be used and changed anywhere in a sketch: let x = 50; function setup() { createCanvas(100, 100); } function draw() { background(200); // Change the value of x. x += 10; circle(x, 50, 20); } property let ` function setup() { createCanvas(100, 100); background(220); // Style the text. textAlign(CENTER); textSize(16); // Create the message variable. let message = 'Hello, 🌍!'; // Display the message. text(message, 50, 50); describe('The text "Hello, 🌍!" written on a gray background.'); } ` ` let x = 0; function setup() { createCanvas(100, 100); describe('A white circle moves from left to right against a gray background.'); } function draw() { background(220); // Change the value of x. x += 1; circle(x, 50, 20); } ` p5 Foundation Foundation A way to choose whether to run a block of code. `if` statements are helpful for running a block of code based on a condition. For example, an `if` statement makes it easy to express the idea "Draw a circle if the mouse is pressed.": if (mouseIsPressed === true) { circle(mouseX, mouseY, 20); } The statement header begins with the keyword `if`. The expression in parentheses `mouseIsPressed === true` is a `Boolean` expression that's either `true` or `false`. The code between the curly braces `{}` is the if statement's body. The body only runs if the `Boolean` expression is `true`. The mouseIsPressed system variable is always `true` or `false`, so the code snippet above could also be written as follows: if (mouseIsPressed) { circle(mouseX, mouseY, 20); } An `if`-`else` statement adds a block of code that runs if the `Boolean` expression is `false`. For example, here's an `if`-`else` statement that expresses the idea "Draw a circle if the mouse is pressed. Otherwise, display a message.": if (mouseIsPressed === true) { // When true. circle(mouseX, mouseY, 20); } else { // When false. text('Click me!', 50, 50); } There are two possible paths, or branches, in this code snippet. The program must follow one branch or the other. An `else`-`if` statement makes it possible to add more branches. `else`-`if` statements run different blocks of code under different conditions. For example, an `else`-`if` statement makes it easy to express the idea "If the mouse is on the left, paint the canvas white. If the mouse is in the middle, paint the canvas gray. Otherwise, paint the canvas black.": if (mouseX < 33) { background(255); } else if (mouseX < 67) { background(200); } else { background(0); } `if` statements can add as many `else`-`if` statements as needed. However, there can only be one `else` statement and it must be last. `if` statements can also check for multiple conditions at once. For example, the `Boolean` operator `&&` (AND) checks whether two expressions are both `true`: if (keyIsPressed === true && key === 'p') { text('You pressed the "p" key!', 50, 50); } If the user is pressing a key AND that key is `'p'`, then a message will display. The `Boolean` operator `||` (OR) checks whether at least one of two expressions is `true`: if (keyIsPressed === true || mouseIsPressed === true) { text('You did something!', 50, 50); } If the user presses a key, or presses a mouse button, or both, then a message will display. The body of an `if` statement can contain another `if` statement. This is called a "nested `if` statement." For example, nested `if` statements make it easy to express the idea "If a key is pressed, then check if the key is `'r'`. If it is, then set the fill to red.": if (keyIsPressed === true) { if (key === 'r') { fill('red'); } } See Boolean and Number to learn more about these data types and the operations they support. property if ` // Click the mouse to show the circle. function setup() { createCanvas(100, 100); describe( 'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.' ); } function draw() { background(200); if (mouseIsPressed === true) { circle(mouseX, mouseY, 20); } } ` ` // Click the mouse to show different shapes. function setup() { createCanvas(100, 100); describe( 'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.' ); } function draw() { background(200); if (mouseIsPressed === true) { circle(50, 50, 20); } else { ellipse(50, 50, 20, 50); } } ` ` // Move the mouse to change the background color. function setup() { createCanvas(100, 100); describe( 'A square changes color from white to black as the user moves the mouse from left to right.' ); } function draw() { if (mouseX < 33) { background(255); } else if (mouseX < 67) { background(200); } else { background(0); } } ` ` // Click on the canvas to begin detecting key presses. function setup() { createCanvas(100, 100); describe( 'A white circle drawn on a gray background. The circle changes color to red when the user presses the "r" key.' ); } function draw() { background(200); if (keyIsPressed === true) { if (key === 'r') { fill('red'); } } circle(50, 50, 40); } ` p5 Foundation Foundation A named group of statements. Functions help with organizing and reusing code. For example, functions make it easy to express the idea "Draw a flower.": function drawFlower() { // Style the text. textAlign(CENTER, CENTER); textSize(20); // Draw a flower emoji. text('🌸', 50, 50); } The function header begins with the keyword `function`. The function's name, `drawFlower`, is followed by parentheses `()` and curly braces `{}`. The code between the curly braces is called the function's body. The function's body runs when the function is called like so: drawFlower(); Functions can accept inputs by adding parameters to their headers. Parameters are placeholders for values that will be provided when the function is called. For example, the `drawFlower()` function could include a parameter for the flower's size: function drawFlower(size) { // Style the text. textAlign(CENTER, CENTER); // Use the size parameter. textSize(size); // Draw a flower emoji. text('🌸', 50, 50); } Parameters are part of the function's declaration. Arguments are provided by the code that calls a function. When a function is called, arguments are assigned to parameters: // The argument 20 is assigned to the parameter size. drawFlower(20); Functions can have multiple parameters separated by commas. Parameters can have any type. For example, the `drawFlower()` function could accept `Number` parameters for the flower's x- and y-coordinates along with its size: function drawFlower(x, y, size) { // Style the text. textAlign(CENTER, CENTER); // Use the size parameter. textSize(size); // Draw a flower emoji. // Use the x and y parameters. text('🌸', x, y); } Functions can also produce outputs by adding a `return` statement: function double(x) { let answer = 2 * x; return answer; } The expression following `return` can produce an output that's used elsewhere. For example, the output of the `double()` function can be assigned to a variable: let six = double(3); text(`3 x 2 = ${six}`, 50, 50); property function ` function setup() { createCanvas(100, 100); describe('A pink flower on a gray background.'); } function draw() { background(200); // Call the drawFlower() function. drawFlower(); } // Declare a function that draws a flower at the // center of the canvas. function drawFlower() { // Style the text. textAlign(CENTER, CENTER); textSize(20); // Draw a flower emoji. text('🌸', 50, 50); } ` ` function setup() { createCanvas(100, 100); describe('A pink flower on a gray background.'); } function draw() { background(200); // Call the drawFlower() function and pass values for // its position and size. drawFlower(50, 50, 20); } // Declare a function that draws a flower at the // center of the canvas. function drawFlower(x, y, size) { // Style the text. textAlign(CENTER, CENTER); // Use the size parameter. textSize(size); // Draw a flower emoji. // Use the x and y parameters. text('🌸', x, y); } ` ` function setup() { createCanvas(100, 100); describe('The message "Hello, 🌍!" written on a gray background.'); } function draw() { background(200); // Create a greeting. let greeting = createGreeting('🌍'); // Style the text. textAlign(CENTER, CENTER); textSize(16); // Display the greeting. text(greeting, 50, 50); } // Return a string with a personalized greeting. function createGreeting(name) { let message = `Hello, ${name}!`; return message; } ` p5 Foundation Foundation A value that's either `true` or `false`. `Boolean` values help to make decisions in code. They appear any time a logical condition is checked. For example, the condition "Is a mouse button being pressed?" must be either `true` or `false`: // If the user presses the mouse, draw a circle at // the mouse's location. if (mouseIsPressed === true) { circle(mouseX, mouseY, 20); } The `if` statement checks whether mouseIsPressed is `true` and draws a circle if it is. `Boolean` expressions such as `mouseIsPressed === true` evaluate to one of the two possible `Boolean` values: `true` or `false`. The `===` operator (EQUAL) checks whether two values are equal. If they are, the expression evaluates to `true`. Otherwise, it evaluates to `false`. Note: There's also a `==` operator with two `=` instead of three. Don't use it. The mouseIsPressed system variable is always `true` or `false`, so the code snippet above could also be written as follows: if (mouseIsPressed) { circle(mouseX, mouseY, 20); } The `!==` operator (NOT EQUAL) checks whether two values are not equal, as in the following example: if (2 + 2 !== 4) { text('War is peace.', 50, 50); } Starting from the left, the arithmetic expression `2 + 2` produces the value `4`. The `Boolean` expression `4 !== 4` evaluates to `false` because `4` is equal to itself. As a result, the `if` statement's body is skipped. Note: There's also a `!=` operator with one `=` instead of two. Don't use it. The `Boolean` operator `&&` (AND) checks whether two expressions are both `true`: if (keyIsPressed === true && key === 'p') { text('You pressed the "p" key!', 50, 50); } If the user is pressing a key AND that key is `'p'`, then a message will display. The `Boolean` operator `||` (OR) checks whether at least one of two expressions is `true`: if (keyIsPressed === true || mouseIsPressed === true) { text('You did something!', 50, 50); } If the user presses a key, or presses a mouse button, or both, then a message will display. The following truth table summarizes a few common scenarios with `&&` and `||`: true && true // true true && false // false false && false // false true || true // true true || false // true false || false // false The relational operators `>`, `<`, `>=`, and `<=` also produce `Boolean` values: 2 > 1 // true 2 < 1 // false 2 >= 2 // true 2 <= 2 // true See if for more information about `if` statements and Number for more information about `Number`s. property Boolean ` function setup() { createCanvas(100, 100); describe('A gray square. When the user presses the mouse, a circle appears at that location.'); } function draw() { background(200); // If the user presses the mouse, draw a circle at that location. if (mouseIsPressed) { circle(mouseX, mouseY, 20); } } ` ` function setup() { createCanvas(100, 100); describe('A gray square. When the user presses the mouse, a circle appears at that location.'); } function draw() { background(200); // If the user presses the mouse, draw a circle at that location. if (mouseIsPressed === true) { circle(mouseX, mouseY, 20); } } ` ` // Click on the canvas to begin detecting key presses. function setup() { createCanvas(100, 100); describe('A gray square that turns pink when the user presses the mouse or a key.'); } function draw() { background(200); // If the user presses the mouse, change the background color. if (mouseIsPressed === true || keyIsPressed === true) { background('deeppink'); } } ` ` // Click the canvas to begin detecting key presses. // Create a Boolean variable. let isPlaying = false; function setup() { createCanvas(100, 100); describe( 'The message "Begin? Y or N" written in green on a black background. The message "Good luck!" appears when they press the "y" key.' ); } function draw() { background(0); // Style the text. textAlign(CENTER, CENTER); textFont('Courier New'); textSize(16); fill(0, 255, 0); // Display a different message when the user begins playing. if (isPlaying === false) { text('Begin?', 50, 40); text('Y or N', 50, 60); } else { text('Good luck!', 50, 50); } } // Start playing when the user presses the 'y' key. function keyPressed() { if (key === 'y') { isPlaying = true; } } ` p5 Foundation Foundation A sequence of text characters. The `String` data type is helpful for working with text. For example, a string could contain a welcome message: // Use a string literal. text('Hello!', 10, 10); // Create a string variable. let message = 'Hello!'; // Use the string variable. text(message, 10, 10); The most common way to create strings is to use some form of quotations as follows: text("hi", 50, 50); text('hi', 50, 50); text(`hi`, 50, 50); `"hi"`, `'hi'`, and `hi` are all string literals. A "literal" means a value was actually written, as in `text('hi', 50, 50)`. By contrast, `text(message, 50, 50)` uses the variable `message`, so it isn't a string literal. Single quotes `''` and double quotes `""` mean the same thing. It's nice to have the option for cases when a string contains one type of quote: text("What's up?", 50, 50); text('Air quotes make you look "cool."', 50, 50); Backticks ```` create template literals. Template literals have many uses. For example, they can contain both single and double quotes as needed: text(`"Don't you forget about me"`, 10, 10); Template literals are helpful when strings are created from variables like so: let size = random(10, 20); circle(50, 50, size); text(`The circle's diameter is ${size} pixels.`, 10, 10); The `size` variable's value will replace `${size}` when the string is created. `${}` is a placeholder for any value. That means an expression can be used, as in `${round(PI, 3)}`. All of the following are valid template literals: text(`π is about ${round(PI, 2)} pixels.`, 10, 10); text(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 10, 30); Template literals can include several variables: let x = random(0, 100); let y = random(0, 100); let size = random(10, 20); circle(x, y, size); text(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`, 10, 10); Template literals are also helpful for creating multi-line text like so: let poem = `My sketch doesn't run; it waits for me patiently while bugs point the way.`; text(poem, 10, 10); property String ` function setup() { createCanvas(100, 100); background(200); // Style the text. textAlign(CENTER, CENTER); textSize(20); // Display a welcome message. text('Hello!', 50, 50); describe('The text "Hello!" written on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Style the text. textAlign(CENTER, CENTER); textSize(20); // Create a string variable. let world = '🌍'; // Display a welcome message using a template string. text(`Hello, ${world}!`, 50, 50); describe('The text "Hello, 🌍!" written on a gray background.'); } ` p5 Foundation Foundation A number that can be positive, negative, or zero. The `Number` data type is useful for describing values such as position, size, and color. A number can be an integer such as 20 or a decimal number such as 12.34. For example, a circle's position and size can be described by three numbers: circle(50, 50, 20); circle(50, 50, 12.34); Numbers support basic arithmetic and follow the standard order of operations: Parentheses, Exponents, Multiplication, Division, Addition, and Subtraction (PEMDAS). For example, it's common to use arithmetic operators with p5.js' system variables that are numbers: // Draw a circle at the center. circle(width / 2, height / 2, 20); // Draw a circle that moves from left to right. circle(frameCount * 0.01, 50, 20); Here's a quick overview of the arithmetic operators: 1 + 2 // Add 1 - 2 // Subtract 1 * 2 // Multiply 1 / 2 // Divide 1 % 2 // Remainder 1 ** 2 // Exponentiate It's common to update a number variable using arithmetic. For example, an object's location can be updated like so: x = x + 1; The statement above adds 1 to a variable `x` using the `+` operator. The addition assignment operator `+=` expresses the same idea: x += 1; Here's a quick overview of the assignment operators: x += 2 // Addition assignment x -= 2 // Subtraction assignment x *= 2 // Multiplication assignment x /= 2 // Division assignment x %= 2 // Remainder assignment Numbers can be compared using the relational operators `>`, `<`, `>=`, `<=`, `===`, and `!==`. For example, a sketch's frameCount can be used as a timer: if (frameCount > 1000) { text('Game over!', 50, 50); } An expression such as `frameCount > 1000` evaluates to a `Boolean` value that's either `true` or `false`. The relational operators all produce `Boolean` values: 2 > 1 // true 2 < 1 // false 2 >= 2 // true 2 <= 2 // true 2 === 2 // true 2 !== 2 // false See Boolean for more information about comparisons and conditions. Note: There are also `==` and `!=` operators with one fewer `=`. Don't use them. Expressions with numbers can also produce special values when something goes wrong: sqrt(-1) // NaN 1 / 0 // Infinity The value `NaN` stands for Not-A-Number. `NaN` appears when calculations or conversions don't work. `Infinity` is a value that's larger than any number. It appears during certain calculations. property Number ` function setup() { createCanvas(100, 100); background(200); // Draw a circle at the center. circle(50, 50, 70); // Draw a smaller circle at the center. circle(width / 2, height / 2, 30); describe('Two concentric, white circles drawn on a gray background.'); } ` ` function setup() { createCanvas(100, 100); describe('A white circle travels from left to right on a gray background.'); } function draw() { background(200); circle(frameCount * 0.05, 50, 20); } ` p5 Foundation Foundation A container for data that's stored as key-value pairs. Objects help to organize related data of any type, including other objects. A value stored in an object can be accessed by name, called its key. Each key-value pair is called a "property." Objects are similar to dictionaries in Python and maps in Java and Ruby. For example, an object could contain the location, size, and appearance of a dog: // Declare the dog variable and assign it an object. let dog = { x: 50, y: 50, size: 20, emoji: '🐶' }; // Style the text. textAlign(CENTER, CENTER); textSize(dog.size); // Draw the dog. text(dog.emoji, dog.x, dog.y); The variable `dog` is assigned an object with four properties. Objects are declared with curly braces `{}`. Values can be accessed using the dot operator, as in `dog.size`. In the example above, the key `size` corresponds to the value `20`. Objects can also be empty to start: // Declare a cat variable and assign it an empty object. let cat = {}; // Add properties to the object. cat.x = 50; cat.y = 50; cat.size = 20; cat.emoji = '🐱'; // Style the text. textAlign(CENTER, CENTER); textSize(cat.size); // Draw the cat. text(cat.emoji, cat.x, cat.y); An object's data can be updated while a sketch runs. For example, the `cat` could run away from the `dog` by updating its location: // Run to the right. cat.x += 5; If needed, an object's values can be accessed using square brackets `[]` and strings instead of dot notation: // Run to the right. cat["x"] += 5; This syntax can be helpful when the key's name has spaces, as in `cat['height (m)']`. property Object ` // Declare the variable data and assign it an object with three properties. let data = { x: 50, y: 50, d: 20 }; function setup() { createCanvas(100, 100); describe('A white circle on a gray background.'); } function draw() { background(200); // Access the object's values using the . operator. circle(data.x, data.y, data.d); } ` ` // Declare the variable data and assign it an object with three properties. let data = { x: 50, y: 50, d: 20 }; // Add another property for color. data.color = 'deeppink'; function setup() { createCanvas(100, 100); describe('A pink circle on a gray background.'); } function draw() { background(200); // Access the object's values using the . operator. fill(data.color); circle(data.x, data.y, data.d); } ` ` // Declare the variable data and assign it an object with three properties. let data = { x: 50, y: 50, d: 20 }; // Add another property for color. data.color = 'deeppink'; function setup() { createCanvas(100, 100); describe('A white circle on a gray background.'); } function draw() { background(200); // Access the object's values using the . operator. fill(data.color); circle(data.x, data.y, data.d); // Update the object's x and y properties. data.x += random(-1, 1); data.y += random(-1, 1); } ` p5 Foundation Foundation A list that keeps several pieces of data in order. Arrays are helpful for storing related data. They can contain data of any type. For example, an array could contain a list of someone's favorite colors as strings. Arrays are created as follows: let myArray = ['deeppink', 'darkorchid', 'magenta']; Each piece of data in an array is called an element. Each element has an address, or index, within its array. The variable `myArray` refers to an array with three String elements, `'deeppink'`, `'darkorchid'`, and `'magenta'`. Arrays are zero-indexed, which means that `'deeppink'` is at index 0, `'darkorchid'` is at index 1, and '`magenta'` is at index 2. Array elements can be accessed using their indices as follows: let zeroth = myArray[0]; // 'deeppink' let first = myArray[1]; // 'darkorchid' let second = myArray[2]; // 'magenta' Elements can be added to the end of an array by calling the push() method as follows: myArray.push('lavender'); let third = myArray[3]; // 'lavender' See MDN for more information about arrays. property Array ` // Declare the variable xCoordinates and assign it an array // with three numeric elements. let xCoordinates = [25, 50, 75]; function setup() { createCanvas(100, 100); describe( 'Three white circles drawn in a horizontal line on a gray background.' ); } function draw() { background(200); // Access the element at index 0, which is 25. circle(xCoordinates[0], 50, 20); // Access the element at index 1, which is 50. circle(xCoordinates[1], 50, 20); // Access the element at index 2, which is 75. circle(xCoordinates[2], 50, 20); } ` ` // Declare the variable xCoordinates and assign it an array with three numeric elements. let xCoordinates = [20, 40, 60]; // Add another element to the end of the array. xCoordinates.push(80); function setup() { createCanvas(100, 100); describe('Four white circles drawn in a horizontal line on a gray background.'); } function draw() { background(200); // Access the element at index 0, which is 20. circle(xCoordinates[0], 50, 20); // Access the element at index 1, which is 40. circle(xCoordinates[1], 50, 20); // Access the element at index 2, which is 60. circle(xCoordinates[2], 50, 20); // Access the element at index 3, which is 80. circle(xCoordinates[3], 50, 20); } ` ` // Declare the variable xCoordinates and assign it an empty array. let xCoordinates = []; function setup() { createCanvas(100, 100); // Add elements to the array using a loop. for (let x = 20; x < 100; x += 20) { xCoordinates.push(x); } describe('Four white circles drawn in a horizontal line on a gray background.'); } function draw() { background(200); // Access the element at index i and use it to draw a circle. for (let i = 0; i < xCoordinates.length; i += 1) { circle(xCoordinates[i], 50, 20); } } ` ` // Declare the variable xCoordinates and assign it an empty array. let xCoordinates = []; function setup() { createCanvas(100, 100); // Add elements to the array using a loop. for (let x = 20; x < 100; x += 20) { xCoordinates.push(x); } describe('Four white circles drawn in a horizontal line on a gray background.'); } function draw() { background(200); // Access each element of the array and use it to draw a circle. for (let x of xCoordinates) { circle(x, 50, 20); } } ` ` // Declare the variable xCoordinates and assign it an empty array. let xCoordinates = []; function setup() { createCanvas(100, 100); // Add elements to the array using a loop. for (let x = 20; x < 100; x += 20) { xCoordinates.push(x); } describe( 'Four white circles in a horizontal line on a gray background. The circles move randomly.' ); } function draw() { background(200); for (let i = 0; i < xCoordinates.length; i += 1) { // Update the element at index i. xCoordinates[i] += random(-1, 1); // Use the element at index i to draw a circle. circle(xCoordinates[i], 50, 20); } } ` p5 Foundation Foundation A template for creating objects of a particular type. Classes can make it easier to program with objects. For example, a `Frog` class could create objects that behave like frogs. Each object created using a class is called an instance of that class. All instances of a class are the same type. Here's an example of creating an instance of a `Frog` class: let fifi = new Frog(50, 50, 20); The variable `fifi` refers to an instance of the `Frog` class. The keyword `new` is used to call the `Frog` class' constructor in the statement `new Frog()`. Altogether, a new `Frog` object was created and assigned to the variable `fifi`. Classes are templates, so they can be used to create more than one instance: // First Frog instance. let frog1 = new Frog(25, 50, 10); // Second Frog instance. let frog2 = new Frog(75, 50, 10); A simple `Frog` class could be declared as follows: class Frog { constructor(x, y, size) { // This code runs once when an instance is created. this.x = x; this.y = y; this.size = size; } show() { // This code runs once when myFrog.show() is called. textAlign(CENTER, CENTER); textSize(this.size); text('🐸', this.x, this.y); } hop() { // This code runs once when myFrog.hop() is called. this.x += random(-10, 10); this.y += random(-10, 10); } } Class declarations begin with the keyword `class` followed by the class name, such as `Frog`, and curly braces `{}`. Class names should use `PascalCase` and can't have spaces in their names. For example, naming a class `Kermit The Frog` with spaces between each word would throw a `SyntaxError`. The code between the curly braces `{}` defines the class. Functions that belong to a class are called methods. `constructor()`, `show()`, and `hop()` are methods in the `Frog` class. Methods define an object's behavior. Methods can accept parameters and return values, just like functions. Note that methods don't use the `function` keyword. `constructor()` is a special method that's called once when an instance of the class is created. The statement `new Frog()` calls the `Frog` class' `constructor()` method. A class definition is a template for instances. The keyword `this` refers to an instance's data and methods. For example, each `Frog` instance has unique coordinates stored in `this.x` and `this.y`. The `show()` method uses those coordinates to draw the frog. The `hop()` method updates those coordinates when called. Once a `Frog` instance is created, its data and methods can be accessed using the dot operator `.` as follows: // Draw a lily pad. fill('green'); stroke('green'); circle(fifi.x, fifi.y, 2 * fifi.size); // Show the Frog. fifi.show(); // Hop. fifi.hop(); property class ` // Declare a frog variable. let fifi; function setup() { createCanvas(100, 100); // Assign the frog variable a new Frog object. fifi = new Frog(50, 50, 20); describe('A frog face drawn on a blue background.'); } function draw() { background('cornflowerblue'); // Show the frog. fifi.show(); } class Frog { constructor(x, y, size) { this.x = x; this.y = y; this.size = size; } show() { textAlign(CENTER, CENTER); textSize(this.size); text('🐸', this.x, this.y); } } ` ` // Declare two frog variables. let frog1; let frog2; function setup() { createCanvas(100, 100); // Assign the frog variables a new Frog object. frog1 = new Frog(25, 50, 10); frog2 = new Frog(75, 50, 20); describe('Two frog faces drawn next to each other on a blue background.'); } function draw() { background('cornflowerblue'); // Show the frogs. frog1.show(); frog2.show(); } class Frog { constructor(x, y, size) { this.x = x; this.y = y; this.size = size; } show() { textAlign(CENTER, CENTER); textSize(this.size); text('🐸', this.x, this.y); } } ` ` // Declare two frog variables. let frog1; let frog2; function setup() { createCanvas(100, 100); // Assign the frog variables a new Frog object. frog1 = new Frog(25, 50, 10); frog2 = new Frog(75, 50, 20); // Slow the frame rate. frameRate(1); describe('Two frog faces on a blue background. The frogs hop around randomly.'); } function draw() { background('cornflowerblue'); // Show the frogs. frog1.show(); frog2.show(); // Move the frogs. frog1.hop(); frog2.hop(); // Wrap around if they've hopped off the edge. frog1.checkEdges(); frog2.checkEdges(); } class Frog { constructor(x, y, size) { this.x = x; this.y = y; this.size = size; } show() { textAlign(CENTER, CENTER); textSize(this.size); text('🐸', this.x, this.y); } hop() { this.x += random(-10, 10); this.y += random(-10, 10); } checkEdges() { if (this.x > width) { this.x = this.x - width; } else if (this.x < 0) { this.x = width - this.x; } if (this.y > height) { this.y = this.y - height; } else if (this.y < 0) { this.y = height - this.y; } } } ` ` // Create an array that will hold frogs. let frogs = []; function setup() { createCanvas(100, 100); // Add Frog objects to the array. for (let i = 0; i < 5; i += 1) { // Calculate random coordinates and size. let x = random(0, 100); let y = random(0, 100); let s = random(2, 20); // Create a new Frog object. let frog = new Frog(x, y, s); // Add the Frog to the array. frogs.push(frog); } // Slow the frame rate. frameRate(1); describe( 'Five frog faces on a blue background. The frogs hop around randomly.' ); } function draw() { background('cornflowerblue'); for (let frog of frogs) { // Show the frog. frog.show(); // Move the frog. frog.hop(); // Wrap around if they've hopped off the edge. frog.checkEdges(); } } class Frog { constructor(x, y, size) { this.x = x; this.y = y; this.size = size; } show() { textAlign(CENTER, CENTER); textSize(this.size); text('🐸', this.x, this.y); } hop() { this.x += random(-10, 10); this.y += random(-10, 10); } checkEdges() { if (this.x > width) { this.x = this.x - width; } else if (this.x < 0) { this.x = width - this.x; } if (this.y > height) { this.y = this.y - height; } else if (this.y < 0) { this.y = height - this.y; } } } ` p5 Foundation Foundation A way to repeat a block of code when the number of iterations is known. `for` loops are helpful for repeating statements a certain number of times. For example, a `for` loop makes it easy to express the idea "draw five lines" like so: for (let x = 10; x < 100; x += 20) { line(x, 25, x, 75); } The loop's header begins with the keyword `for`. Loops generally count up or count down as they repeat, or iterate. The statements in parentheses `let x = 10; x < 100; x += 20` tell the loop how it should repeat: * `let x = 10` tells the loop to start counting at `10` and keep track of iterations using the variable `x`. * `x < 100` tells the loop to count up to, but not including, `100`. * `x += 20` tells the loop to count up by `20` at the end of each iteration. The code between the curly braces `{}` is the loop's body. Statements in the loop body are repeated during each iteration of the loop. It's common to create infinite loops accidentally. When this happens, sketches may become unresponsive and the web browser may display a warning. For example, the following loop never stops iterating because it doesn't count up: for (let x = 10; x < 100; x = 20) { line(x, 25, x, 75); } The statement `x = 20` keeps the variable `x` stuck at `20`, which is always less than `100`. `for` loops can also count down: for (let d = 100; d > 0; d -= 10) { circle(50, 50, d); } `for` loops can also contain other loops. The following nested loop draws a grid of points: // Loop from left to right. for (let x = 10; x < 100; x += 10) { // Loop from top to bottom. for (let y = 10; y < 100; y += 10) { point(x, y); } } `for` loops are also helpful for iterating through the elements of an array. For example, it's common to iterate through an array that contains information about where or what to draw: // Create an array of x-coordinates. let xCoordinates = [20, 40, 60]; for (let i = 0; i < xCoordinates.length; i += 1) { // Update the element. xCoordinates[i] += random(-1, 1); // Draw a circle. circle(xCoordinates[i], 50, 20); } If the array's values aren't modified, the `for...of` statement can simplify the code. They're similar to `for` loops in Python and `for-each` loops in C++ and Java. The following loops have the same effect: // Draw circles with a for loop. let xCoordinates = [20, 40, 60]; for (let i = 0; i < xCoordinates.length; i += 1) { circle(xCoordinates[i], 50, 20); } // Draw circles with a for...of statement. let xCoordinates = [20, 40, 60]; for (let x of xCoordinates) { circle(x, 50, 20); } In the code snippets above, the variables `i` and `x` have different roles. In the first snippet, `i` counts from `0` up to `2`, which is one less than `xCoordinates.length`. `i` is used to access the element in `xCoordinates` at index `i`. In the second code snippet, `x` isn't keeping track of the loop's progress or an index. During each iteration, `x` contains the next element of `xCoordinates`. `x` starts from the beginning of `xCoordinates` (`20`) and updates its value to `40` and then `60` during the next iterations. property for ` function setup() { createCanvas(100, 100); describe('Five black vertical lines on a gray background.'); } function draw() { background(200); // Draw vertical lines using a loop. for (let x = 10; x < 100; x += 20) { line(x, 25, x, 75); } } ` ` function setup() { createCanvas(100, 100); describe('Five white concentric circles drawn on a gray background.'); } function draw() { background(200); // Draw concentric circles using a loop. for (let d = 100; d > 0; d -= 20) { circle(50, 50, d); } } ` ` function setup() { createCanvas(100, 100); describe('A grid of black dots on a gray background.'); } function draw() { background(200); // Set the spacing for points on the grid. let space = 10; // Increase the stroke weight. strokeWeight(3); // Loop from the left to the right. for (let x = space; x < 100; x += space) { // Loop from the top to the bottom. for (let y = space; y < 100; y += space) { point(x, y); } } } ` ` // Declare the variable xCoordinates and assign it an array of numbers. let xCoordinates = [20, 40, 60, 80]; function setup() { createCanvas(100, 100); describe('Four white circles drawn in a horizontal line on a gray background.'); } function draw() { background(200); // Access the element at index i and use it to draw a circle. for (let i = 0; i < xCoordinates.length; i += 1) { circle(xCoordinates[i], 50, 20); } } ` ` // Declare the variable xCoordinates and assign it an array of numbers. let xCoordinates = [20, 40, 60, 80]; function setup() { createCanvas(100, 100); describe('Four white circles drawn in a horizontal line on a gray background.'); } function draw() { background(200); // Access each element of the array and use it to draw a circle. for (let x of xCoordinates) { circle(x, 50, 20); } } ` p5 Foundation Foundation A way to repeat a block of code. `while` loops are helpful for repeating statements while a condition is `true`. They're like `if` statements that repeat. For example, a `while` loop makes it easy to express the idea "draw several lines" like so: // Declare a variable to keep track of iteration. let x = 10; // Repeat as long as x < 100 while (x < 100) { line(x, 25, x, 75); // Increment by 20. x += 20; } The loop's header begins with the keyword `while`. Loops generally count up or count down as they repeat, or iterate. The statement in parentheses `x < 100` is a condition the loop checks each time it iterates. If the condition is `true`, the loop runs the code between the curly braces `{}`, The code between the curly braces is called the loop's body. If the condition is `false`, the body is skipped and the loop is stopped. It's common to create infinite loops accidentally. For example, the following loop never stops iterating because it doesn't count up: // Declare a variable to keep track of iteration. let x = 10; // Repeat as long as x < 100 while (x < 100) { line(x, 25, x, 75); } // This should be in the loop's body! x += 20; The statement `x += 20` appears after the loop's body. That means the variable `x` is stuck at `10`, which is always less than `100`. `while` loops are useful when the number of iterations isn't known in advance. For example, concentric circles could be drawn at random increments: let d = 100; let minSize = 5; while (d > minSize) { circle(50, 50, d); d -= random(10); } property while ` function setup() { createCanvas(100, 100); describe('Five black vertical lines on a gray background.'); } function draw() { background(200); // Declare a variable to keep track of iteration. let x = 10; // Repeat as long as x < 100 while (x < 100) { line(x, 25, x, 75); // Increment by 20. x += 20; } } ` ` function setup() { createCanvas(100, 100); // Slow the frame rate. frameRate(5); describe( "A gray square with several concentric circles at the center. The circles' sizes decrease at random increments." ); } function draw() { background(200); let d = 100; let minSize = 5; while (d > minSize) { circle(50, 50, d); d -= random(5, 15); } } ` p5 Foundation Foundation Prints a message to the web browser's console. The console object is helpful for printing messages while debugging. For example, it's common to add a `console.log()` statement while studying how a section of code works: if (isPlaying === true) { // Add a console.log() statement to make sure this block of code runs. console.log('Got here!'); // Game logic. } `console.error()` is helpful for tracking errors because it prints formatted messages. For example, it's common to encounter errors when loading media assets: // Logs an error message with special formatting. function handleFailure(error) { console.error('Oops!', error); } // Try to load an image and call handleError() if it fails. loadImage('https://example.com/cat.jpg', handleImage, handleError); property console ` function setup() { noCanvas(); // Prints "Hello!" to the console. console.log('Hello!'); } ` ` function setup() { createCanvas(100, 100); background(200); // Try to load an image from a fake URL. // Call handleError() if the image fails to load. loadImage('https://example.com/cat.jpg', handleImage, handleError); } // Displays the image. function handleImage(img) { image(img, 0, 0); describe('A cat on a gray background.'); } // Prints the error. function handleError(error) { console.error('Oops!', error); describe('A gray square.'); } ` p5 Foundation Foundation Creates a canvas element on the web page. `createCanvas()` creates the main drawing canvas for a sketch. It should only be called once at the beginning of setup(). Calling `createCanvas()` more than once causes unpredictable behavior. The first two parameters, `width` and `height`, are optional. They set the dimensions of the canvas and the values of the width and height system variables. For example, calling `createCanvas(900, 500)` creates a canvas that's 900×500 pixels. By default, `width` and `height` are both 100. The third parameter is also optional. If either of the constants `P2D` or `WEBGL` is passed, as in `createCanvas(900, 500, WEBGL)`, then it will set the sketch's rendering mode. If an existing HTMLCanvasElement is passed, as in `createCanvas(900, 500, myCanvas)`, then it will be used by the sketch. The fourth parameter is also optional. If an existing HTMLCanvasElement is passed, as in `createCanvas(900, 500, WEBGL, myCanvas)`, then it will be used by the sketch. Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported by the browser. Check the webglVersion system variable to check what version is being used, or call `setAttributes({ version: 1 })` to create a WebGL1 context. method createCanvas ### return new `p5.Renderer` that holds the canvas. p5.Renderer ` function setup() { createCanvas(100, 100); background(180); // Draw a diagonal line. line(0, 0, width, height); describe('A diagonal line drawn from top-left to bottom-right on a gray background.'); } ` ` function setup() { createCanvas(100, 50); background(180); // Draw a diagonal line. line(0, 0, width, height); describe('A diagonal line drawn from top-left to bottom-right on a gray background.'); } ` ` // Use WebGL mode. function setup() { createCanvas(100, 100, WEBGL); background(180); // Draw a diagonal line. line(-width / 2, -height / 2, width / 2, height / 2); describe('A diagonal line drawn from top-left to bottom-right on a gray background.'); } ` ` function setup() { // Create a p5.Render object. let cnv = createCanvas(50, 50); // Position the canvas. cnv.position(10, 20); background(180); // Draw a diagonal line. line(0, 0, width, height); describe('A diagonal line drawn from top-left to bottom-right on a gray background.'); } ` p5 Rendering Rendering width width of the canvas. Defaults to 100. Number height height of the canvas. Defaults to 100. Number renderer either P2D or WEBGL. Defaults to `P2D`. Constant canvas existing canvas element that should be used for the sketch. HTMLCanvasElement ##### return new `p5.Renderer` that holds the canvas. p5.Renderer width Number height Number canvas HTMLCanvasElement ##### return p5.Renderer Resizes the canvas to a given width and height. `resizeCanvas()` immediately clears the canvas and calls redraw(). It's common to call `resizeCanvas()` within the body of windowResized() like so: function windowResized() { resizeCanvas(windowWidth, windowHeight); } The first two parameters, `width` and `height`, set the dimensions of the canvas. They also the values of the width and height system variables. For example, calling `resizeCanvas(300, 500)` resizes the canvas to 300×500 pixels, then sets width to 300 and height 500. The third parameter, `noRedraw`, is optional. If `true` is passed, as in `resizeCanvas(300, 500, true)`, then the canvas will be canvas to 300×500 pixels but the redraw() function won't be called immediately. By default, redraw() is called immediately when `resizeCanvas()` finishes executing. method resizeCanvas width width of the canvas. Number height height of the canvas. Number noRedraw whether to delay calling redraw(). Defaults to `false`. Boolean ` // Double-click to resize the canvas. function setup() { createCanvas(100, 100); describe( 'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.' ); } function draw() { background(180); // Draw a circle at the center of the canvas. circle(width / 2, height / 2, 20); } // Resize the canvas when the user double-clicks. function doubleClicked() { resizeCanvas(50, 50); } ` ` // Resize the web browser to change the canvas size. function setup() { createCanvas(windowWidth, windowHeight); describe('A white circle drawn on a gray background.'); } function draw() { background(180); // Draw a circle at the center of the canvas. circle(width / 2, height / 2, 20); } // Always resize the canvas to fill the browser window. function windowResized() { resizeCanvas(windowWidth, windowHeight); } ` p5 Rendering Rendering Removes the default canvas. By default, a 100×100 pixels canvas is created without needing to call createCanvas(). `noCanvas()` removes the default canvas for sketches that don't need it. method noCanvas ` function setup() { noCanvas(); } ` p5 Rendering Rendering Creates a p5.Graphics object. `createGraphics()` creates an offscreen drawing canvas (graphics buffer) and returns it as a p5.Graphics object. Drawing to a separate graphics buffer can be helpful for performance and for organizing code. The first two parameters, `width` and `height`, are optional. They set the dimensions of the p5.Graphics object. For example, calling `createGraphics(900, 500)` creates a graphics buffer that's 900×500 pixels. The third parameter is also optional. If either of the constants `P2D` or `WEBGL` is passed, as in `createGraphics(900, 500, WEBGL)`, then it will set the p5.Graphics object's rendering mode. If an existing HTMLCanvasElement is passed, as in `createGraphics(900, 500, myCanvas)`, then it will be used by the graphics buffer. The fourth parameter is also optional. If an existing HTMLCanvasElement is passed, as in `createGraphics(900, 500, WEBGL, myCanvas)`, then it will be used by the graphics buffer. Note: In WebGL mode, the p5.Graphics object will use a WebGL2 context if it's supported by the browser. Check the webglVersion system variable to check what version is being used, or call `setAttributes({ version: 1 })` to create a WebGL1 context. method createGraphics ### return new graphics buffer. p5.Graphics ` // Double-click to draw the contents of the graphics buffer. let pg; function setup() { createCanvas(100, 100); background(180); // Create the p5.Graphics object. pg = createGraphics(50, 50); // Draw to the graphics buffer. pg.background(100); pg.circle(pg.width / 2, pg.height / 2, 20); describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.'); } // Display the graphics buffer when the user double-clicks. function doubleClicked() { if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) { image(pg, 25, 25); } } ` ` // Double-click to draw the contents of the graphics buffer. let pg; function setup() { createCanvas(100, 100); background(180); // Create the p5.Graphics object in WebGL mode. pg = createGraphics(50, 50, WEBGL); // Draw to the graphics buffer. pg.background(100); pg.lights(); pg.noStroke(); pg.rotateX(QUARTER_PI); pg.rotateY(QUARTER_PI); pg.torus(15, 5); describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.'); } // Display the graphics buffer when the user double-clicks. function doubleClicked() { if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) { image(pg, 25, 25); } } ` p5 Rendering Rendering width width of the graphics buffer. Number height height of the graphics buffer. Number renderer either P2D or WEBGL. Defaults to P2D. Constant canvas existing canvas element that should be used for the graphics buffer.. HTMLCanvasElement ##### return new graphics buffer. p5.Graphics width Number height Number canvas HTMLCanvasElement ##### return p5.Graphics args[0] is expected to be renderer args[1] is expected to be canvas p5 Rendering Rendering Creates and a new p5.Framebuffer object. p5.Framebuffer objects are separate drawing surfaces that can be used as textures in WebGL mode. They're similar to p5.Graphics objects and generally run much faster when used as textures. The parameter, `options`, is optional. An object can be passed to configure the p5.Framebuffer object. The available properties are: * `format`: data format of the texture, either `UNSIGNED_BYTE`, `FLOAT`, or `HALF_FLOAT`. Default is `UNSIGNED_BYTE`. * `channels`: whether to store `RGB` or `RGBA` color channels. Default is to match the main canvas which is `RGBA`. * `depth`: whether to include a depth buffer. Default is `true`. * `depthFormat`: data format of depth information, either `UNSIGNED_INT` or `FLOAT`. Default is `FLOAT`. * `stencil`: whether to include a stencil buffer for masking. `depth` must be `true` for this feature to work. Defaults to the value of `depth` which is `true`. * `antialias`: whether to perform anti-aliasing. If set to `true`, as in `{ antialias: true }`, 2 samples will be used by default. The number of samples can also be set, as in `{ antialias: 4 }`. Default is to match setAttributes() which is `false` (`true` in Safari). * `width`: width of the p5.Framebuffer object. Default is to always match the main canvas width. * `height`: height of the p5.Framebuffer object. Default is to always match the main canvas height. * `density`: pixel density of the p5.Framebuffer object. Default is to always match the main canvas pixel density. * `textureFiltering`: how to read values from the p5.Framebuffer object. Either `LINEAR` (nearby pixels will be interpolated) or `NEAREST` (no interpolation). Generally, use `LINEAR` when using the texture as an image and `NEAREST` if reading the texture as data. Default is `LINEAR`. If the `width`, `height`, or `density` attributes are set, they won't automatically match the main canvas and must be changed manually. Note: `createFramebuffer()` can only be used in WebGL mode. method createFramebuffer options configuration options. Object ### return new framebuffer. p5.Framebuffer ` let myBuffer; function setup() { createCanvas(100, 100, WEBGL); // Create a p5.Framebuffer object. myBuffer = createFramebuffer(); describe('A grid of white toruses rotating against a dark gray background.'); } function draw() { background(50); // Start drawing to the p5.Framebuffer object. myBuffer.begin(); // Clear the drawing surface. clear(); // Turn on the lights. lights(); // Rotate the coordinate system. rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); // Style the torus. noStroke(); // Draw the torus. torus(20); // Stop drawing to the p5.Framebuffer object. myBuffer.end(); // Iterate from left to right. for (let x = -50; x < 50; x += 25) { // Iterate from top to bottom. for (let y = -50; y < 50; y += 25) { // Draw the p5.Framebuffer object to the canvas. image(myBuffer, x, y, 25, 25); } } } ` ` let myBuffer; function setup() { createCanvas(100, 100, WEBGL); // Create an options object. let options = { width: 25, height: 25 }; // Create a p5.Framebuffer object. // Use options for configuration. myBuffer = createFramebuffer(options); describe('A grid of white toruses rotating against a dark gray background.'); } function draw() { background(50); // Start drawing to the p5.Framebuffer object. myBuffer.begin(); // Clear the drawing surface. clear(); // Turn on the lights. lights(); // Rotate the coordinate system. rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); // Style the torus. noStroke(); // Draw the torus. torus(5, 2.5); // Stop drawing to the p5.Framebuffer object. myBuffer.end(); // Iterate from left to right. for (let x = -50; x < 50; x += 25) { // Iterate from top to bottom. for (let y = -50; y < 50; y += 25) { // Draw the p5.Framebuffer object to the canvas. image(myBuffer, x, y); } } } ` p5 Rendering Rendering Clears the depth buffer in WebGL mode. `clearDepth()` clears information about how far objects are from the camera in 3D space. This information is stored in an object called the depth buffer. Clearing the depth buffer ensures new objects aren't drawn behind old ones. Doing so can be useful for feedback effects in which the previous frame serves as the background for the current frame. The parameter, `depth`, is optional. If a number is passed, as in `clearDepth(0.5)`, it determines the range of objects to clear from the depth buffer. 0 doesn't clear any depth information, 0.5 clears depth information halfway between the near and far clipping planes, and 1 clears depth information all the way to the far clipping plane. By default, `depth` is 1. Note: `clearDepth()` can only be used in WebGL mode. method clearDepth depth amount of the depth buffer to clear between 0 (none) and 1 (far clipping plane). Defaults to 1. Number ` let previous; let current; function setup() { createCanvas(100, 100, WEBGL); // Create the p5.Framebuffer objects. previous = createFramebuffer({ format: FLOAT }); current = createFramebuffer({ format: FLOAT }); describe( 'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.' ); } function draw() { // Swap the previous p5.Framebuffer and the // current one so it can be used as a texture. [previous, current] = [current, previous]; // Start drawing to the current p5.Framebuffer. current.begin(); // Paint the background. background(255); // Draw the previous p5.Framebuffer. // Clear the depth buffer so the previous // frame doesn't block the current one. push(); tint(255, 250); image(previous, -50, -50); clearDepth(); pop(); // Draw the box on top of the previous frame. push(); let x = 25 * sin(frameCount * 0.01); let y = 25 * sin(frameCount * 0.02); translate(x, y, 0); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); normalMaterial(); box(12); pop(); // Stop drawing to the current p5.Framebuffer. current.end(); // Display the current p5.Framebuffer. image(current, -50, -50); } ` p5 Rendering Rendering Sets the way colors blend when added to the canvas. By default, drawing with a solid color paints over the current pixel values on the canvas. `blendMode()` offers many options for blending colors. Shapes, images, and text can be used as sources for drawing to the canvas. A source pixel changes the color of the canvas pixel where it's drawn. The final color results from blending the source pixel's color with the canvas pixel's color. RGB color values from the source and canvas pixels are compared, added, subtracted, multiplied, and divided to create different effects. Red values with red values, greens with greens, and blues with blues. The parameter, `mode`, sets the blend mode. For example, calling `blendMode(ADD)` sets the blend mode to `ADD`. The following blend modes are available in both 2D and WebGL mode: * `BLEND`: color values from the source overwrite the canvas. This is the default mode. * `ADD`: color values from the source are added to values from the canvas. * `DARKEST`: keeps the darkest color value. * `LIGHTEST`: keeps the lightest color value. * `EXCLUSION`: similar to `DIFFERENCE` but with less contrast. * `MULTIPLY`: color values from the source are multiplied with values from the canvas. The result is always darker. * `SCREEN`: all color values are inverted, then multiplied, then inverted again. The result is always lighter. (Opposite of `MULTIPLY`) * `REPLACE`: the last source drawn completely replaces the rest of the canvas. * `REMOVE`: overlapping pixels are removed by making them completely transparent. The following blend modes are only available in 2D mode: * `DIFFERENCE`: color values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. * `OVERLAY`: combines `MULTIPLY` and `SCREEN`. Dark values in the canvas get darker and light values get lighter. * `HARD_LIGHT`: combines `MULTIPLY` and `SCREEN`. Dark values in the source get darker and light values get lighter. * `SOFT_LIGHT`: a softer version of `HARD_LIGHT`. * `DODGE`: lightens light tones and increases contrast. Divides the canvas color values by the inverted color values from the source. * `BURN`: darkens dark tones and increases contrast. Divides the source color values by the inverted color values from the canvas, then inverts the result. The following blend modes are only available in WebGL mode: * `SUBTRACT`: RGB values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. Alpha (transparency) values from the source and canvas are added. method blendMode mode blend mode to set. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT Constant ` function setup() { createCanvas(100, 100); background(180); // Use the default blend mode. blendMode(BLEND); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A Sky Blue line and a Deep Rose line form an X on a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(HARD_LIGHT); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('An ocean blue line and a hot pink line form an X on a gray background. The area where they overlap is Magenta purple.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(ADD); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('An icy blue line and a light lavender line form an X on a gray background. The area where they overlap is white.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(DARKEST); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A steel blue line and a cranberry line form an X on a gray background. The area where they overlap is deep purple.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(BURN); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A cobalt blue line and a burgundy line form an X on a gray background. The area where they overlap is black.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(LIGHTEST); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A pale lavender line and a soft beige line form an X on a gray background. The area where they overlap is pale lilac.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(EXCLUSION); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('An earthy brown line and a muted sage line form an X on a gray background. The area where they overlap is sage green.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(MULTIPLY); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A slate blue line and a plum line form an X on a gray background. The area where they overlap is dark Indigo.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(SCREEN); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A baby blue line and a peach pink line form an X on a gray background. The area where they overlap is misty lilac.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(REPLACE); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A diagonal deep rose line.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(REMOVE); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('The silhouette of an X is missing from a gray background.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(DIFFERENCE); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A light burgundy line and a forest green line form an X on a gray background. The area where they overlap is dark cocoa.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(OVERLAY); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A cornflower blue line and a light rose line form an X on a gray background. The area where they overlap is violet.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(SOFT_LIGHT); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('A pale sky line and a rose blush line form an X on a gray background. The area where they overlap is lavender.'); } ` ` function setup() { createCanvas(100, 100); background(180); // Set the blend mode. blendMode(DODGE); // Style the lines. strokeWeight(30); // Draw the first line. stroke('#1a85ff'); line(25, 25, 75, 75); // Draw the second line. stroke('#d41159'); line(75, 25, 25, 75); describe('An aqua blue line and a light pink line form an X on a gray background. The area where they overlap is white.'); } ` ` function setup() { // Create a canvas with WEBGL mode. createCanvas(100, 100, WEBGL); // Set the background color. background(180); // Set the blend mode to SUBTRACT. blendMode(SUBTRACT); // Style the lines. strokeWeight(30); // Draw the blue line. stroke('#1a85ff'); line(-25, -25, 25, 25); // Draw the red line. stroke('#d41159'); line(25, -25, -25, 25); describe('A burnt orange and a sea green line form an X on a gray background. The area where they overlap is forest green.'); } ` p5 Rendering Rendering A system variable that provides direct access to the sketch's `` element. The `` element provides many specialized features that aren't included in the p5.js library. The `drawingContext` system variable provides access to these features by exposing the sketch's CanvasRenderingContext2D object. property drawingContext ` function setup() { createCanvas(100, 100); background(180); // Style the circle using shadows. drawingContext.shadowOffsetX = 5; drawingContext.shadowOffsetY = -5; drawingContext.shadowBlur = 10; drawingContext.shadowColor = 'black'; // Draw the circle. circle(50, 50, 40); describe("A white circle on a gray background. The circle's edges are shadowy."); } ` ` function setup() { createCanvas(100, 100); background('skyblue'); // Style the circle using a color gradient. let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40); myGradient.addColorStop(0, 'yellow'); myGradient.addColorStop(0.6, 'orangered'); myGradient.addColorStop(1, 'yellow'); drawingContext.fillStyle = myGradient; drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)'; // Draw the circle. circle(50, 50, 40); describe('A fiery sun drawn on a light blue background.'); } ` p5 Rendering Rendering Stops the code in draw() from running repeatedly. By default, draw() tries to run 60 times per second. Calling `noLoop()` stops draw() from repeating. The draw loop can be restarted by calling loop(). draw() can be run once by calling redraw(). The isLooping() function can be used to check whether a sketch is looping, as in `isLooping() === true`. method noLoop ` function setup() { createCanvas(100, 100); // Turn off the draw loop. noLoop(); describe('A white half-circle on the left edge of a gray square.'); } function draw() { background(200); // Calculate the circle's x-coordinate. let x = frameCount; // Draw the circle. // Normally, the circle would move from left to right. circle(x, 50, 20); } ` ` // Double-click to stop the draw loop. function setup() { createCanvas(100, 100); // Slow the frame rate. frameRate(5); describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.'); } function draw() { background(200); // Calculate the circle's coordinates. let x = random(0, 100); let y = random(0, 100); // Draw the circle. // Normally, the circle would move from left to right. circle(x, y, 20); } // Stop the draw loop when the user double-clicks. function doubleClicked() { noLoop(); } ` ` let startButton; let stopButton; function setup() { createCanvas(100, 100); // Create the button elements and place them // beneath the canvas. startButton = createButton('▶'); startButton.position(0, 100); startButton.size(50, 20); stopButton = createButton('◾'); stopButton.position(50, 100); stopButton.size(50, 20); // Set functions to call when the buttons are pressed. startButton.mousePressed(loop); stopButton.mousePressed(noLoop); // Slow the frame rate. frameRate(5); describe( 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.' ); } function draw() { background(200); // Calculate the circle's coordinates. let x = random(0, 100); let y = random(0, 100); // Draw the circle. // Normally, the circle would move from left to right. circle(x, y, 20); } ` p5 Structure Structure Resumes the draw loop after noLoop() has been called. By default, draw() tries to run 60 times per second. Calling noLoop() stops draw() from repeating. The draw loop can be restarted by calling `loop()`. The isLooping() function can be used to check whether a sketch is looping, as in `isLooping() === true`. method loop ` function setup() { createCanvas(100, 100); // Turn off the draw loop. noLoop(); describe( 'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.' ); } function draw() { background(200); // Calculate the circle's x-coordinate. let x = frameCount; // Draw the circle. circle(x, 50, 20); } // Resume the draw loop when the user double-clicks. function doubleClicked() { loop(); } ` ` let startButton; let stopButton; function setup() { createCanvas(100, 100); // Create the button elements and place them // beneath the canvas. startButton = createButton('▶'); startButton.position(0, 100); startButton.size(50, 20); stopButton = createButton('◾'); stopButton.position(50, 100); stopButton.size(50, 20); // Set functions to call when the buttons are pressed. startButton.mousePressed(loop); stopButton.mousePressed(noLoop); // Slow the frame rate. frameRate(5); describe( 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.' ); } function draw() { background(200); // Calculate the circle's coordinates. let x = random(0, 100); let y = random(0, 100); // Draw the circle. // Normally, the circle would move from left to right. circle(x, y, 20); } ` p5 Structure Structure Returns `true` if the draw loop is running and `false` if not. By default, draw() tries to run 60 times per second. Calling noLoop() stops draw() from repeating. The draw loop can be restarted by calling loop(). The `isLooping()` function can be used to check whether a sketch is looping, as in `isLooping() === true`. method isLooping ### return Boolean ` function setup() { createCanvas(100, 100); describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.'); } function draw() { background(200); // Draw the circle at the mouse's position. circle(mouseX, mouseY, 20); } // Toggle the draw loop when the user double-clicks. function doubleClicked() { if (isLooping() === true) { noLoop(); } else { loop(); } } ` p5 Structure Structure Begins a drawing group that contains its own styles and transformations. By default, styles such as fill() and transformations such as rotate() are applied to all drawing that follows. The `push()` and pop() functions can limit the effect of styles and transformations to a specific group of shapes, images, and text. For example, a group of shapes could be translated to follow the mouse without affecting the rest of the sketch: // Begin the drawing group. push(); // Translate the origin to the mouse's position. translate(mouseX, mouseY); // Style the face. noStroke(); fill('green'); // Draw the face. circle(0, 0, 60); // Style the eyes. fill('white'); // Draw the left eye. ellipse(-20, -20, 30, 20); // Draw the right eye. ellipse(20, -20, 30, 20); // End the drawing group. pop(); // Draw a bug. let x = random(0, 100); let y = random(0, 100); text('🦟', x, y); In the code snippet above, the bug's position isn't affected by `translate(mouseX, mouseY)` because that transformation is contained between `push()` and pop(). The bug moves around the entire canvas as expected. Note: `push()` and pop() are always called as a pair. Both functions are required to begin and end a drawing group. `push()` and pop() can also be nested to create subgroups. For example, the code snippet above could be changed to give more detail to the frog’s eyes: // Begin the drawing group. push(); // Translate the origin to the mouse's position. translate(mouseX, mouseY); // Style the face. noStroke(); fill('green'); // Draw a face. circle(0, 0, 60); // Style the eyes. fill('white'); // Draw the left eye. push(); translate(-20, -20); ellipse(0, 0, 30, 20); fill('black'); circle(0, 0, 8); pop(); // Draw the right eye. push(); translate(20, -20); ellipse(0, 0, 30, 20); fill('black'); circle(0, 0, 8); pop(); // End the drawing group. pop(); // Draw a bug. let x = random(0, 100); let y = random(0, 100); text('🦟', x, y); In this version, the code to draw each eye is contained between its own `push()` and pop() functions. Doing so makes it easier to add details in the correct part of a drawing. `push()` and pop() contain the effects of the following functions: * fill() * noFill() * noStroke() * stroke() * tint() * noTint() * strokeWeight() * strokeCap() * strokeJoin() * imageMode() * rectMode() * ellipseMode() * colorMode() * textAlign() * textFont() * textSize() * textLeading() * applyMatrix() * resetMatrix() * rotate() * scale() * shearX() * shearY() * translate() In WebGL mode, `push()` and pop() contain the effects of a few additional styles: * setCamera() * ambientLight() * directionalLight() * pointLight() texture() * specularMaterial() * shininess() * normalMaterial() * shader() method push ` function setup() { createCanvas(100, 100); background(200); // Draw the left circle. circle(25, 50, 20); // Begin the drawing group. push(); // Translate the origin to the center. translate(50, 50); // Style the circle. strokeWeight(5); stroke('royalblue'); fill('orange'); // Draw the circle. circle(0, 0, 20); // End the drawing group. pop(); // Draw the right circle. circle(75, 50, 20); describe( 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.' ); } ` ` function setup() { createCanvas(100, 100); // Slow the frame rate. frameRate(24); describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.'); } function draw() { background(200); // Begin the drawing group. push(); // Translate the origin to the mouse's position. translate(mouseX, mouseY); // Style the face. noStroke(); fill('green'); // Draw a face. circle(0, 0, 60); // Style the eyes. fill('white'); // Draw the left eye. push(); translate(-20, -20); ellipse(0, 0, 30, 20); fill('black'); circle(0, 0, 8); pop(); // Draw the right eye. push(); translate(20, -20); ellipse(0, 0, 30, 20); fill('black'); circle(0, 0, 8); pop(); // End the drawing group. pop(); // Draw a bug. let x = random(0, 100); let y = random(0, 100); text('🦟', x, y); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe( 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.' ); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Draw the red sphere. push(); translate(-25, 0, 0); noStroke(); directionalLight(255, 0, 0, 0, 0, -1); sphere(20); pop(); // Draw the blue sphere. push(); translate(25, 0, 0); strokeWeight(0.3); stroke(0, 0, 255); noFill(); sphere(20); pop(); } ` p5 Structure Structure Ends a drawing group that contains its own styles and transformations. By default, styles such as fill() and transformations such as rotate() are applied to all drawing that follows. The push() and `pop()` functions can limit the effect of styles and transformations to a specific group of shapes, images, and text. For example, a group of shapes could be translated to follow the mouse without affecting the rest of the sketch: // Begin the drawing group. push(); // Translate the origin to the mouse's position. translate(mouseX, mouseY); // Style the face. noStroke(); fill('green'); // Draw the face. circle(0, 0, 60); // Style the eyes. fill('white'); // Draw the left eye. ellipse(-20, -20, 30, 20); // Draw the right eye. ellipse(20, -20, 30, 20); // End the drawing group. pop(); // Draw a bug. let x = random(0, 100); let y = random(0, 100); text('🦟', x, y); In the code snippet above, the bug's position isn't affected by `translate(mouseX, mouseY)` because that transformation is contained between push() and `pop()`. The bug moves around the entire canvas as expected. Note: push() and `pop()` are always called as a pair. Both functions are required to begin and end a drawing group. push() and `pop()` can also be nested to create subgroups. For example, the code snippet above could be changed to give more detail to the frog’s eyes: // Begin the drawing group. push(); // Translate the origin to the mouse's position. translate(mouseX, mouseY); // Style the face. noStroke(); fill('green'); // Draw a face. circle(0, 0, 60); // Style the eyes. fill('white'); // Draw the left eye. push(); translate(-20, -20); ellipse(0, 0, 30, 20); fill('black'); circle(0, 0, 8); pop(); // Draw the right eye. push(); translate(20, -20); ellipse(0, 0, 30, 20); fill('black'); circle(0, 0, 8); pop(); // End the drawing group. pop(); // Draw a bug. let x = random(0, 100); let y = random(0, 100); text('🦟', x, y); In this version, the code to draw each eye is contained between its own push() and `pop()` functions. Doing so makes it easier to add details in the correct part of a drawing. push() and `pop()` contain the effects of the following functions: * fill() * noFill() * noStroke() * stroke() * tint() * noTint() * strokeWeight() * strokeCap() * strokeJoin() * imageMode() * rectMode() * ellipseMode() * colorMode() * textAlign() * textFont() * textSize() * textLeading() * applyMatrix() * resetMatrix() * rotate() * scale() * shearX() * shearY() * translate() In WebGL mode, push() and `pop()` contain the effects of a few additional styles: * setCamera() * ambientLight() * directionalLight() * pointLight() texture() * specularMaterial() * shininess() * normalMaterial() * shader() method pop ` function setup() { createCanvas(100, 100); background(200); // Draw the left circle. circle(25, 50, 20); // Begin the drawing group. push(); // Translate the origin to the center. translate(50, 50); // Style the circle. strokeWeight(5); stroke('royalblue'); fill('orange'); // Draw the circle. circle(0, 0, 20); // End the drawing group. pop(); // Draw the right circle. circle(75, 50, 20); describe( 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.' ); } ` ` function setup() { createCanvas(100, 100); // Slow the frame rate. frameRate(24); describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.'); } function draw() { background(200); // Begin the drawing group. push(); // Translate the origin to the mouse's position. translate(mouseX, mouseY); // Style the face. noStroke(); fill('green'); // Draw a face. circle(0, 0, 60); // Style the eyes. fill('white'); // Draw the left eye. push(); translate(-20, -20); ellipse(0, 0, 30, 20); fill('black'); circle(0, 0, 8); pop(); // Draw the right eye. push(); translate(20, -20); ellipse(0, 0, 30, 20); fill('black'); circle(0, 0, 8); pop(); // End the drawing group. pop(); // Draw a bug. let x = random(0, 100); let y = random(0, 100); text('🦟', x, y); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe( 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.' ); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Draw the red sphere. push(); translate(-25, 0, 0); noStroke(); directionalLight(255, 0, 0, 0, 0, -1); sphere(20); pop(); // Draw the blue sphere. push(); translate(25, 0, 0); strokeWeight(0.3); stroke(0, 0, 255); noFill(); sphere(20); pop(); } ` p5 Structure Structure Runs the code in draw() once. By default, draw() tries to run 60 times per second. Calling noLoop() stops draw() from repeating. Calling `redraw()` will execute the code in the draw() function a set number of times. The parameter, `n`, is optional. If a number is passed, as in `redraw(5)`, then the draw loop will run the given number of times. By default, `n` is 1. method redraw n number of times to run draw(). Defaults to 1. Integer ` // Double-click the canvas to move the circle. let x = 0; function setup() { createCanvas(100, 100); // Turn off the draw loop. noLoop(); describe( 'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.' ); } function draw() { background(200); // Draw the circle. circle(x, 50, 20); // Increment x. x += 5; } // Run the draw loop when the user double-clicks. function doubleClicked() { redraw(); } ` ` // Double-click the canvas to move the circle. let x = 0; function setup() { createCanvas(100, 100); // Turn off the draw loop. noLoop(); describe( 'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.' ); } function draw() { background(200); // Draw the circle. circle(x, 50, 20); // Increment x. x += 5; } // Run the draw loop three times when the user double-clicks. function doubleClicked() { redraw(3); } ` p5 Structure Structure Creates a new sketch in "instance" mode. All p5.js sketches are instances of the `p5` class. Put another way, all p5.js sketches are objects with methods including `pInst.setup()`, `pInst.draw()`, `pInst.circle()`, and `pInst.fill()`. By default, sketches run in "global mode" to hide some of this complexity. In global mode, a default instance of the `p5` class is created automatically. The default `p5` instance searches the web page's source code for declarations of system functions such as `setup()`, `draw()`, and `mousePressed()`, then attaches those functions to itself as methods. Calling a function such as `circle()` in global mode actually calls the default `p5` object's `pInst.circle()` method. It's often helpful to isolate the code within sketches from the rest of the code on a web page. Two common use cases are web pages that use other JavaScript libraries and web pages with multiple sketches. "Instance mode" makes it easy to support both of these scenarios. Instance mode sketches support the same API as global mode sketches. They use a function to bundle, or encapsulate, an entire sketch. The function containing the sketch is then passed to the `p5()` constructor. The first parameter, `sketch`, is a function that contains the sketch. For example, the statement `new p5(mySketch)` would create a new instance mode sketch from a function named `mySketch`. The function should have one parameter, `p`, that's a `p5` object. The second parameter, `node`, is optional. If a string is passed, as in `new p5(mySketch, 'sketch-one')` the new instance mode sketch will become a child of the HTML element with the id `sketch-one`. If an HTML element is passed, as in `new p5(mySketch, myElement)`, then the new instance mode sketch will become a child of the `Element` object called `myElement`. method p5 sketch function containing the sketch. Object node ID or reference to the HTML element that will contain the sketch. String|HTMLElement ` // Declare the function containing the sketch. function sketch(p) { // Declare the setup() method. p.setup = function () { p.createCanvas(100, 100); p.describe('A white circle drawn on a gray background.'); }; // Declare the draw() method. p.draw = function () { p.background(200); // Draw the circle. p.circle(50, 50, 20); }; } // Initialize the sketch. new p5(sketch); ` ` // Declare the function containing the sketch. function sketch(p) { // Create the sketch's variables within its scope. let x = 50; let y = 50; // Declare the setup() method. p.setup = function () { p.createCanvas(100, 100); p.describe('A white circle moves randomly on a gray background.'); }; // Declare the draw() method. p.draw = function () { p.background(200); // Update x and y. x += p.random(-1, 1); y += p.random(-1, 1); // Draw the circle. p.circle(x, y, 20); }; } // Initialize the sketch. new p5(sketch); ` ` // Declare the function containing the sketch. function sketch(p) { // Declare the setup() method. p.setup = function () { p.createCanvas(100, 100); p.describe('A white circle drawn on a gray background.'); }; // Declare the draw() method. p.draw = function () { p.background(200); // Draw the circle. p.circle(50, 50, 20); }; } // Select the web page's body element. let body = document.querySelector('body'); // Initialize the sketch and attach it to the web page's body. new p5(sketch, body); ` ` // Declare the function containing the sketch. function sketch(p) { // Declare the setup() method. p.setup = function () { p.createCanvas(100, 100); p.describe( 'A white circle drawn on a gray background. The circle follows the mouse as the user moves.' ); }; // Declare the draw() method. p.draw = function () { p.background(200); // Draw the circle. p.circle(p.mouseX, p.mouseY, 20); }; } // Initialize the sketch. new p5(sketch); ` ` // Declare the function containing the sketch. function sketch(p) { // Declare the setup() method. p.setup = function () { p.createCanvas(100, 100); p.describe( 'A white circle drawn on a gray background. The circle follows the mouse as the user moves. The circle becomes black when the user double-clicks.' ); }; // Declare the draw() method. p.draw = function () { p.background(200); // Draw the circle. p.circle(p.mouseX, p.mouseY, 20); }; // Declare the doubleClicked() method. p.doubleClicked = function () { // Change the fill color when the user double-clicks. p.fill(0); }; } // Initialize the sketch. new p5(sketch); ` p5 Structure Structure Applies a transformation matrix to the coordinate system. Transformations such as translate(), rotate(), and scale() use matrix-vector multiplication behind the scenes. A table of numbers, called a matrix, encodes each transformation. The values in the matrix then multiply each point on the canvas, which is represented by a vector. `applyMatrix()` allows for many transformations to be applied at once. See Wikipedia and MDN for more details about transformations. There are two ways to call `applyMatrix()` in two and three dimensions. In 2D mode, the parameters `a`, `b`, `c`, `d`, `e`, and `f`, correspond to elements in the following transformation matrix: > The numbers can be passed individually, as in `applyMatrix(2, 0, 0, 0, 2, 0)`. They can also be passed in an array, as in `applyMatrix([2, 0, 0, 0, 2, 0])`. In 3D mode, the parameters `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i`, `j`, `k`, `l`, `m`, `n`, `o`, and `p` correspond to elements in the following transformation matrix: The numbers can be passed individually, as in `applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)`. They can also be passed in an array, as in `applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])`. By default, transformations accumulate. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `applyMatrix()` inside the draw() function won't cause shapes to transform continuously. method applyMatrix ` function setup() { createCanvas(100, 100); describe('A white circle on a gray background.'); } function draw() { background(200); // Translate the origin to the center. applyMatrix(1, 0, 0, 1, 50, 50); // Draw the circle at coordinates (0, 0). circle(0, 0, 40); } ` ` function setup() { createCanvas(100, 100); describe('A white circle on a gray background.'); } function draw() { background(200); // Translate the origin to the center. let m = [1, 0, 0, 1, 50, 50]; applyMatrix(m); // Draw the circle at coordinates (0, 0). circle(0, 0, 40); } ` ` function setup() { createCanvas(100, 100); describe("A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."); } function draw() { background(200); // Rotate the coordinate system 1/8 turn. let angle = QUARTER_PI; let ca = cos(angle); let sa = sin(angle); applyMatrix(ca, sa, -sa, ca, 0, 0); // Draw a rectangle at coordinates (50, 0). rect(50, 0, 40, 20); } ` ` function setup() { createCanvas(100, 100); describe( 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.' ); } function draw() { background(200); // Draw a square at (30, 20). square(30, 20, 40); // Scale the coordinate system by a factor of 0.5. applyMatrix(0.5, 0, 0, 0.5, 0, 0); // Draw a square at (30, 20). // It appears at (15, 10) after scaling. square(30, 20, 40); } ` ` function setup() { createCanvas(100, 100); describe('A white quadrilateral on a gray background.'); } function draw() { background(200); // Calculate the shear factor. let angle = QUARTER_PI; let shearFactor = 1 / tan(HALF_PI - angle); // Shear the coordinate system along the x-axis. applyMatrix(1, 0, shearFactor, 1, 0, 0); // Draw the square. square(0, 0, 50); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube rotates slowly against a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system a little more each frame. let angle = frameCount * 0.01; let ca = cos(angle); let sa = sin(angle); applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1); // Draw a box. box(); } ` p5 Transform Transform arr an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D). Array a an element of the transformation matrix. Number b an element of the transformation matrix. Number c an element of the transformation matrix. Number d an element of the transformation matrix. Number e an element of the transformation matrix. Number f an element of the transformation matrix. Number a Number b Number c Number d Number e Number f Number g an element of the transformation matrix. Number h an element of the transformation matrix. Number i an element of the transformation matrix. Number j an element of the transformation matrix. Number k an element of the transformation matrix. Number l an element of the transformation matrix. Number m an element of the transformation matrix. Number n an element of the transformation matrix. Number o an element of the transformation matrix. Number p an element of the transformation matrix. Number Clears all transformations applied to the coordinate system. method resetMatrix ` function setup() { createCanvas(100, 100); describe( 'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.' ); } function draw() { background(200); // Translate the origin to the center. translate(50, 50); // Draw a blue circle at the coordinates (25, 25). fill('blue'); circle(25, 25, 20); // Clear all transformations. // The origin is now at the top-left corner. resetMatrix(); // Draw a red circle at the coordinates (25, 25). fill('red'); circle(25, 25, 20); } ` p5 Transform Transform Rotates the coordinate system. By default, the positive x-axis points to the right and the positive y-axis points downward. The `rotate()` function changes this orientation by rotating the coordinate system about the origin. Everything drawn after `rotate()` is called will appear to be rotated. The first parameter, `angle`, is the amount to rotate. For example, calling `rotate(1)` rotates the coordinate system clockwise 1 radian which is nearly 57˚. `rotate()` interprets angle values using the current angleMode(). The second parameter, `axis`, is optional. It's used to orient 3D rotations in WebGL mode. If a p5.Vector is passed, as in `rotate(QUARTER_PI, myVector)`, then the coordinate system will rotate `QUARTER_PI` radians about `myVector`. If an array of vector components is passed, as in `rotate(QUARTER_PI, [1, 0, 0])`, then the coordinate system will rotate `QUARTER_PI` radians about a vector with the components `[1, 0, 0]`. By default, transformations accumulate. For example, calling `rotate(1)` twice has the same effect as calling `rotate(2)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `rotate(1)` inside the draw() function won't cause shapes to spin. method rotate angle angle of rotation in the current angleMode(). Number axis axis to rotate about in 3D. p5.Vector|Number[] ` function setup() { createCanvas(100, 100); describe( "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right." ); } function draw() { background(200); // Rotate the coordinate system 1/8 turn. rotate(QUARTER_PI); // Draw a rectangle at coordinates (50, 0). rect(50, 0, 40, 20); } ` ` function setup() { createCanvas(100, 100); describe( "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right." ); } function draw() { background(200); // Rotate the coordinate system 1/16 turn. rotate(QUARTER_PI / 2); // Rotate the coordinate system another 1/16 turn. rotate(QUARTER_PI / 2); // Draw a rectangle at coordinates (50, 0). rect(50, 0, 40, 20); } ` ` function setup() { createCanvas(100, 100); // Use degrees. angleMode(DEGREES); describe( "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right." ); } function draw() { background(200); // Rotate the coordinate system 1/8 turn. rotate(45); // Draw a rectangle at coordinates (50, 0). rect(50, 0, 40, 20); } ` ` function setup() { createCanvas(100, 100); describe( 'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.' ); } function draw() { background(200); // Rotate the coordinate system a little more each frame. let angle = frameCount * 0.01; rotate(angle); // Draw a rectangle at coordinates (50, 0). rect(50, 0, 40, 20); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe("A cube on a gray background. The cube's front face points to the top-right."); } function draw() { background(200); // Rotate the coordinate system 1/8 turn about // the axis [1, 1, 0]. let axis = createVector(1, 1, 0); rotate(QUARTER_PI, axis); // Draw a box. box(); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe("A cube on a gray background. The cube's front face points to the top-right."); } function draw() { background(200); // Rotate the coordinate system 1/8 turn about // the axis [1, 1, 0]. let axis = [1, 1, 0]; rotate(QUARTER_PI, axis); // Draw a box. box(); } ` p5 Transform Transform Rotates the coordinate system about the x-axis in WebGL mode. The parameter, `angle`, is the amount to rotate. For example, calling `rotateX(1)` rotates the coordinate system about the x-axis by 1 radian. `rotateX()` interprets angle values using the current angleMode(). By default, transformations accumulate. For example, calling `rotateX(1)` twice has the same effect as calling `rotateX(2)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `rotateX(1)` inside the draw() function won't cause shapes to spin. method rotateX angle angle of rotation in the current angleMode(). Number ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/8 turn. rotateX(QUARTER_PI); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/16 turn. rotateX(QUARTER_PI / 2); // Rotate the coordinate system 1/16 turn. rotateX(QUARTER_PI / 2); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); // Use degrees. angleMode(DEGREES); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/8 turn. rotateX(45); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube rotates slowly against a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system a little more each frame. let angle = frameCount * 0.01; rotateX(angle); // Draw a box. box(); } ` p5 Transform Transform Rotates the coordinate system about the y-axis in WebGL mode. The parameter, `angle`, is the amount to rotate. For example, calling `rotateY(1)` rotates the coordinate system about the y-axis by 1 radian. `rotateY()` interprets angle values using the current angleMode(). By default, transformations accumulate. For example, calling `rotateY(1)` twice has the same effect as calling `rotateY(2)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `rotateY(1)` inside the draw() function won't cause shapes to spin. method rotateY angle angle of rotation in the current angleMode(). Number ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/8 turn. rotateY(QUARTER_PI); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/16 turn. rotateY(QUARTER_PI / 2); // Rotate the coordinate system 1/16 turn. rotateY(QUARTER_PI / 2); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); // Use degrees. angleMode(DEGREES); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/8 turn. rotateY(45); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube rotates slowly against a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system a little more each frame. let angle = frameCount * 0.01; rotateY(angle); // Draw a box. box(); } ` p5 Transform Transform Rotates the coordinate system about the z-axis in WebGL mode. The parameter, `angle`, is the amount to rotate. For example, calling `rotateZ(1)` rotates the coordinate system about the z-axis by 1 radian. `rotateZ()` interprets angle values using the current angleMode(). By default, transformations accumulate. For example, calling `rotateZ(1)` twice has the same effect as calling `rotateZ(2)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `rotateZ(1)` inside the draw() function won't cause shapes to spin. method rotateZ angle angle of rotation in the current angleMode(). Number ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/8 turn. rotateZ(QUARTER_PI); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/16 turn. rotateZ(QUARTER_PI / 2); // Rotate the coordinate system 1/16 turn. rotateZ(QUARTER_PI / 2); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); // Use degrees. angleMode(DEGREES); describe('A white cube on a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system 1/8 turn. rotateZ(45); // Draw a box. box(); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe('A white cube rotates slowly against a gray background.'); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Rotate the coordinate system a little more each frame. let angle = frameCount * 0.01; rotateZ(angle); // Draw a box. box(); } ` p5 Transform Transform Scales the coordinate system. By default, shapes are drawn at their original scale. A rectangle that's 50 pixels wide appears to take up half the width of a 100 pixel-wide canvas. The `scale()` function can shrink or stretch the coordinate system so that shapes appear at different sizes. There are two ways to call `scale()` with parameters that set the scale factor(s). The first way to call `scale()` uses numbers to set the amount of scaling. The first parameter, `s`, sets the amount to scale each axis. For example, calling `scale(2)` stretches the x-, y-, and z-axes by a factor of 2. The next two parameters, `y` and `z`, are optional. They set the amount to scale the y- and z-axes. For example, calling `scale(2, 0.5, 1)` stretches the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and leaves the z-axis unchanged. The second way to call `scale()` uses a p5.Vector object to set the scale factors. For example, calling `scale(myVector)` uses the x-, y-, and z-components of `myVector` to set the amount of scaling along the x-, y-, and z-axes. Doing so is the same as calling `scale(myVector.x, myVector.y, myVector.z)`. By default, transformations accumulate. For example, calling `scale(1)` twice has the same effect as calling `scale(2)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `scale(2)` inside the draw() function won't cause shapes to grow continuously. method scale ` function setup() { createCanvas(100, 100); describe( 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.' ); } function draw() { background(200); // Draw a square at (30, 20). square(30, 20, 40); // Scale the coordinate system by a factor of 0.5. scale(0.5); // Draw a square at (30, 20). // It appears at (15, 10) after scaling. square(30, 20, 40); } ` ` function setup() { createCanvas(100, 100); describe('A rectangle and a square drawn in white on a gray background.'); } function draw() { background(200); // Draw a square at (30, 20). square(30, 20, 40); // Scale the coordinate system by factors of // 0.5 along the x-axis and // 1.3 along the y-axis. scale(0.5, 1.3); // Draw a square at (30, 20). // It appears as a rectangle at (15, 26) after scaling. square(30, 20, 40); } ` ` function setup() { createCanvas(100, 100); describe('A rectangle and a square drawn in white on a gray background.'); } function draw() { background(200); // Draw a square at (30, 20). square(30, 20, 40); // Create a p5.Vector object. let v = createVector(0.5, 1.3); // Scale the coordinate system by factors of // 0.5 along the x-axis and // 1.3 along the y-axis. scale(v); // Draw a square at (30, 20). // It appears as a rectangle at (15, 26) after scaling. square(30, 20, 40); } ` ` // Click and drag the mouse to view the scene from different angles. function setup() { createCanvas(100, 100, WEBGL); describe( 'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.' ); } function draw() { background(200); // Enable orbiting with the mouse. orbitControl(); // Turn on the lights. lights(); // Style the spheres. noStroke(); // Draw the red sphere. fill('red'); box(); // Scale the coordinate system by factors of // 0.5 along the x-axis and // 1.3 along the y-axis and // 2 along the z-axis. scale(0.5, 1.3, 2); // Draw the blue sphere. fill('blue'); box(); } ` p5 Transform Transform s amount to scale along the positive x-axis. Number|p5.Vector|Number[] y amount to scale along the positive y-axis. Defaults to `s`. Number z amount to scale along the positive z-axis. Defaults to `y`. Number scales vector whose components should be used to scale. p5.Vector|Number[] Shears the x-axis so that shapes appear skewed. By default, the x- and y-axes are perpendicular. The `shearX()` function transforms the coordinate system so that x-coordinates are translated while y-coordinates are fixed. The first parameter, `angle`, is the amount to shear. For example, calling `shearX(1)` transforms all x-coordinates using the formula `x = x + y * tan(angle)`. `shearX()` interprets angle values using the current angleMode(). By default, transformations accumulate. For example, calling `shearX(1)` twice has the same effect as calling `shearX(2)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `shearX(1)` inside the draw() function won't cause shapes to shear continuously. method shearX angle angle to shear by in the current angleMode(). Number ` function setup() { createCanvas(100, 100); describe('A white quadrilateral on a gray background.'); } function draw() { background(200); // Shear the coordinate system along the x-axis. shearX(QUARTER_PI); // Draw the square. square(0, 0, 50); } ` ` function setup() { createCanvas(100, 100); // Use degrees. angleMode(DEGREES); describe('A white quadrilateral on a gray background.'); } function draw() { background(200); // Shear the coordinate system along the x-axis. shearX(45); // Draw the square. square(0, 0, 50); } ` p5 Transform Transform Shears the y-axis so that shapes appear skewed. By default, the x- and y-axes are perpendicular. The `shearY()` function transforms the coordinate system so that y-coordinates are translated while x-coordinates are fixed. The first parameter, `angle`, is the amount to shear. For example, calling `shearY(1)` transforms all y-coordinates using the formula `y = y + x * tan(angle)`. `shearY()` interprets angle values using the current angleMode(). By default, transformations accumulate. For example, calling `shearY(1)` twice has the same effect as calling `shearY(2)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `shearY(1)` inside the draw() function won't cause shapes to shear continuously. method shearY angle angle to shear by in the current angleMode(). Number ` function setup() { createCanvas(100, 100); describe('A white quadrilateral on a gray background.'); } function draw() { background(200); // Shear the coordinate system along the x-axis. shearY(QUARTER_PI); // Draw the square. square(0, 0, 50); } ` ` function setup() { createCanvas(100, 100); // Use degrees. angleMode(DEGREES); describe('A white quadrilateral on a gray background.'); } function draw() { background(200); // Shear the coordinate system along the x-axis. shearY(45); // Draw the square. square(0, 0, 50); } ` p5 Transform Transform Translates the coordinate system. By default, the origin `(0, 0)` is at the sketch's top-left corner in 2D mode and center in WebGL mode. The `translate()` function shifts the origin to a different position. Everything drawn after `translate()` is called will appear to be shifted. There are two ways to call `translate()` with parameters that set the origin's position. The first way to call `translate()` uses numbers to set the amount of translation. The first two parameters, `x` and `y`, set the amount to translate along the positive x- and y-axes. For example, calling `translate(20, 30)` translates the origin 20 pixels along the x-axis and 30 pixels along the y-axis. The third parameter, `z`, is optional. It sets the amount to translate along the positive z-axis. For example, calling `translate(20, 30, 40)` translates the origin 20 pixels along the x-axis, 30 pixels along the y-axis, and 40 pixels along the z-axis. The second way to call `translate()` uses a p5.Vector object to set the amount of translation. For example, calling `translate(myVector)` uses the x-, y-, and z-components of `myVector` to set the amount to translate along the x-, y-, and z-axes. Doing so is the same as calling `translate(myVector.x, myVector.y, myVector.z)`. By default, transformations accumulate. For example, calling `translate(10, 0)` twice has the same effect as calling `translate(20, 0)` once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups. Note: Transformations are reset at the beginning of the draw loop. Calling `translate(10, 0)` inside the draw() function won't cause shapes to move continuously. method translate ` function setup() { createCanvas(100, 100); describe('A white circle on a gray background.'); } function draw() { background(200); // Translate the origin to the center. translate(50, 50); // Draw a circle at coordinates (0, 0). circle(0, 0, 40); } ` ` function setup() { createCanvas(100, 100); describe( 'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.' ); } function draw() { background(200); // Translate the origin to the center. translate(50, 50); // Draw the red circle. fill('red'); circle(0, 0, 40); // Translate the origin to the right. translate(25, 0); // Draw the blue circle. fill('blue'); circle(0, 0, 40); } ` ` function setup() { createCanvas(100, 100); describe('A white circle moves slowly from left to right on a gray background.'); } function draw() { background(200); // Calculate the x-coordinate. let x = frameCount * 0.2; // Translate the origin. translate(x, 50); // Draw a circle at coordinates (0, 0). circle(0, 0, 40); } ` ` function setup() { createCanvas(100, 100); describe('A white circle on a gray background.'); } function draw() { background(200); // Create a p5.Vector object. let v = createVector(50, 50); // Translate the origin by the vector. translate(v); // Draw a circle at coordinates (0, 0). circle(0, 0, 40); } ` ` function setup() { createCanvas(100, 100, WEBGL); describe( 'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.' ); } function draw() { background(200); // Turn on the lights. lights(); // Style the spheres. noStroke(); // Draw the red sphere. fill('red'); sphere(10); // Translate the origin to the right. translate(30, 0, 0); // Draw the blue sphere. fill('blue'); sphere(10); } ` p5 Transform Transform x amount to translate along the positive x-axis. Number y amount to translate along the positive y-axis. Number z amount to translate along the positive z-axis. Number vector vector by which to translate. p5.Vector Stores a value in the web browser's local storage. Web browsers can save small amounts of data using the built-in localStorage object. Data stored in `localStorage` can be retrieved at any point, even after refreshing a page or restarting the browser. Data are stored as key-value pairs. `storeItem()` makes it easy to store values in `localStorage` and getItem() makes it easy to retrieve them. The first parameter, `key`, is the name of the value to be stored as a string. The second parameter, `value`, is the value to be stored. Values can have any type. Note: Sensitive data such as passwords or personal information shouldn't be stored in `localStorage`. method storeItem key name of the value. String value value to be stored. String|Number|Boolean|Object|Array ` function setup() { createCanvas(100, 100); // Store the player's name. storeItem('name', 'Feist'); // Store the player's score. storeItem('score', 1234); describe('The text "Feist: 1234" written in black on a gray background.'); } function draw() { background(200); // Style the text. textAlign(CENTER, CENTER); textSize(14); // Retrieve the name. let name = getItem('name'); // Retrieve the score. let score = getItem('score'); // Display the score. text(`${name}: ${score}`, 50, 50); } ` ` function setup() { createCanvas(100, 100); // Create an object. let p = { x: 50, y: 50 }; // Store the object. storeItem('position', p); describe('A white circle on a gray background.'); } function draw() { background(200); // Retrieve the object. let p = getItem('position'); // Draw the circle. circle(p.x, p.y, 30); } ` function setup() { createCanvas(100, 100); // Create a p5.Color object. let c = color('deeppink'); // Store the object. storeItem('color', c); describe('A pink circle on a gray background.'); } function draw() { background(200); // Retrieve the object. let c = getItem('color'); // Style the circle. fill(c); // Draw the circle. circle(50, 50, 30); } ` p5 Data LocalStorage Returns a value in the web browser's local storage. Web browsers can save small amounts of data using the built-in localStorage object. Data stored in `localStorage` can be retrieved at any point, even after refreshing a page or restarting the browser. Data are stored as key-value pairs. storeItem() makes it easy to store values in `localStorage` and `getItem()` makes it easy to retrieve them. The first parameter, `key`, is the name of the value to be stored as a string. The second parameter, `value`, is the value to be retrieved a string. For example, calling `getItem('size')` retrieves the value with the key `size`. Note: Sensitive data such as passwords or personal information shouldn't be stored in `localStorage`. method getItem key name of the value. String ### return stored item. String|Number|Boolean|Object|Array ` function setup() { createCanvas(100, 100); // Store the player's name. storeItem('name', 'Feist'); // Store the player's score. storeItem('score', 1234); describe('The text "Feist: 1234" written in black on a gray background.'); } function draw() { background(200); // Style the text. textAlign(CENTER, CENTER); textSize(14); // Retrieve the name. let name = getItem('name'); // Retrieve the score. let score = getItem('score'); // Display the score. text(`${name}: ${score}`, 50, 50); } ` ` function setup() { createCanvas(100, 100); // Create an object. let p = { x: 50, y: 50 }; // Store the object. storeItem('position', p); describe('A white circle on a gray background.'); } function draw() { background(200); // Retrieve the object. let p = getItem('position'); // Draw the circle. circle(p.x, p.y, 30); } ` ` function setup() { createCanvas(100, 100); // Create a p5.Color object. let c = color('deeppink'); // Store the object. storeItem('color', c); describe('A pink circle on a gray background.'); } function draw() { background(200); // Retrieve the object. let c = getItem('color'); // Style the circle. fill(c); // Draw the circle. circle(50, 50, 30); } ` p5 Data LocalStorage Removes all items in the web browser's local storage. Web browsers can save small amounts of data using the built-in localStorage object. Data stored in `localStorage` can be retrieved at any point, even after refreshing a page or restarting the browser. Data are stored as key-value pairs. Calling `clearStorage()` removes all data from `localStorage`. Note: Sensitive data such as passwords or personal information shouldn't be stored in `localStorage`. method clearStorage ` // Double-click to clear localStorage. function setup() { createCanvas(100, 100); // Store the player's name. storeItem('name', 'Feist'); // Store the player's score. storeItem('score', 1234); describe( 'The text "Feist: 1234" written in black on a gray background. The text "null: null" appears when the user double-clicks.' ); } function draw() { background(200); // Style the text. textAlign(CENTER, CENTER); textSize(14); // Retrieve the name. let name = getItem('name'); // Retrieve the score. let score = getItem('score'); // Display the score. text(`${name}: ${score}`, 50, 50); } // Clear localStorage when the user double-clicks. function doubleClicked() { clearStorage(); } ` p5 Data LocalStorage Removes an item from the web browser's local storage. Web browsers can save small amounts of data using the built-in localStorage object. Data stored in `localStorage` can be retrieved at any point, even after refreshing a page or restarting the browser. Data are stored as key-value pairs. storeItem() makes it easy to store values in `localStorage` and `removeItem()` makes it easy to delete them. The parameter, `key`, is the name of the value to remove as a string. For example, calling `removeItem('size')` removes the item with the key `size`. Note: Sensitive data such as passwords or personal information shouldn't be stored in `localStorage`. method removeItem key name of the value to remove. String ` // Double-click to remove an item from localStorage. function setup() { createCanvas(100, 100); // Store the player's name. storeItem('name', 'Feist'); // Store the player's score. storeItem('score', 1234); describe( 'The text "Feist: 1234" written in black on a gray background. The text "Feist: null" appears when the user double-clicks.' ); } function draw() { background(200); // Style the text. textAlign(CENTER, CENTER); textSize(14); // Retrieve the name. let name = getItem('name'); // Retrieve the score. let score = getItem('score'); // Display the score. text(`${name}: ${score}`, 50, 50); } // Remove the word from localStorage when the user double-clicks. function doubleClicked() { removeItem('score'); } ` p5 Data LocalStorage Creates a new instance of p5.StringDict using the key-value pair or the object you provide. method createStringDict ### return p5.StringDict ` function setup() { let myDictionary = createStringDict('p5', 'js'); print(myDictionary.hasKey('p5')); // logs true to console let anotherDictionary = createStringDict({ happy: 'coding' }); print(anotherDictionary.hasKey('happy')); // logs true to console } ` p5 Data Dictionary key String value String ##### return p5.StringDict object object Object ##### return p5.StringDict Creates a new instance of p5.NumberDict using the key-value pair or object you provide. method createNumberDict ### return p5.NumberDict ` function setup() { let myDictionary = createNumberDict(100, 42); print(myDictionary.hasKey(100)); // logs true to console let anotherDictionary = createNumberDict({ 200: 84 }); print(anotherDictionary.hasKey(200)); // logs true to console } ` p5 Data Dictionary key Number value Number ##### return p5.NumberDict object object Object ##### return p5.NumberDict Returns the number of key-value pairs currently stored in the Dictionary. method size ### return the number of key-value pairs in the Dictionary Integer ` function setup() { let myDictionary = createNumberDict(1, 10); myDictionary.create(2, 20); myDictionary.create(3, 30); print(myDictionary.size()); // logs 3 to the console } ` p5.TypedDict Data Dictionary Returns true if the given key exists in the Dictionary, otherwise returns false. method hasKey key that you want to look up Number|String ### return whether that key exists in Dictionary Boolean ` function setup() { let myDictionary = createStringDict('p5', 'js'); print(myDictionary.hasKey('p5')); // logs true to console } ` p5.TypedDict Data Dictionary Returns the value stored at the given key. method get the key you want to access Number|String ### return the value stored at that key Number|String ` function setup() { let myDictionary = createStringDict('p5', 'js'); let myValue = myDictionary.get('p5'); print(myValue === 'js'); // logs true to console } ` p5.TypedDict Data Dictionary Updates the value associated with the given key in case it already exists in the Dictionary. Otherwise a new key-value pair is added. method set key Number|String value Number|String ` function setup() { let myDictionary = createStringDict('p5', 'js'); myDictionary.set('p5', 'JS'); myDictionary.print(); // logs "key: p5 - value: JS" to console } ` p5.TypedDict Data Dictionary private helper function to handle the user passing in objects during construction or calls to create() p5.TypedDict Data Dictionary Creates a new key-value pair in the Dictionary. method create ` function setup() { let myDictionary = createStringDict('p5', 'js'); myDictionary.create('happy', 'coding'); myDictionary.print(); // above logs "key: p5 - value: js, key: happy - value: coding" to console } ` p5.TypedDict Data Dictionary key Number|String value Number|String obj key/value pair Object Removes all previously stored key-value pairs from the Dictionary. method clear ` function setup() { let myDictionary = createStringDict('p5', 'js'); print(myDictionary.hasKey('p5')); // prints 'true' myDictionary.clear(); print(myDictionary.hasKey('p5')); // prints 'false' } ` p5.TypedDict Data Dictionary Removes the key-value pair stored at the given key from the Dictionary. method remove key for the pair to remove Number|String ` function setup() { let myDictionary = createStringDict('p5', 'js'); myDictionary.create('happy', 'coding'); myDictionary.print(); // above logs "key: p5 - value: js, key: happy - value: coding" to console myDictionary.remove('p5'); myDictionary.print(); // above logs "key: happy value: coding" to console } ` p5.TypedDict Data Dictionary Logs the set of items currently stored in the Dictionary to the console. method print ` function setup() { let myDictionary = createStringDict('p5', 'js'); myDictionary.create('happy', 'coding'); myDictionary.print(); // above logs "key: p5 - value: js, key: happy - value: coding" to console } ` p5.TypedDict Data Dictionary Converts the Dictionary into a CSV file for local download. method saveTable ` function setup() { createCanvas(100, 100); background(200); text('click here to save', 10, 10, 70, 80); } function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { createStringDict({ john: 1940, paul: 1942, george: 1943, ringo: 1940 }).saveTable('beatles'); } } ` p5.TypedDict Data Dictionary Converts the Dictionary into a JSON file for local download. method saveJSON ` function setup() { createCanvas(100, 100); background(200); text('click here to save', 10, 10, 70, 80); } function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { createStringDict({ john: 1940, paul: 1942, george: 1943, ringo: 1940 }).saveJSON('beatles'); } } ` p5.TypedDict Data Dictionary private helper function to ensure that the user passed in valid values for the Dictionary type p5.TypedDict Data Dictionary private helper function to ensure that the user passed in valid values for the Dictionary type p5.NumberDict Data Dictionary Add the given number to the value currently stored at the given key. The sum then replaces the value previously stored in the Dictionary. method add Key for the value you wish to add to Number Number to add to the value Number ` function setup() { let myDictionary = createNumberDict(2, 5); myDictionary.add(2, 2); print(myDictionary.get(2)); // logs 7 to console. } ` p5.NumberDict Data Dictionary Subtract the given number from the value currently stored at the given key. The difference then replaces the value previously stored in the Dictionary. method sub Key for the value you wish to subtract from Number Number to subtract from the value Number ` function setup() { let myDictionary = createNumberDict(2, 5); myDictionary.sub(2, 2); print(myDictionary.get(2)); // logs 3 to console. } ` p5.NumberDict Data Dictionary Multiply the given number with the value currently stored at the given key. The product then replaces the value previously stored in the Dictionary. method mult Key for value you wish to multiply Number Amount to multiply the value by Number ` function setup() { let myDictionary = createNumberDict(2, 4); myDictionary.mult(2, 2); print(myDictionary.get(2)); // logs 8 to console. } ` p5.NumberDict Data Dictionary Divide the given number with the value currently stored at the given key. The quotient then replaces the value previously stored in the Dictionary. method div Key for value you wish to divide Number Amount to divide the value by Number ` function setup() { let myDictionary = createNumberDict(2, 8); myDictionary.div(2, 2); print(myDictionary.get(2)); // logs 4 to console. } ` p5.NumberDict Data Dictionary private helper function for finding lowest or highest value the argument 'flip' is used to flip the comparison arrow from 'less than' to 'greater than' p5.NumberDict Data Dictionary Return the lowest number currently stored in the Dictionary. method minValue ### return Number ` function setup() { let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 }); let lowestValue = myDictionary.minValue(); // value is -10 print(lowestValue); } ` p5.NumberDict Data Dictionary Return the highest number currently stored in the Dictionary. method maxValue ### return Number ` function setup() { let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 }); let highestValue = myDictionary.maxValue(); // value is 3 print(highestValue); } ` p5.NumberDict Data Dictionary private helper function for finding lowest or highest key the argument 'flip' is used to flip the comparison arrow from 'less than' to 'greater than' p5.NumberDict Data Dictionary Return the lowest key currently used in the Dictionary. method minKey ### return Number ` function setup() { let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 }); let lowestKey = myDictionary.minKey(); // value is 1.2 print(lowestKey); } ` p5.NumberDict Data Dictionary Return the highest key currently used in the Dictionary. method maxKey ### return Number ` function setup() { let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 }); let highestKey = myDictionary.maxKey(); // value is 4 print(highestKey); } ` p5.NumberDict Data Dictionary Searches the page for the first element that matches the given CSS selector string. The selector string can be an ID, class, tag name, or a combination. `select()` returns a p5.Element object if it finds a match and `null` if not. The second parameter, `container`, is optional. It specifies a container to search within. `container` can be CSS selector string, a p5.Element object, or an HTMLElement object. method select selectors CSS selector string of element to search for. String container CSS selector string, p5.Element, or HTMLElement to search within. String|p5.Element|HTMLElement ### return p5.Element containing the element. p5.Element|null ` function setup() { createCanvas(100, 100); background(200); // Select the canvas by its tag. let cnv = select('canvas'); cnv.style('border', '5px deeppink dashed'); describe('A gray square with a dashed pink border.'); } ` ` function setup() { let cnv = createCanvas(100, 100); // Add a class attribute to the canvas. cnv.class('pinkborder'); background(200); // Select the canvas by its class. cnv = select('.pinkborder'); // Style its border. cnv.style('border', '5px deeppink dashed'); describe('A gray square with a dashed pink border.'); } ` ` function setup() { let cnv = createCanvas(100, 100); // Set the canvas' ID. cnv.id('mycanvas'); background(200); // Select the canvas by its ID. cnv = select('#mycanvas'); // Style its border. cnv.style('border', '5px deeppink dashed'); describe('A gray square with a dashed pink border.'); } ` p5 DOM DOM Searches the page for all elements that matches the given CSS selector string. The selector string can be an ID, class, tag name, or a combination. `selectAll()` returns an array of p5.Element objects if it finds any matches and an empty array if none are found. The second parameter, `container`, is optional. It specifies a container to search within. `container` can be CSS selector string, a p5.Element object, or an HTMLElement object. method selectAll selectors CSS selector string of element to search for. String container CSS selector string, p5.Element, or HTMLElement to search within. String|p5.Element|HTMLElement ### return array of p5.Elements containing any elements found. p5.Element[] ` function setup() { createCanvas(100, 100); // Create three buttons. createButton('1'); createButton('2'); createButton('3'); // Select the buttons by their tag. let buttons = selectAll('button'); // Position the buttons. for (let i = 0; i < 3; i += 1) { buttons[i].position(0, i * 30); } describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".'); } ` ` function setup() { // Create three buttons and position them. let b1 = createButton('1'); b1.position(0, 0); let b2 = createButton('2'); b2.position(0, 30); let b3 = createButton('3'); b3.position(0, 60); // Add a class attribute to each button. b1.class('btn'); b2.class('btn btn-pink'); b3.class('btn'); // Select the buttons by their class. let buttons = selectAll('.btn'); let pinkButtons = selectAll('.btn-pink'); // Style the selected buttons. buttons.forEach(setFont); pinkButtons.forEach(setColor); describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.'); } // Set a button's font to Comic Sans MS. function setFont(btn) { btn.style('font-family', 'Comic Sans MS'); } // Set a button's background and font color. function setColor(btn) { btn.style('background', 'deeppink'); btn.style('color', 'white'); } ` p5 DOM DOM Helper function for select and selectAll p5 DOM DOM Helper function for getElement and getElements. p5 DOM DOM Removes all elements created by p5.js, including any event handlers. There are two exceptions: canvas elements created by createCanvas() and p5.Render objects created by createGraphics(). method removeElements ` function setup() { createCanvas(100, 100); background(200); // Create a paragraph element and place // it in the middle of the canvas. let p = createP('p5*js'); p.position(25, 25); describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.'); } // Remove all elements when the mouse is pressed. function mousePressed() { removeElements(); } ` ` let slider; function setup() { createCanvas(100, 100); // Create a paragraph element and place // it at the top of the canvas. let p = createP('p5*js'); p.position(25, 25); // Create a slider element and place it // beneath the canvas. slider = createSlider(0, 255, 200); slider.position(0, 100); describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.'); } function draw() { // Use the slider value to change the background color. let g = slider.value(); background(g); } // Remove all elements when the mouse is double-clicked. function doubleClicked() { removeElements(); } ` p5 DOM DOM Calls a function when the element changes. Calling `myElement.changed(false)` disables the function. method changed fxn function to call when the element changes. `false` disables the function. Function|Boolean ` let dropdown; function setup() { createCanvas(100, 100); background(200); // Create a dropdown menu and add a few color options. dropdown = createSelect(); dropdown.position(0, 0); dropdown.option('red'); dropdown.option('green'); dropdown.option('blue'); // Call paintBackground() when the color option changes. dropdown.changed(paintBackground); describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.'); } // Paint the background with the selected color. function paintBackground() { let c = dropdown.value(); background(c); } ` ` let checkbox; function setup() { createCanvas(100, 100); background(200); // Create a checkbox and place it beneath the canvas. checkbox = createCheckbox(' circle'); checkbox.position(0, 100); // Call repaint() when the checkbox changes. checkbox.changed(repaint); describe('A gray square with a checkbox underneath it that says "circle". A white circle appears when the box is checked and disappears otherwise.'); } // Paint the background gray and determine whether to draw a circle. function repaint() { background(200); if (checkbox.checked() === true) { circle(50, 50, 30); } } ` p5 DOM DOM Calls a function when the element receives input. `myElement.input()` is often used to with text inputs and sliders. Calling `myElement.input(false)` disables the function. method input fxn function to call when input is detected within the element. `false` disables the function. Function|Boolean ` let slider; function setup() { createCanvas(100, 100); background(200); // Create a slider and place it beneath the canvas. slider = createSlider(0, 255, 200); slider.position(0, 100); // Call repaint() when the slider changes. slider.input(repaint); describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.'); } // Paint the background using slider's value. function repaint() { let g = slider.value(); background(g); } ` ` let input; function setup() { createCanvas(100, 100); background(200); // Create an input and place it beneath the canvas. input = createInput(''); input.position(0, 100); // Call repaint() when input is detected. input.input(repaint); describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.'); } // Paint the background gray and display the input's value. function repaint() { background(200); let msg = input.value(); text(msg, 5, 50); } ` p5 DOM DOM Helpers for create methods. p5 DOM DOM Creates a `
` element. `
` elements are commonly used as containers for other elements. The parameter `html` is optional. It accepts a string that sets the inner HTML of the new `
`. method createDiv html inner HTML for the new `
` element. String ### return new p5.Element object. p5.Element ` function setup() { createCanvas(100, 100); background(200); // Create a div element and set its position. let div = createDiv('p5*js'); div.position(25, 35); describe('A gray square with the text "p5*js" written in its center.'); } ` ` function setup() { createCanvas(100, 100); background(200); // Create an h3 element within the div. let div = createDiv(' ### p5*js '); div.position(20, 5); describe('A gray square with the text "p5*js" written in its center.'); } ` p5 DOM DOM Creates a paragraph element. `

` elements are commonly used for paragraph-length text. The parameter `html` is optional. It accepts a string that sets the inner HTML of the new `

`. method createP html inner HTML for the new `

` element. String ### return new p5.Element object. p5.Element ` function setup() { createCanvas(100, 100); background(200); // Create a paragraph element and set its position. let p = createP('Tell me a story.'); p.position(5, 0); describe('A gray square displaying the text "Tell me a story." written in black.'); } ` p5 DOM DOM Creates a `` element. `` elements are commonly used as containers for inline elements. For example, a `` can hold part of a sentence that's a different style. The parameter `html` is optional. It accepts a string that sets the inner HTML of the new ``. method createSpan html inner HTML for the new `` element. String ### return new p5.Element object. p5.Element ` function setup() { createCanvas(100, 100); background(200); // Create a span element and set its position. let span = createSpan('p5*js'); span.position(25, 35); describe('A gray square with the text "p5*js" written in its center.'); } ` ` function setup() { background(200); // Create a div element as a container. let div = createDiv(); // Place the div at the center. div.position(25, 35); // Create a span element. let s1 = createSpan('p5'); // Create a second span element. let s2 = createSpan('*'); // Set the second span's font color. s2.style('color', 'deeppink'); // Create a third span element. let s3 = createSpan('js'); // Add all the spans to the container div. s1.parent(div); s2.parent(div); s3.parent(div); describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.'); } ` p5 DOM DOM Creates an `` element that can appear outside of the canvas. The first parameter, `src`, is a string with the path to the image file. `src` should be a relative path, as in `'assets/image.png'`, or a URL, as in `'https://example.com/image.png'`. The second parameter, `alt`, is a string with the alternate text for the image. An empty string `''` can be used for images that aren't displayed. The third parameter, `crossOrigin`, is optional. It's a string that sets the crossOrigin property of the image. Use `'anonymous'` or `'use-credentials'` to fetch the image with cross-origin access. The fourth parameter, `callback`, is also optional. It sets a function to call after the image loads. The new image is passed to the callback function as a p5.Element object. method createImg ### return new p5.Element object. p5.Element ` function setup() { createCanvas(100, 100); background(200); let img = createImg( 'https://p5js.org/assets/img/asterisk-01.png', 'The p5.js magenta asterisk.' ); img.position(0, -10); describe('A gray square with a magenta asterisk in its center.'); } ` p5 DOM DOM src relative path or URL for the image. String alt alternate text for the image. String ##### return new p5.Element object. p5.Element src String alt String crossOrigin crossOrigin property to use when fetching the image. String successCallback function to call once the image loads. The new image will be passed to the function as a p5.Element object. Function ##### return new p5.Element object. p5.Element Creates an `` element that links to another web page. The first parmeter, `href`, is a string that sets the URL of the linked page. The second parameter, `html`, is a string that sets the inner HTML of the link. It's common to use text, images, or buttons as links. The third parameter, `target`, is optional. It's a string that tells the web browser where to open the link. By default, links open in the current browser tab. Passing `'_blank'` will cause the link to open in a new browser tab. MDN describes a few other options. method createA href URL of linked page. String html inner HTML of link element to display. String target target where the new link should open, either `'_blank'`, `'_self'`, `'_parent'`, or `'_top'`. String ### return new p5.Element object. p5.Element ` function setup() { createCanvas(100, 100); background(200); // Create an anchor element that links to p5js.org. let a = createA('https://p5js.org/', 'p5*js'); a.position(25, 35); describe('The text "p5*js" written at the center of a gray square.'); } ` ` function setup() { background(200); // Create an anchor tag that links to p5js.org. // Open the link in a new tab. let a = createA('https://p5js.org/', 'p5*js', '_blank'); a.position(25, 35); describe('The text "p5*js" written at the center of a gray square.'); } ` p5 DOM DOM p5 DOM DOM Creates a slider `` element. Range sliders are useful for quickly selecting numbers from a given range. The first two parameters, `min` and `max`, are numbers that set the slider's minimum and maximum. The third parameter, `value`, is optional. It's a number that sets the slider's default value. The fourth parameter, `step`, is also optional. It's a number that sets the spacing between each value in the slider's range. Setting `step` to 0 allows the slider to move smoothly from `min` to `max`. method createSlider min minimum value of the slider. Number max maximum value of the slider. Number value default value of the slider. Number step size for each step in the slider's range. Number ### return new p5.Element object. p5.Element ` let slider; function setup() { createCanvas(100, 100); // Create a slider and place it at the top of the canvas. slider = createSlider(0, 255); slider.position(10, 10); slider.size(80); describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.'); } function draw() { // Use the slider as a grayscale value. let g = slider.value(); background(g); } ` ` let slider; function setup() { createCanvas(100, 100); // Create a slider and place it at the top of the canvas. // Set its default value to 0. slider = createSlider(0, 255, 0); slider.position(10, 10); slider.size(80); describe('A black square with a range slider at the top. The square changes color when the slider is moved.'); } function draw() { // Use the slider as a grayscale value. let g = slider.value(); background(g); } ` ` let slider; function setup() { createCanvas(100, 100); // Create a slider and place it at the top of the canvas. // Set its default value to 0. // Set its step size to 50. slider = createSlider(0, 255, 0, 50); slider.position(10, 10); slider.size(80); describe('A black square with a range slider at the top. The square changes color when the slider is moved.'); } function draw() { // Use the slider as a grayscale value. let g = slider.value(); background(g); } ` ` let slider; function setup() { createCanvas(100, 100); // Create a slider and place it at the top of the canvas. // Set its default value to 0. // Set its step size to 0 so that it moves smoothly. slider = createSlider(0, 255, 0, 0); slider.position(10, 10); slider.size(80); describe('A black square with a range slider at the top. The square changes color when the slider is moved.'); } function draw() { // Use the slider as a grayscale value. let g = slider.value(); background(g); } ` p5 DOM DOM Creates a `` element. The first parameter, `label`, is a string that sets the label displayed on the button. The second parameter, `value`, is optional. It's a string that sets the button's value. See MDN for more details. method createButton label label displayed on the button. String value value of the button. String ### return new p5.Element object. p5.Element ` function setup() { createCanvas(100, 100); background(200); // Create a button and place it beneath the canvas. let button = createButton('click me'); button.position(0, 100); // Call repaint() when the button is pressed. button.mousePressed(repaint); describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.'); } // Change the background color. function repaint() { let g = random(255); background(g); } ` ` let button; function setup() { createCanvas(100, 100); background(200); // Create a button and set its value to 0. // Place the button beneath the canvas. button = createButton('click me', 'red'); button.position(0, 100); // Call randomColor() when the button is pressed. button.mousePressed(randomColor); describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.'); } function draw() { // Use the button's value to set the background color. let c = button.value(); background(c); } // Set the button's value to a random color. function randomColor() { let c = random(['red', 'green', 'blue', 'yellow']); button.value(c); } ` p5 DOM DOM Creates a checkbox `` element. Checkboxes extend the p5.Element class with a `checked()` method. Calling `myBox.checked()` returns `true` if it the box is checked and `false` if not. The first parameter, `label`, is optional. It's a string that sets the label to display next to the checkbox. The second parameter, `value`, is also optional. It's a boolean that sets the checkbox's value. method createCheckbox label label displayed after the checkbox. String value value of the checkbox. Checked is `true` and unchecked is `false`. Boolean ### return new p5.Element object. p5.Element ` let checkbox; function setup() { createCanvas(100, 100); // Create a checkbox and place it beneath the canvas. checkbox = createCheckbox(); checkbox.position(0, 100); describe('A black square with a checkbox beneath it. The square turns white when the box is checked.'); } function draw() { // Use the checkbox to set the background color. if (checkbox.checked()) { background(255); } else { background(0); } } ` ` let checkbox; function setup() { createCanvas(100, 100); // Create a checkbox and place it beneath the canvas. // Label the checkbox "white". checkbox = createCheckbox(' white'); checkbox.position(0, 100); describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.'); } function draw() { // Use the checkbox to set the background color. if (checkbox.checked()) { background(255); } else { background(0); } } ` ` let checkbox; function setup() { createCanvas(100, 100); // Create a checkbox and place it beneath the canvas. // Label the checkbox "white" and set its value to true. checkbox = createCheckbox(' white', true); checkbox.position(0, 100); describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.'); } function draw() { // Use the checkbox to set the background color. if (checkbox.checked()) { background(255); } else { background(0); } } ` p5 DOM DOM Creates a dropdown menu `` element. The parameter is optional. If `true` is passed, as in `let mySelect = createSelect(true)`, then the dropdown will support multiple selections. If an existing `` element is passed, as in `let mySelect = createSelect(otherSelect)`, the existing element will be wrapped in a new p5.Element object. Dropdowns extend the p5.Element class with a few helpful methods for managing options: * `mySelect.option(name, [value])` adds an option to the menu. The first paremeter, `name`, is a string that sets the option's name and value. The second parameter, `value`, is optional. If provided, it sets the value that corresponds to the key `name`. If an option with `name` already exists, its value is changed to `value`. * `mySelect.value()` returns the currently-selected option's value. * `mySelect.selected()` returns the currently-selected option. * `mySelect.selected(option)` selects the given option by default. * `mySelect.disable()` marks the whole dropdown element as disabled. * `mySelect.disable(option)` marks a given option as disabled. * `mySelect.enable()` marks the whole dropdown element as enabled. * `mySelect.enable(option)` marks a given option as enabled. method createSelect ### return new p5.Element object. p5.Element ` let mySelect; function setup() { createCanvas(100, 100); // Create a dropdown and place it beneath the canvas. mySelect = createSelect(); mySelect.position(0, 100); // Add color options. mySelect.option('red'); mySelect.option('green'); mySelect.option('blue'); mySelect.option('yellow'); // Set the selected option to "red". mySelect.selected('red'); describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.'); } function draw() { // Use the selected value to paint the background. let c = mySelect.selected(); background(c); } ` ` let mySelect; function setup() { createCanvas(100, 100); // Create a dropdown and place it beneath the canvas. mySelect = createSelect(); mySelect.position(0, 100); // Add color options. mySelect.option('red'); mySelect.option('green'); mySelect.option('blue'); mySelect.option('yellow'); // Set the selected option to "red". mySelect.selected('red'); // Disable the "yellow" option. mySelect.disable('yellow'); describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.'); } function draw() { // Use the selected value to paint the background. let c = mySelect.selected(); background(c); } ` ` let mySelect; function setup() { createCanvas(100, 100); // Create a dropdown and place it beneath the canvas. mySelect = createSelect(); mySelect.position(0, 100); // Add color options with names and values. mySelect.option('one', 'red'); mySelect.option('two', 'green'); mySelect.option('three', 'blue'); mySelect.option('four', 'yellow'); // Set the selected option to "one". mySelect.selected('one'); describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.'); } function draw() { // Use the selected value to paint the background. let c = mySelect.selected(); background(c); } ` ` // Hold CTRL to select multiple options on Windows and Linux. // Hold CMD to select multiple options on macOS. let mySelect; function setup() { createCanvas(100, 100); // Create a dropdown and allow multiple selections. // Place it beneath the canvas. mySelect = createSelect(true); mySelect.position(0, 100); // Add color options. mySelect.option('red'); mySelect.option('green'); mySelect.option('blue'); mySelect.option('yellow'); describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.'); } function draw() { background(200); // Use the selected value(s) to draw circles. let colors = mySelect.selected(); for (let i = 0; i < colors.length; i += 1) { // Calculate the x-coordinate. let x = 10 + i * 20; // Access the color. let c = colors[i]; // Draw the circle. fill(c); circle(x, 50, 20); } } ` p5 DOM DOM multiple support multiple selections. Boolean ##### return new p5.Element object. p5.Element existing select element to wrap, either as a p5.Element or a HTMLSelectElement. Object ##### return p5.Element Creates a radio button element. The parameter is optional. If a string is passed, as in `let myRadio = createSelect('food')`, then each radio option will have `"food"` as its `name` parameter: ``. If an existing `
` or `` element is passed, as in `let myRadio = createSelect(container)`, it will become the radio button's parent element. Radio buttons extend the p5.Element class with a few helpful methods for managing options: * `myRadio.option(value, [label])` adds an option to the menu. The first parameter, `value`, is a string that sets the option's value and label. The second parameter, `label`, is optional. If provided, it sets the label displayed for the `value`. If an option with `value` already exists, its label is changed and its value is returned. * `myRadio.value()` returns the currently-selected option's value. * `myRadio.selected()` returns the currently-selected option. * `myRadio.selected(value)` selects the given option and returns it as an `HTMLInputElement`. * `myRadio.disable(shouldDisable)` Disables the radio button if `true` is passed, and enables it if `false` is passed. method createRadio ### return new p5.Element object. p5.Element ` let style = document.createElement('style'); style.innerHTML = ` .p5-radio label { display: flex; align-items: center; } .p5-radio input { margin-right: 5px; } `; document.head.appendChild(style); let myRadio; function setup() { createCanvas(100, 100); // Create a radio button element and place it // in the top-left corner. myRadio = createRadio(); myRadio.position(0, 0); myRadio.class('p5-radio'); myRadio.size(60); // Add a few color options. myRadio.option('red'); myRadio.option('yellow'); myRadio.option('blue'); // Choose a default option. myRadio.selected('yellow'); describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.'); } function draw() { // Set the background color using the radio button. let g = myRadio.value(); background(g); } ` ` let myRadio; function setup() { createCanvas(100, 100); // Create a radio button element and place it // in the top-left corner. myRadio = createRadio(); myRadio.position(0, 0); myRadio.size(50); // Add a few color options. // Color values are labeled with // emotions they evoke. myRadio.option('red', 'love'); myRadio.option('yellow', 'joy'); myRadio.option('blue', 'trust'); // Choose a default option. myRadio.selected('yellow'); describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.'); } function draw() { // Set the background color using the radio button. let c = myRadio.value(); background(c); } ` ` let myRadio; function setup() { createCanvas(100, 100); // Create a radio button element and place it // in the top-left corner. myRadio = createRadio(); myRadio.position(0, 0); myRadio.class('p5-radio'); myRadio.size(50); // Add a few color options. myRadio.option('red'); myRadio.option('yellow'); myRadio.option('blue'); // Choose a default option. myRadio.selected('yellow'); // Create a button and place it beneath the canvas. let btn = createButton('disable'); btn.position(0, 100); // Call disableRadio() when btn is pressed. btn.mousePressed(disableRadio); describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.'); } function draw() { // Set the background color using the radio button. let c = myRadio.value(); background(c); } // Disable myRadio. function disableRadio() { myRadio.disable(true); } ` p5 DOM DOM containerElement container HTML Element, either a `
` or ``. Object ##### return new p5.Element object. p5.Element name name parameter assigned to each option's `` element. String ##### return new p5.Element object. p5.Element ##### return new p5.Element object. p5.Element Creates a color picker element. The parameter, `value`, is optional. If a color string or p5.Color object is passed, it will set the default color. Color pickers extend the p5.Element class with a couple of helpful methods for managing colors: * `myPicker.value()` returns the current color as a hex string in the format `'#rrggbb'`. * `myPicker.color()` returns the current color as a p5.Color object. method createColorPicker value default color as a CSS color string. String|p5.Color ### return new p5.Element object. p5.Element ` let myPicker; function setup() { createCanvas(100, 100); // Create a color picker and set its position. myPicker = createColorPicker('deeppink'); myPicker.position(0, 100); describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.'); } function draw() { // Use the color picker to paint the background. let c = myPicker.color(); background(c); } ` ` let myPicker; function setup() { createCanvas(100, 100); // Create a color picker and set its position. myPicker = createColorPicker('deeppink'); myPicker.position(0, 100); describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.'); } function draw() { // Use the color picker to paint the background. let c = myPicker.value(); background(c); // Display the current color as a hex string. text(c, 25, 55); } ` p5 DOM DOM Creates a text `` element. Call `myInput.size()` to set the length of the text box. The first parameter, `value`, is optional. It's a string that sets the input's default value. The input is blank by default. The second parameter, `type`, is also optional. It's a string that specifies the type of text being input. See MDN for a full list of options. The default is `'text'`. method createInput ### return new p5.Element object. p5.Element ` let myInput; function setup() { createCanvas(100, 100); // Create an input element and place it // beneath the canvas. myInput = createInput(); myInput.position(0, 100); describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.'); } function draw() { background(200); // Use the input to display a message. let msg = myInput.value(); text(msg, 25, 55); } ` ` let myInput; function setup() { createCanvas(100, 100); // Create an input element and place it // beneath the canvas. Set its default // text to "hello!". myInput = createInput('hello!'); myInput.position(0, 100); describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.'); } function draw() { background(200); // Use the input to display a message. let msg = myInput.value(); text(msg, 25, 55); } ` p5 DOM DOM value default value of the input box. Defaults to an empty string `''`. String type type of input. Defaults to `'text'`. String ##### return new p5.Element object. p5.Element value String ##### return p5.Element Creates an `` element of type `'file'`. `createFileInput()` allows users to select local files for use in a sketch. It returns a p5.File object. The first parameter, `callback`, is a function that's called when the file loads. The callback function should have one parameter, `file`, that's a p5.File object. The second parameter, `multiple`, is optional. It's a boolean value that allows loading multiple files if set to `true`. If `true`, `callback` will be called once per file. method createFileInput callback function to call once the file loads. Function multiple allow multiple files to be selected. Boolean ### return new p5.File object. p5.File ` // Use the file input to select an image to // load and display. let input; let img; function setup() { createCanvas(100, 100); // Create a file input and place it beneath // the canvas. input = createFileInput(handleImage); input.position(0, 100); describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.'); } function draw() { background(200); // Draw the image if loaded. if (img) { image(img, 0, 0, width, height); } } // Create an image if the file is an image. function handleImage(file) { if (file.type === 'image') { img = createImg(file.data, ''); img.hide(); } else { img = null; } } ` ` // Use the file input to select multiple images // to load and display. let input; let images = []; function setup() { // Create a file input and place it beneath // the canvas. Allow it to load multiple files. input = createFileInput(handleImage, true); input.position(0, 100); } function draw() { background(200); // Draw the images if loaded. Each image // is drawn 20 pixels lower than the // previous image. for (let i = 0; i < images.length; i += 1) { // Calculate the y-coordinate. let y = i * 20; // Draw the image. image(images[i], 0, y, 100, 100); } describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.'); } // Create an image if the file is an image, // then add it to the images array. function handleImage(file) { if (file.type === 'image') { let img = createImg(file.data, ''); img.hide(); images.push(img); } } ` p5 DOM DOM p5 DOM DOM Creates a `