let bg1, bg2, fg;

​

function setup() {

  createCanvas(600, 600);

  colorMode(HSB, 360, 100, 100);

  rectMode(CENTER);

  noStroke();

  bg1 =330;

  bg2 = 0;

  fg = calcfg(); 

}

​

// Calculate foreground hue to be

// in between the background hues

function calcfg(){

  let angle1 = ((bg1 + bg2) / 2)%360;

  let angle2 = 360-30;

  if(angle1 > angle2) return angle2;

  else return angle1;

}

​

function draw() {

  // Move the backgrounds and foregrounds

  bg1+=0.1;

  bg2+=0.1;

  bg1%=360;

  bg2%=360;

  fg = calcfg();

  // Background top

  fill(bg1, 54, 36);

  rect(width/2, height / 4, width, height / 2);

  // Background bottom

  fill(bg2, 66, 31);

  rect(width/2, 3* height / 4, width, height / 2);

  // Foreground top

  fill(fg, 46, 34);

  rect(width/2, height/4, width / 6, height / 6);

  // Foreground bottom

  fill(fg, 46, 34);

  rect(width/2, 3*height / 4, width / 6, height / 6);  

​

}