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));  
}
ℹ️

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