Silverback9

오늘은 양편에 벽에 세워진 공간에서 동그라미가 중력의 영향을 받아 움직이고 있는데, 우리가 마우스를 클릭하여 동그라미에게 바람을 후~ 불어주었을 때의 상황을 프로그램으로 만들어 보겠습니다~ 어제와 마찬가지로 마우스를 클릭하면 왼쪽에서 오른쪽으로 부는 바람이 생겨납니다.

동그라미가 바닥에 닿았을 때 동그라미의 y축 운동방향을 반대로 잡아주던 것을 기억하시나요?

오늘은

(1) 동그라미가 오른쪽 벽에 닿으면 동그라미의 x축 운동방향을 왼쪽으로,

(2) 동그라미가 왼쪽 벽에 닿으면 동그라미의 x축 운동방향을 오른쪽으로

바꾸어 보도록 하겠습니다.

점검해야 하는 상황이 두 가지이므로, if() else if()를 사용해 보겠습니다~

else if 에 대한 기초 강의를 보시려면 아래의 동영상을 클릭해 보셔요~

이제 오늘의 공부를 본격적으로 시작해 볼까요? 아래 동영상을 클릭하셔서 오늘 공부로 바로 점프! (20:34)에서 시작하시면 되어요~^^*

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
  }
  
  applyForce(force){  
    this.acc.add(force); 
  }
  
  edges(){
    if(this.pos.y >= height){ 
      this.pos.y = height;
      this.vel.y *= -1;
    }
    
    if(this.pos.x >= width){
      //동그라미의 센터가 오른쪽 가장자리에 걸치거나 살짝 지나간다면
      this.pos.x = width;
      //동그라미의 센터를 오른쪽 가장자리에 위치시키고
      this.vel.x *= -1;
      //동그라미의 x축 이동 방향이 왼쪽을 향하도록 한다.
    } else if(this.pos.x <=0){
      //동그라미의 센터가 왼쪽 가장자리에 걸치거나 살짝 지나간다면
      this.pos.x = 0;
      //동그라미의 센터를 왼쪽 가장자리에 위치시키고
      this.vel.x *= -1;
      //동그라미의 x축 이동 방향이 오른쪽을 향하도록 한다.
    }
    
      
  }
  
  update(){
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.set(0,0);
  }
  
  show(){
    stroke(255);
    strokeWeight(2);
    fill(255, 100);
    ellipse(this.pos.x, this.pos.y,32);
  }
}

let mover;

function setup() {
  createCanvas(400, 400);
  mover = new Mover(200,200); 
}

function draw() {
  background(0);
  if(mouseIsPressed){  
    let wind = createVector(0.2, 0);
    mover.applyForce(wind);
  }
  let gravity = createVector(0,0.1); 
  mover.applyForce(gravity);   
  mover.update();  
  mover.edges(); 
  mover.show();
}

이것을 클릭하셔서 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴보세요. 삼각형을 눌러 프로그램을 실행시키고 마우스를 클릭해서 오른쪽으로 부는 바람을 만들어 보세요. 바람이 불 때마다 그리고 벽에 닿을 때마다 동그라미의 움직임은 어떻게 되는지 관찰해 봅시다~ 종료는 사각형~^^*

이번에는 동그라미가 벽에 닿는 모습을 좀더 사실적으로 표현해 보도록 할게요. 실제로는 동그라미의 센터가 벽에 닿지 않지요? 동그라미의 센터에서 동그라미 반지름 만큼 더 나가야 실제 동그라미의 표면이 될 거예요. 그래서 동그라미의 반지름 값을 저장하는 변수를 사용하여 동그라미 표면이 벽에 닿는지 점검한 뒤 동그라미의 움직임 방향을 바꾸는 프로그램을 만들어 볼게요.

동그라미의 반지름을 정하고 동그라미를 그리기 위해서

(1) this.r = 16;

(2) ellipse(200,200, this.r*2);

를 써 볼게요.

p5.js의 캔버스의 x축 좌표값은 오른쪽으로 증가하고 y축 좌표값은 아래로 증가하니까,

(1) 동그라미의 오른쪽 표면의 x축 기준 좌표값: (동그라미 센터 + 반지름)

(2) 동그라미의 왼쪽 표면의 x축 기준 좌표값: (동그라미 센터 – 반지름)

(3) 동그라미의 아래쪽 표면의 y축 기준 좌표값: (동그라미 센터 +반지름)

이 되겠지요? 그러면, 동그라미 센터는

(1) 동그라미 센터 + 반지름 = 오른쪽 벽 => 동그라미 센터 = 오른쪽 벽 – 반지름

