return n >= 0 ? n % m : (n % m + m) % m

}

​

function setup() {

  let screenWidth = 800;

  let screenHeight = 600;

  createCanvas(screenWidth, screenHeight);

​

  // Hue (0-360), Saturation (0-100), Luminosity/Brightness (0-100), Transparency (0-100)

  colorMode(HSL, 360, 100, 100, 100);

  // Set Background Color to something neutral

  background(180,10,90); // cyan, low saturation, high luminosity

  stroke(180,10,90); // shape outlines same as background color

  strokeWeight(screenWidth/10);

  // Fix P5 Coordinates, put 0,0 in lower left.

  translate(0, screenHeight); scale(1, -1);

  let randomHue = random(0, 360);

  let firstColor = wrap(360, randomHue)

  let secondColor = wrap(360, randomHue + 120)

  let thirdColor = wrap(360, randomHue + 240)

  let classySaturation = 30; // out of 100

  let classyLuminosity = 75; // out of 100, dark (10) is not that pretty

  // Tile Placement

  let thirdOfScreen = screenWidth/3;

  fill(firstColor, classySaturation, classyLuminosity, 100);

  rect(0, 0, width, screenHeight);

  fill(secondColor, classySaturation, classyLuminosity, 100);

  rect(thirdOfScreen, 0, thirdOfScreen, screenHeight);

  fill(thirdColor, classySaturation, classyLuminosity, 100);

  rect(thirdOfScreen*2, 0, thirdOfScreen, screenHeight);

  // ellipse

  let bufferZone = screenWidth/4;

  strokeWeight(screenWidth/30);

​

  fill(firstColor, classySaturation, classyLuminosity, 50);

  ellipse(random(bufferZone,screenWidth-bufferZone),random(bufferZone,screenHeight-bufferZone), thirdOfScreen)

  fill(secondColor, classySaturation, classyLuminosity, 50);

  ellipse(random(bufferZone,screenWidth-bufferZone),random(bufferZone,screenHeight-bufferZone), thirdOfScreen/3)

​

}

​

​

​