// 作品画像のPaths. 正方形サイズ推奨(長方形でもイケる)。

const worksImgsPaths = ['./day-7.png', './day-9.png', './day-15.png', './day-19.jpg'];

​

const W = 1080;

​

const worksImgs = [];

​

function preload() {

  worksImgsPaths.forEach((imgPath) => {

    if (imgPath) {

      worksImgs.push(loadImage(imgPath));

    } else {

      worksImgs.push(undefined);

    }

  });

}

​

function setup() {

  createCanvas(W, W);

  textFont('Noto Sans');

  noStroke();

}

​

function draw() {

  drawWorks();

  drawText();

  drawFrame();

  stroke('red');

  strokeWeight(3);

  line(W/2 + 110, W/2 + W/5.3, W/2+310, W/2 + W/5.3)

  noLoop();

}

​

const drawText = () => {

  worksImgs.forEach((img, i) => {

    push();

    {

      const rectWidth = 220;

      const rectHeight = 80;

      // stroke(30);

      strokeWeight(sW);

      // rect(W/2-rectWidth, 0, rectWidth, rectHeight)

      rect((((i % 2) + 1) * W) / 2 - rectWidth, (floor(i / 2) * W) / 2, rectWidth, rectHeight);

​

      textSize(50);

      textAlign(RIGHT);

      const txt = ['Day-07', 'Day-09', 'Day-15', 'Day-19'];

      text(txt[i], (((i % 2) + 1) * W) / 2 - 27, (floor(i / 2) * W) / 2 + 60);

    }

    pop();

  });

​

};

​

const drawWorks = () => {

  worksImgs.forEach((img, i) => {

    if (img) {

      image(img, ((i % 2) * W) / 2, (floor(i / 2) * W) / 2, W / 2, W / 2);

    }

  });

};

​

const sW = 10;

const drawFrame = () => {

  push();

  {

    noFill();

    stroke(30);

    strokeWeight(sW);

    drawSquares();

  }

  pop();

};

​

const drawSquares = () => {

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

    square(((i % 2) * W) / 2, (floor(i / 2) * W) / 2, W / 2);

  }

  square(sW / 2, sW / 2, W - sW);

};

​