Silverback9

오늘은 처음 위치 벡터에 위치 이동 변화 벡터를 더해서 다음 위치 벡터를 구하여 위치 이동을 표현하는 프로그램을 공부하였습니다. 벡터 더하기와 빼기의 수리적 원리와 이를 이용한 벡터 덧셈 함수에 대해 배웠습니다. 벡터 덧셈 함수 add()는 변화량 벡터 이름이나 x, y, z 축의 변화량을 나타낸 숫자나 수열을 파라미터로 가집니다. 아래의 동영상을 클릭하면 관련 강의를 보실 수 있습니다.

먼저, 위치 벡터의 x, y 좌표값에 변화량 벡터의 x, y 좌표의 변화량을 각각 더해 봅니다. 중심에 점 하나를 가지고 흰색 테두리에 둘러싸인 원이 오른쪽으로 수평이동을 하며 발자취를 길게 남기는 프로그램을 만듭니다.

class Walker{
  constructor(x, y) {
    this.pos = createVector(x,y);
    this.vel = createVector(1,0);
  }
  update(){
    this.pos.x = this.pos.x + this.vel.x;
    this.pos.y = this.pos.y + this.vel.y;
  }
  show(){
    stroke(255);
    strokeWeight(2);
    fill(255,100);
    ellipse(this.pos.x, this.pos.y, 32);
    point(this.pos.x, this.pos.y);
  }
}

이것을 클릭하여 코드를 보시고 삼각형을 눌러 실행하신 후 사각형을 눌러 프로그램을 종료해 보세요.

이번에는 메인 프로그램의 무한 반복 함수인 draw() 안에 배경을 검게 칠하는 background(0)를 더하여, 공이 발자취를 남기지 않고 이동하도록 만듭니다.

let walker;

function setup() {
  createCanvas(400, 400);
  walker = new Walker(200,200);
  background(0);
}

function draw() {
  background(0);
  walker.update();
  walker.show();
}

이것을 클릭하여 코드를 보시고 삼각형을 눌러 프로그램을 실행해 보시고 사각형을 눌러 종료해 보세요.

이번에는 add()를 활용하여 변화량 벡터를 위치 벡터에 더하여 다음 위치 벡터를 표현합니다. 우상향 이동을 하는 원을 표현하고자 합니다. p5의 캔버스는 왼편 위쪽 모서리가 (0,0)입니다. x좌표의 + 변화는 오른쪽 이동을 y좌표의 – 변화는 위쪽 이동을 하게 됩니다. 그래서 변화량 벡터는 (1, -1)로 설정해 보았습니다.

class Walker{
  constructor(x, y) {
    this.pos = createVector(x,y);
    this.vel = createVector(1,-1);
  }
  update(){
    this.pos.add(this.vel);
  }
  show(){
    stroke(255);
    strokeWeight(2);
    fill(255,100);
    ellipse(this.pos.x, this.pos.y, 32);
    point(this.pos.x, this.pos.y);
  }
}

이것을 클릭하여 코드를 보시고 삼각형을 눌러 프로그램을 실행시켜 보시고 사각형을 눌러 종료시켜 보세요.

오늘은 벡터 덧셈을 통한 위치 이동 프로그램을구현해 보았습니다. 벡터의 수리적 이해를 공부하니, 아름다움에 대한 물리학을 해보고 싶다는 오랜 바램을 실현할 수 있는 실마리를 엄지와 검지 사이에 쥐게 된 것 같습니다. 설레고 감사한 마음이 듭니다. 꿈은 이루어 집니다!!