Skip to content

Language Settings

DOM Form Elements

contributed by Prof WM Harris, How to use p5 DOM form elements to create a slider, button, checkbox, radio group, select menu, and entry field.
Functions are created that include: the canvas setup, checkbox creation with text, text box with text that projects typed text onto canvas, slider with button, three selections which project a rectangle in different areas on the canvas depending on selection, and a drop down menu with font change.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* global variables */
//p5 DOM form elements
let slider1;
let button1;
let checkbox1;
let radio1;
let select1;
let entry1;
function setup() {
  createCanvas(200, 200);
  background("beige");
  checkbox1 = createCheckbox("Check me");
  createP(); //spacer with <p> tag
  createSpan("What's your name? "); //label for entry1
  // createInput([value], [type])
  // type: "text" (default), "number",
  // "date", "password", "email", etc.
  entry1 = createInput();
  //If text in the entry field changes, call
  //the entryCallback function.
  entry1.changed(entryCallback);
  createP(); //spacer with <p> tag
  //createSlider(min, max, [value], [step])
  slider1 = createSlider(10, 200);
  button1 = createButton("Press me"); //, "pressed");
  //Assign callback fcn for button1
  //when user clicks mouse on it
  button1.mouseClicked(button1Clicked);
  createP(); //spacer with <p> tag
  radio1 = createRadio();
  //.option([value], [contentLabel])
  //If 1 param, it's both content AND
  //value. Values treated as strings.
  radio1.option(1, "cranberries");
  radio1.option(2, "almonds");
  radio1.option(3, "gouda");
  radio1.value("1"); //set init value
  createP(); //spacer with <p> tag
  select1 = createSelect();
  //.option([contentValue],[value])
  //If 1 param, it's both content AND
  //value. Values treated as strings.
  select1.option("Sans-serif");
  select1.option("Serif");
  select1.option("Fantasy");
  //If changed, call select1Changed 
  select1.changed(select1Changed);
}
function draw() {
  //get value from slider 1
  let gray = slider1.value();
  fill(gray);
  //If mouse in corner, turn on checkbox1
  if ((mouseX < width / 3) &&
    (mouseY < height / 3)) {
    checkbox1.checked(true);
  }
  //Is checkbox1 checked? Say so.
  if (checkbox1.checked()) {
    text("CHECKED", 20, 40);
  }
  switch (radio1.value()) {
    //radio value is always a string
    case "1":
      rect(0, 0, width, 50);
      break;
    case "2":
      rect(0, 70, width, 50);
      break;
    case "3":
      rect(0, 140, width, 50);
      break;
  }
}
//callback fcn for button1
function button1Clicked() {
  //reset slider value to 200
  slider1.value(200);
}
//callback fcn for select1
function select1Changed() {
  switch (select1.value()) {
    case "Sans-serif":
      textFont("sans-serif");
      break;
    case "Serif":
      textFont("serif");
      break;
    case "Fantasy":
      textFont("fantasy");
      break;
  }
}
//callback function for entry1
function entryCallback() {
  for (let i = 0; i < 25; i++) {
    text(entry1.value(), random(width),
          random(height));
  }
}
function mouseClicked() {
  console.log("button1?", button1.value());
  console.log("checkbox1?", checkbox1.value());
  //Update .value of either? No visible change
  //to a button or checkbox
  checkbox1.value("Check again");
  button1.value("clicked?");
}
function keyTyped() {
  switch (key) {
    case "r":
      //move slider1 value to 100
      slider1.value(100);
      break;
  }
}
X

creative commons license