🌟 p5.js의 map() 과 constrain() 메서드

◆ map()

map() 메서드는 한 범위(Range) 내의 값을 다른 범위 내의 값으로 선형적으로 변환(Scaling)하는 데 사용됩니다.
제너레이티브 아트에서는 마우스 위치와 같은 입력 값을 색상 값이나 크기 값 등 원하는 출력 범위로 쉽게 변환할 때 필수적으로 사용됩니다.

▷ 문법

map(value, start1, stop1, start2, stop2)

• value : 변환하려는 입력 값 (예: 마우스 위치)
• start1, stop1 : 입력 값(value)이 속한 원래의 범위
• start2, stop2 : 변환된 값을 맵핑할 범위

▷ 동작 원리

map() 함수는 내부적으로 다음 수학 공식을 사용하여 선형 변환을 수행합니다

$\text{Output} = (\text{Input} - \text{start1}) \times \frac{\text{stop2} - \text{start2}}{\text{stop1} - \text{start1}} + \text{start2}$

▷ 예제 코드

마우스의 X 좌표(0부터 width까지)를 회색조 배경색(0부터 255까지)으로 변환하는 예제입니다.

function setup() {
  createCanvas(400, 400);
  noStroke();
}

function draw() {
  // mouseX (0 ~ width) 값을 grayscale (0 ~ 255) 값으로 변환
  let colorValue = map(mouseX, 0, width, 0, 255);

  // 변환된 값을 배경색으로 설정
  background(colorValue);

  // (Optional) 화면 중앙에 정보 표시
  fill(255 - colorValue); // 배경색과 대비되는 색으로 설정
  textSize(20);
  textAlign(CENTER, CENTER);
  text("Color: " + round(colorValue), width / 2, height / 2);
}

◆ constrain()

constrain() 메서드는 어떤 값의 범위를 특정 최소값과 최대값 사이로 제한(Clamping)하는 데 사용됩니다.
즉, 값이 지정된 범위를 벗어나지 않도록 강제합니다.

▷ 문법

constrain(value, min, max)

• value : 제한하려는 입력 값
• min : 혀용되는 최소 값 (Minimum Value)
• max : 허용되는 최대 값 (Maximum Value)

▷ 동작 원리

• 만약 value가 min보다 작으면 (value < min), min을 반환합니다.
• 만약 value가 max보다 크면 (value > max), max를 반환합니다.
• 만약 value가 min과 max 사이에 있으면, value 그 자체를 반환합니다.

▷ 예제 코드

map() 함수를 사용하여 계산된 값이 의도치 않게 범위를 벗어날 경우, 이 값을 특정 범위로 제한하는 예제입니다.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  // 마우스 위치에 따라 원의 크기를 (0~100)으로 변환
  let mappedSize = map(mouseX, 0, width, 0, 100);

  // mappedSize에 150을 더한 값을 새로운 크기 후보로 사용 (250까지 커질 수 있음)
  let newSize = mappedSize + 150;

  // constrain()을 사용하여 최종 크기를 100과 200 사이로 제한
  // 아무리 마우스를 움직여도 원의 크기는 100보다 작어지거나 200보다 커지지 않음
  let finalSize = constrain(newSize, 100, 200);

  fill(30, 190, 170);
  ellipse(width / 2, height / 2, finalSize, finalSize);

  // (Optional) 화면 중앙에 크기 정보 표시
  fill(0);
  textSize(13);
  textAlign(CENTER, CENTER);
  text("Final Size: " + round(finalSize), width / 2, height / 2);
}

◆ 종합 예시

// 도형의 최소/최대 크기 설정
const MIN_SIZE = 300;
const MAX_SIZE = 700;

// 다각형의 최소/최대 정점 수 설정 (3~128 사이)
const MIN_VERTICES = 3;
const MAX_VERTICES = 128;

function setup() {
  createCanvas(800, 800);
  angleMode(DEGREES); // 각도 단위를 Degree(도)로 설정
  noStroke();
}

