let r = 0;

let gap = 0;

let gap1 = 0;

let s = 50;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  noStroke();

}

​

function draw() {

  background(0);

  fill(255);

​

  translate(0, 0);

  rotate(r);

​

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

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

​

      //lower arc

      arc(i * s * 2 + gap1, j * s * 2 + gap, s, s, 0, 90);

      arc(i * s * 2 + gap1 * -1, j * s * 2 + gap, s, s, 90, 180);

​

      //higher arc

      arc(i * s * 2 + gap1 * -1, j * s * 2 + gap * -1, s, s, 180, 270);

      arc(i * s * 2 + gap1, j * s * 2 + gap * -1, s, s, 270, 360);

    }

  }

​

  switch (num) {

​

    case 0:

      if (gap < 5) {

        gap++;

      }

​

      break;

​

    case 1:

​

      if (gap > 0) {

        gap--;

      }

​

      if (gap == 0) {

        if (gap1 < 5) {

          gap1++;

        }

      }

​

      break;

  }

​

}

​

function mousePressed() {

  num++;

  if (num > 1) { // reset variables to their default values when num is greater than 1

    num = 0;

    r = 0;

    gap = 0;

    gap1 = 0;

    s = 50;

  }

}