p5.js Reference

https://p5js.org/reference
Admin
Provides easy explanations and detailed documentation for every function and feature within the...
Tokens:498,303
Snippets:4,895
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Display text in setup

Source: https://p5js.org/reference/p5/String

A full setup example displaying a welcome message.

```javascript
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.');
}
```

--------------------------------

### Drawing in setup()

Source: https://p5js.org/reference/p5/setup

Example of using setup() to create a canvas and draw a static shape.

```javascript
function setup() {
createCanvas(100, 100);
  

background(200);
  

// Draw the circle.
circle(50, 50, 40);
  

describe('A white circle on a gray background.');
}
```

--------------------------------

### Display template string in setup

Source: https://p5js.org/reference/p5/String

A full setup example using a template string to display a message with a variable.

```javascript
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.');
}
```

--------------------------------

### Loading and applying a shader in setup

Source: https://p5js.org/reference/p5/loadShader

This example demonstrates loading a shader asynchronously in the setup function, applying it with shader(), and setting uniforms before rendering a quad.

```javascript
let mandelbrot;
  

// Load the shader and create a p5.Shader object.
async function setup() {
mandelbrot = await loadShader('/assets/shader.vert', '/assets/shader.frag');
  

createCanvas(100, 100, WEBGL);
  

// Compile and apply the p5.Shader object.
shader(mandelbrot);
  

// Set the shader uniform p to an array.
mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
  

// Set the shader uniform r to the value 1.5.
mandelbrot.setUniform('r', 1.5);
  

// Add a quad as a display surface for the shader.
quad(-1, -1, 1, -1, 1, 1, -1, 1);
  

describe('A black fractal image on a magenta background.');
}
```

--------------------------------

### Using start() with an Oscillator and Delay

Source: https://p5js.org/reference/p5.p5soundSource/start

This example demonstrates how to set up an oscillator and a delay effect, then start the oscillator upon a mouse click.

```javascript
let osc, delay;
let cnv;
  

function setup() {
describe("a sketch that demonstrates how to connect an audio source node to an effect node");
createCanvas(100, 100);
textAlign(CENTER);
textWrap(WORD);
textSize(10);
osc = new p5.Oscillator('sine');
delay = new p5.Delay(0.120, 0.65);
//disconnect the oscillator from the speakers before connecting to the delay effect!
osc.disconnect();
//connect the oscillator to the delay effect.
osc.connect(delay);
}
  

function mousePressed() {
osc.start();
}
  

function draw(){
background(220);
text('click to play sound', 0, height/2 - 20, 100);
text('control oscillator frequency with mouseX position', 0, height/2, 100);
}
```

--------------------------------

### Basic console.log example

Source: https://p5js.org/reference/p5/console

A simple example of printing a message to the console within the setup function.

```javascript
function setup() {
noCanvas();
  

// Prints "Hello!" to the console.
console.log('Hello!');
}
```

--------------------------------

### Basic setup() declaration

Source: https://p5js.org/reference/p5/setup

The standard structure for defining the setup function to run code once at the start of a sketch.

```javascript
function setup() {
  // Code to run once at the start of the sketch.
}
```

--------------------------------

### Configuring Lighting Attributes

Source: https://p5js.org/reference/p5/setAttributes

Example demonstrating per-pixel lighting setup with point lights.

```javascript
// press the mouse button to disable perPixelLighting
function setup() {
createCanvas(100, 100, WEBGL);
noStroke();
fill(255);
}
  

let lights = [
{ c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
{ c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
{ c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
{ c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
{ c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
{ c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
];
  

function draw() {
let t = millis() / 1000 + 1000;
background(0);
directionalLight(color('#222'), 1, 1, 1);
  

for (let i = 0; i < lights.length; i++) {
let light = lights[i];
pointLight(
color(light.c),
p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
```

--------------------------------

### Playing a soundfile with play()

Source: https://p5js.org/reference/p5.SoundFile/play

This example demonstrates how to load a sound file and trigger its playback using the start() method, which is equivalent to play().

```javascript
async function setup() {
sample = await loadSound("/assets/chime.mp3");
createCanvas(100, 100);
textAlign(CENTER);
textWrap(WORD);
textSize(8);
describe("a sketch that plays a soundfile");
}
  

function draw() {
background(220);
text("click to play the sound, demonstrating the start() method", 0, 20, width);
}
  

function mousePressed() {
sample.start();
}
```

--------------------------------

### Create and start a p5.SqrOsc

Source: https://p5js.org/reference/p5.sound/p5.SqrOsc

This example demonstrates how to initialize a square oscillator with a frequency of 440Hz and start it upon a mouse press.

