Recapping from the Color1<>Color2 page, this is currently the data being sent to p5 from IDE.

if (Serial.available() > 0) {
    int inByte = Serial.read();
  
    Serial.print(hu1);
    Serial.print(",");
    Serial.print(sat1);
    Serial.print(",");
    Serial.print(bright1);
    Serial.print(",");
    Serial.print(hu2);
    Serial.print(",");
    Serial.print(sat2);
    Serial.print(",");
    Serial.println(bright2);
  
  delay(100);
  }

The serial event also stayed the same.

function serialEvent() {
  inString = serial.readStringUntil("\\r\\n");
  if (inString != null) {
    console.log(inString);
    let colr = split(trim(inString), ",");
    console.log(colr);
    if (colr.length == 6) {
      hu1 = Number(colr[0]);
      sat1 = Number(colr[1]);
      bright1 = Number(colr[2]);
      hu2 = Number(colr[3]);
      sat2 = Number(colr[4]);
      bright2 = Number(colr[5]);
      serial.print("x");
    }
  }
}

However, instead of filling two rectangles, I applied the colors into a linear gradient. I used the same method of creating gradients that I learned from Easiest Gradient effect - p5.js tutorial by Kazuki Umeda.

function linearGradient(sX, sY, eX, eY, sColr, eColr) {
  let gradient = drawingContext.createLinearGradient(sX, sY, eX, eY);
  gradient.addColorStop(0, sColr);
  gradient.addColorStop(1, eColr);

  drawingContext.fillStyle = gradient;
}

linearGradient(
    0,
    height / 2,
    width,
    height / 2,
    color(hu1, sat1, bright1),
    color(hu2, sat2, bright2)
  );
  rect(0, 0, width, height);

I also added some slight tweaks, such as displaying a black to white gradient at the start and resizing the canvas to the window’s width and height.

Untitled

Screen Recording 2022-12-02 at 8.38.23 PM.mov