EN

페이지 3: 제어 흐름: 반복문, 조건문 및 함수

3. 제어 흐름: 반복문, 조건문 및 함수

제어 흐름 구조를 효과적으로 사용하는 것은 복잡하고 조직적인 p5.js 스케치를 만드는 데 중요합니다. 여기에는 반복을 위한 for 반복문, 조건부 로직을 위한 if/else 문, 코드 모듈화를 위한 사용자 정의 함수가 포함됩니다.

3.1. for 반복문으로 요소 반복

for 반복문을 사용하여 코드를 반복하지 않고 여러 유사한 요소를 그립니다.

function setup() {
  createCanvas(400, 400);
  noLoop(); // 한 번만 그리기
}

function draw() {
  background(0); // 검정색 배경
  stroke(255); // 흰색 선
  
  for (let i = 0; i < width; i += 20) { // 20픽셀마다 수직선 그리기
    line(i, 0, i, height);
  }
  
  for (let j = 0; j < height; j += 20) { // 20픽셀마다 수평선 그리기
    line(0, j, width, j);
  }
}

3.2. if/else를 사용한 의사 결정

조건문은 특정 기준에 따라 스케치가 다르게 동작하도록 합니다.

let x = 0;
let speed = 5;

function draw() {
  background(220);
  ellipse(x, height / 2, 50, 50);
  
  x += speed; // 원 이동
  
  // 가장자리에 닿으면 방향 반전
  if (x > width - 25 || x < 25) {
    speed *= -1;
  }
}

3.3. 사용자 정의 함수로 코드 구성

복잡한 작업을 더 작고 관리하기 쉬운 조각으로 분해하여 가독성과 재사용성을 향상시키는 자신만의 함수를 만듭니다.

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

function draw() {
  background(220);
  drawTarget(width / 2, height / 2, 100); // 중앙에 타겟 그리기
  drawTarget(50, 50, 40); // (50,50)에 작은 타겟 그리기
}

function drawTarget(x, y, size) {
  // 타겟 패턴을 그리는 사용자 정의 함수
  for (let i = 0; i < 5; i++) {
    fill(i % 2 === 0 ? 255 : 0); // 흰색과 검정색 번갈아 채우기
    ellipse(x, y, size - i * (size / 5), size - i * (size / 5));
  }
}
Contact Us