let num = 18; // 그리드 개수

let rectSize = 50; // 큰 사각형 크기

let smallRectSize = 2; // 작은 빨간 사각형 크기

let offsetX, offsetY;

​

function setup() {

  createCanvas(900, 900);

  offsetX = rectSize / 2; // 마우스 중앙의 위치 보정

  offsetY = rectSize / 2;

}

​

function draw() {

  updateBackground(); // 배경 색상 업데이트

  drawGrid(); // 그리드와 빨간 사각형 그리기

}

​

// 노이즈 기반의 배경 업데이트

function updateBackground() {

  let r = noise(noiseOffset) * 255;

  let g = noise(noiseOffset + 100) * 255;

  let b = noise(noiseOffset + 200) * 255;

​

  background(r, g, b, 10); // 약간 투명한 배경

  noiseOffset += 0.01;

}

​

// 그리드와 각 사각형을 그리는 함수

function drawGrid() {

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

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

      let x = i * rectSize;

      let y = j * rectSize;

​

      // 큰 사각형 그리기

      fill(200);

      rect(x, y, rectSize, rectSize);

​

      // 그리드 내부의 빨간 사각형을 마우스의 상대적인 움직임에 따라 위치 변경

      let redX = constrain(map(mouseX, x, x + rectSize, x, x + rectSize - smallRectSize), x, x + rectSize - smallRectSize);

      let redY = constrain(map(mouseY, y, y + rectSize, y, y + rectSize - smallRectSize), y, y + rectSize - smallRectSize);

​

      fill(255, 0, 0); // 빨간색

      rect(redX, redY, smallRectSize, smallRectSize);

    }

  }

​

  // 마우스 중앙의 5x5 사각형 그리기

  fill(100);

  rect(mouseX - offsetX, mouseY - offsetY, rectSize, rectSize);

}