Silverback9

오늘은 두 개의 동그라미가 서로를 끌어당기는 것을 프로그램으로 표현해 보겠습니다~^^*. 그리고, 그것의 응용으로 서로를 끌어당기는 동그라미 쌍을 여러 개 만들어 보겠습니다. 이것은 동영상 강의에 들어있지 않고, 제 나름으로 응용작품을 만들어 보았습니다~^^* 살펴봐 주시면 감사하겠습니다~^^*

아래의 동영상 강의를 클릭하시면 오늘의 공부내용을 바로 시작(4:00)할 수 있어요~^^* 7:58까지 보시면 오늘 공부 끝~^^*

한 쌍의 동그라미가 서로 반대방향으로 가려고 하면서 서로 끌어당기는 것을 표현해 볼게요~^^*

// class Mover 정의한 파일 

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;
    //현재 동그라미의 초기 속력 5와 질량 10에 반응하여 짝지은 동그라미들 사이의 거리가 대체로 유지됩니다. 
   
    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 = [];
//mover 동그라미를 여러 개 만들어 봅시다.

function setup() {
 
  createCanvas(400, 400);
  //캔버스를 만듭니다. 

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

  //동그라미 두 개를 캔버스 중앙 왼쪽과 오른쪽에 생성합니다.오른편 동그라미movers[0]는 속력 5로 위쪽 방향으로 왼편 동그라미 mover[1]은 같은 속력으로 아래쪽 방향으로 움직이려고 합니다. 질량은 10입니다 

}

function draw() {
  background(0, 10);
  
  movers[0].attract(movers[1]);
  movers[1].attract(movers[0]);
  //서로 마주보는 동그라미가 서로를 끌어당깁니다. 
   
  for(let mover of movers){
  mover.update();  
  mover.show();
  //짝지은 동그라미 사이의 인력의 작용에 따른 움직임을 표현합니다.
  }
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~ 삼각형을 눌러 프로그램을 실행시켜 동그라미 두 개의 움직임을 관찰해 보셔요~^^* 종료는 사각형~^^*

여러 쌍의 동그라미들이 짝끼리 서로를 끌어당기면 전체적으로는 재미있는 대형이 생겨나는 것 같아요.

동그라미의 위치의 x,y 좌표와 속도 벡터의 x,y 방향 길이값을 계산하기 쉽도록, 특수직각삼각형의 피타고라스 정리를 활용해 보았습니다. 자세한 내용을 노트를 참고해 보셔도 좋을 듯 합니다~^^*

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 =100;
    //현재 동그라미의 초기 속력 10과 질량 10에 반응하여, 짝지은 동그라미들 사이의 거리가 대체로 유지됩니다. 
    //중력이 커지면 짝지은 동그라미들 사이의 거리가 줄었다가 회복되기를 반복하게 됩니다.
    //중력이 작아지면 짝지은 동그라미들 사이의 거리가 커졌다가 회복되기를 반복하게 됩니다. 
    
    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 = [];
//mover 동그라미를 여러 개 만들어 봅시다.

function setup() {
   
let side = 400;//캔버스 한 변의 길이 
let center = side/2; //캔버스 중싱
let radius = 100;  // 원형 움직임의 반지름
let velocity = 10; //동그라미의 초기 속도
let mass = 10; //동그라미의 질량
  
let a = radius/sqrt(2); //원형움직임반지름의 내각45도 측면 길이 
let b = radius*sqrt(3)/2; //원형움직임반지름의  내각30도 측면 길이 
let c = radius/2; //원형움직임반지름의 내각60도 측면 길이  
  
let d = velocity/sqrt(2); //내각45도 면의 속도 벡터 길이 
let e = velocity*sqrt(3)/2; //내각30도 면의 속도 벡터 길이  
let f = velocity/2; //내각 60도 면의 속도 벡터 길이
  
//수치 조절의 편의성을 위해 관련 수치들을 변수화 해보았습니다.  
  
createCanvas(side, side);
//캔버스를 만듭니다. 

movers[0] = new Mover(center+radius, center, 0, -velocity,mass);
movers[1] = new Mover(center-radius, center, 0, velocity,mass);
//0도 180도 
movers[2] = new Mover(center, center-radius, -velocity, 0,mass);
movers[3] = new Mover(center, center+radius, velocity, 0,mass);
//90도 270도   
 
movers[4] = new Mover(center+a, center-a, -d,-d,mass);
movers[5] = new Mover(center-a, center+a, d,d,mass);
//45도 225도 
movers[6] = new Mover(center-a, center-a, -d, d,mass); 
movers[7] = new Mover(center+a, center+a, d, -d,mass); 
//135도 315도 
  
movers[8] = new Mover(center+b, center-c, -f,-e,mass );
movers[9] = new Mover(center-b, center+c,f,e, mass); 
//30도 210도 
movers[10] = new Mover(center-b, center-c,-f,e,mass);
movers[11] = new Mover(center+b, center+c,f,-e, mass );
//150도 330도  
  
movers[12] = new Mover(center+c, center-b,-e, -f,mass );
movers[13] = new Mover(center-c, center+b,e,f,mass); 
//60도 240도
movers[14] = new Mover(center-c, center-b,-e,f,mass );
movers[15] = new Mover(center+c, center+b,e,-f,mass);  
//120도 300도 
//서로 마주보면서 서로 반대방향으로 움직이려는 동그라미 쌍들이 생성됩니다.
  
}

function draw() {
  background(0);  
  
  movers[0].attract(movers[1]);
  movers[1].attract(movers[0]);
  
  movers[2].attract(movers[3]);
  movers[3].attract(movers[2]); 
  
  movers[4].attract(movers[5]);
  movers[5].attract(movers[4]);
  
  movers[6].attract(movers[7]);
  movers[7].attract(movers[6]);
  
  movers[8].attract(movers[9]);
  movers[9].attract(movers[8]);
  
  movers[10].attract(movers[11]);
  movers[11].attract(movers[10]);
  
  movers[12].attract(movers[13]);
  movers[13].attract(movers[12]);
  
  movers[14].attract(movers[15]);
  movers[15].attract(movers[14]);
  
  //서로 마주보는 동그라미들이 서로를 끌어당깁니다. 
   
  for(let mover of movers){
  mover.update();  
  mover.show();
  //짝지은 동그라미 사이의 인력의 작용에 따른 움직임을 모두 표현합니다.
  //동그라미들이 원형으로 돌아가는 듯 보이게 됩니다.   
  }
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌려 프로그램을 실행시켜 동그라미들의 움직임을 관찰해 보셔요~^^* 종료를 위해서는 사각형을 클릭하시면 되겠죠~^^*

짝끼리 서로 반대 방향으로 움직이려고 하면서 서로를 끌어당기는데, 전체 대형은 바퀴가 돌아가는 것 같기도 하고, 우리의 민속춤을 추는 것 같기도 하고….^^*

아 네~, 우리~, 아름다운 민속춤 강강술래를 계승하고 있는 멋진 소녀들을 만나 볼까요?

옛 것을 익히는 모습 넘 근사하지요~^^* 이번에는 온고지신을 해낸 멋진 작품도 만나 볼게요~^^*

오늘은 서로를 끌어당기는 동그라미들이 서로 반대방향을 향하여 나아가며 원형의 움직임을 만들어 내는 것을 공부해 보았습니다~^^* 오늘도 함께 공부해 주셔서 감사합니다~^^*

내일은 또 어떤 움직임을 프로그램으로 표현해 볼까요? 두둥실 떠오른 달을 보며 춤을 추듯 설레는 마음으로 내일 우리 또 만나서 함께 공부해 볼까요~^^*

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