//  colorTest
// James Brink, 6/8/2020

function setup() {


  can1 = createCanvasClass(100, 100);
  can1.colorMode(RGB, 100);
  for (let i = 0; i < 100; i++) {
    for (let j = 0; j < 100; j++) {
      can1.stroke(i, j, 0);
      can1.point(i, j);
    }
  }
  can1.fill(100);
  can1.noStroke();
  can1.text("test RGB", 10, 12);

  can2 = createCanvasClass(100, 100);
  can2.colorMode(HSB, 100);
  for (let i = 0; i < 100; i++) {
    for (let j = 0; j < 100; j++) {
      can2.stroke(i, j, 100);
      can2.point(i, j);
    }
  }
  can2.fill(100, 0, 0);
  can2.noStroke();
  can2.text("test HSB", 10, 12);
  
  can3 = createCanvasClass(100, 100);
  can3.colorMode(RGB, 255);
  let c = can3.color(127, 255, 0);
  can3.colorMode(RGB, 1);
  let myColor = c._getRed();
  can3.text(myColor, 10, 13);
  can3.text("test RGB", 10, 30);

  can4 = createCanvasClass(100, 100);
  can4.colorMode(RGB, 255, 255, 255, 1);
  can4.background(255);
  can4.noFill();
  can4.strokeWeight(4);
  can4.stroke(255, 0, 10, .3);
  can4.ellipse(40, 40, 50, 50);
  can4.ellipse(50, 50, 40, 40);
  can4.noStroke();
  can4.fill(0);
  can4.text("test RGB", 10, 90);
  
  can5 = createCanvasClass(100, 100);
  can5.colorMode(HSL);
  can5.noStroke();
  
  let baseHue = random(240, 300); 
  let change = random(5, 30); //determining the colour scheme
  
  can5.background(baseHue, 100, 50);
  
  can5.fill(baseHue+change, 100-change, 50-change); //the fill increases by 30 degrees so make a code for it.
  can5.ellipse(width/2, height/2, 20, 20);
  
  can5.translate(20, 20);
  can5.fill(baseHue+(change*2), 100, 50-(change*2));
  can5.ellipse(width/2, height/2, 20, 20);
  
  can5.translate(-40,0);
  can5.fill(baseHue+(change*3), 100, 50-(change*3));
  can5.ellipse(width/2, height/2, 20, 20);
  can5.fill(baseHue+(change*4, 100, 50-change*4));
  can5.text("Test HSL", 30, 0);
  
  can6 = createCanvasClass(280, 100);
  can6.background(210);
  {  // localize variables
    let c = color(175, 100, 220); // Define color 'c'
    can6.fill(c); // Use color variable 'c' as fill color
    can6.rect(15, 20, 35, 60); // Draw left rectangle
    let blueValue = can6.blue(c); // Get blue in 'c'
    can6.fill(0, 0, blueValue); // Use 'blueValue' in new fill
    can6.rect(50, 20, 35, 60); // Draw 2nd rectangle
    let greenValue = can6.green(c); // Get green in 'c'
    can6.fill(0, greenValue, 0); // Use 'greenValue' in new fill
    can6.rect(85, 20, 35, 60); // Draw 3rd rectangle
    let redValue = can6.red(c); // Get red in 'c'
    can6.fill(redValue, 0, 0); // Use 'redValue' in new fill
    can6.rect(120, 20, 35, 60); // Draw 4th rectangle
    can6.colorMode(HSB, 255);
    c = can6.color(0, 126, 255);
    let brightValue = brightness(c); // Sets 'value' to 255
    let hueValue = hue(c); // Sets 'value' to "0"
    let satValue = saturation(c); // Sets 'value' to 126
    can6.fill(brightValue);
    can6.rect(155, 20, 35, 60); // draw 5th rectangle
    can6.fill(hueValue);
    can6.rect(190, 20, 35, 60);  // draw 6th rectangle
    can6.fill(satValue);
    can6.rect(225, 20, 35, 60);  // draw 7th rectangle

    // test lerp
    let a = 20;
    let b = 80;
    let cc = lerp(a, b, 0.2);
    let dd = lerp(a, b, 0.5);
    let ee = lerp(a, b, 0.8);

    let y = 90;

    can6.strokeWeight(5);
    can6.stroke(0); // Draw the original points in black
    can6.point(a, y);
    can6.point(b, y);

    can6.stroke(100); // Draw the lerp points in gray
    can6.point(cc, y);
    can6.point(dd, y);
    can6.point(ee, y);
    can6.colorMode(RGB);
    can6.fill("black");
    can6.noStroke();
    can6.text("<-- lerp test", 100, 93);
    can6.text("testing   blue   green  red     bright  hue    satur", 8, 14);
    can6.text(blueValue + "    " + greenValue + "     " + redValue
          + "     " + brightValue + "        " + round(hueValue) + "      "
          + satValue, 54, 40);
    can6.fill("white");
    can6.text(round(hueValue), 200, 40);
  }
  
  p5canvas = createCanvas(100, 100);
} // setup

function draw() {

}  // draw