Silverback9

어제는 두 면이 접촉할 때를 감지하여 마찰이 발생한다는 메시지를 보내는 프로그램을 만들어 보았지요? 오늘은 마찰을 본격적으로 생성해 보도록 하겠습니다. 아래 동영상을 누르시면 오늘 공부를 바로 시작6:34)하실 수 있어요~^^* 8:15까지 보시면 되어요~^^*

마찰을 생성하기 위해,

하나. 동그라미의 velocity 벡터와 정반대 방향과 길이 1 unit을 가진 단위 벡터 마찰을 생성합니다.

둘. 마찰계수를 임의로 정하고 Normal Force의 크기는 동그라미의 질량값을 갖도록 정해봅시다.

셋. 마찰계수 mu와 Normal Force 크기값을 곱하여 벡터 마찰의 크기값으로 사용합니다.

넷. 벡터 마찰을 힘의 총합에 더하여 동그라미의 가속도에 반영합니다.

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; 
  }
  
  friction(){
    let diff = height - (this.pos.y + this.r);
    if(diff < 1){
      console.log('friction');
    
    let friction = this.vel.copy();
      //동그라미의 velocity 벡터를 그대로 카피합니다.
    
    friction.normalize();
      //1 unit 길이의 단위 벡터로 만듭니다.
    
    friction.mult(-1);
      //방향을 반대로 돌립니다. 
    //이로써, velocity 벡터와 정반대방향을 작용하는 단위벡터를 생성했습니다. 
      
      
    let mu = 0.1;
      //마찰계수 mu 값을 임의로 정합니다.
    
    let normal = this.mass;
      // 동그라미의 질량값을 Normal Force의 크기 값으로 정합니다. 
      // Normal Force는 물체의 무게와 비례관계에 있으며, 무게는 질량과 상관관계에 있으므로, 여기서는 아주 간단하게, Normal Force의 크기값으로 동그라미의 질량값을 사용하겠습니다.
      
    friction.setMag(mu * normal);
      //마찰의 크기는 (마찰계수 * Normal Force)이므로, 변수 mu와 normal을 곱하여 마찰의 길이값(크기값)으로 정합니다.  
    
    this.applyForce(friction);  
      //마찰 벡터를 힘의 총합에 더하여 동그라미의 가속도에 반영시킵니다.
      
    }
  }
  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 mover;

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

function draw() {
  background(0);
  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);
  
  mover.friction();
  mover.update();  
  mover.edges(); 
  mover.show();
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요^^* 삼각형을 눌러 프로그램을 실행시켜 보셔요. 마우스를 클릭하여 바람을 후~후~ 불어 주어도 동그라미가 종국에는 움직임을 멈추는 것을 관찰해 보셔요. 넵, 마찰의 힘입니다~^^* 종료를 위해서 사각형을 눌러 주시고요~^^*

현재 시각 아침 6시 30분. 공부를 마치고도 이른 아침이라니, 기분이 참 상쾌하네요. 꿈에 한 발 다가서며, 즐거운 하루 우리 시작해 보아요~^^* 넵, 꿈은 이루어 집니다!!