Silverback9

오늘은 vector 오브젝트를 생성하는 프로그램을 공부하였습니다. 아래 동영상을 클릭하시면 관련 내용부터 강의가 시작됩니다.

createVector() 를 사용하여 랜덤 워크를 구현하였습니다. 가로세로 400 픽셀 크기의 캔버스를 만듭니다. 캔버스 정중앙을 출발점으로 삼는 pos라는 벡터를 만듭니다. 캔버스 색은 검은색입니다. 벡터 pos의 x, y 좌표를 흰 점으로 나타냅니다. -1에서 1 사이의 무작위 값을 기존 좌표값에 더하여 좌표값을 변화시킵니다. draw()는 프로그램 정지를 명령하지 않는 한 무한반복되는 함수입니다. 흰 점의 기존 위치를 캔버스에 남기며 위치 변화를 계속 하기 때문에, 경로의 변화 과정이 눈에 보입니다.

let pos;

function setup() {
  createCanvas(400, 400);
  pos = createVector(width / 2, height / 2);
  background(0);
}

function draw() {
  stroke(255, 100);
  strokeWeight(2);
  point(pos.x, pos.y);
  pos.x = pos.x + random(-1, 1);
  pos.y = pos.y + random(-1, 1);
}

이것을 클릭하여, 코드를 보시고 삼각형 버튼을 눌러 실행시켜 보세요. 사각형 버튼을 누르면 멈춥니다.