// James Brink, 6/8/2020

//  testColors

function setup() {
  can = createCanvasClass(200, 400);
  can.parent("p5");
  can.background(240);
  can.strokeWeight(4);

  can.noStroke();
  can.fill(170);
  can.text("1 number", 60, 20);
  can.stroke(80);
  can.rect(10, 10, 40, 20);
  can.noFill();
  can.rect(130, 10, 40, 20);
  
  can.noStroke();
  can.fill(170, 0, 0);
  can.text("3 numbers", 60, 60);
  can.stroke(0, 200, 0);
  can.rect(10, 60, 40, 20);
  can.noFill();
  can.rect(130, 60, 40, 20);

  can.noStroke();
  can.fill('blue');
  can.text("names", 60, 110);
  can.stroke('purple');
  can.rect(10, 110, 40, 20);
  can.noFill();
  can.rect(130, 110, 40, 20);
  
  can.noStroke();
  can.fill('rgb(0, 0, 200)');
  can.text("rgb w/numbers & %", 60, 145);
  can.stroke('rgb(100%, 0%, 0%)');
  can.rect(10, 150, 40, 20);
  can.noFill();
  can.rect(130, 150, 40, 20);
  
  can.fill(200, 200, 200, 255);
  can.rect(3, 180, 194, 35);
  can.stroke(0, 0, 200, 255);
  for (let i = 10; i < 180; i += 20) {
     can.line(i, 180, i +10, 205);
  }
  can.noStroke();
  can.fill(220, 20, 60, 192);
  can.text("4 numbers", 60, 190);
  can.stroke(0, 200, 0, 60);
  can.rect(10, 190, 40, 20);
  can.noFill();
  can.rect(130, 190, 40, 20);
  
  can.noStroke();
  can.fill('#941');
  can.text("Hex (3 & 6 digits)", 60, 225);
  can.stroke('#00FFFF');
  can.rect(10, 230, 40, 20);
  can.noFill();
  can.rect(130, 230, 40, 20);

  can.noStroke();
  can.fill('hsl(160, 100%, 50%)');
  can.text("hsl w &w/o transperancy", 60, 265);
  can.stroke('hsla(180, 100%, 50%, 0.5)');
  can.rect(10, 270, 40, 20);
  can.noFill();
  can.rect(130, 270, 40, 20);
  
  can.noStroke();
  can.fill('hsb(160, 100%, 50%)');
  can.text("hsa w &w/o transperancy", 60, 305);
  can.stroke('hsba(160, 100%, 50%, 0.5)');
  can.rect(10, 310, 40, 20);
  can.noFill();
  can.rect(130, 310, 40, 20);

  can.colorMode(HSB, 100);
  can.noStroke();
  can.fill(55, 55, 100);
  can.text("HSB", 60, 350);
  can.stroke(100, 55, 55);
  can.rect(10, 350, 40, 20);
  can.noFill();
  can.rect(130, 350, 40, 20);
  can.colorMode(RGB, 255);
  
  can2 = createCanvasClass(100, 100);
  can2.parent("p5");
  can2.background('#00FFFF');
  can2.text('#00FFFF', 10, 10);
  
  can3 = createCanvasClass(100, 100);
  can3.parent("p5");  can3.background(200, 0, 250);
  can3.text("200, 0, 250", 10, 10);

} // setup