핵심 개념 1 — if문 기본 구조

일상 비유

조건문은 우리가 매일 쓰는 논리입니다.

프로그래밍에서도 같은 구조를 사용합니다. 만약 (조건이 맞으면) { 이 코드를 실행한다 }

문법

if (조건) {
  실행할 코드
}

괄호 () 안에 조건을 쓰고, 중괄호 {} 안에 실행할 코드를 씁니다. 조건이 맞으면(true) 중괄호 안이 실행되고, 안 맞으면(false) 건너뜁니다.

실행 흐름 시각화:

코드 실행 →  조건 확인
              │
         ┌────┴────┐
         │         │
       true      false
         │         │
     { 실행 }   건너뜀
         │         │
         └────┬────┘
              │
         다음 코드로 →

코드는 위에서 아래로 쭉 가다가 if를 만나면 갈림길이 생깁니다. 조건에 따라 한쪽 길만 갑니다.

비교 연산자

조건을 만들려면 값을 비교해야 합니다.

흔한 실수 — = 하나만 쓰기

//  잘못된 코드 — = 하나만 쓴 경우
if (mouseX = 200) {   // 이건 '200을 mouseX에 넣어라'라는 대입이 됩니다!
  background(255, 0, 0);
}

//  올바른 코드 — === 세 개
if (mouseX === 200) {  // 'mouseX가 200과 같은지 비교해라'
  background(255, 0, 0);
}

실수로 =을 쓰면 문법 오류가 나지 않아도 의도와 다르게 동작할 수 있습니다. 이런 문제가 생기면 먼저 =과 ===를 확인하세요.

P5.js 첫 예시: 마우스 위치에 따른 배경색

2주차에서 배운 mouseX가 다시 등장합니다. 마우스 위치는 계속 바뀌니까 매 프레임 확인해야 합니다. 그래서 setup()이 아니라 draw() 안에 씁니다.

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

function draw() {
  background(220);  // 기본: 회색

  if (mouseX > 200) {
    background(255, 0, 0);  //  마우스가 오른쪽이면 빨강!
  }
}

실행 결과: - 마우스를 캔버스 왼쪽(x < 200)에 놓으면 → 회색 배경 - 마우스를 캔버스 오른쪽(x > 200)에 놓으면 → 빨간 배경

코드 실행 추적 (mouseX = 250일 때):

1. background(220)  → 먼저 회색으로 칠함
2. mouseX > 200?    → 250 > 200 → true!
3. background(255, 0, 0) → 빨간색으로 다시 칠함 (회색을 덮어씀)

코드 실행 추적 (mouseX = 100일 때):

1. background(220)  → 먼저 회색으로 칠함
2. mouseX > 200?    → 100 > 200 → false
3. { } 안의 코드 건너뜀 → 회색 유지

이렇게 한 줄씩 추적하는 것을 트레이싱(tracing)이라고 합니다. 코드가 예상대로 안 될 때, 한 줄씩 따라가면 어디서 틀렸는지 찾을 수 있습니다.

핵심 개념 2 — if/else와 else if

if/else — “둘 중 하나”

’왼쪽이면 파랑, 오른쪽이면 빨강’처럼 둘 중 하나를 선택하고 싶으면 else를 씁니다.

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

function draw() {
  if (mouseX > width / 2) {
    background(255, 0, 0);  // 오른쪽: 빨강
  } else {
    background(0, 0, 255);  // 왼쪽: 파랑
  }
}

if (조건) { A } else { B } — 조건이 맞으면 A, 아니면 B. 반드시 둘 중 하나만 실행됩니다.

         조건 확인
           │
      ┌────┴────┐
      │         │
    true      false
      │         │
   { A 실행 }  { B 실행 }
      │         │
      └────┬────┘
           │
      다음 코드 →

if만 쓰면 false일 때 아무것도 안 하지만, if/else를 쓰면 false일 때 B를 실행합니다.

width / 2를 썼는데, width는 캔버스 너비(400)니까 width / 2는 200입니다. 숫자 200을 직접 쓰는 것보다 width / 2가 좋습니다 — 캔버스 크기를 바꿔도 자동으로 가운데가 되니까요.

else if — “세 가지 이상”

세 가지로 나누고 싶으면 else if를 추가합니다.

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

function draw() {
  if (mouseX < width / 3) {
    background(255, 0, 0);    // 왼쪽 1/3: 빨강
  } else if (mouseX < width * 2 / 3) {
    background(0, 255, 0);    // 가운데 1/3: 초록
  } else {
    background(0, 0, 255);    // 오른쪽 1/3: 파랑
  }
}

캔버스를 세 영역으로 나누고, 마우스가 어디에 있느냐에 따라 다른 배경색이 나옵니다. else if를 더 추가하면 4등분, 5등분도 가능합니다. (단, else if가 많아지면 코드가 길어집니다. 그럴 때는 6주차에서 배울 ’배열’로 더 간결하게 처리할 수 있습니다.)

