Silverback9

오늘은 동그라미가 진공상태의 중력공간을 지나 물 속으로 떨어지는 프로그램을 만들어 보겠습니다~^^* 진공상태의 중력공간에서는 모든 물체가 질량에 상관없이 같은 속력으로 떨어지지요? 요건 한 번 더 복습하고 가실게요~^^*

중력이 작용하는 진공공간에서 동그라미가 떨어질 때는 공기의 drag force가 존재하지 않겠지요. 동그라미가 물에 닿으면 그때부터는 물의 drag force가 작용하기 시작할테구요.

아래 동영상을 클릭하시면, 오늘 공부내용을 바로 시작(7:45)할 수 있어요.

하나. 캔버스의 절반을 나누어 위 쪽은 진공중력공간으로 그리고 아래 쪽은 물의 저항을 받는 물 속 공간으로 만듭니다.

둘. 동그라미가 물 속에 들어가면, 다시 말해, 동그라미의 y 좌표 값이 캔버스의 중간지점의 y 좌표값보가 크면, 물의 저항을 받도록 drag() 함수를 호출합니다.

class Mover{
  constructor(x,y,m){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
    this.mass = m;
    this.r = sqrt(this.mass)*10; 
  }
  
  drag(c){
   
    let drag = this.vel.copy();  
    drag.normalize();    
    drag.mult(-1);
    
    //let c = 0.1;
    //drag 함수 안에서 정의한 Drag Force 상관계수를 지웁니다. 메인함수에서 글로벌 변수로 정의하겠습니다. 
    
    let speedSq = this.vel.magSq();
    drag.setMag(c*speedSq);
    this.applyForce(drag); 
  }
  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 movers = [];

let dragC = 0.2;
// Drag Force 상관계수를 글로벌 변수로 정의하여, 수치 조졍을 좀더 쉽게 해 봅시다.  


function setup() {
  createCanvas(400, 400);
  for(i = 0; i <10; i++){
    movers[i] = new Mover(random(width), 0, random(1,8));   
  }
}

function draw() {
  background(0);
  
  fill(255, 125);
  noStroke();
  rect(0, height/2, width, height/2);
  //캔버스 중간 높이부터 물 속 공간을 회색으로 표현합니다.
  
  for (let mover of movers){
    if(mouseIsPressed){  
      let wind = createVector(0.1, 0);
      mover.applyForce(wind);
    }
    let gravity = createVector(0,0.2); 
    let weight = p5.Vector.mult(gravity, mover.mass); 
    mover.applyForce(weight);
        
    if (mover.pos.y > height/2){
      // 동그라미가 물에 들어가면
    
      mover.drag(dragC);
      //drag 함수를 호출합니다.     
    }
    
    mover.update();  
    mover.edges(); 
    mover.show();
 }
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 중력이 작용하는 진공상태와 물 속 상태에서의 동그라미 움직임을 관찰해 보여요. 크기에 상관없이 같은 속력으로 떨어지다 물 속에서는 크기가 작은 동그라미가 더 천천히 움직이는 것이 보이시나요? 마우스를 클릭하여 바람도 후~ 불어보시구요. 사각형 눌러서 종료~^^*

이로써 우리는 Drag Force를 간단하게 프로그램으로 만들어 보았어요. 아주 간단하다 보니, 동그라미의 질량은 반영해도 동그라미의 표면적은 반영하지는 않았지요? 우리 코딩에 점점 친숙해 지면, 보다 정교한 프로그램을 만들어 보도록 해요~

아주 간단하지만 중요한 물리법칙을 담고 있는 우리 프로그램처럼 아직 서툴지만 자신의 할 일의 핵심을 잘 실천하는 강아지 만나보러 갈까요~^^*

우리도 이 멋진 강아지처럼 계속 배우고 익히면 멋진 우주무중력펜을 선물받게 될 거예요~~^^* 따뜻한 가슴으로 계속 열심히 공부해 봐요, 우리~^^*

꿈은 이루어 집니다!!