function draw() {
  background(25); // 어두운 배경

  // 1. 화면 중앙을 기준으로 마우스 위치 계산
  // centerDeltaX: 마우스 X좌표와 중심 X좌표 간의 차이 (-width/2 ~ +width/2)
  let centerDeltaX = mouseX - width / 2;
  // centerDeltaY: 마우스 Y좌표와 중심 Y좌표 간의 차이 (-height/2 ~ +height/2)
  let centerDeltaY = mouseY - height / 2;

  // --- 매핑 및 제한 ---

  // 2. X축 위치를 '색상 값 (Hue)'으로 매핑 및 제한
  // centerDeltaX 범위: -width/2 ~ width/2
  // 목표 색상 범위 (HUE): 0 ~ 360 (색상환 전체)
  let mappedHue = map(centerDeltaX, -width / 2, width / 2, 0, 360);

  // map() 함수는 stop1, stop2를 벗어난 값도 비례적으로 계산하므로,
  // 원하지 않는다면 constrain으로 범위를 명확히 제한합니다. (옵션)
  let finalHue = constrain(mappedHue, 0, 360);

  // 3. Y축 위치를 '크기'로 매핑 및 제한
  // centerDeltaY 범위: -height/2 ~ height/2
  // 목표 크기 범위: MIN_SIZE ~ MAX_SIZE
  let mappedSize = map(
    centerDeltaY,
    -height / 2,
    height / 2,
    MIN_SIZE,
    MAX_SIZE
  );
  let finalSize = constrain(mappedSize, MIN_SIZE, MAX_SIZE);

  // 4. 마우스와 중앙 사이의 '거리'를 '정점 수'로 매핑 및 제한
  // dist() 함수로 마우스와 중앙(width/2, height/2) 사이의 거리 계산 (0 ~ max_diagonal)
  let distFromCenter = dist(mouseX, mouseY, width / 2, height / 2);
  let maxDist = dist(0, 0, width / 2, height / 2); // 최대 거리 (코너까지)

  // 거리 범위: 0 ~ maxDist
  // 목표 정점 수 범위: MIN_VERTICES ~ MAX_VERTICES
  let mappedVertices = map(
    distFromCenter,
    0,
    maxDist,
    MIN_VERTICES,
    MAX_VERTICES
  );

  // 정점 수는 정수여야 하므로, mappedVertices를 정수화 (round, floor, ceil 중 택 1)
  let rawVertices = round(mappedVertices);

  // 다각형 정점 수를 3~128 사이로 최종 제한
  let finalVertices = constrain(rawVertices, MIN_VERTICES, MAX_VERTICES);

  // --- 도형 그리기 ---

  // HSB(Hue, Saturation, Brightness) 컬러 모드 설정
  colorMode(HSB, 360, 100, 100);
  fill(finalHue, 100, 100); // 매핑된 HUE 값으로 채우기

  // 도형을 화면 중앙에 위치시킵니다.
  push();
  translate(width / 2, height / 2);

  // 다각형 그리기 함수 호출
  drawPolygon(0, 0, finalSize / 2, finalVertices); // finalSize를 지름으로 사용

  pop();

  // --- 정보 표시 ---
  colorMode(RGB); // 다시 기본 RGB 모드로 전환
  fill(255);
  textAlign(CENTER, TOP);
  textSize(20);
  text(`Hue (X): ${round(finalHue)}`, width / 2, height /2 - 20);
  text(`Size (Y): ${round(finalSize)}`, width / 2, height / 2 );
  text(`Vertices (Dist): ${finalVertices}`, width / 2, height / 2 + 20);
}

/**
 * 지정된 위치에 정다각형을 그리는 함수
 * @param x x 좌표
 * @param y y 좌표
 * @param radius 반지름
 * @param npoints 정점 수
 */
function drawPolygon(x, y, radius, npoints) {
  let angle = 360 / npoints; // 각 정점 사이의 각도
  beginShape();
  for (let a = 0; a < 360; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}