Silverback9

오늘은 밀도는 같은데 크기가 서로 다른 두 개의 동그라미가 중력과 바람과 바닥과 벽에 반응하여 움직이는 프로그램을 만들어 보겠습니다. 아래 동영상을 클릭하시면 오늘 공부 부분이 바로 시작(7:48)되어요. 네, 전 곧 돌아올게요. 마법이 풀리는 밤 12시까지 1분 남아서요^^*

밀도가 같을 경우, 2차원인 캔버스 위에서 동그라미의 크기 즉 면적은 질량과 정비례합니다. 면적은 파이*(반지름의 제곱)이므로, 반지름은 질량의 제곱근 관계입니다. 그리고, 어제와 마찬가지로, 동그라미의 무게가 힘으로 작용하고, 이는 중력의 가속도(간단하게 표현하느라 중력 즉 gravity 라고 표기하지만, 정확하게 표기하면 중력의 가속도 gravitational acceleration이라고 표기해야겠지요?)*질량입니다.

그럼 이 두가지를 반영한 내용을 코드 속에서 살펴 보세요~^^*

class Mover{
  constructor(x,y,m){
    //동그라미의 센터 x,y좌표값과 함께 질량값도 넘겨 받습니다. 
    
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);

    this.mass = m;
    // 받은 질량값을 변수 mass에 저장합니다.

    this.r = sqrt(this.mass)*10;
    //질량의 제곱근을 동그라미의 반지름 값으로 만들고, 눈에 잘 보이도록 반지름 길이를 10배 증가시켜 봅시다.  
     
  }
  
  applyForce(force){  
    
    let f = p5.Vector.div(force, this.mass);
    this.acc.add(f); 
  }
  
  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 moverA;
let moverB;

function setup() {
  createCanvas(400, 400);
  
  moverA = new Mover(100,200, 2);
  moverB = new Mover(300,200, 4);
  //동그라미의 센터 x,y 좌표값과 함께 질량값도 지정해서 동그라미 클래스 생성 함수를 호출합니다.
}

function draw() {
  background(0);
  if(mouseIsPressed){  
    let wind = createVector(0.1, 0);
    moverA.applyForce(wind);
    moverB.applyForce(wind);
  }
  let gravity = createVector(0,0.2); 
  
  let weightA = p5.Vector.mult(gravity, moverA.mass);
  let weightB = p5.Vector.mult(gravity, moverB.mass);
  //중력(의 가속도) 벡터와 동그라미 질량을 곱하여 무게 벡터를 생성합니다. 
  
  moverA.applyForce(weightA);
  moverB.applyForce(weightB);   
  //중력(의 가속도) 곱하기 질량인 무게를 힘의 값으로 넘깁니다. 
  
  moverA.update();  
  moverA.edges(); 
  moverA.show();
 
  moverB.update();  
  moverB.edges(); 
  moverB.show();
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴보세요. 그리고 삼각형을 눌러 프로그램을 실행해 보셔요. 두 동그라미가 같은 속도로 떨어지는 것이 보이시나요? 바닥에 닿고 튕겨 올라올 때 부터는 두 동그라미의 움직임이 살짝 달라지는 것은 크기 차이에 의해 바닥에 닿는 시점이 달라서이겠지요? 마우스를 클릭하여 바람을 후~ 불어 보셔요. 바람의 작용에 대해 크기가 다른 동그라미들이 서로 살짝 다르게 반응하는 것이 보이시나요? 사각형을 눌러 종료하시구요~^^*

중력과 바람과 바닥과 벽에 반응하는 동그라미들에 대한 프로그램을 지금까지 공부해 보았습니다. 그런데, 사람은 얼마나 높은 곳에서 떨어져도 안전하게 땅에 착지할 수 있을까요? 자유낙하의 세계 신기록 모습을 보며, 동그라미의 움직임에 대한 공부 끝~^^*

다음엔 우리 마찰에 대해 공부해 보기로 해요~^^* 너무 먼 길이다 싶어도 한 발 한 발 내딛다 보면 갈 수 있겠다는 믿음이 들어요. 여기까지 함께 와 주셔서 감사합니다. 우리 계속 같이 걸어요~^^* 넵, 꿈은 이루어 집니다!!