Silverback9

오늘은 제곱의 힘! 그 막강함을 실감하면서도 열심히 그 엄청난 연산작업을 해내고야 마는 멋진 프로그램을 만들어 보겠습니다~^^*

아래 동영상 강의를 클릭하면 오늘 공부를 바로 시작(11:40)할 수 있어요~^^*18:20까지 보시면 오늘 공부 끝~~~~^^*

하나. 동그라미들을 아주 많이 만들어 보겠습니다. 첫째 프로그램은 250개 둘째 프로그램은 무려 350개의 동그라미를 만들겠습니다. 와우!

둘. 동그라미들을 캔버스 중심으로부터 200에서 300사이 거리 구간에 무작위로 위치시킵니다. translate() 함수를 사용하여 캔버스 중심점을 기준으로 상대좌표체계를 만들어 이 작업을 지원하겠습니다.

셋. 동그라미들의 초기속도의 방향은 중심으로부터 뻗어나간 방향에서 90도로 회전시켜, 캔버스 중심점을 구심점으로 갖는 원의 탄젠트(접선)의 각도와 일치하게 설정해 보겠습니다.

넷. 엄청 많은 이 동그라미들이 서로를 끌어당기게 합니다. 이 단계는 엄청난 횟수의 연산작업을 수행하게 됩니다. 과연 우리의 컴퓨터는 이 작업을 수월하게 해낼까요? 매우 궁금하군요! 두둥~!

자세한 내용은 코드 안의 주석들을 살펴 보셔도 좋겠지요~^^*?

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 =1;
    //중력값을 1로 설정하여 동그라미들이 서로를 끌어당기며 형성해내는 원형대형의 전체크기 변화를 완만하게 만들어 보겠습니다. 
    
    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(800,800); 
  
  for( i = 0; i < 250; i++){
   //movers[0]에서 movers[249]까지 총 250개의 동그라미를 만들겠습니다. 
   
   let pos = p5.Vector.random2D();
   //동그라미의 위치 벡터 pos를 만들어 보겠습니다.
   //무작위 방향의 단위벡터를 생성하여 변수 pos에 저장합니다.
  
   let vel = pos.copy();
   //동그라미의 초기속도벡터 vel을 만들어 보겠습니다. 
   //동그라미 위치벡터인 pos를 복사하여 변수 vel에 저장합니다. 
   //동그라미 초기속도벡터 vel은 위치 벡터pos와 같은 방향인 단위벡터입니다. 
   
   vel.setMag(random(5,15));
   // 동그라미의 초기속도벡터 vel의 길이값을 5에서 15 사이의 무작위 값으로 설정합니다. 
   
   vel.rotate(PI/2);
   //동그라미 초기속도벡터 vel의 방향을 90도 돌리겠습니다. 중심으로부터 밖으로 뻗어나가가는 방향이 90도 돌려짐에 따라 vel의 방향은 동그라미들의 원형 대형의 탄젠트(접선)의 각도와 일치하게 됩니다. 
   
   pos.setMag(random(200, 300));
   //벡터 pos의 길이를 200에서 300 사이의 무작위 값으로 설정합니다.
   //동그라미는 (1) draw()함수 안에서 translate(width/2, height/2) 문장이 수행되면, (2) 좌표체계가 캔버스의 중앙을 중심으로 상대좌표체계로 바뀌게 되면서, (3) 캔버스 중심에서부터 200에서 300사이의 거리 구간에 위치하게 될 것입니다.

   let m =10
   //동그라미의 질량은 10의 값을 갖습니다. 
   
   movers[i] = new Mover(pos.x, pos.y, vel.x, vel.y, m);
   //동그라미를 생성합니다. 
 }
}

