Interactivity 2
The circle changes color when you move the slider.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// A HTML range slider
let slider;
function setup() {
createCanvas(720, 400);
// hue, saturation, and brightness
colorMode(HSB, 255);
// slider has a range between 0 and 255 with a starting value of 127
slider = createSlider(0, 255, 127);
}
function draw() {
background(127);
strokeWeight(2);
// Set the hue according to the slider
stroke(slider.value(), 255, 255);
fill(slider.value(), 255, 255, 127);
ellipse(360, 200, 200, 200);
}