```javascript
function setup() {   describe("a sketch that creates an oscillator with a square wave shape");   createCanvas(100, 100);   textAlign(CENTER);   textWrap(WORD);   textSize(10);   osc = new p5.SqrOsc(440); }  function mousePressed() {   osc.start(); }  function draw(){   background(220);   text('click to hear a square wave shape', 0, 10, 100); }
```

--------------------------------

### Initialize 3D Panner environment

Source: https://p5js.org/reference/p5.sound/p5.Panner3D

Setup variables and the canvas for a 3D sound spatialization example.

```javascript
let radius = 10 ; 
let soundSource, spatializer;
let font;
let cnv;
  

let x = 0;
let y = 0;
let z = 100;
  

let vX;
let vY;
let vZ;
  

async function setup() {
describe(
'A 3D shape with a sound source attached to it. The sound source is spatialized using the Panner3D class. Click to play the sound.'
);
cnv = createCanvas(100, 100, WEBGL);
soundSource = await loadSound('/assets/beat.mp3');
font = await loadFont('/assets/SourceSansPro-Regular.otf');
cnv.mousePressed(playSound);
  

camera(0, 0, 0, 0, 0, 1);
textFont(font);
textAlign(CENTER,CENTER);
angleMode(DEGREES);
```

--------------------------------

### Stop and start an audio source node

Source: https://p5js.org/reference/p5.p5soundSource/stop

This example demonstrates how to toggle an oscillator on and off using the start() and stop() methods within a mousePressed event.

```javascript
let osc, delay;
let cnv;
let isPlaying = false;
  

function setup() {
describe("a sketch that demonstrates how to stop and start an audio source node");
createCanvas(100, 100);
textAlign(CENTER);
textWrap(WORD);
textSize(10);
osc = new p5.Oscillator('sine', 800);
delay = new p5.Delay(0.120, 0.65);
//disconnect the oscillator from the speakers before connecting to the delay effect!
osc.disconnect();
//connect the oscillator to the delay effect.
osc.connect(delay);
}
  

function mousePressed() {
if (!isPlaying) {
osc.start();
isPlaying = true; 
}
else {
osc.stop();
isPlaying = false;
}
```

--------------------------------

### Defining a custom shader with vertexProperty

Source: https://p5js.org/reference/p5/vertexProperty

This example demonstrates defining vertex and fragment shaders and setting up a custom shader in the setup function.

```javascript
const vertSrc = `#version 300 es
precision mediump float;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
  

in vec3 aPosition;
in vec2 aOffset;
  

void main(){
vec4 positionVec4 = vec4(aPosition.xyz, 1.0);
positionVec4.xy += aOffset;
gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
}
`;
  

const fragSrc = `#version 300 es
precision mediump float;
out vec4 outColor;
void main(){
outColor = vec4(0.0, 1.0, 1.0, 1.0);
}
`;
  

function setup(){
createCanvas(100, 100, WEBGL);
  

// Create and use the custom shader.
const myShader = createShader(vertSrc, fragSrc);
shader(myShader);
```

--------------------------------

### Create a sawtooth oscillator

Source: https://p5js.org/reference/p5.sound/p5.SawOsc

This example demonstrates initializing an oscillator and starting it upon a mouse press.

```javascript
function setup() {   describe("a sketch that creates an oscillator with a sawtooth wave shape");   createCanvas(100, 100);   textAlign(CENTER);   textWrap(WORD);   textSize(10);   osc = new p5.SinOsc; }  function mousePressed() {   osc.start(); }  function draw(){   background(220);   text('click to hear a sawtooth wave shape', 0, 10, 100); }
```

--------------------------------

### Create a sine oscillator

Source: https://p5js.org/reference/p5.sound/p5.SinOsc

This example demonstrates how to initialize a p5.SinOsc object and start it upon a mouse press event.

```javascript
function setup() {
describe("a sketch that creates an oscillator with a sine wave shape");
createCanvas(100, 100);
textAlign(CENTER);
textWrap(WORD);
textSize(10);
osc = new p5.SinOsc;
}
  

function mousePressed() {
osc.start();
}
  

function draw(){
background(220);
text('click to hear a sinusoidal wave shape', 0, 10, 100);
}
```

--------------------------------

### Display startup time with millis()

Source: https://p5js.org/reference/p5/millis

Displays the time elapsed since the sketch started until the setup() function finishes.

```javascript
function setup() {
createCanvas(100, 100);
  

background(200);
  

// Get the number of milliseconds the sketch has run.
let ms = millis();
  

// Style the text.
textAlign(LEFT, CENTER);
textSize(10);
textFont('Courier New');
  

// Display how long it took setup() to be called.
text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
  

describe(
`The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
);
}
```

--------------------------------

### start()

Source: https://p5js.org/reference/p5.sound/p5.Amplitude

Starts the audio input for analysis.

```APIDOC
## start()