핵심 개념 3 — boolean과 논리 연산자

true와 false

조건문의 괄호 안은 항상 결과가 true 아니면 false입니다. 이것을 boolean(불리언)이라고 합니다.

mouseX > 200    // → true 또는 false
5 === 5         // → true
3 > 10          // → false

조건이 true면 실행, false면 건너뜀.

논리 연산자: 여러 조건 조합하기

조건 하나로는 부족할 때가 있습니다. ‘마우스가 이 영역 안에 있는지’ 확인하려면 조건이 여러 개 필요합니다.

진리표:

AND(&&)는 둘 다 true여야 true. OR(||)은 하나만 true여도 true. 일상으로 비유하면 — ’밥도 먹고 숙제도 해야 외출 가능’은 &&, ’전화하거나 문자하면 연락 성공’은 ||.

실용 예시: 사각형 영역 판별

‘마우스가 이 사각형 안에 있는지’ 판별하려면 조건 4개를 &&로 연결합니다.

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

function draw() {
  background(220);

  // 사각형 영역 표시 (x: 100~300, y: 100~300)
  stroke(0);
  noFill();
  rect(100, 100, 200, 200);

  // 마우스가 사각형 안에 있는지?
  if (mouseX > 100 && mouseX < 300 && mouseY > 100 && mouseY < 300) {
    fill(255, 0, 0);  // 안에 있으면: 빨강
  } else {
    fill(200);         // 밖이면: 회색
  }
  noStroke();
  ellipse(mouseX, mouseY, 30, 30);
}

x가 100보다 크고 그리고 300보다 작고 그리고 y가 100보다 크고 그리고 300보다 작을 때. 네 개 다 만족해야 true입니다. AND(&&)는 하나라도 false가 나오면 전체가 false입니다.

핵심 개념 4 — dist()로 영역 판별

사각형은 && 4개로 했는데, 원형 영역은 어떻게 할까요? dist() 함수를 씁니다.

dist() — 두 점 사이 거리

dist(x1, y1, x2, y2)

두 점 사이의 거리를 계산해줍니다. dist(0, 0, 3, 4) → 5. 마우스와 원 중심 사이 거리를 재서, 반지름보다 작으면 ’안에 있다’고 판단합니다. 수학 시간에 배운 피타고라스 정리(직각삼각형 빗변 길이)를 dist() 한 줄이 해결해줍니다.

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

function draw() {
  background(220);

  // 원 영역 표시 (중심: 200,200 / 반지름: 50)
  stroke(0);
  noFill();
  ellipse(200, 200, 100, 100);

  // 마우스가 원 안에 있는지?
  if (dist(mouseX, mouseY, 200, 200) < 50) {
    fill(0, 200, 0);  // 안에 있으면: 초록
  } else {
    fill(200);         // 밖이면: 회색
  }
  noStroke();
  ellipse(mouseX, mouseY, 30, 30);
}

사각형은 && 4개가 필요했는데, 원은 dist() 한 줄이면 됩니다.

이 패턴은 나중에 버튼 만들기에 유용합니다. ‘이 원을 클릭했는지’ 감지하는 데 씁니다.

핵심 개념 5 — for문 + 조건문 결합

3주차의 for문과 4주차의 if문이 만나면 패턴에 변화를 줄 수 있습니다.

짝수/홀수 — % 나머지 연산자

먼저 새 연산자 하나 — % 나머지 연산자.

% 2의 결과가 0이면 짝수, 1이면 홀수. for문에 넣으면 짝수 번째·홀수 번째를 구분할 수 있습니다.

function setup() {
  createCanvas(400, 400);
  background(240);
  noStroke();

  for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
      fill(255, 0, 0);   //  짝수 번째: 빨강
    } else {
      fill(0, 0, 255);   //  홀수 번째: 파랑
    }
    ellipse(i * 40 + 20, 200, 30, 30);
  }
}

실행 결과:

  (빨강-파랑 교대)

조건문을 넣으니까 번갈아 다른 색을 줄 수 있습니다.

체스판 패턴: 중첩 for + if

2차원으로 확장하면 체스판이 됩니다.

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

  for (let x = 0; x < 8; x++) {
    for (let y = 0; y < 8; y++) {
      if ((x + y) % 2 === 0) {
        fill(240);   // 흰 칸
      } else {
        fill(60);    // 검은 칸
      }
      rect(x * 50, y * 50, 50, 50);
    }
  }
}

(x + y)가 짝수면 흰 칸, 홀수면 검은 칸. 3주차의 for문 + 4주차의 if문이 만나면 체스판처럼 규칙적이면서도 변화 있는 패턴을 만들 수 있습니다.