Creative Coding 독학 제047일 2024년05월13일(월)

2024년 5월 13일

오늘은 태양이 모든 행성을 끌어당기고, 모든 행성도 서로를 끌어당기는 은하계를 프로그램으로 표현해 보겠습니다! 와우!

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

동영상 강의(11:45)에서는 태양이 모든 행성을 끌어당기고, 모든 행성도 서로를 끌어당기는 것을 표현하였는데요…음….근데….모든 행성도 자기 나름대로 태양을 끌어당길 것 같아요…그래서 저는 200개의 행성을 거느린 태양계를 표현해 보겠습니다!

(1) 태양이 모든 행성을 끌어당기고

(2) 모든 행성이 서로를 끌어당기고

(3) 모든 행성이 태양을 끌어당기는 것으로 표현해 볼게요.

음…어떻게 나올까요? 두둥!

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 = [];
let Sun;

function setup() {
  createCanvas(600,600); 
  
  for( i = 0; i < 200; i++){
    let pos = p5.Vector.random2D();
    let vel = pos.copy();
    vel.setMag(random(5,15));
    vel.rotate(PI/2);
    pos.setMag(random(100, 150));
    
    let m =1;
    //행성은 아주 작게 만들어 보겠습니다. 
    
    movers[i] = new Mover(pos.x, pos.y, vel.x, vel.y, m); 
  }
  
  Sun = new Mover(0,0,0,0, 500);
  //원래 p5.js 좌표계에서 (0,0)은 왼편 상단 모서리를 뜻합니다. 그러나, draw() 함수 안의 translate() 함수에 의해 캔버스 중앙이 중심이 되는 상대좌표체계로 바뀌게 되면 좌표 (0,0)의 태양은 캔버스 중앙에 위치하게 될 것입니다.
  //질량 크기 500을 가진 어마어마한 태양을 만들어 봅시다! 우~후!!
}



function draw() {
  background(0, 10);
  translate(width/2, height/2);
  for(let mover of movers){
    
    Sun.attract(mover);
    mover.attract(Sun); 
    //태양과 행성들은 서로를 끌어당깁니다.
    
    for(let other of movers){
      if (mover !== other){
        mover.attract(other);
        //행성들은 서로를 끌어당깁니다. 
    }
   }
  }
  
  
  for(let mover of movers){
  mover.update();  
  mover.show(); 
  }
  Sun.update();
  Sun.show();
}

이것을 클릭하여, mover.js 파일과 sketch.js 파일을 열어 코드를 살펴보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 조그만 행성들과 거대한 태양의 움직임을 관찰해 보셔요~^^* 사각형을 누리시면~넵, 프로그램 종료~~!!

어머! 행성들의 크기가 아주 작지만, 많은 수의 행성들과의 인력작용 떄문인지 태양이 움직이네요…???

우리 태양계는 행성의 수가 그렇게 많지 않고 딱 8개만 있어서, 태양이 태양계의 중심을 잡을 수 있는 것일까요?

그런데, 태양계를 넘어서 은하계 차원에서 보면, 엄청난 수의 별들이 적어도 하나 이상의 행성들을 거느리고 있어서, 별과 행성을 포함한 천체의 갯수는 엄청 큰 것 같아요. billions! trillions!

우리 태양계가 속한 은하계에는 태양보다 더 큰 별들이 있다고 해요. 와우, 태양보다 1500배나 큰 별도 있네요..

태양계의 중심인 태양도 은하계 주위를 돌고 있는지 묻는 어린이의 질문에 NASA에서 YES라고 대답해 주시네요.

우리의 태양이 우리의 은하계 구성원들 사이를 움직이는 모습을 한 번 볼까요?