### Description
Start the audio input.
```

--------------------------------

### start()

Source: https://p5js.org/reference/p5.AudioIn/start

Starts the audio input stream for the p5.AudioIn object.

```APIDOC
## start()

### Description
Starts the audio input. This method must be called to begin capturing audio from the microphone.

### Syntax
`mic.start();`
```

--------------------------------

### Accessing and processing microphone input

Source: https://p5js.org/reference/p5.sound/p5.AudioIn

This example demonstrates initializing a p5.AudioIn object, connecting it to a delay and filter, and starting the microphone upon a mouse click.

```javascript
let mic, delay, filter;
  

function setup() {
let cnv = createCanvas(100, 100);
cnv.mousePressed(startMic);
background(220);
mic = new p5.AudioIn();
delay = new p5.Delay(0.74, 0.1);
filter = new p5.Biquad(600, "bandpass");
mic.disconnect();
mic.connect(delay);
delay.disconnect();
delay.connect(filter);
textAlign(CENTER);
textWrap(WORD);
textSize(10);
text('click to open mic, watch out for feedback', 0, 20, 100);
describe('a sketch that accesses the user\'s microphone and connects it to a delay line.')
}
  

function startMic() {
mic.start();
}
  

function draw() {
d = map(mouseX, 0, width, 0.0, 0.5);
```

--------------------------------

### Create a triangle oscillator

Source: https://p5js.org/reference/p5.sound/p5.TriOsc

This example demonstrates how to initialize a p5.TriOsc with a frequency of 440Hz and start it upon a mouse press.

```javascript
function setup() {   describe("a sketch that creates an oscillator with a triangle wave shape");   createCanvas(100, 100);   textAlign(CENTER);   textWrap(WORD);   textSize(10);   osc = new p5.TriOsc(440); }  function mousePressed() {   osc.start(); }  function draw(){   background(220);   text('click to hear a triangle wave shape', 0, 10, 100); }
```

--------------------------------

### Registering a custom library with registerAddon()

Source: https://p5js.org/reference/p5/registerAddon

This example defines a custom library function that adds a sayHello method to the p5 instance and registers it using registerAddon(). The sayHello method is then used within the setup function of a sketch.

```javascript
function myAddon(p5, fn, lifecycles) {
fn.sayHello = function() {
this.textAlign(this.CENTER, this.CENTER);
this.text('Hello!', this.width / 2, this.height / 2);
};
}
p5.registerAddon(myAddon);
  

function setup() {
createCanvas(100, 100);
  

background(200);
sayHello(); // The sayHello method is now available!
  

describe('The text "Hello!"');
}
```

--------------------------------

### setup()

Source: https://p5js.org/reference/p5/setup

The setup() function is called once when the sketch begins running. It can be declared as an async function to handle asynchronous operations like loading assets.

```APIDOC
## setup()

### Description
A function that is called once when the sketch begins running. It is used to perform setup tasks such as creating the canvas and initializing variables.

### Syntax
`setup()`

### Returns
- **void|Promise<void>** - Returns nothing or a Promise if declared as async.
```

--------------------------------

### start()

Source: https://p5js.org/reference/p5.SoundFile/start

Starts the playback of the sound file.

```APIDOC
## start()

### Description
Starts the playback of the sound file associated with the p5.SoundFile object.

### Usage
`soundFile.start();`
```

--------------------------------

### Asynchronous setup() with loadImage()

Source: https://p5js.org/reference/p5/setup

Using an async setup() function to wait for an image asset to load before proceeding with the sketch.

```javascript
let img;
  

async function setup() {
img = await loadImage('/assets/bricks.jpg');
  

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);
}
```

--------------------------------

### Basic WebGL Setup

Source: https://p5js.org/reference/p5/setAttributes

A standard setup for a WebGL canvas in p5.js.

```javascript
function setup() {
createCanvas(100, 100, WEBGL);
}
  

function draw() {
background(255);
push();
rotateZ(frameCount * 0.02);
rotateX(frameCount * 0.02);
rotateY(frameCount * 0.02);
fill(0, 0, 0);
box(50);
pop();
}
```

--------------------------------

### Loading assets with async/await in setup()

Source: https://p5js.org/reference/p5/async_await

Demonstrates declaring setup() as an async function to await the completion of loadImage() and loadJSON() before initializing the canvas.

```javascript
let img, data;