function draw() {
  background(0);
  
  translate(width/2, height/2);
  //좌표체계가, 캔버스의 중심이 좌표계의 중심이 되는, 상대좌표체계로 바뀝니다. 
  
  for(let mover of movers){
    for(let other of movers){
      if (mover !== other){
        mover.attract(other);
      }
    }
  }
  // movers[] 배열 안에 있는 모든 구성원소 각각이 movers[] 배열 안에 있는 다른 구성원소 각각에 대해 (자기자신도 포함하게 됨), 만약 그 상대방이 자기 자신이 아니라면, 그 상대방을 끌어당깁니다. 
  //for의 이중구문은 구성요소 갯수(250)의 제곱의 횟수(62,500)로 반복됩니다. 
  
  for(let mover of movers){
  mover.update();  
  mover.show(); 
  }
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행하여 250개의 동그라미들이 추는 원형 대형 춤을 감상해 보셔요~^^* 사각형을 눌러 종료하시구요~^^*

let movers = [];

function setup() {
  createCanvas(800,800); 
  
 for( i = 0; i < 350; i++){
   //movers[0]에서 movers[349]까지 총 350개의 동그라미를 만들겠습니다. 
   
   let pos = p5.Vector.random2D();
   //동그라미의 위치 벡터 pos를 만들어 보겠습니다.
   //무작위 방향의 단위벡터를 생성하여 변수 pos에 저장합니다.
  
   let vel = pos.copy();
   //동그라미의 초기속도벡터 vel을 만들어 보겠습니다. 
   //동그라미 위치벡터인 pos를 복사하여 변수 vel에 저장합니다. 
   //동그라미 초기속도벡터 vel은 위치 벡터pos와 같은 방향인 단위벡터입니다. 
   
   vel.setMag(random(5,15));
   // 동그라미의 초기속도벡터 vel의 길이값을 5에서 15 사이의 무작위 값으로 설정합니다. 
   
   vel.rotate(PI/2);
   //동그라미 초기속도벡터 vel의 방향을 90도 돌리겠습니다. 중심으로부터 밖으로 뻗어 나가는 방향이 90도 돌려짐에 따라 vel의 방향은 동그라미들의 원형 대형의 탄젠트(접선)의 각도와 일치하게 됩니다. 
   
   pos.setMag(random(200, 300));
   //벡터 pos의 길이를 200에서 300 사이의 무작위 값으로 설정합니다.
   //동그라미는 (1) draw()함수 안에서 translate(width/2, height/2) 문장이 수행되면, (2) 좌표체계가 캔버스의 중앙을 중심으로 상대좌표체계로 바뀌게 되면서, (3) 캔버스 중심에서부터 200에서 300사이의 거리 구간에 위치하게 될 것입니다.

   let m =10
   //동그라미의 질량은 10의 값을 갖습니다. 
   
   movers[i] = new Mover(pos.x, pos.y, vel.x, vel.y, m);
   //동그라미를 생성합니다. 
 }
}

function draw() {
  background(0);
  
  translate(width/2, height/2);
  //좌표체계가, 캔버스의 중심이 좌표계의 중심이 되는, 상대좌표체계로 바뀝니다. 
  
  for(let mover of movers){
    for(let other of movers){
      if (mover !== other){
        mover.attract(other);
      }
    }
  }
  // movers[] 배열 안에 있는 모든 구성원소 각각이 movers[] 배열 안에 있는 다른 구성원소 각각에 대해 (자기자신도 포함하게 됨), 만약 그 상대방이 자기 자신이 아니라면, 그 상대방을 끌어당깁니다. 
  //for의 이중구문은 구성요소 갯수(350)의 제곱의 횟수(122,500)로 반복됩니다. 
  
  for(let mover of movers){
  mover.update();  
  mover.show(); 
  }
}

이것을 클릭하여, mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요. 앞의 프로그램 코드와 달라진 것은 동그라미의 갯수가 100개 더 늘어나 총 350개가 된 것 밖에 없다는 것을 확인해 보실 수 있어요~^^* 삼각형을 눌러 프로그램을 실행시켜 동그라미들의 원형 대형 춤을 관찰해 보셔요. 춤의 속도가 좀 달라진 것 같지 않나요^^*? 와우! 제곱의 힘은 정말 큰 것 같아요. 컴퓨터도 350의 제곱인 122,500 번의 연산은 살짝 좀 버거워하는 것 같네요. 컴퓨터에게서 왠지 인간미가 느껴지는 걸요…^^* 사각형을 눌러 프로그램을 종료해 보시구요~^^*

122,500회의 연산작업을 어렵지만 꿋꿋하게 해내며 우리의 컴퓨터가 멋진 장면을 만들었네요!!

전 세계인의 가슴에 닿을 한 편의 영화가 만들어지기까지는 많은 어려움을 감내해야 할 때도 있겠지요. 고산병과 날씨 때문에 일 년을 더 기다려 촬영장소에 돌아와야 하기도 합니다…

그리고 마침내 멋진 마지막 장면이 만들어집니다~

영어자막으로 보시려면 이것을 클릭하셔요~^^*

오늘도 함께 공부해 주셔서 감사합니다. ‘매일 함께 공부하기’라는 사뭇 어려운 일을 매일 함께 해내어 주셔서 정말 감사드려요~^^*

넵, 내일 우리 또 만나서 코딩공부 함께 해요~^^*

꿈은 이루어 집니다~!!