(2) 동그라미 센터 – 반지름 = 왼쪽 벽 => 동그라미 센터 = 왼쪽 벽 + 반지름

(3) 동그라미 센터 + 반지름 = 바닥 => 동그라미 센터 = 바닥 – 반지름

로 표현해 볼 수 있겠지요? 또한,

(1) 반지름에는: this.r

(2) 동그라미 센터 x 좌표에는: this.pos.x

(3) 동그라미 센터 y 좌표에는: this.pos.y

(4) 오른쪽 벽에는: width

(5) 왼쪽 벽에는: 0

(6) 바닥에는: height

를 대입할 수 있겠지요?

그래서, 최종적으로

(1) ‘오른쪽 벽 닿으면’은 if( this.pos.x >= width – this.r )

(2) ‘왼쪽 벽 닿으면’은 if( this.pos.x <= this.r )

(3) ‘바닥에 닿으면’은 if( this.pos.y >= height – this.r )

를 써 보겠습니다.

캔버스 위에서 우리가 주의해 볼 만한 내용들을 그림으로 표현해 보았습니다~^^*

이제 코드를 본격적으로 살펴 볼까요?

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
    
    this.r = 16; // 동그라미의 반지름
    
  }
  
  applyForce(force){  
    this.acc.add(force); 
  }
  
  edges(){
    
    if(this.pos.y >= height - this.r){ 
      //동그라미의 센터가 바닥에서 반지름만큼 위로 들어간 곳에 걸치거나 살짝 지나간다면
      //동그라미 아래쪽 표면이 바닥에 닿는다면
      
      this.pos.y = height - this.r;
      //동그라미의 센터를 바닥에서 반지름만큼 위로 들어간 곳에 위치시키고
      //동그라미의 아래쪽 표면을 바닥에 위치시키고
      
      this.vel.y *= -1;
    }
    
    if(this.pos.x >= width - this.r){
      //동그라미의 센터가 오른쪽 벽에서 반지름만큼 왼쪽으로 들어간 곳에 걸치거나 살짝 지나간다면
      //동그라미 오른쪽 표면에 오른쪽 벽에 닿는다면
      
      this.pos.x = width - this.r;
      //동그라미의 센터를 오른쪽 벽에서 반지름만큼 왼쪽으로 들어간 곳에 위치시키고
      //동그라미의 오른쪽 표면을 오른쪽 벽에 위치시키고  
      
      this.vel.x *= -1;
    
    } else if(this.pos.x <= this.r){
      //동그라미의 센터가 왼쪽 벽에서 반지름만큼 오른쪽으로 들어간 곳에 걸치거나 살짝 지나간다면
      //동그라미의 왼쪽 표면이 왼쪽 벽에 닿는다면

      this.pos.x = this.r;
      //동그라미의 센터를 왼쪽 벽에서 반지름만큼 오른쪽으로 들어간 곳에 위치시키고
      //동그라미의 왼쪽 표면을 왼쪽 벽에 위치시키고
     
      this.vel.x *= -1;
    } 
  }
  
  update(){
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.set(0,0);
  }
  
  show(){
    stroke(255);
    strokeWeight(2);
    fill(255, 100);
    
    ellipse(this.pos.x, this.pos.y, this.r*2);
    //동그라미의 지름을 "반지름의 두 배"로 표현한다.
  }
}

let mover;

function setup() {
  createCanvas(400, 400);
  mover = new Mover(200,200); 
}

function draw() {
  background(0);
  if(mouseIsPressed){  
    let wind = createVector(0.1, 0);
    mover.applyForce(wind);
  }
  let gravity = createVector(0,0.2); 
  mover.applyForce(gravity);   
  mover.update();  
  mover.edges(); 
  mover.show();
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보세요~. 삼각형을 눌러 프로그램을 실행하고 마우스를 클릭하여 바람을 후~ 불어 보세요. 동그라미가 벽이나 바닥에 닿는 모습을 관찰해 보시구요. 좀더 자연스러워졌나요? 사각형을 눌러 종료~^^*

우리는 이제 동그라미의 움직임을 더 자연스럽게 표현할 수 있게 되었어요~^^*. 와우! 오늘 우리는 동그라미가 동그라미 답게 움직이도록 만드는 소중한 재능을 연마해 보았네요~^^*. 우리를 우리답게 만들어 주는 소중하고 감사한 분들을 가슴 속에 떠올려 보며, 오늘의 성장을 함께 축하해요~^^* 빨간 벨벳을 두른 요정들이 우리들의 자연스러운 동그라미를 축하해 주네요. “Be natural~”