​

// Josef Albers, Concentric Squares, watercolour on screened, brown paper, 1941

​

function setup() {

  createCanvas(700, 700);

  strokeCap(SQUARE);

  noLoop();

}

​

function draw() {

  bg();

  squares();

  polygons();

}

​

// Background function

function bg() {

  // Tan background

  background(217, 191, 134);

  rectMode(RADIUS);

  noStroke();

  // orange-coloured overlay

  fill(255, 190, 110, 80);

  rect(width / 2, height / 2, 350, 350);

  // DRAW GRIDS

  for (let i = 0; i <= width; i += 10) {

    stroke(213, 179, 135);

    line(0, i, width, i);

    line(i, 0, i, height);

  }

​

  for (let i = 40; i <= width; i += 100) {

    stroke(220, 145, 100);

    line(0, i, width, i); // horizontal

    line(i, 0, i, height); // vertical

  }

}

​

// Concurrent squares

function squares() {

  let a = 0; // starting point

  let l = 250; // height

  let w = 190; // width

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

    push();

    stroke(0);

    translate(-10, -10);

    push();

    translate(220, 150);

    a += 20;

    strokeWeight(1);

    line(a, a, w, a); // top

    line(a, a, a, l); // left

    strokeWeight(3);

    line(w, a + 1, w, l); // right

    line(a + 1, l, w, l); // bottom

    pop();

  }

}

​

// Concurrent polygons

function polygons() {

  translate(280, 140);

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

    translate(-10, 10);

    push();

    strokeWeight(1);

    line(0, 0, 260, 0); // A

    line(260, 0, 260, 60);

    strokeWeight(3);

    line(260, 60, 380, 60);

    strokeWeight(1);

    line(380, 60, 380, 460);

    strokeWeight(3);

    line(380, 460, 120, 460);

    strokeWeight(1);

    line(120, 460, 120, 390);

    strokeWeight(3);

    line(120, 390, -70, 390);

    strokeWeight(1);

    line(-70, 390, -70, 130);

    line(-70, 130, 310, 130);

    strokeWeight(3);

    line(310, 130, 310, 440 - i * 20); // this line gets smaller every iteration

    strokeWeight(1);

    line(310, 440 - i * 20, 190, 440 - i * 20);

    strokeWeight(3);

    line(190, 440 - i * 20, 190, 320); // this line gets smaller too

    strokeWeight(1);

    line(190, 320, 0, 320);

    strokeWeight(3);

    line(0, 320, 0, 0);

    pop();

  }

}

​