if(windowWidth>1080 && windowHeight>1080) {

    createCanvas(1080, 1080);

  } else {

    createCanvas(windowWidth, windowHeight);

  }

  bg = 220;

  radius = 100;

}

​

function draw() {

  background(bg);

  //translate(width/2, height/2);

  //translate(radius+radius/5, radius*1.5+radius/5);

  //rotate(PI/2);

  for(k=0;k<5;k++) {

    push();

    translate(radius*2.3*k, radius*1.1*k);

    for(j=-2;j<5;j++) {

      push();

      translate(radius/10*j, radius*2.1*j);

      shape(radius/2+radius/20, 0, radius);

      scale(-1);

      shape(radius/2+radius/20, 0, radius);

      pop();

    }

    pop();

  }

  for(k=0;k<5;k++) {

    push();

    translate(2.3*radius*k, radius*1.1*k);

    for(j=-2;j<5;j++) {

      push();

      translate(radius/10*j, radius*2.1*j);

      pseudoShape(radius/2+radius/20, 0, radius);

      scale(-1);

      pseudoShape(radius/2+radius/20, 0, radius);

      pop();

    }

    pop();

  }

​

}

​

function shape(x, y, r) {

  fill(0);

  stroke(255);

  noStroke();

  ellipse(x, y-r, r); // r = 100

  rect(x-r/2, y-r, r/2, 2*r);

  fill(bg);

  ellipse(x, y+r, r);

  fill(0);

  ellipse(x, y, r);

  rect(x-r/2, y, r, -r);

  n=3;

  step=16;

  for(i=0;i<n;i++) {

    fill(bg+i*(255-bg)/n);

    ellipse(x, y, r/2-i*step);

    ellipse(x, y-r, r/2-i*step);

    rect(x-r/4+i*step*0.5, y-r, r/2-i*step, r);

  }

}

​

function pseudoShape(x, y, r) {

  fill(0);

  stroke(255);

  noStroke();

  ellipse(x, y-r, r); // r = 100

  fill(0);

  ellipse(x, y, r);

  rect(x-r/2, y, r, -r);

  n=3;

  step=16;

  for(i=0;i<n;i++) {

    fill(bg+i*(255-bg)/n);

    ellipse(x, y, r/2-i*step);

    ellipse(x, y-r, r/2-i*step);

    rect(x-r/4+i*step*0.5, y-r, r/2-i*step, r);

  }

}