Creative Coding 독학 제035일 2024년05월01일(수)

2024년 5월 1일

오늘은 여러 개의 mover 동그라미와 하나의 attractor 동그라미 사이의 Force of Attraction을 표현한 프로그램을 만들어 보겠습니다. 동그라미들이 많이 나오니까 attractor 동그라미는 구별이 쉽도록 핫!핑크 옷을 입혀 볼게요~^^*

여러 개의 동그라미…..떠오르는 그 무언가가 있나요~^^*

그렇죠! 배열, for, 그리고 let … of …!

그리고, 보기에 좀더 편안한 움직임이 될 수 있도록,

(1) mover 동그라미의 회전 반경을 넓히기 위해 초기 velocity 값을 증가시키고,

(2) mover 동그라미와 attractor 동그라미 사이의 거리값의 범위를 좀더 줄여서 동그라미들의 움직임의 속력차이는 좀더 줄여보겠습니다.

(3) mover 동그라미는 캔버스 안의 무작위 좌표값과 질량은 50~150 범위로 하여 생성해 보겠습니다.

좀더 자세한 내용들은 코드 안의 주석을 살펴 보셔요~^^*

아래 동영상 강의를 클릭하면 오늘 공부내용을 시작(13:30)하실 수 있어요~^^*

class Attractor{
  
  constructor(x, y, m){
    this.pos = createVector(x,y);
    this.mass = m;
    this.r = sqrt(this.mass)*2;
  }
  
  attract(mover){
    let force = p5.Vector.sub(this.pos, mover.pos);
    
    let distanceSq = constrain(force.magSq(),100, 1000);
    //attractor 동그라미와 mover 동그라미들 사이의 Force of Attraction의 magnitude 차이를 좀더 줄이기 위해, mover 동그라미와 attractor 동그라미 사이의 거리값의 범위를 좀더 줄여보겠습니다.  
    
    let G =5;
    let strength = G*(this.mass*mover.mass)/distanceSq;
    force.setMag(strength);
    mover.applyForce(force);
  }
  
  show(){
    noStroke();
    
    fill(255,0,100);
    //(R:255, G:0, B:100)으로 attractor동그라미 안을 핫!핑크색을 채워 눈에 잘 보이게 만들어 보겠습니다. 
    
    ellipse(this.pos.x, this.pos.y, this.r*2);
  }
}

class Mover{
  constructor(x,y,m){
    this.pos = createVector(x,y);
    
    this.vel = p5.Vector.random2D();
    //mover 동그라미의 처음 velocity는 무작위로 생성합니다.
    this.vel.mult(5);
    //처음 velocity 방향으로 많이 나아가다 attractor 쪽으로 끌리도록 하면 회전 반경이 커서 보기가 좋기 때문에 velocity를 5배 증가시킵니다. 
    
    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); 
  }
  
  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 동그라미를 여러 개 만들어 봅시다. 

let attractor;

function setup() {
  
  createCanvas(600, 600);
  //동그라미들이 많이 나오니, 캔버스를 넓혀 보겠습니다. 
  
  for (let i = 0; i < 10; i++){
    //열 개의 mover 동그라미를 만들겠습니다.
    
    let x = random(width);
    let y = random(height);
    //캔버스 범위 안의 무작위 x, y 좌표를 가지고
    
    let m = random(50, 150);
    //50에서 150 사이의 무작위 질량을 가진
    
    movers[i] = new Mover(x, y, m);
    //class Mover 동그라미를 만들어 배열 movers에 차례대로 저장합니다.
  }
   
  attractor = new Attractor(width/2,height/2,100);
  //캔버스 정중앙에 질량 100을 가진 attractor 동그라미를 만듭니다. 
  
  background(0);
  //캔버스를 검게 칠합니다. 
}

function draw() {
  background(0, 5);  
  
  for(let mover of movers){
  // 모든 mover 동그라미에 대해 attractor 동그라미 사이의 인력의 작용에 따른 움직임을 표현합니다.   
    
  mover.update();  
  mover.show();
  attractor.attract(mover);
  attractor.show();
  }
}

이것을 클릭하여 attractor.js 파일과 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~ 삼각형을 눌러 프로그램을 실행하고 사각형을 눌러 종료하셔요. 실행을 반복하면서 무작위 위치에서 생성되는 mover 동그라미들의 움직임을 관찰해 보셔도 재미있겠죠~^^*

우와! 벌써 우리는 만유인력의 법칙 한 파트를 끝내었네요! 계속 가니까 결승선에 다다르게 되네요, 와우! 우리 또 계속 가봐요~^^*

질량도 다르고 처음 나타난 위치도 다르고 움직이는 모습도 살짝쿵 다른 mover 동그라미들이 부지런히 계속 움직이는 것을 보니, 이 세상 다양한 동물들이 제 모습대로 제 속도대로 열심히 달리고 날고 혜엄치는 모습이 떠오르기도 하네요~^^*