​

function setup() {

  // create canvas

  var canvas = createCanvas(710, 400);

//  canvas.parent('sketch-holder');

//  background(random(0,255),random(0,255),random(0,255));

  textSize(15);

//  noStroke();

//  background(0);

//  blendMode(ADD);

  // create sliders

  rSlider = createSlider(0, 255, 0);

  rSlider.position(10, height-25);

  gSlider = createSlider(0, 255, 0);

  gSlider.position(250, height-25);

  bSlider = createSlider(0, 255, 0 );

  bSlider.position(490, height-25);

  startr = random(0,255);

  startg = random(0,255);

  startb = random(0,255);

}

​

function draw() {

  background(255);

  noFill()

  stroke(0);

  rect(1,1,width-2,height-2);

  var r = rSlider.value();

  var g = gSlider.value();

  var b = bSlider.value();

​

//  blendMode(ADD);

  fill(r,0,0);

  ellipse(150,150,200,200);

  fill(0,g,0);

  ellipse(250,150,200,200);

  fill(0,0,b);

  ellipse(200,250,200,200);

  fill(r,g,b);

  ellipse(500,200,200,200);

//  blendMode(REPLACE);

​

  let avg = sqrt((r-startr)**2+(g-startg)**2+(b-startb)**2);

  fill(0);

  text('avg: ' + round(avg), 400, 350);

}

//document.getElementById("demo").innerHTML = "Paragraph changed.";