Color Context and Relativity

let leftBgColor, rightBgColor, leftDiamondColor, rightDiamondColor;

let leftBgSlider, rightBgSlider, leftDiamondSlider, rightDiamondSlider;

​

function setup() {

  createCanvas(600, 400);

  rectMode(CENTER);

  angleMode(DEGREES);

  colorMode(HSB, 360, 100, 100);

​

  // Initialize color variables with default HSB values

  leftBgColor = color(225, 90, 22);

  rightBgColor = color(50, 87, 96);

  leftDiamondColor = color(210, 25, 22);

  rightDiamondColor = color(150, 20, 29);

​

  // Create sliders for each color

  leftBgSlider = createSlider(0, 360, leftBgColor._getHue());

  leftBgSlider.position(20, 420);

  rightBgSlider = createSlider(0, 360, rightBgColor._getHue());

  rightBgSlider.position(20, 450);

  leftDiamondSlider = createSlider(0, 360, leftDiamondColor._getHue());

  leftDiamondSlider.position(20, 480);

  rightDiamondSlider = createSlider(0, 360, rightDiamondColor._getHue());

  rightDiamondSlider.position(20, 510);

}

​

function draw() {

  // Update color values based on slider positions

  leftBgColor = color(leftBgSlider.value(), 90, 22);

  rightBgColor = color(rightBgSlider.value(), 87, 96);

  leftDiamondColor = color(leftDiamondSlider.value(), 25, 22);

  rightDiamondColor = color(rightDiamondSlider.value(), 20, 29);

​

  background(255);

  noStroke();

​

  // Left-side rectangle

  fill(leftBgColor);

  rect(150, 200, 300, 400);

​

  // Right-side rectangle

  fill(rightBgColor);

  rect(450, 200, 300, 400);

​

  // Left-Side Diamond

  push();

  translate(175, 200);

  rotate(45);

  fill(leftDiamondColor);

  rect(0, 0, 100);

  pop();

​

  // Right-Side Diamond

  push();

  translate(width - 175, 200);

  rotate(45);

  fill(rightDiamondColor);

  rect(0, 0, 100);

  pop();

​

  // Slider labels with current values

  fill(0);

  textSize(12);

  text(`Left BG Hue: ${leftBgSlider.value()}`, 180, 435);

  text(`Right BG Hue: ${rightBgSlider.value()}`, 180, 465);

  text(`Left Diamond Hue: ${leftDiamondSlider.value()}`, 180, 495);

  text(`Right Diamond Hue: ${rightDiamondSlider.value()}`, 180, 525);

​

  // description omitted for brevity

}