GBGD for CT
Introduction to p5.js
DOM

DOM

p5.js provides DOM (Document Object Model) functions that allow interaction with HTML elements like buttons, sliders, checkboxes, dropdowns, and color pickers. These elements can be dynamically created and controlled within a sketch.

Buttons

A button is an interactive element that triggers an action when pressed.

(press the button to change the background color)

code
let bgColor;  
let button;  

function setup() {  
  createCanvas(200, 200);  
  bgColor = color(220);  
  // Create button and assign event
  button = createButton('Change Color');  
  button.position(10, 10);  
  button.mousePressed(changeColor);  
}  

function draw() {  
  background(bgColor);  
}  

function changeColor() {  
  // Set background to a random color  
  bgColor = color(random(255), random(255), random(255));  
}
ℹ️

Arrow Functions

We can rewrite changeColor as a named arrow function, keeping a name but using arrow syntax:

code
let bgColor;  
let button;  

// Named arrow function
const changeColor = () => {  
  bgColor = color(random(255), random(255), random(255));  
};  

function setup() {  
  createCanvas(200, 200);  
  bgColor = color(220);  
  button = createButton('Change Color');  
  button.position(10, 10);  
  button.mousePressed(changeColor);  
}  

function draw() {  
  background(bgColor);  
}

For short, one-time callbacks, we can skip the name and use an anonymous arrow function inline:

code
let bgColor;
let button;  

function setup() {  
  createCanvas(200, 200);  
  bgColor = color(220);  
  button = createButton('Change Color');  
  button.position(10, 10);  
  button.mousePressed(() => {  
    bgColor = color(random(255), random(255), random(255));  
  });  
}  

function draw() {  
  background(bgColor);
}
ℹ️

Arrow functions can be named or anonymous. Use a name if you’ll reuse the function; use an anonymous arrow for quick, one-off callbacks.

When the function body is a single expression, you can omit the braces:

button.mousePressed(() => bgColor = color(random(255), random(255), random(255)));

For one-liner arrow functions, a return statement is also implicit—you can skip writing return unless you need multiple statements in the body.

Sliders

A slider allows users to select a value within a range.

(drag the slider to adjust the circle’s size)

code
let slider;  

function setup() {  
  createCanvas(200, 200);  
  // Create a slider with a range from 10 to 200 and set the initial value to 50
  slider = createSlider(10, 200, 50);  
  slider.position(10, 10);  
}  

function draw() {  
  background(220);  
  let size = slider.value();  
  fill(255, 0, 0);  
  circle(width / 2, height / 2, size);  
}
ℹ️
  • createSlider: Creates a slider input with a minimum, maximum, and initial value.
  • slider.value(): Gets the current value of the slider.

Checkbox

A checkbox allows toggling between two states: checked or unchecked.

(toggle the checkbox to show or hide the circle)

code
let checkbox;

function setup() {  
  createCanvas(200, 200);  
  // Create checkbox  
  checkbox = createCheckbox(' Show Circle', true);  
  checkbox.position(10, 10);
}  

function draw() {  
  background(220);  
  if (checkbox.checked()) {  
    fill(255, 0, 0);  
    circle(width / 2, height / 2, 50);  
  }  
}
ℹ️
  • createCheckbox: Creates a checkbox input.
  • checkbox.checked(): Returns true if the checkbox is checked.

Select

A select dropdown allows users to choose from multiple options.

(use the dropdown menu to select a background color)

code
let dropdown;  
let bgColor = 220;  

function setup() {  
  createCanvas(200, 200);  
  // Create dropdown  
  dropdown = createSelect();  
  dropdown.position(10, 10);  
  dropdown.option('Gray');  
  dropdown.option('Red');  
  dropdown.option('Green');  
  dropdown.option('Blue');  
  dropdown.changed(changeBackground);  
}  

function draw() {  
  background(bgColor);  
}  

function changeBackground() {  
  let value = dropdown.value();
  switch (value) {
    case 'Red':
      bgColor = color(255, 0, 0);
      break;
    case 'Green':
      bgColor = color(0, 255, 0);
      break;
    case 'Blue':
      bgColor = color(0, 0, 255);
      break;
    default:
      bgColor = 220;
  }
}

Color Picker

A color picker lets users choose a custom color.

(use the color picker to select the background’s color)

code
let colorPicker;  

function setup() {  
  createCanvas(200, 200);  
  // Create a color picker with a default color of red  
  colorPicker = createColorPicker('#ff0000');  
  colorPicker.position(10, 10);  
}  

function draw() {  
  // Use the selected color from the color picker
  background(colorPicker.color());
}

Further Reading

📌 p5.js DOM Reference – Full list of p5.js DOM functions.

Keyboard