edX_Week_4_1

// BS_007: edX_Week_4_1

// Left:  HSB colors: X: Hue, Y: Saturation, frameCount%100: Brightness

// Right: Top:    Rectangle with color under mouse

//        Bottom: Rectangle with complementary color

​

let bright = 100;                                   // Brightness in HSB

​

function setup() 

{

  createCanvas(1080, 600);

  background(150);

  colorMode(HSB);                                   // https://p5js.org/reference/#/p5/colorMode

  noStroke();

}

​

function draw() 

{

  for (let hue=0; hue<360; hue++)                   // Hue in HSB

  {

    for (sat=0; sat<100; sat++)                     // Saturation in HSB

    {

      fill(hue, sat, bright);

      rect(hue*2, sat*6, 2, 6);

    }

  }

  let hu = mouseX/2;

  let sa = mouseY/6;

  let br = bright;

  if (hu>360 || sa>100) br=0;                       // Mouse outside color grid

  fill(hu, sa, br);                                 // Color of pixel under mouse

  rect(760, 40, 280, 245);

  let huComplementary = (hu+180) % 360;             // Calc complementary hue

  fill(huComplementary, sa, br);                    // Complementary color of pixel under mouse

  rect(760, 325, 280, 245);

  bright--; if (bright<0) bright = 100;             // Adapt brightness component

}