1 Color from 2 Starter

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

// (2 small diamonds of different colors are placed against 2 different backgrounds 

// carefully chosen to make the 2 small squares look identical in color, 

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

​

function setup() {

  createCanvas(600, 400);

  rectMode(CENTER);

  angleMode(DEGREES);

}

​

function draw() {

  background(200);

​

  // Insert two diamonds of different colors,

  // but that look like the same color,

  // equidistant from the center, and centered

  // vertically

​

  // Left-Side Shapes

  push();

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

  translate(175, 200);

  rotate(45);

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

  pop();

​

  // Right-Side Shapes

  push();

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

  translate(175, 200);

  rotate(45);

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

  pop();

​

  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 diamond about one third

            of the way horizontally from the center of the canvas, vertically centered. The diamonds,

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

            colors. Hence "3 Colors from 4"`,

    LABEL

  );

}