Silverback9

오늘은 동그라미가 중력의 영향을 받아 아래로 내려가다 바닥에 닿으면 통하고 튀어 오르다 다시 중력의 영향으로 내려갔다 또 통하고 튀어 오르는 모습을 프로그램으로 표현해 보겠습니다~^^*.

먼저, p5.j의 캔버스 좌표값을 살펴 볼게요~^^*.

(1) 왼편 위쪽 모서리는 원점 (0,0)입니다.

(2) 오른쪽으로 갈수록 x 좌표값이 증가하고 최대값은 width 입니다.

(3) 오른편 위쪽 모서리는 (width, 0)입니다.

(4) 아래쪽으로 갈수록 y 좌표값이 증가하고 최대값은 height 입니다.

(5) 왼편 아래쪽 모서리는 (0, height)입니다.

(6) 오른편 아래쪽 모서리는 (width, height)입니다.

(7) 왼쪽 가장자리는 x = 0 이고 오른쪽 가장자리는 x = width 입니다.

(8) 위쪽 가장자리는 y = 0 이고 아래쪽 가장자리는 y = height 입니다.

동그라미가 바닥, 즉, 아래쪽 가장자리 y = height 에 걸치거나 더 아래로 내려가면 (시간 간격이 30/sec 라서 그 사이에 동그라미가 바닥 아래로 내려가 있을 수도 있습니다) 동그라미를 바닥에 위치시키고 위로 움직이도록 만듭니다. 다시 중력의 영향으로 내려오다 바닥에 닿으면 다시 위로 움직입니다.

아래 동영상을 클릭하시면 오늘 공부내용을 바로 시작(12:40) 할 수 있습니다. 15:11까지 보시면 되구요~^^* 아래 노트도 참고 하시면 좋을 것 같습니다~^^*. 코드 정리도 한 번 보시구요~^^*

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = p5.Vector.random2D(); 
    this.vel.mult(random(3)); 
  }
  applyForce(force){
    this.acc = force;    
  }

  edges(){
    if(this.pos.y >= height) { 
      // 30/sec 시간의 간격 동안 동그라미의 센터가 이미 캔버스 밖을 벗어난 경우도 있을 수 있기 때문에 ">="을 사용한다.
     
      this.pos.y = height;
      // 동그라미를 캔버스 아래쪽 경계선에 위치시킨다.

      this.vel.y *= -1;
      // y = y*(-1) = -y 동그라미의 이동방향을 반대로 바꾼다. 위로 올라간다.

    }
  }
  update(){
    this.vel.add(this.acc);
    this.pos.add(this.vel); 
  }
  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);
  let gravity = createVector(0,1); 
  mover.applyForce(gravity); 
  mover.update();
  
  mover.edges(); 
  // 동그라미의 위치를 체크해서 캔버스 아래 경계선에 걸치거나 나가있으면 동그라미를 경계선에 위치시키고 캔버스 위를 향하도록 동그라미의 방향을 바꾼다. 
  
  mover.show();  
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴보세요. 삼각형을 눌러 프로그램을 실행하여 동그라미가 통통 튀어오르는 것을 관찰해 보세요. 종료를 위해선~ 네, 사각형 누르시고요~^^*

내일은 이 동그라미의 움직임을 좀더 자연스럽게 만들어 보도록 할까요~^^*?

오늘 함께 공부해 주셔서 감사합니다~^^*

우리 내일 또 만나요~^^*