Silverback9

오늘은 어제 공부한 heading()함수를 사용하는 프로그램을 본격적으로 만들어 보겠습니다~^^* 우리들의 아름다운 태양계 행성들이 동그랗지 않고 세모난 모양이면 어떨까요?

아래 동영상을 클릭하시면 오늘 공부내용을 바로 시작(3:30)하실 수 있어요~^^* 5:00까지 보시면 오늘 공부 끝~~~^^*

class Mover{
  constructor(x,y,vx,vy,m, R, G, B){
    this.pos = createVector(x,y);
    this.vel = createVector(vx, vy);
    this.acc = createVector(0,0);
    this.mass = m;
    this.r = sqrt(this.mass)*2; 
    this.Red = R;
    this.Green = G;
    this.Blue = B;
    
    this.angle = 0;
    this.angleV = 0;
    this.anvleA = 0;
  }
  
  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 =0.5;
    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);
   //위치이동 가속도값을 0로 세팅합니다. 함수 draw()의 무한반복성으로 인해 Force의 누적과 연계된 가속도 값의 반복누적을 예방하기 위한 조치입니다. 
  }
  
  show(){
    stroke(this.Red,this.Green,this.Blue);
    //테두리도 색을 넣어 보겠습니다. 예쁘겠지요~~~^^*?
    strokeWeight(2);
    fill(this.Red,this.Green,this.Blue,100);
    
    push();
    //이 물체에게만 적용되는 작업들의 시작입니다. 
    
      translate(this.pos.x, this.pos.y);
      //좌표체계가 이 물체의 위치좌표(x,y)을 원점(0.0)으로 하는 상대좌표로 바뀝니다. 
 
      this.angle = this.vel.heading();
      //이 물체의 속도 벡터가 전체 캔버스 좌표체계에서 갖는 x축 길이값과 y축 길이값을 통해 각의 크기를 계산하여 그 값을 이 물체의 내부회전각 값을 나타내는 변수 angle에 저장합니다. 
      
      rotate(this.angle);
      //이 물체의 회전각 값만큼 좌표체계가 회전합니다. 
    
      triangle(-this.r,-this.r/2,-this.r,this.r/2,this.r,0);
      //원점을 중심으로 (-r, -r/2) (-r, r/2)(r,0) 좌표값을 가진 세 꼭지점으로 이루어진 날씬한 삼각형을 그립니다.  
    
    pop();
    //이 물체에게만 적용되는 작업들의 종료입니다. 
    
    //정리해 보면, 
    //1. 각 물체의 중점을 원점으로 하는 상대좌표가 각 물체마다 독립적으로 생기고, 이 상대좌표에서의 세 꼭지점 좌표값으로 이루어진 삼각형이 생깁니다. 
    //2. 삼각형의 회전각의 크기는, 이 물체가 전체 캔버스의 좌표체계 안에서 갖는 속도 벡터의 x축 길이값과 y축 길이값을 통해 계산한 각의 크기가 반영된 것입니다. 
    //3. 전체 캔버스의 좌표체계는 캔버스 한 가운데를 원점으로 갖는 상대좌표 체계입니다. 
    //4. 원래의 전체 캔버스의 좌표체계는 왼편의 위쪽 모서리를 원점으로 갖습니다.    
    
  }
}

let movers = [];
let Sun;

function setup() {
  
  createCanvas(400,400);
  //좌표체계의 원점(0,0)은 캔버스 왼편 위쪽 모서리에 있습니다. 
  
  for( i = 0; i < 8; i++){
    //8의 태양계 행성을 만듭니다.  
    
    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 = random(10, 25);
    
    let r = random(255);
    let g = random(255);
    let b = random(255);
    //다양한 색깔을 가집니다. 
    
    movers[i] = new Mover(pos.x, pos.y, vel.x, vel.y, m, r, g, b); 
  }
  
  Sun = new Mover(0,0,0,0, 500, 255, 0,0);
  //붉고 거대한 태양을 만듭니다. 붉은색은 R:255 G:0 B:0 입니다. 
}

function draw() {
  background(0);
  
  translate(width/2, height/2);
  //캔버스 한가운데가 원점(0,0)이 되는 상대좌표체계로 바뀝니다. 
  
  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 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 우리들의 아름다운 태양계 종이 비행기 군단의 에어쇼를 감상하셔요~^^* 예쁘지요~^^*? 네, 사각형을 눌러 종료하시구요~~^^*

음…다양한 좌표체계를 넘나드는 작업들을 본격적으로 공부하기 시작한 오늘인 것 같아요.

(1) 왼편 위쪽 모서리를 원점으로 하는 컴퓨터 그래픽 캔버스 좌표체계에서 (2) 캔버스 중심을 원점으로 갖는 상대좌표체계로 옮겨와서 (3) 물체의 중점을 원점으로 갖는 독립적인 다중상대좌표체계를 만들고 (4) 캔버스 중심을 원점으로 갖는 상대좌표체계 위의 물체의 속도 벡터의 x축 길이와 y축 길이에서 각의 크기를 구하여 (5) 물체의 중점을 원점으로 갖는 독립적인 다중상대좌표체계 위의 물체의 내부 회전각으로 반영하고 (6)물체의 중점을 원점으로 갖는 독립적인 다중상대좌표체계 위 x,y 좌표값 세 개를 꼭지점으로 갖는 삼각형을 만들고 (7) 캔버스 중점을 원점으로 갖는 상대좌표체계 위 원점에 붉은 태양이 자리하고 (8) 캔버스 전체에 작용하는 중력의 영향과 더불어 행성들과 태양이 서로서로를 끌어당기고 (9) 지하철에서 버스에서 실내 자전거 위에서 책상 맡에서 누워서 나무 아래 앉아서 걸으면서 (10) 스마트폰과 패드와 노트북과 데스트탑 컴퓨터 그리고 HTML로 연결된 TV의 화면 위로 펼쳐지는 이 멋진 에어쇼를 감상하면서 (11) 다중으로 겹치면서 동시에 서로 연결된 현실과 가상의 세계 속에서 끈기있게 살아가는 작고 연약하고 소중한 존재들인 우리^^*

종이를 접어 비행기 한 대를 만들어 하늘에 올려 보내는 용기를 내어서

새로운 단계와 국면과 차원으로 이동해 보아요~^^*

함께 하면 우린 해낼 수 있어요!

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

우리 내일 또 만나서 코딩 공부 같이 하는거예요~~~^^*

네! 꿈은 이루어 집니다!!!