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