페이지 2: 상호작용 및 변수

2. 상호작용 및 변수

사용자 입력에 반응하는 스케치를 만드는 것은 크리에이티브 코딩의 핵심 부분입니다. p5.js는 마우스, 키보드 및 기타 시스템 데이터에 쉽게 접근하는 방법을 제공합니다.

2.1. 마우스 상호작용

mouseX, mouseY, pmouseX, pmouseY와 같은 시스템 변수를 사용하여 현재 및 이전 마우스 위치를 가져옵니다. mousePressed(), mouseReleased()와 같은 함수도 도움이 됩니다.

function draw() {
  background(220);
  line(pmouseX, pmouseY, mouseX, mouseY); // 마우스를 따라 선 그리기
  
  if (mouseIsPressed) {
    fill(0); // 마우스를 누르면 검정색으로 채우기
  } else {
    fill(255); // 그렇지 않으면 흰색으로 채우기
  }
  ellipse(mouseX, mouseY, 30, 30); // 마우스 위치에 원 그리기
}
// 선택 사항:
function mousePressed() {
  console.log("마우스 클릭됨!");
}

2.2. 키보드 및 시스템 변수

keyIsPressed 또는 keyPressed()와 같은 함수를 사용하여 키보드 입력에 응답합니다. width, height, frameCount, random()과 같은 변수를 활용하여 동적인 동작을 만듭니다.

let circleX;

function setup() {
  createCanvas(400, 400);
  circleX = width / 2;
}

function draw() {
  background(220);
  
  if (keyIsPressed && key === 'a') {
    circleX -= 5; // 'a' 키를 누르면 왼쪽으로 이동
  } else if (keyIsPressed && key === 'd') {
    circleX += 5; // 'd' 키를 누르면 오른쪽으로 이동
  }
  
  ellipse(circleX, height / 2, 50, 50);
  
  // frameCount 및 random() 사용 예시
  fill(random(255), random(255), random(255), 100); // 무작위 반투명 색상
  rect(10, 10, frameCount % 100, frameCount % 100); // frameCount에 따라 크기 변경
}