let bg1, bg2, fg;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100);

  rectMode(CENTER);

  noStroke();

  bg1 = 330;

  bg2 = 383;

  calcfg(); 

}

​

// Calculate foreground hue to be

// in between the background hues

function calcfg(){

  fg = (bg1 + bg2) / 2;

}

​

function draw() {

  // Move the backgrounds and foregrounds

  bg1+=0.1;

  bg2+=0.1;

  calcfg();

  // Background top

  fill(bg1%360, 54, 36);

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

  // Background bottom

  fill(bg2%360, 66, 31);

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

  // Foreground top

  fill(fg%360, 46, 34);

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

  // Foreground bottom

  fill(fg%360, 46, 34);

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

​

}