createCanvas(600, 600);

  noLoop();

}

​

function draw() {

  background(220);

  // Divide the canvas into 6 parts

  let partWidth = width / 3;

  let partHeight = height / 2;

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

    for (let j = 0; j < 2; j++) {

      drawPart(i * partWidth, j * partHeight, partWidth, partHeight, i + j * 3 + 1);

    }

  }

}

​

function drawPart(x, y, w, h, part) {

  switch (part) {

    case 1:

      drawBackground(x, y, w, h, 'red', 'blue');

      drawCircle(x + w / 2, y + h / 2, w / 2, 'yellow');

      break;

    case 2:

      drawBackground(x, y, w, h, 'yellow', 'red');

      drawSquare(x + w / 2, y + h / 2, w / 2, 'blue');

      break;

    case 3:

      drawBackground(x, y, w, h, 'blue', 'yellow');

      drawTriangle(x + w / 2, y + h / 2, w / 2, 'red');

      break;

    case 4:

      drawBackground(x, y, w, h, 'red', 'yellow');

      drawRectangle(x + w / 2, y + h / 2, w / 2, h / 3, 'blue');

      break;

    case 5:

      drawBackground(x, y, w, h, 'yellow', 'blue');

      drawTrapezoid(x + w / 2, y + h / 2, w / 2, h / 3, 'red');

      break;

    case 6:

      drawBackground(x, y, w, h, 'blue', 'red');

      drawParallelogram(x + w / 2, y + h / 2, w / 2, h / 3, 'yellow');

      break;

  }

}

​

function drawBackground(x, y, w, h, bgColor, lineColor) {

  fill(bgColor);

  noStroke();

  rect(x, y, w, h);

  stroke(lineColor);

  for (let i = y + 10; i < y + h; i += 10) {

    line(x, i, x + w, i);

  }

}

​

function drawCircle(cx, cy, r, lineColor) {

  noFill();

  stroke(lineColor);

  ellipse(cx, cy, r * 2);

  for (let i = cx - r + 10; i < cx + r; i += 10) {

    line(i, cy - sqrt(r * r - (i - cx) * (i - cx)), i, cy + sqrt(r * r - (i - cx) * (i - cx)));

  }

}

​

function drawSquare(cx, cy, s, lineColor) {

  noFill();

  stroke(lineColor);

  rect(cx - s / 2, cy - s / 2, s);

  for (let i = cx - s / 2 + 10; i < cx + s / 2; i += 10) {

    line(i, cy - s / 2, i, cy + s / 2);

  }

}

​

function drawTriangle(cx, cy, s, lineColor) {

  noFill();

  stroke(lineColor);

  beginShape();

  vertex(cx, cy - s / sqrt(3));

  vertex(cx - s / 2, cy + s / (2 * sqrt(3)));

  vertex(cx + s / 2, cy + s / (2 * sqrt(3)));

  endShape(CLOSE);

  for (let i = cx - s / 2 + 10; i < cx + s / 2; i += 10) {

    let startY = cy + (i - cx) / sqrt(3);

    let endY = cy + s / (2 * sqrt(3));

    line(i, startY, i, endY);

  }

}

​

function drawRectangle(cx, cy, w, h, lineColor) {

  noFill();

  stroke(lineColor);

  rect(cx - w / 2, cy - h / 2, w, h);

  for (let i = cx - w / 2 + 10; i < cx + w / 2; i += 10) {

    line(i, cy - h / 2, i, cy + h / 2);

  }

}

​

function drawTrapezoid(cx, cy, b, h, lineColor) {

  noFill();

  stroke(lineColor);

  beginShape();

  vertex(cx - b / 2, cy - h / 2);

  vertex(cx + b / 2, cy - h / 2);

  vertex(cx + b / 4, cy + h / 2);

  vertex(cx - b / 4, cy + h / 2);

  endShape(CLOSE);

  for (let i = cx - b / 4 + 10; i < cx + b / 4; i += 10) {

    let startY = cy - h / 2 + (i - (cx - b / 4)) * h / (b / 2);

    line(i, startY, i, cy + h / 2);

  }

}

​

function drawParallelogram(cx, cy, b, h, lineColor) {

  noFill();

  stroke(lineColor);

  beginShape();

  vertex(cx - b / 2, cy - h / 2);

  vertex(cx, cy - h / 2);

  vertex(cx - b / 2, cy + h / 2);

  vertex(cx - b, cy + h / 2);

  endShape(CLOSE);

  for (let i = cx - b + 10; i < cx; i += 10) {

    let startY = cy - h / 2 + (i - (cx - b)) * h / b;

    line(i, startY, i, cy + h / 2);

  }

}

​