​

const RATIO = Math.sqrt(2); // DinA

​

const WIDTH = 400;

const HEIGHT = Math.floor(RATIO * WIDTH);

​

const PADDING = 50;

​

const SQUARE_SIZE = WIDTH - PADDING * 2;

​

const PADDING_TOP = (HEIGHT - SQUARE_SIZE) / 2;

​

const RECT_COUNT = 8;

​

const LINE_OFFSET = 20;

const LINE_COUNT = Math.floor(SQUARE_SIZE / LINE_OFFSET);

​

function setup() {

  createCanvas(WIDTH, HEIGHT, SVG);

  noLoop();

}

​

function draw() {

  background(230);

  stroke(0);

  strokeWeight(1);

  noFill();

​

  const startX = PADDING;

  const startY = HEIGHT - PADDING_TOP;

​

  console.log(LINE_COUNT);

​

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

    const size = map(i, 0, RECT_COUNT, SQUARE_SIZE, 0);

​

    // draw frame

    rect(startX, startY, size, size * -1);

​

    push();

​

    const currentLineCount = size / LINE_OFFSET;

​

    let isMiddle = false;

​

    // draw lines

​

    translate(PADDING, PADDING_TOP);

​

    const smallStartY = SQUARE_SIZE - size;

​

    // const lineOffset = LINE_OFFSET + map(i, 0, RECT_COUNT, 0, LINE_OFFSET);

​

    for (let l = 0; l <= currentLineCount * 2; l++) {

      let lineX1, lineY1, lineX2, lineY2, innerOffset;

​

      lineX1 = 0;

      lineY1 = smallStartY + LINE_OFFSET * l;

​

      lineX2 = 0 + LINE_OFFSET * l;

      lineY2 = smallStartY;

​

      if (lineX2 > size) {

        lineX1 = LINE_OFFSET * l - size;

        lineX2 = size;

      }

      if (lineY1 > size + smallStartY) {

        lineY2 = smallStartY + LINE_OFFSET * l - size;

        lineY1 = SQUARE_SIZE;

      }

​

      /*

       // translate(LINE_OFFSET, 0);

      // set back

      if (!isMiddle && l > currentLineCount) {

        // translate(l * LINE_OFFSET * -1, 0);

        isMiddle = true;

      }

      if (l < currentLineCount) {

        innerOffset = map(l + 1, 0, currentLineCount, size, 0);

​

        lineX1 = startX;

        lineY1 = startY - size;

​

        lineX2 = startX - size + innerOffset;

        lineY2 = startY - innerOffset;

      } else {

        innerOffset = map(l  , currentLineCount, currentLineCount * 2, 0, size);

​

        lineX1 = startX;

        lineY1 = startY;

​

        lineX2 = startX + size - innerOffset;

        lineY2 = startY - size + innerOffset;

      }

      */

​

      line(lineX1, lineY1, lineX2, lineY2);

    }

    pop();

  }

​

  // save("sphere.svg");

}

​