async function setup() {
  // Wait until the image and JSON data have fully loaded.
  img = await loadImage("./my-image.png");
  data = await loadJSON("./my-data.json");

  // Once the assets are loaded, create the canvas.
  createCanvas(400, 400);
}
```

--------------------------------

### Basic setup for exponential growth

Source: https://p5js.org/reference/p5/exp

A template setup function for an exponential growth sketch.

```javascript
function setup() {
createCanvas(100, 100);
  

background(200);
  

describe('A series of black dots that grow exponentially from left to right.');
}
```

--------------------------------

### Animating shader uniforms in draw

Source: https://p5js.org/reference/p5/loadShader

This example shows how to load a shader in setup and then update its uniforms dynamically within the draw loop to create an animation.

```javascript
let mandelbrot;
  

// Load the shader and create a p5.Shader object.
async function setup() {
mandelbrot = await loadShader('/assets/shader.vert', '/assets/shader.frag');
  

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.
```

--------------------------------

### userStartAudio()

Source: https://p5js.org/reference/p5/userStartAudio

Starts audio processing in the window when called from a user interaction (such as mousePressed()). This is only necessary when not starting p5.sound nodes with the start() method.

```APIDOC
## userStartAudio()

### Description
Starts audio processing in the window. This function must be called from a user interaction (such as mousePressed()) to comply with browser audio policies.

### Usage
```javascript
function mousePressed() {
  userStartAudio();
}
```
```

--------------------------------

### play()

Source: https://p5js.org/reference/p5.SoundFile/play

Starts the playback of the sound file. This method is an alias for start().

```APIDOC
## play()

### Description
Starts the playback of the sound file. This method is functionally equivalent to the start() method.

### Syntax
`soundFile.play()`
```

--------------------------------

### Set and get media volume

Source: https://p5js.org/reference/p5.MediaElement/volume

This example demonstrates how to create an audio element, display its controls, and dynamically adjust its volume using a sine wave in the draw loop.

```javascript
let dragon;
  

function setup() {
createCanvas(100, 100);
  

// Create a p5.MediaElement using createAudio().
dragon = createAudio('/assets/lucky_dragons.mp3');
  

// Show the default media controls.
dragon.showControls();
  

describe('The text "Volume: V" on a gray square with media controls beneath it. The number "V" oscillates between 0 and 1 as the music plays.');
}
  

function draw() {
background(200);
  

// Produce a number between 0 and 1.
let n = 0.5 * sin(frameCount * 0.01) + 0.5;
  

// Use n to set the volume.
dragon.volume(n);
  

// Get the current volume and display it.
let v = dragon.volume();
  

// Round v to 1 decimal place for display.
```

--------------------------------

### Check playback state with isPlaying()

Source: https://p5js.org/reference/p5.SoundFile/isPlaying

This example demonstrates how to check the playback state of a sound file to toggle between starting and stopping the audio upon mouse clicks.

```javascript
async function setup() {
sample = await loadSound("/assets/chime.mp3");
createCanvas(100, 100);
textAlign(CENTER);
textWrap(WORD);
textSize(8);
describe("a sketch that plays a soundfile");
}
  

function draw() {
background(220);
//check if sample is playing or not
if (!sample.playing) {
text("click to play the sound, demonstrating the start() method", 0, 20, width);
}
else {
text("click to stop the sound, demonstrating the stop() method", 0, 20, width);
}
}
  

function mousePressed() {
//check if sample is playing or not
if (!sample.playing) {
sample.start();
}
else {
sample.stop();
```

--------------------------------

### Basic p5.Envelope example

Source: https://p5js.org/reference/p5.sound/p5.Envelope

A simple placeholder example for using p5.Envelope.

```javascript
console.log('do an example here');
```

--------------------------------

### Display frameCount in setup

Source: https://p5js.org/reference/p5/frameCount

Displays the initial value of frameCount, which is 0, inside the setup function.

```javascript
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.');
}
```

--------------------------------

### Example: Drawing a flower with parameters

Source: https://p5js.org/reference/p5/function

A complete p5.js example using a function with multiple parameters to draw a flower.

```javascript
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);
}
```

--------------------------------

### Example using IMAGE mode

Source: https://p5js.org/reference/p5/textureMode

A full example using the default IMAGE mode to map a texture to a custom shape.

```javascript
let img;
  

async function setup() {
// Load an image and create a p5.Image object.
img = await loadImage('/assets/laDefense.jpg');
  

createCanvas(100, 100, WEBGL);
  

describe('An image of a ceiling against a black background.');
}
  

function draw() {
background(0);
  

// Apply the image as a texture.
texture(img);
  

// Draw the custom shape.
// Use the image's width and height as uv coordinates.
beginShape();
vertex(-30, -30, 0, 0);
vertex(30, -30, img.width, 0);
vertex(30, 30, img.width, img.height);
vertex(-30, 30, 0, img.height);
endShape();
}
```

--------------------------------

### Create and use a p5.Gain node

Source: https://p5js.org/reference/p5.sound/p5.Gain

This example demonstrates initializing a p5.Gain node, connecting both a sound file and an oscillator to it, and dynamically adjusting the gain level based on mouse position.

```javascript
let cnv, soundFile, osc, gain;
  

async function setup() {
cnv = createCanvas(100, 100);
cnv.mousePressed(playSound);
background(220);
soundFile = await loadSound('/assets/Damscray_DancingTiger.mp3');
gain = new p5.Gain(0.74);
osc = new p5.Oscillator();
osc.amp(0.74);
osc.disconnect();
soundFile.loop();
soundFile.disconnect();
  

//connect both sound sources to gain node
soundFile.connect(gain);
osc.connect(gain);
}
  

function playSound() {
soundFile.play();
osc.play();
}
  

function draw() {
let level = map(mouseX, 0, width, 0, 1);
gain.amp(level);
}
```

--------------------------------

### Animate a circle moving

Source: https://p5js.org/reference/p5/Number

Example setup and draw functions to animate a circle.

```javascript
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);
}
```

--------------------------------

### Draw concentric circles

Source: https://p5js.org/reference/p5/Number

Example setup function drawing two concentric circles.

```javascript
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.');
}
```

--------------------------------

### Create and process sound with p5.Reverb

Source: https://p5js.org/reference/p5.sound/p5.Reverb

This example demonstrates how to initialize a p5.Reverb object, connect an audio source to it, and adjust the wet/dry mix based on mouse position.

```javascript
let sample, reverb;
  

