Silverback9

오늘은 중력이 존재하는 공간에 바람을 일으켜 동그라미의 움직임에 변화를 촉발하는 프로그램을 만들어 볼게요. 어느 공간에 두 가지 이상의 힘이 존재하는 경우, 그 힘의 총합이 질량 1의 물체의 가속도가 됩니다.

하나.

(1) Acceleration = Net Force * M

(2) If M= 1, Acceleration = Net Force.

(3) Therefore, 동그라미의 가속도 = 중력 + 바람

그래서 함수 acc.add()를 사용해 보겠습니다.

둘. 마우스를 클릭하였을 때만 wind을 생성하여 force에 더하기 위해서 if(mouseIsPressed)를 사용하겠습니다.

셋. 무한 반복되는 함수 draw() 특성으로 인해,

(1) 단 한 번 만들어진 wind가 지속적으로 작용되지 않도록

(2) 무한 반복 생성되는 중력이 총합에 반복적으로 더해져 가속도가 급격히 변하지 않도록 하기 위해

매번 가속도를 0으로 재세팅하기 위해 acc.set(0,0)을 사용해 보겠습니다.

아래 동영상을 클릭하시면 오늘 공부내용 바로 시작(17:40)할 수 있어요. 20:34까지 보시면 되어요~^^*

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
  }
  
  applyForce(force){
    
    this.acc.add(force); 
    // 공간 안에 생성되는 모든 힘을 더한 Net Force를 가속도로 사용한다.
    // Acceleration = Net Force * Mass
    // 동그라미 질량을 1로 설정하면 
    // Acceleration = Net Force * 1 = Net Force
    
  }
  edges(){
    if(this.pos.y >= height){ 
      this.pos.y = height;
      this.vel.y *= -1;
    }
  }
  
  update(){
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    
    this.acc.set(0,0);
    //공간 안에 존재하는 모든 힘의 합이 가속도가 되므로, (1) 공간 안에 지속적으로 작용하기 위해 무한 반복 생성되는 힘인 중력으로 인해 힘의 합이 급격히 증가하지 않도록 그리고 (2) 마우스 클릭 했을 때 딱 한 번 작용하는 힘인 바람이 지속적인 영향력을 가지지 않도록,매번 가속도를 0으로 세팅한다.
    
  }
  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);
  
  if(mouseIsPressed){   
     // 마우스가 클릭되어질 때만 
    
    let wind = createVector(0.5, 0);
    mover.applyForce(wind);
     // 왼쪽에서 오른쪽으로 작용하는 힘인 벡터 wind를 생성한다.
    
  }
  
  let gravity = createVector(0,1); 
  mover.applyForce(gravity); 
  // 위에서 아래로 작용하는 힘인 벡터 gravity가 무한반복 함수 draw() 안에서 생성되기 때문에 공간은 중력의 영향을 항상 받게 된다.  
     
  mover.update();
  // 가속도를 0로 초기화하는 작업이 update() 안에서 이루어 진다. 
  // 일정한 크기로 지속적으로 존재하는 중력과 마우스 클릭으로 단 한번 생성되었다 사라지는 바람의 합이 누적효과를 가지지 않도록, 매번 가속도를 0으로 초기화한다.  
  
  mover.edges(); 
  mover.show();
}

이것을 클릭하셔서 mover.js 파일과 sketch.js 파일을 열어 코드를 확인해 보세요~^^* 삼각형을 클릭하여 프로그램을 실행시키시고 마우스를 클릭하여 동그라미에게 바람을 후~ 불어 보세요. 사각형을 눌러 종료하시구요~

오늘은 좌우 공간이 열려있는 곳에서 동그라미에게 바람을 후~ 불어 주었는데요. 내일은, 벽을 만들어 놓고 동그라미에게 바람을 후~ 불어 주도록 할게요. 내일은 더 재미있겠죠~^^*?

중력도 신기했는데, 이젠 우리가 자연의 바람도 공간에 불어넣어 줄 수 있게 되었네요? 그래요~^^*. 우리는 한 발 한 발 우리의 꿈을 향해 나아가고 있어요~^^*. 넵! 꿈은 이루어 집니다!

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

그럼 우리, 내일 또 만나요~!