Creative Coding 독학 제034일 2024년04월30일(화)

2024년 4월 30일

오늘은 두 동그라미 사이의 거리값이 Force of Attraction에 어떤 영향을 끼치는 지에 대해 살펴 보고, 그 거리값을 적절하게 조절한 프로그램을 만들어 보겠습니다.

Force of Attraction의 크기(magnitude)는 두 동그라미의 질량과 중력계수를 곱한 뒤 두 동그라미 사이의 거리의 제곱으로 나눈 결과값이지요?

하나. 거리값은 거리의 제곱의 값으로 반영됩니다. 그러므로 다른 어떤 항목 보다도 Force of Attraction의 magnitude 변화에 큰 영향을 끼칩니다.

둘. 나눗셈으로 반영됩니다. 그러므로 거리가 많이 짧아지면 인력의 크기는 엄청나게 커지고, 거리가 많이 멀어지면 인력의 크기는 엄청나게 작아집니다.

셋. 거리의 최소값과 최대값의 조정을 통해 인력의 크기를 적절하게 조정할 수 있습니다.

오늘은 거리의 최소값을 5로 최대값을 50으로 설정하여 Force of Attraction의 magnitude를 조절해 보겠습니다~

아래 동영상 강의를 클릭하면 오늘 공부 내용을 시작(10:15)할 수 있어요. 13:40까지 보시면 되어요~^^* 거리값의 변화가 Force of Attraction의 magnitude 변화에 끼치는 영향은 노트를 참고해 보셔도 좋을 것 같습니다~^^*

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(),25, 2500);
    // mover 동그라미와 attractor 동그라미 사이의 거리의 제곱값을 최소 25 (5의 제곱) 최대 2500 (50의 제곱)로 제한하여 변수 distanceSq에 저장합니다.
   
    let G =5;
    let strength = G*(this.mass*mover.mass)/distanceSq;
    force.setMag(strength);
    mover.applyForce(force);
  
  }
  
  show(){
    fill(255);
    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.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 mover;
let attractor;

function setup() {
  createCanvas(400, 400);
  mover = new Mover(50,50,50);   
  attractor = new Attractor(200,200,50);
  
  background(0);
  //캔버스를 검게 칠합니다. 
}

function draw() {
  background(0, 5);   
  //캔버스를 불투명도 5를 가진 검은 색으로 칠합니다. 이전 프레임의 동그라미 자취가 남아있겠지요?

  mover.update();  
  mover.show();
  attractor.attract(mover);
  attractor.show();
}

이것을 클릭하여 attractor.js 파일과 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~. 삼각형을 눌러 프로그램을 실행시키고 사각형을 눌러 종료해 보셔요~. 실행과 종료를 반복해 보시면서, 매번 무작위 방향으로 출발하는 mover 동그라미의 움직임을 관찰해 보셔요. 움직임이 좀 예쁘죠~^^*

mover 동그라미의 자취가 연이어 연결되며 아름다운 붓글씨처럼 남겨지는 과정이 좀 멋지지 않나요? 서로가 서로에게 자취가 되어 주는 이 멋진 공연처럼요! 기술이 인간의 행복과 아름다움에 사용되는 것을 보여주는 첫 장면도 아주 멋지죠? 7월26일을 우리 함께 기다려 봐요~^^* “스포츠를 통해서 심신을 향상시키고 문화와 국적 등 다양한 차이를 극복하며 우정, 연대감, 페어플레이 정신을 가지고 평화롭고 더 나은 세계의 실현에 공헌하는” 멋진 분들을 만나 볼 수 있겠죠~^^*

올림픽 성화 기념 800대 드론쇼가 어제 마르세이유에서 있었네요~ 우리 함께 감상할까요~^^* 부드러운 지중해 바람을 귓가로 느끼며~

드론쇼가 준비되는 과정이 궁금하시다면 아래 영상도 구경해 보셔요~^^*