Silverback9

#야생으로

Creative Coding 독학 제025일 2024년04월21일(일)

넵! 새벽공부 바로 시작했습니다! 먼저, 동그라미가 캔버스 바닥에 닿을 때마다 마찰이 발생하는 것을 console 창에 나타내는 프로그램을 만들어 보겠습니다.

동그라미가 바닥에 닿을 때의 접촉면과 직각 방향으로 작용하는 Normal Force의 크기는 동그라미의 질량의 크기에 따라 달라집니다. 우리는 동그라미의 질량을 고정시켜 Normal Force의 크기도 고정시켜 상수(constant)로 다루기로 해요~^^*

먼저, 아래의 동영상을 클릭하여 6:33까지 보시며 오늘 공부 내용을 살펴 보시면 좋을 것 같아요~^^* 노트를 참고해 보시면 더욱 좋겠죠~^^*?

코드도 살펴 보실게요~^^*

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);
    //캔버스 바닥(y = height)과 동그라미의 아랫부분 표면(pos.y + r)과의 거리를 변수 diff에 저장합니다.
    
    if(diff < 1){
      //캔버스 바닥과 동그라미 아랫부분 표면 사이의 거리가 1픽셀 미만일 때 
      console.log('friction');
      //콘솔 창에 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 파일을 열어 코드를 살펴보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 보세요~^^* 그리고 동그라미가 바닥에 닿을 때 마다 콘솔창의 friction 글자의 카운팅 넘버가 커지는 것을 관찰해 보셔요~^^* 단순한데 은근 재미있는 프로그램이죠~^^*? 넵, 마찰의 세계 본격적으로 시작했습니다~^^* 종료는? 그렇죠! 사각형~^^* 우후~^^*

공부를 하고 있는 줄 알았는데 알고보니 꿈 속에 갇혀 헤맨 것일 뿐이라는 황당하고 답답한 느낌을 오늘 새벽에 살짝 받았는데요. 나아가고 싶지만 나아가지지 않는 마찰의 강력한 힘, 잠의 힘! 그 안에서 벗어나고 싶지만 아직 자신의 힘이 충분하지 않다는 실감이 주는 옅은 좌절감을 누가 대신 표현해 주니 감정의 정화를 느꼈어요.

새벽 바로 공부를 시작했고, 이 이른 아침 오늘 공부량을 마쳤습니다. 바닥에 닿아 마찰을 경험하지만 곧 다시 튀어올라내는 동그라미처럼! 오늘도 통통 튀어오르는 힘찬 하루 우리 시작해요~^^* I did it all! YEAH

작심삼일이라면 삼일마다 다시 시작하고. 일찍 잠들어 버렸다면 일찍 일어나서 다시 시작하고. I did it all!을 외치게 되는 그 순간을 또 만나러 일어나 보아요. 넵, 꿈은 이루어 집니다! ^^*

댓글 남기기