Silverback9

#야생으로

Creative Coding 독학 제021일 2024년04월16일(화)

오늘은 서로 다른 질량을 가진 동그라미가 중력과 바람 그리고 벽과 바닥에 반응하여 움직이는 프로그램을 만들어 보겠습니다.

하나. 지구 상에서의 물체의 무게는 지구 중력 * 물체의 질량입니다.

둘. 무게는 힘으로 작용하여 가속도를 변화시킵니다.

그래서, 중력 * 질량을 받는 벡터 무게를 만들어 가속도를 변화시켜 보겠습니다.

아래의 동영상을 클릭하여 오늘 공부를 시작(4:55)해 보셔요~^^* 7:50까지 보시면 되어요~^^* 저는 코드를 완성하여 다시 돌아오겠습니다. 밤 12시 전에 포스팅을 해야 오늘 날짜로 나와서 일단 동영상 먼저 올려드려요~^^*

기다려 주셔서 감사합니다~^^* 이제 코드를 살펴 보시고 프로그램도 실행해 볼까요~^^*

class Mover{
  constructor(x,y,m){
    //동그라미의 센터 x,y좌표값과 함께 질량값도 넘겨 받습니다. 
    
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
    this.r = 16; 
    
    this.mass = m; 
    // 받은 질량값을 변수 mass에 저장합니다. 
  }
  
  applyForce(force){  
    
    let f = p5.Vector.div(force, this.mass);
    this.acc.add(f); 
  }
  
  edges(){
    if(this.pos.y >= height - this.r){ 
      this.pos.y = height - this.r;
      this.vel.y *= -1;
    }
    
    if(this.pos.x >= width - this.r){
      this.pos.x = width - this.r;  
      this.vel.x *= -1;
    } else if(this.pos.x <= this.r){
      this.pos.x = this.r;
      this.vel.x *= -1;
    }    
  }
  
  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 moverA;
let moverB;

function setup() {
  createCanvas(400, 400);
  
  moverA = new Mover(100,200, 2);
  moverB = new Mover(300,200, 4);
  //동그라미의 센터 x,y 좌표값과 함께 질량값도 지정해서 동그라미 클래스 생성 함수를 호출합니다.
}

function draw() {
  background(0);
  if(mouseIsPressed){  
    let wind = createVector(0.1, 0);
    moverA.applyForce(wind);
    moverB.applyForce(wind);
  }
  let gravity = createVector(0,0.2); 
  
  let weightA = p5.Vector.mult(gravity, moverA.mass);
  let weightB = p5.Vector.mult(gravity, moverB.mass);
  // 중력 벡터와 동그라미 질량을 곱하여 무게 벡터를 생성합니다. 
  
  moverA.applyForce(weightA);
  moverB.applyForce(weightB);   
  //중력 곱하기 질량인 무게를 힘의 값으로 넘깁니다. 
  
  moverA.update();  
  moverA.edges(); 
  moverA.show();
 
  moverB.update();  
  moverB.edges(); 
  moverB.show();
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요. 그리고 삼각형을 눌러 프로그램을 실행하여 크기는 같지만 질량은 다른 두 동그라미가 중력에는 어떻게 반응하는 지 관찰해 보셔요. 그리고 마우스를 눌러 바람을 후~ 불어보시며 두 동그라미의 움직임을 관찰해 보셔요. 중력에는 같은 가속도를, 그리고 바람에는 서로 다른 가속도를 가지는 것이 느껴지시나요? 사각형을 눌러 프로그램을 종료해 보셔요~

내일 공부를 할 때는 오늘 공부 부분에 대한 그림 요약을 만들어 보며 복습 시간을 가지도록 할게요~

오늘은 크기는 같은데 질량은 서로 다른 두 동그라미의 움직임을 살펴 보았습니다. 내일은 크기도 다르고 질량도 다른 동그라미의 움직임을 살펴 볼게요~^^*

이 밤 주무시러 가시기 전 자유 낙하의 장면이 들어 있는 마이클 잭슨님의 뮤직 비디오를 보고 가실까요? 사람은 인종과 모습과 크기에 상관없이 모두 지구 중력의 영향을 받는 소중하고 연약하고 아름다운 지구 생명체입니다~^^*

지구 위에 등을 대고 누운 이 밤 꿀잠 주무시며 꿀꿈 꾸셔요~ 꿈은 이루어 집니다!!

우리 내일 또 만나요~^^*

댓글 남기기