async function setup() {
sample = await loadSound("../../sounds/drums.mp3");
sample.loop(true);
let cnv = createCanvas(100, 100);
describe("a sketch that plays processes an audio file with a reverb effect.");
cnv.mousePressed(playSound);
reverb = new p5.Reverb(3);
sample.disconnect();
sample.connect(reverb);
textAlign(CENTER);
textWrap(WORD);
textSize(10);
}
  

function playSound() {
if (!sample.isPlaying()) {
sample.play();
}
else {
sample.stop();
}
}
  

function draw() {
background(220);
text("click to play sound, move mouse to change wet/dry mix", 0, 20, width);
let dryWet = map(mouseX, 0, width, 0, 1);
```

--------------------------------

### Displaying upZ value

Source: https://p5js.org/reference/p5.Camera/upZ

An example showing the camera setup with a default up vector z-component of 0.

```javascript
let cam;
let font;
  

async function setup() {
// Load a font and create a p5.Font object.
font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
  

// Create a p5.Camera object.
cam = createCamera();
  

// Set the camera
setCamera(cam);
  

// Place the camera at the top-right: (100, -400, 800)
// Point it at the origin: (0, 0, 0)
// Set its "up" vector: (0, 1, 0).
cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);
  

describe(
'A white cube on a gray background. The text "upZ: 0" is written in black beneath it.'
);
}
  

function draw() {
background(200);
```

--------------------------------

### Hide the cursor

Source: https://p5js.org/reference/p5/noCursor

This example demonstrates how to hide the cursor using noCursor() within the setup function.

```javascript
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.');
}
```

--------------------------------

### Displaying the upX value

Source: https://p5js.org/reference/p5.Camera/upX

An example showing the setup of a camera with a fixed up vector and displaying the upX value.

```javascript
let cam;
let font;
  

async function setup() {
// Load a font and create a p5.Font object.
font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
  

// Create a p5.Camera object.
cam = createCamera();
  

// Set the camera
setCamera(cam);
  

// Place the camera at the top-right: (100, -400, 800)
// Point it at the origin: (0, 0, 0)
// Set its "up" vector: (0, 1, 0).
cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);
  

describe(
'A white cube on a gray background. The text "upX: 0" is written in black beneath it.'
);
}
  

