createCanvas(400, 400);

  background(0);

​

  stroke(150);

  strokeWeight(0.5);

​

  let gridSize = 10;

  let spacing = width / gridSize;

  // 그리드 라인 그리기

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

    line(i * spacing, 0, i * spacing, height); // 세로 라인

    line(0, i * spacing, width, i * spacing); // 가로 라인

  }

​

  // 교차점 좌표 저장 (39픽셀 경계 안에 들어가지 않는 좌표만 저장)

  let points = [];

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

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

      let x = i * spacing;

      let y = j * spacing;

​

      // 39픽셀 경계 안에 들어가는 좌표는 제외

      if (x >= 40 && x <= width - 40 && y >= 40 && y <= height - 40) {

        points.push([x, y]);

      }

    }

  }

​

  // 5개의 랜덤 점 선택

  let selectedPoints = [];

  while (selectedPoints.length < 4) {

    let randomIndex = floor(random(points.length));

    let randomPoint = points[randomIndex];

    if (!selectedPoints.includes(randomPoint)) {

      selectedPoints.push(randomPoint);

    }

  }

​

  // 점을 잇는 선 그리기

  strokeWeight(2);

  let randomColor = color(random(255), random(255), random(255));

  stroke(randomColor);

  fill(randomColor.levels[0], randomColor.levels[1], randomColor.levels[2], 127); // 50% opacity

​

  beginShape();

  for (let i = 0; i < selectedPoints.length; i++) {

    vertex(selectedPoints[i][0], selectedPoints[i][1]);

  }

  endShape(CLOSE);

​

  // 흰 점 그리기 (선 위에 보이도록 마지막에 그림)

  stroke(255);

  strokeWeight(6);

  for (let i = 0; i < selectedPoints.length; i++) {

    point(selectedPoints[i][0], selectedPoints[i][1]);

  }

}