2 Colors from 1 Starter

// 2 colors from 1: to make the same foreground color look like two different colors

// (2 small squares of the same color are placed against backgrounds of very different colors,

// making it look as though there are 4 colors when in fact there are only 3)

​

function setup() {

  createCanvas(600, 400);

  rectMode(CENTER);

}

​

function draw() {

  background(200);

  // Insert two squares of the same color,

  // equidistant from the center, and centered 

  // vertically

  // Left-side shapes

  rect(150, 200, 300, 400); //Background

  rect(100, 200, 100);  // Foreground

  // Right-side Shapes

  rect(150, 200, 300, 400); //Background

  rect(100, 200, 100);  // Foreground

​

  describe(

    `A p5.js sketch, with a canvas in the shape of a wide rectangle that is 

            split down the center into two rectangles. The left side has a COLOR background.

            The right side has a COLOR background. Each side has a square about one third

            of the way horizontally from the edges of the canvas, vertically centered. The squares,

            although the same color, appear to be different colors due to their surrounding background

            colors. Hence "4 Colors from 3"`,

    LABEL

  );

}