let canvasHeight = 800;

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  strokeWeight(2);

}

​

function draw() {

  background(255);

  for (let i = 0; i < 6; i++) {

    push();

    translate(0, i * canvasHeight / 6);

    drawPart(i);

    pop();

  }

}

​

function drawPart(partNum) {

  let color1, color2, shape, line1, line2;

  switch (partNum) {

    case 0:

      color1 = color(255, 0, 0);

      color2 = color(0, 0, 255);

      shape = drawCircle;

      line1 = drawHLines;

      line2 = drawVLines;

      break;

    case 1:

      color1 = color(255, 255, 0);

      color2 = color(255, 0, 0);

      shape = drawSquare;

      line1 = drawHLines;

      line2 = drawVLines;

      break;

    case 2:

      color1 = color(0, 0, 255);

      color2 = color(255, 255, 0);

      shape = drawTriangle;

      line1 = drawHLines;

      line2 = drawVLines;

      break;

    case 3:

      color1 = color(255, 0, 0);

      color2 = color(255, 255, 0);

      shape = drawRectangle;

      line1 = drawHLines;

      line2 = drawVLines;

      break;

    case 4:

      color1 = color(255, 255, 0);

      color2 = color(0, 0, 255);

      shape = drawTrapezoid;

      line1 = drawHLines;

      line2 = drawVLines;

      break;

    case 5:

      color1 = color(0, 0, 255);

      color2 = color(255, 0, 0);

      shape = drawParallelogram;

      line1 = drawHLines;

      line2 = drawVLines;

      break;

  }

  stroke(color1);

  line1();

  stroke(color2);

  line2();

  shape();

}

​

function drawCircle() {

  fill(255, 255, 0);

  ellipse(canvasWidth / 2, canvasHeight / 12, canvasHeight / 6 - 20, canvasHeight / 6 - 20);

}

​

function drawSquare() {

  fill(0, 0, 255);

  rect(canvasWidth / 2 - canvasHeight / 12 + 10, canvasHeight / 12 + 10, canvasHeight / 6 - 20, canvasHeight / 6 - 20);

}

​

function drawTriangle() {

  fill(255, 0, 0);

  let x1 = canvasWidth / 2 - canvasHeight / 12 + 10;

  let x2 = canvasWidth / 2 + canvasHeight / 12 - 10;

  let y = canvasHeight / 12 + canvasHeight / 6 - 10;

  triangle(x1, y, canvasWidth / 2, canvasHeight / 12, x2, y);

}

​

function drawRectangle() {

  fill(0, 0, 255);

  rect(canvasWidth / 2 - canvasHeight / 12 + 10, canvasHeight / 12 + 10, canvasHeight / 6 - 20, canvasHeight / 6 - 20);

}

​

  function drawTrapezoid() {

  fill(255, 0, 0);

  let x1 = canvasWidth / 2 - canvasHeight / 12 + 10;

  let x2 = canvasWidth / 2 + canvasHeight / 12 - 10;

  let y1 = canvasHeight / 12 + 10;

  let y2 = canvasHeight / 12 + canvasHeight / 6 - 10;

  quad(x1, y1, x2, y1, x2 + (x2 - x1) / 2, y2, x1 - (x2 - x1) / 2, y2);

}

​

function drawParallelogram() {

  fill(255, 255, 0);

  let x1 = canvasWidth / 2 - canvasHeight / 12 + 10;

  let x2 = canvasWidth / 2 + canvasHeight / 12 - 10;

  let y = canvasHeight / 12 + canvasHeight / 6 - 10;

  quad(x1, y, x2, y, x2 + (x2 - x1) / 2, canvasHeight / 12, x1 - (x2 - x1) / 2, canvasHeight / 12);

}

​

function drawHLines() {

  for (let i = canvasHeight / 12; i < canvasHeight / 2; i += canvasHeight / 12) {

    line(0, i, canvasWidth, i);

  }

}

​

function drawVLines() {

  for (let i = canvasWidth / 4; i < canvasWidth; i += canvasWidth / 4) {

    line(i, canvasHeight / 12, i, canvasHeight / 12 + canvasHeight / 6 - 20);

  }

}

​