let spacing; //space px between grid lines

let points = []; //point coordinating

let selectedPoints = [];

let pointCount = 4; // 점의 개수 num of point

​

function setup() {

  createCanvas(400, 400);

  spacing = width / grid; //space px between grid lines

  drawSketch(); // starting sketch

}

​

function drawSketch() {

  background(0); //black bg

  stroke(150); //grid line color

  strokeWeight(0.5);

​

  // drawing grid lines

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

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

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

  }

​

  // defining point coordinate (not in surrounding 40px)

  points = [];

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

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

      let x = i * spacing;

      let y = j * spacing;

​

      // excluding the coordinates that fall within the 40px boundary

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

        points.push([x, y]);

      }

    }

  }

​

  // selecting the random points

  selectedPoints = [];

  while (selectedPoints.length < pointCount) {

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

    let randomPoint = points[randomIndex];

    if (!selectedPoints.includes(randomPoint)) {

      selectedPoints.push(randomPoint);

    }

  }

​

  // draw lines that connects the randomly created dots

  strokeWeight(2);

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

  stroke(randomColor);

  fill(

    randomColor.levels[0],

    randomColor.levels[1],

    randomColor.levels[2],

    127 // 50% opacity (255%2)

  );

​

  beginShape();

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

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

  }

  endShape(CLOSE);

​

  // draw the points with white dots

  stroke(255);

  strokeWeight(7);

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

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

  }

​

  // drawing buttons

  drawButtons();

}

​

function drawButtons() {

  stroke(255);

  strokeWeight(1.5);

  fill(0);

​

  let centerX = width / 2;

​

  // - button

  rect(centerX - 55, height - 35, 30, 30); // - button outline

  line(centerX - 45, height - 20, centerX - 35, height - 20); // - hor

​

  // + button

  rect(centerX + 25, height - 35, 30, 30); // + button outline

  line(centerX + 35, height - 20, centerX + 45, height - 20); // + hor

  line(centerX + 40, height - 25, centerX + 40, height - 15); // + ver

​

  // current num of dots

  textSize(24);

  fill(255);

  textAlign(CENTER, CENTER);

  text(pointCount, centerX, height - 35 + 15);

}

​

function mousePressed() {

  let centerX = width / 2;

​

  // if you click the - button

  if (

    mouseX > centerX - 55 &&

    mouseX < centerX - 25 &&

    mouseY > height - 35 &&

    mouseY < height - 5

  ) {

    if (pointCount > 3) {

      pointCount--;

      drawSketch(); // start drawing new sketch

    }

  }

​

  // if you click the + button

  else if (

    mouseX > centerX + 25 &&

    mouseX < centerX + 55 &&

    mouseY > height - 35 &&

    mouseY < height - 5

  ) {

    if (pointCount < 20) {

      pointCount++;

      drawSketch(); // start drawing new sketch

    }

  }

​

  // make new sketch when you click outside the button area

  else {

    drawSketch(); // new random sketch

  }

}

​