Mr.Sliders

var rSlider, gSlider, bSlider;

​

function setup() {

  // create canvas

  createCanvas(windowWidth, windowHeight);

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

  hSlider = createSlider(50, 400-50,0);

  hSlider.position(20, 110);

  sizeSlider = createSlider(1,10,0);

  sizeSlider.position(20, 140);

}

​

function draw() {

  var r = rSlider.value();

  var g = gSlider.value();

  var b = bSlider.value();

  var h = hSlider.value();

  var size= sizeSlider.value();

  background(0);

  fill(255);

  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("height", hSlider.x * 2 + hSlider.width, 125);

  text("size", sizeSlider.x * 2 + sizeSlider.width, 155);

  fill(r,g,b);

  text("Play with those sliders and see the colors change",windowWidth/2, windowHeight/2);

  ellipse(mouseX, h - 25*size, 50*size, 50*size);

  fill(255)

  ellipse(mouseX+7.5*size, h - 28*size, 8*size, 8*size);

  ellipse(mouseX-7.5*size, h - 28*size, 8*size, 8*size);

  fill(0);

  ellipse(mouseX+7.5*size, h - 28*size, 4*size, 4*size);

  ellipse(mouseX-7.5*size, h - 28*size, 4*size, 4*size);

  ellipse(mouseX, h-15*size,16*size,4*size);

}