Slider
Move the sliders to control the R, G, B values of the background.
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
let rSlider, gSlider, bSlider;
function setup() {
// create canvas
createCanvas(710, 400);
textSize(15);
noStroke();
// create sliders
rSlider = createSlider(0, 255, 100);
rSlider.position(20, 20);
gSlider = createSlider(0, 255, 0);
gSlider.position(20, 50);
bSlider = createSlider(0, 255, 255);
bSlider.position(20, 80);
}
function draw() {
const r = rSlider.value();
const g = gSlider.value();
const b = bSlider.value();
background(r, g, b);
text('red', rSlider.x * 2 + rSlider.width, 35);
text('green', gSlider.x * 2 + gSlider.width, 65);
text('blue', bSlider.x * 2 + bSlider.width, 95);
}
