RGB Color Mixing Tool

var redSlider, greenSlider, blueSlider;

​

function setup() {

  createCanvas(540, 540);

  textSize(20)

​

  // Create sliders

  var sliderY = 190;

  redSlider = createSlider(0, 255, 255);

  redSlider.position(20, sliderY);

  redSlider.size(256);

  greenSlider = createSlider(0, 255, 255);

  greenSlider.position(20, sliderY + 30);

  greenSlider.size(256);

  blueSlider = createSlider(0, 255, 255);

  blueSlider.position(20, sliderY + 60);

  blueSlider.size(256);

}

​

function draw() {

  push();

  translate(0, 170); // Center Utility

​

  // Get values from sliders

  var r = redSlider.value();

  var g = greenSlider.value();

  var b = blueSlider.value();

​

  // Set the color of the background 

  var textX = 290;

  background(180);

  push();

  fill(255, 0, 0);

  text("red", textX, 35);

  fill(0, 255, 0);

  text("green", textX, 65);

  fill(0, 0, 255);

  text("blue", textX, 95);

​

  // Create color boxes

  push();

  translate(20, 130);

  var size = 30;

  textSize(20);

  fill(r, 0, 0);

  rect(0, 0, size, size);

  fill(0, g, 0);

  rect(60, 0, size, size);

  fill(0, 0, b);

  rect(120, 0, size, size);

  fill(r, g, b);

  rect(180, 0, size, size);

  fill(0);

  text("+", 40, 22)

  text("+", 100, 22)

  text("=", 160, 22)

  textSize(15);

  textAlign(CENTER);

  text(r, 15, 50)

  text(g, 75, 50)

  text(b, 135, 50)

  textAlign(LEFT);

  var colorText = "(" + r + ", " + g + ", " + b + ")";

  text(colorText, 180, 50)

  pop();

​

  // Display additive color Venn diagram

  push();

  fill(0);

  noStroke();

  translate(360, 0);

  rect(0, 20, 160, 160);

  blendMode(ADD);

  translate(80, 105);

  var nColors = 3;

  var rgb = [color(r, 0, 0), color(0, g, 0), color(0, 0, b)];

  for (var i = 0; i < nColors; i++) {

    var position = p5.Vector.fromAngle(i / nColors * TWO_PI - PI / 2);

    position.mult(26);

    fill(rgb[i]);

    ellipse(position.x, position.y, 90, 90);

  }

  pop();

  pop();

}