function draw() {
background(200);
```

--------------------------------

### start()

Source: https://p5js.org/reference/p5.p5soundSource/start

Starts the p5 sound source. This method should be invoked within a user-initiated event handler like mousePressed() to ensure compatibility with browser autoplay restrictions.

```APIDOC
## start()

### Description
Starts the p5 sound source. Should be called from a user interaction such as mousePressed() in order to adhere to the browser's autoplay policy.

### Usage
```javascript
function mousePressed() {
  osc.start();
}
```
```

--------------------------------

### Disconnect an audio node

Source: https://p5js.org/reference/p5.p5soundNode/disconnect

This example demonstrates how to start an oscillator and immediately disconnect it from the main output using the disconnect() method.

```javascript
instruction = "click to start"
  

function setup() {
describe("a sketch that demonstrates how to disconnect an audio node from the main output destination");
createCanvas(100, 100);
textAlign(CENTER);
textWrap(WORD);
textSize(10);
osc = new p5.Oscillator('sine'); 
}
function mousePressed() { 
osc.start();
osc.disconnect();
instruction = "oscillator has started but is disonnected"
}
function draw() {
background(220)
text(instruction, 0, 10, 100);
}
```

--------------------------------

### Looping a sound file

Source: https://p5js.org/reference/p5.SoundFile/loop

This example demonstrates how to load a sound file, enable looping with loop(true), and handle the playback state using mouse interactions.

```javascript
async function setup() {
sample = await loadSound("/assets/drums.mp3");
  

//set the sample to loop
sample.loop(true);
//call a function when the sound ends
sample.onended(stopSound);
createCanvas(100, 100);
textAlign(CENTER);
textWrap(WORD);
textSize(8);
describe("a sketch that plays and pauses a soundfile");
}
  

function draw() {
background(220);
if (!sample.playing) {
text("click to play the sound and it will loop", 0, 20, width);
}
else {
text("click to stop the looping", 0, 20, width);
}
}
  

function mousePressed() {
if (!sample.playing) {
sample.start();
}
else {
//stop the sample by disabling looping
```

--------------------------------

### Update storage buffer data

Source: https://p5js.org/reference/p5.StorageBuffer/update

Example showing the setup of a storage buffer with particles and the use of update() to manage buffer data.

```javascript
let particles;
let computeShader;
let displayShader;
let instance;
const numParticles = 100;
  

async function setup() {
await createCanvas(100, 100, WEBGPU);
particles = createStorage(makeParticles(width / 2, height / 2));
computeShader = buildComputeShader(simulate);
displayShader = buildMaterialShader(display);
instance = buildGeometry(drawParticle);
describe('100 orange particles shooting outward.');
}
  

function makeParticles(x, y) {
let data = [];
for (let i = 0; i < numParticles; i++) {
let angle = (i / numParticles) * TWO_PI;
let speed = random(0.5, 2);
data.push({
position: createVector(x, y),
velocity: createVector(cos(angle) * speed, sin(angle) * speed),
```

--------------------------------

### Copying camera configuration with set()

Source: https://p5js.org/reference/p5.Camera/set

This example demonstrates creating two cameras and using set() to apply the configuration of the first camera to the second.

```javascript
let cam1;
let cam2;
  

function setup() {
createCanvas(100, 100, WEBGL);
  

// Create the first camera.
cam1 = createCamera();
  

// Place the camera at the top-right.
cam1.setPosition(400, -400, 800);
  

// Point it at the origin.
cam1.lookAt(0, 0, 0);
  

// Create the second camera.
cam2 = createCamera();
  

// Copy cam1's configuration.
cam2.set(cam1);
  

// Set the camera.
setCamera(cam2);
  

describe(
'A white cube drawn against a gray background. The camera slowly moves forward. The camera resets when the user double-clicks.'
```

--------------------------------

### Stop the draw loop

Source: https://p5js.org/reference/p5/noLoop

This example demonstrates how to stop the draw loop from executing repeatedly using noLoop() within the setup() function.

```javascript
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);
}
```

--------------------------------

### Disable debug mode in a 3D sketch

Source: https://p5js.org/reference/p5/noDebugMode

This example demonstrates enabling debug mode in setup() and disabling it when the user double-clicks the canvas.

```javascript
// Click and drag the mouse to view the scene from different angles.
  

function setup() {
createCanvas(100, 100, WEBGL);
  

// Enable debug mode.
debugMode();
  

describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');
}
  

function draw() {
background(200);
  

// Enable orbiting with the mouse.
orbitControl();
  

// Style the box.
normalMaterial();
  

// Draw the box. box(20, 40);
}
  

// Disable debug mode when the user double-clicks.
function doubleClicked() {
noDebugMode();
}
```

--------------------------------

### Triggering an Envelope Attack

Source: https://p5js.org/reference/p5.Envelope/triggerAttack

This example demonstrates how to use triggerAttack() to start an oscillator's envelope when the mouse is pressed and release it when the mouse is released.

```javascript
let osc, env;
  

function setup() {
let cnv = createCanvas(100, 100);
background(220);
cnv.mousePressed(playSound);
cnv.mouseReleased(stopSound);
textAlign(CENTER);
textSize(10);
text('tap to triggerAttack', width/2, height/2);
  

osc = new p5.Oscillator();
osc.disconnect();
env = new p5.Envelope();
osc.connect(env);
}
  

function playSound() {
background(0, 255, 255);
text('release to release', width/2, height/2);
osc.start();
env.attackTime(random(0.00, 0.25));
env.triggerAttack(0.5);
}
  

function stopSound() {
background(220);
text('tap to triggerAttack', width/2, height/2);
env.releaseTime(random(0.1, 0.3));
```

--------------------------------

### Loading and applying a normal shader

Source: https://p5js.org/reference/p5/loadNormalShader

Demonstrates how to load a shader file asynchronously in setup() and apply it to a 3D shape in the draw() loop.

```javascript
let myShader;
async function setup() {
  createCanvas(200, 200, WEBGL);
  myShader = await loadNormalShader('myMaterial.js');
}

function draw() {
  background(255);
  shader(myShader);
  lights();
  noStroke();
  fill('red');
  sphere(50);
}
```

--------------------------------

### Executing an HTTP GET request with httpDo()

Source: https://p5js.org/reference/p5/httpDo

This example demonstrates using httpDo() with a Request object to fetch earthquake data from the USGS API.

```javascript
let earthquakes;
let eqFeatureIndex = 0;
  

function setup() {
createCanvas(100,100);
  

let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
  

const req = new Request(url, {
method: 'GET',
headers: {authorization: 'Bearer secretKey'}
});
// httpDo(path, method, datatype, success, error)
  

httpDo(
req,
'GET',
'json',
res => {
earthquakes = res;
},
err => {
console.error('Error loading data:', err);
}
);
}
  

function draw() {
```

--------------------------------

### frameCount

Source: https://p5js.org/reference/p5/frameCount

A Number variable that tracks the number of frames drawn since the sketch started. It is 0 inside setup() and increments by 1 after each draw() cycle.

```APIDOC
## frameCount

### Description
A `Number` variable that tracks the number of frames drawn since the sketch started. The value is 0 inside `setup()` and increments by 1 each time the code in `draw()` finishes executing.

### Usage
```javascript
function draw() {
  background(200);
  // Display the current frame count
  text(frameCount, 50, 50);
}
```
```

--------------------------------

### Loading and playing a sound file

Source: https://p5js.org/reference/p5/loadSound

This example demonstrates how to load a sound file asynchronously and play it upon a user gesture, which satisfies the requirement for user-initiated audio.

```javascript
let mySound;
  

async function setup() {
describe("a sketch that loads and plays a sound file");
mySound = await loadSound('/assets/doorbell.mp3');
createCanvas(100, 100);
background(220);
text('tap here to play', 10, 20);
}
  

function mousePressed() {
// playing a sound file on a user gesture is equivalent to `userStartAudio()`
mySound.play();
}
```

--------------------------------

### Using feedback() in a p5.Delay sketch

Source: https://p5js.org/reference/p5.Delay/feedback

This example demonstrates initializing a p5.Delay with a specific feedback value and toggling audio playback on mouse press.

```javascript
let osc, delay, feedback = 0.5;
  

async function setup() {
sound = await loadSound('/assets/chime.mp3')
sound.loop(true);
let cnv = createCanvas(100, 100);
background(220);
textAlign(CENTER);
textWrap(WORD);
textSize(9);
text('click to start audio', width/2, height/2);
  

delay = new p5.Delay(0.250, feedback);
sound.disconnect();
sound.connect(delay);
describe('a sketch that demonstrates the feedback parameter.');
}
function mousePressed() {
if (!sound.isPlaying()) {
sound.play();
}
else {
sound.stop();
}
}
  

function draw() {
if(!sound.isPlaying()) {
background(220);
text('click to start audio', 0, height/2 - 20, width);
```

--------------------------------

### Creating and using a p5.LowPass filter

Source: https://p5js.org/reference/p5.sound/p5.LowPass

This example demonstrates how to initialize a p5.LowPass filter, connect a noise source to it, and modulate its frequency based on mouse position.

```javascript
let fft, noise, filterEffect;
  

function setup() {
let cnv = createCanvas(100,100);
cnv.mousePressed(makeNoise);
fill(255, 0, 255);
  

//creates a LowPass filter
filterEffect = new p5.LowPass();
noise = new p5.Noise();
noise.disconnect();
noise.connect(filterEffect);
fft = new p5.FFT(128);
filterEffect.connect(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);
filterEffect.freq(freq);
  

// draw filtered spectrum
let spectrum = fft.analyze();
noStroke();
fill(0, 0, 0);
for (let i = 0; i < spectrum.length; i++) {
```

--------------------------------

### Draw an arrow using fromAngle

Source: https://p5js.org/reference/p5.Vector/fromAngle

Demonstrates drawing an arrow using a vector created with fromAngle. This example includes the setup, draw, and helper function.

```javascript
function setup() {
createCanvas(100, 100);
  

describe('A black arrow extends from the center of a gray square. It points to the right.');
}
```

```javascript
function draw() {
background(200);
  

// Create a p5.Vector to the center.
let v0 = createVector(50, 50);
  

// Create a p5.Vector with an angle 0 and magnitude 30.
let v1 = p5.Vector.fromAngle(0, 30);
  

// Draw the black arrow.
drawArrow(v0, v1, 'black');
}
```

```javascript
// Draws an arrow between two vectors.
function drawArrow(base, vec, myColor) {
push();
stroke(myColor);
strokeWeight(3);
fill(myColor);
translate(base.x, base.y);
line(0, 0, vec.x, vec.y);
rotate(vec.heading());
let arrowSize = 7;
```

--------------------------------

### Move camera with key presses

Source: https://p5js.org/reference/p5.Camera/move

This example sets up a camera in a WEBGL environment and demonstrates how to move it along its local axes based on user input.

```javascript
let cam;
  

function setup() {
createCanvas(100, 100, WEBGL);
  

// Create the first camera.
// Keep its default settings.
cam = createCamera();
  

// Place the camera at the top-right.
cam.setPosition(400, -400, 800);
  

// Point it at the origin.
cam.lookAt(0, 0, 0);
  

// Set the camera.
setCamera(cam);
  

describe(
'A white cube drawn against a gray background. The cube appears to move when the user presses certain keys.'
);
}
  

function draw() {
background(200);
  

// Move the camera along its "local" axes
// when the user presses certain keys.
```

--------------------------------

### Get column count from a table

Source: https://p5js.org/reference/p5.Table/getColumnCount

This example loads a CSV file and displays the total number of columns found in the table using the getColumnCount() method.

```javascript
// given the cvs file "blobs.csv" in /assets directory
// ID, Name, Flavor, Shape, Color
// Blob1, Blobby, Sweet, Blob, Pink
// Blob2, Saddy, Savory, Blob, Blue
  

let table;
  

async function setup() {
table = await loadTable('/assets/blobs.csv');
  

createCanvas(200, 100);
textAlign(CENTER);
background(255);
}
  

function draw() {
let numOfColumn = table.getColumnCount();
text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
}
```

--------------------------------

### Point the camera at a location

Source: https://p5js.org/reference/p5.Camera/lookAt

This example demonstrates setting up a camera and using lookAt() to point it at specific coordinates in a 3D scene.

```javascript
let cam;
let isLookingLeft = true;

function setup() {
createCanvas(100, 100, WEBGL);

// Create a p5.Camera object.
cam = createCamera();

// Set the camera
setCamera(cam);

// Place the camera at the top-center.
cam.setPosition(0, -400, 800);

// Point the camera at the origin.
cam.lookAt(-30, 0, 0);

describe(
'A red cube and a blue cube on a gray background. The camera switches focus between the cubes when the user double-clicks.'
);
}

function draw() {
background(200);

// Draw the box on the left.
push();
// Translate the origin to the left.
```

--------------------------------

### Get the number of channels in a sound file

Source: https://p5js.org/reference/p5.SoundFile/channels

This example demonstrates how to load a sound file and display its channel count on the canvas using the channels() method.

```javascript
async function setup() {
sample = await loadSound("/assets/chime.mp3");
createCanvas(100, 100);
textAlign(CENTER);
textWrap(WORD);
textSize(10);
describe("a sketch that reports how many channels an audio file has");
}
  

function draw() {
background(220);
numberOfChannels = sample.channels();
text("sample has " + numberOfChannels + " channels", 10, 10, width);
}
```

--------------------------------

### Draw circles along a Bézier curve

Source: https://p5js.org/reference/p5/bezierPoint

This example draws a static Bézier curve and places circles at the start and midpoint of the curve using bezierPoint().

```javascript
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);
```

--------------------------------

### Initialize shader with hooks

Source: https://p5js.org/reference/p5/createShader

This example sets up the variables for a shader that supports hooks.

```javascript
// A shader with hooks.
let myShader;
  

// A shader with modified hooks.
let modifiedShader;
  

// 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;
  

```

--------------------------------

### Draw tangents along a Bézier curve

Source: https://p5js.org/reference/p5/bezierTangent

This example demonstrates how to use bezierTangent() to calculate and draw a tangent line segment at the start of a Bézier curve.

```javascript
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);
```
Tokens:
Raw