Silverback9

안녕하셔요^^* 꿀잠 주무시고 상쾌한 하루를 시작하셨나요? 네, 그럼, 어제의 공부량을 오늘 아침 따라잡아 볼게요. 무중력 공간에서 중력 공간으로의 변화를 두 가지 상황으로 실험해 보겠습니다~^^*

아래 동영상을 클릭하시면 아침 공부내용을 바로 시작(15:11)하실 수 있어요. 17:41까지 보시면 되어요~^^*

먼저, 공간 안에 존재하는 힘의 총합 Net Force가 Zero인 상황에서 우리가 마우스를 클릭하여 중력을 발생시켜 공간을 중력상태로 바꾸어 볼게요. 그러면, 처음에는 무중력 공간에 가만히 있던 동그라미가 중력의 영향을 받아 아래로 이동을 시작하고 바닥에 닿으면 튀어 오르겠지요? 아래로 작용하는 중력에 의해 다시 아래로 내려갔다 또 튀어 오르겠지요?

하나. Net Force가 0인 공간에서는, F*M = 0, 즉 Acceleration도 0이고 이에 따라 Velocity도 0인 상태입니다.

둘. 마우스를 클릭하면, 중력이 발생하고 이 Gravity가 Acceleration이 되어 (동그라미의 질량이 1이라서), Velocity를 변화시키고, Velocity에 의해 동그라미 위치도 변화됩니다.

셋. 동그라미가 바닥에 닿으면 Velocity의 방향을 바꾸어 위로 올라가도록 합니다. 아래로 계속 작용하는 중력에 의해 Velocity의 방향이 다시 바뀌면 ( 위 -> 멈춤 -> 아래) 동그라미는 내려옵니다.

아래 코드 속에서,

(1) “마우스가 클릭되면”이라는 조건문에 “mouseIsPressed“를 사용하는 부분과

(2) 동그라미의 초기 Acceleration과 Velocity를 0으로 설정하는 부분을

눈여겨 보시기 바랍니다~^^*

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    //동그라미의 위치 지정을 받아 벡터 pos를 생성한다.
    
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
    //힘의 총합이 0인 공간을 표현하기 위해서, 동그라미의 가속도도 0 속도도 0으로 잡아 동그라미를 지정좌표에 고정시켜 놓는다. 
  }
  
  applyForce(force){
    this.acc = 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); 
  }
  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 gravity = createVector(0,0.1); 
     mover.applyForce(gravity); 
    // 아래로 작용하는 중력 벡터를 생성시켜 무중력 공간을 중력공간으로 바꾼다.   
  }
  
  mover.update();
  mover.edges(); 
  mover.show();
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴보세요. 삼각형을 클릭하여 프로그램을 실행하시면, 동그라미가 공간 가운데 가만히 있을 거예요. 마우스를 클릭하여 무중력 공간을 중력 공간으로 바꾸시면, 동그라미가 움직일 거예요. 사각형을 눌러 종료하시구요^^*

자, 이번에는 마우스를 클릭 한 순간만 중력이 발생하고 없어지는 상황을 상상해 볼게요. 무중력 공간에서 우리가 어떤 물체에 아래방향으로의 힘을 단 한 번 가했을 때의 상황과 비슷할까요? 예를 들어 우주선 안에서 우주인이 농구공을 바닥으로 한 번 던진 상황?

마우스를 클릭한 순간 중력이 발생하여 이것이 가속도가 되어 속도를 변화시키고 속도가 위치를 변화시켜 동그라미가 아래로 움직이겠지요. 그러다가 바닥에 닿으면 위로 튕겨 올라오겠지요? 그런데, 마우스 클릭 한 순간을 제외하면 중력이 없으므로 가속도 값은 0를 유지하게 되고, 튕겨 올라오는 동그라미의 운동방향은 바뀌지 않게 되겠지요?

p5.js 의 draw()가 무한 반복 함수임을 떠올려 볼게요. 한번 가속도가 nonzero 값을 가지게 되면 계속 그 값이 유지되어요. 그래서 마우스 클릭했을 때만 중력발생에 의해 가속도가 nonzero가 되고, 그 외의 순간에는 중력이 없으므로 가속도가 원래의 초기값 즉 zero로 돌아가 있도록 만들어 주어야 해요. 그래서 this.acc.set(0,0); 라는 문장을 update() 안에 넣어 볼게요. draw()가 update()를 무한반복 호출하기 때문에, 가속도가 0으로 유지 되겠지요?

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
  }
  applyForce(force){
    this.acc = 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);
    //마우스를 클릭한 순간을 제외하고는 공간이 무중력 상태를 유지한다. 그래서, 힘이 zero 상태로 돌아가니 동그라미의 가속도는 0으로 초기화된다(0/M = 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 gravity = createVector(0,0.1); 
     mover.applyForce(gravity); 
    // 아래로 작용하는 중력 벡터를 생성시켜 무중력 공간을 중력공간으로 바꾼다.   
  }
  
  mover.update();
  // 가속도를 0로 초기화하는 작업이 update() 안에서 이루어 진다. 
  // 마우스를 클릭한 순간만 중력이 반짝 발생하고 사라지기 공간을 표현하기 위해, 마우스 클릭 순간을 제외하고는 동그라미의 가속도는 0을 유지한다. 

  mover.edges(); 
  mover.show();
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴보세요. 그리고 삼각형을 눌러 무중력 상태를 확인하신 후 마우스를 클릭하여 그 순간만 중력이 발생하는 것을 관찰해 보세요. 마우스를 클릭하실 때마다 중력이 반짝 발생하고 사라져 다시 무중력 공간이 되는 것을 느껴보셔요. 종료는 사각형~^^*

[중력공간 vs 무중력공간]에 대한 내용만으로도 아침 공부를 충분히 한 것 같아요~^^*. 우리 그럼, 오늘 저녁에 다시 만나 바람이 부는 공간을 실험해 보는 것이 어때요? 참, 벚꽃비 내리는 봄의 바람은 무슨 색일까요? 우리 포카혼타스에게 한 번 물어볼까요? 아름다운 노래와 함께 즐거운 낮시간 보내시구요~^^*