Silverback9

오늘은 드디어 세 개의 물체가 서로를 끌어당기는 것을 표현하는 프로그램을 만들어 보겠습니다~^^* 아래 동영상을 클릭하시면 오늘 공부를 바로 시작(7:55)하실 수 있어요~^^* 11:38까지 보시면 되구요~^^*

하나. 중앙에 고정된 동그라미 한 개, 그리고 서로 반대방향으로 움직이는 두 개의 동그라미로 구성된 three body movement를 프로그램으로 만들어 보겠습니다~^^*

class Mover{
  constructor(x,y,vx,vy,m){
    this.pos = createVector(x,y);
    this.vel = createVector(vx, vy);
    this.acc = createVector(0,0);
    this.mass = m;
    this.r = sqrt(this.mass)*2; 
  }
  
  applyForce(force){  
    let f = p5.Vector.div(force, this.mass);
    this.acc.add(f); 
  }
  
  attract(mover){ 
    let force = p5.Vector.sub(this.pos, mover.pos);
    let distanceSq = constrain(force.magSq(),100, 1000);
    let G =25;
    let strength = G*(this.mass*mover.mass)/distanceSq;
    force.setMag(strength);
    mover.applyForce(force);
  }
  
  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 = [];

function setup() {
  createCanvas(400, 400); 

  movers[0] = new Mover(300, 200, 0, -5, 10);
  movers[1] = new Mover(100, 200, 0, 5, 10);
  movers[2] = new Mover(200, 200, 0, 0, 10);
  
  //동그라미 두 개를 캔버스 중앙 왼쪽과 오른쪽에 생성합니다.오른편 동그라미movers[0]는 속력 5로 위쪽 방향으로 왼편 동그라미 movers[1]은 같은 속력으로 아래쪽 방향으로 움직이려고 합니다.movers[2]는 초기 속도를 가지고 있지 않습니다. 모든 동그라미들은 질량 10을 갖습니다. 

}

function draw() {
  background(0, 10);
  
  movers[0].attract(movers[1]);
  movers[0].attract(movers[2]);
  
  movers[1].attract(movers[0]);
  movers[1].attract(movers[2]);
  
  movers[2].attract(movers[0]);
  movers[2].attract(movers[1]);
  
  //세 동그라미들이 다른 두 동그라미들을 각각 끌어당깁니다. 
   
  for(let mover of movers){
  //모든 동그라미들에 대하여
  
  mover.update();  
  mover.show();
  //각각 짝지은 동그라미 사이의 인력의 작용에 따른 움직임을 표현합니다.
  
  }
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴보셔요~^^* 삼각형을 눌러 프로그램을 실행하여 세 동그라미들의 움직임을 관찰해 보셔요. 초기 속도가 0이었던 가운데 동그라미는, 힘의 균형으로 인해 한 장소에 계속 머무는 것이 보이나요? 종료는 사각형~^^*

둘. 가운데 있는 동그라미의 초기 속도를 x축 방향 0.1 크기로 설정해 보겠습니다. 힘의 균형이 사라지면서, 가운뎃 동그라미가 움직이기 시작할까요?

let movers = [];

function setup() {
  createCanvas(400, 400); 

  movers[0] = new Mover(300, 200, 0, -5, 10);
  movers[1] = new Mover(100, 200, 0, 5, 10);
  
  movers[2] = new Mover(200, 200, 0.1, 0, 10);
  //movers[2]의 초기 속도를 x축 방향 0.1크기로 설정해 봅시다.  

}

function draw() {
  background(0, 10);
  
  movers[0].attract(movers[1]);
  movers[0].attract(movers[2]);
  movers[1].attract(movers[0]);
  movers[1].attract(movers[2]);  
  movers[2].attract(movers[0]);
  movers[2].attract(movers[1]);
  
  for(let mover of movers){
  mover.update();  
  mover.show();
  }
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 동그라미들의 움직임을 관찰해 보셔요. 가운데 동그라미가 서서히 움직이더니, 나중에는 다른 동그라미들이 가운데에 자리를 잡았다가 이내 곧 다시 움직이며 세 동그라미의 관계성이 끊임없이 변화하는 것이 보이나요? 오우 좀 신기하지 않나요? ^^* 사각형을 눌러 종료하시구요~^^*

셋. for의 이중구문을 사용하여 three body movement를 표현해 보겠습니다.

let movers = [];

function setup() {
  createCanvas(400, 400); 

  movers[0] = new Mover(300, 200, 0, -5, 10);
  movers[1] = new Mover(100, 200, 0, 5, 10);
  movers[2] = new Mover(200, 200, 0.1, 0, 10);  
}

function draw() {
  background(0, 10);
  
  for(let mover of movers){
    for(let other of movers){
      if (mover !== other){
        mover.attract(other);
      }
    }
  }
 
  // movers[] 배열 안에 있는 모든 구성원소 각각이 movers[] 배열 안에 있는 다른 구성원소 각각에 대해 (자기자신도 포함하게 됨), 만약 그 상대방이 자기 자신이 아니라면, 그 상대방을 끌어당깁니다. 
  
  // 이 과정을 자세히 살펴보면,
//(1) movers[0]는 movers[0]에 대해, 자기자신이므로, 끌어당기지 않고
//(2) movers[0]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(3) movers[0]는 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(4) movers[1]은 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(5) movers[1]은 movers[1]에 대해, 자기자신이므로, 끌어당기지 않고
//(6) movers[1]은 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(7) movers[2]는 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(8) movers[2]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(9) movers[2]는 movers[2]에 대해, 자기자신이므로, 끌어당기지 않습니다.
  //for의 이중구문은 구성요소 갯수(3)의 제곱의 횟수(9)로 반복됩니다. 
  
  for(let mover of movers){
  mover.update();  
  mover.show();
  }
}

이것을 클릭하여 sketch.js 파일의 코드를 살펴보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 동그라미들의 움직임을 관찰해 보셔요~ 두 번째 프로그램과 같은 움직임을 표현하고 있나요? 은근히 재미있지 않나요~^^* 종료를 위해서는 사각형 눌러 주시구요~^^*

넷. 동그라미를 개별적으로 표현하지 않고, 동그라미와 상대 동그라미 사이를 흰 색 선으로 표현해 보겠습니다.

let movers = [];

function setup() {
  createCanvas(400, 400); 

  movers[0] = new Mover(300, 200, 0, -5, 10);
  movers[1] = new Mover(100, 200, 0, 5, 10);
  movers[2] = new Mover(200, 200, 0.1, 0, 10);  
}

function draw() {
  background(0, 10);
  
  for(let mover of movers){
    for(let other of movers){
      if (mover !== other){
        mover.attract(other);
        
        stroke(255);
        line(mover.pos.x, mover.pos.y, other.pos.x, other.pos.y);
        // 동그라미와 상대 동그라미 사이를 흰색 선으로 표현합니다.
        
      }
    }
  }
  
  for(let mover of movers){
  mover.update();  
  }
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 흰 선의 모양을 관찰해 볼까요~^^* 다양한 모양의 삼각형이 그리고 때로는 일직선이 형성되는 것이 보이나요? 오호~ 요것도 은근 재미있지 않나요~^^* 넵, 종료를 위해선 사각형 눌러 주시면 되어요~^^*

근데요~^^* 삼각형 모양을 바라보고 있노라니 참….삼각형이 매력적인 도형이다…싶지 않으셔요?

아하~우리 몸으로 삼각형을 만들어 볼 수도 있겠네요~^^* 삼각형 춤을 단계적으로 분석해 볼까요~^^*

좀더 직관적으로~ 몸으로~ 삼각형 춤을 추는 방법을 이해해 볼까요~^^*

이제 남녀노소 다함께 언제 어디서나 멋진 삼각형 춤을 출 수 있겠죠~우후~^^*

우리 내일은 좀더 다양한 도형 모양으로 동그라미의 움직임을 공부해 볼까요~^^* 내일 또 만나요~^^*

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

넵, 꿈은 이루어 집니다!!