This page is a work in progress, serving as a personal reference for p5.js tips that I keep forgetting. Please note that my posts are not meant to be comprehensive or flawless—consider them a starting point and feel free to add your own insights!

Variables
let i;
let j = [];

Predefined Functions
1. Initialization and Setup
preload(): Used to load external files (images, sounds) before the sketch starts, ensuring they are ready when the sketch begins.
setup(): Runs once at the start of the sketch, used for initializing settings such as canvas size, background color, and other one-time setups.

2. Drawing and Animation
draw(): Continuously executes the code inside it, allowing for animations and updates to the canvas. It runs in a loop after setup().

3. User Interaction
mousePressed(): Called when the mouse is pressed. Useful for handling mouse click events.
mouseReleased(): Triggered when the mouse button is released.
mouseClicked(): Activated when the mouse is clicked (pressed and released).
mouseMoved(): Runs whenever the mouse moves across the canvas.
mouseDragged(): Executes when the mouse is dragged while pressed.
touchStarted(): Triggered when a touch begins on a touch-enabled device.
touchMoved(): Runs when a touch is moved on a touch-enabled device.
touchEnded(): Called when a touch ends on a touch-enabled device.
Keyboard Interaction
keyPressed(): Called whenever a key is pressed.
keyReleased(): Triggered when a key is released.
keyTyped(): Activated when a key is typed (pressed and released).

4. Window and Resizing
windowResized(): Called when the browser window is resized, allowing for adjustments to the canvas or other properties.

5. Other Event Handlers
deviceMoved(): Triggered when the device (such as a phone or tablet) is moved, typically used with accelerometer data.
deviceTurned(): Called when the device orientation changes, often used with gyroscope data.
deviceShaken(): Runs when the device is shaken.

6. Miscellaneous
drawBackground(): Typically used to set up the initial background (if not directly managed in setup() or draw()).
keyIsDown(): Checks if a specific key is currently pressed.
mouseIsPressed: A boolean that is true if the mouse is currently pressed.

Audio Visualization and Playback Example
let song;          // Declare a variable to hold the audio fil
let amplitude;     // Declare a variable for amplitude analysis
let playButton;    // Declare a variable for the play button

function preload() {
  // Load the audio file
  song = loadSound('sounds/milesdavis.mp3');
}

function setup() {
  createCanvas(400, 200);
  background(200);

  // Create a button to control audio playback
  playButton = createButton('Play/Pause');
  playButton.mousePressed(toggleAudio);
  
  // Position the button on the canvas
  playButton.position(10, 10);
  
  // Initialize the amplitude analyzer
  amplitude = new p5.Amplitude();
}

function draw() {
  background(200);

  // Get the current volume level
  let level = amplitude.getLevel();
  
  // Map the volume to circle size
  let size = map(level, 0, 1, 0, 200);
  
  // Draw a circle with size proportional to volume
  ellipse(width / 2, height / 2, size, size);
}

// Function to toggle audio playback
function toggleAudio() {
  if (song.isPlaying()) {
    song.pause();  // Pause the song if it’s already playing
  } else {
    song.play();   // Play the song if it’s not playing
  }
}

// Ensure the audio context is resumed on touch devices, if your audio file isn't loading correctly, try this:

function touchStarted() {
  getAudioContext().resume();
  return false; // Prevent default behavior
}

Basic 2D Shapes
Ellipse: ellipse(x, y, width, height)

Rect (Rectangle): rect(x, y, width, height)

Line: line(x1, y1, x2, y2)

Triangle: triangle(x1, y1, x2, y2, x3, y3)

Quad (Quadrilateral): quad(x1, y1, x2, y2, x3, y3, x4, y4) // Draws a four-sided polygon with four vertices.

Arc: arc(x, y, width, height, start, stop, [mode]) // Draws a segment of an ellipse.

Point: point(x, y)

Bezier Curve: bezier(x1, y1, x2, y2, x3, y3, x4, y4) // Draws a cubic Bézier curve.

Vertex: Used within a beginShape() and endShape() block to create custom shapes.

beginShape();
vertex(x1, y1);
vertex(x2, y2);
vertex(x3, y3);
endShape(CLOSE);
Curve: curve(x1, y1, x2, y2, x3, y3, x4, y4) // Draws a curve through four points.

Curve Vertex: curveVertex(x, y) // Used within a beginShape() and endShape() block to create smooth curves.

3D Shapes
p5.js offers some 3D capabilities through the WEBGL renderer.

Box (Cuboid): box(width, height, depth)

Sphere: sphere(radius) 

Cone: cone(radius, height)

Cylinder: cylinder(radius, height)

Torus: torus(r1, r2) // Draws a 3D torus (doughnut shape).

Example for 3D Rendering
function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {
  background(200);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);
}

Dynamic Function Execution Queue
let functionQueue = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255, 255, 255);
  for (let func of functionQueue){
    try {
      func();
    } catch (e){
      background(255, 0, 0);
    }
  }
}

function func0() {
  text("function #0", width/2, height/2);
}

function func1() {
  text("function #1", width/2, height/2 + 40);
}

functionQueue[0] = func0;
functionQueue.push(func1);