Interactions with sliders

The interactions with the slider are not as easy as the mouse interaction, but they are not very complicated. They are only longer to do.

The interactions with sliders are to useful, you can do that the user adapts lot of diferent things (volume, positions, colors, sizes...)

When we start the program, in the function setup() we create all the sliders and we give them the values (minimum, maximum and default) and the position were will be the slider.
In the function draw() we define new variables (this could also have been done at the beginning of the code) and we give them the value of the sliders

var rSlider, gSlider, bSlider,sizeSlider, ySlider,xSlider;

function setup() {
  createCanvas(windowWidth, 600);
  textSize(25);

  // we create the 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);
  sizeSlider = createSlider(50, 400, 200);
  sizeSlider.position(20, 110);
  ySlider = createSlider(370, 600, 300);
  ySlider.position(20, 140);
  xSlider = createSlider(0, windowWidth, windowWidth/2);
  xSlider.position(20, 170);
}

function draw() {
  var r = rSlider.value();
  var g = gSlider.value();
  var b = bSlider.value();
  var d = sizeSlider.value();
  var Y = ySlider.value();
  var X = xSlider.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);
  text("size", sizeSlider.x * 2 + sizeSlider.width, 115);
  text("Y position", ySlider.x * 2 + ySlider.width, 145);
  text("X position", xSlider.x * 2 + xSlider.width, 175);
  fill('#FCD0B4');
	ellipse(X,Y,d,d);
  //draw eyes
	fill(0,0,255);
	ellipse(X-d/6,Y-d/7,d/5,d/5);
	ellipse(X+d/6,Y-d/7,d/5,d/5);
  fill(255,0,0,100);
  triangle(X, Y-d/20, X+d/12, Y+d/7, X-d/12, Y+d/7);

  //draw mouth
	fill(255,0,0);
	arc(X,Y+d/4,d/2.5,d/4.5,0,PI,CHORD);
	}