Creative Coding 독학 제275일 2024년12월27일(금)

2024년 12월 27일

오늘은 우리 손으로 직접 Genetic Algorithm 기반 프로그램 코드를 만들어 가는 공부 첫 날이예요~~^^* YEAH~~^^*

똑똑한 로켓 프로그램을 만들어 볼까 하는데요~~^^* 어떠셔요~~^^*?

좋으시다면~~^^* Say Yes~~^^*

네~~^^* 흔쾌히 “Yes~~!!!!”라고 대답해 주셔서 감사합니다~~^^*

로켓하니까~~^^* 역시~~^^* 움직임에 대한 것이겠네요~~^^*

그렇다면~~^^*

네~~!!! 그러네요~~!!

위치와 속도와 가속도~~그리고 힘의 적용~~^^*

네~~^^* 익숙했던 한 장면으로 돌아가는 시간이예요~~^^*

로켓이 모습과 운동 방식을 담고 있는 함수 function Rocket()를 만들어 보겠습니다~^^*

Class 구조와 비슷한 function Rocket()입니다~^^*

function Rocket() {
  this.pos = createVector();
  this.vel = createVector();
  this.acc = createVector();
  //위치벡터, 속도벡터, 가속도벡터를 생성하고요~^^*
  
  this.applyForce = function(force) {
    this.acc.add(force);
  }
  //힘을 가속도에 적용하는 함수입니다~^^*

  this.update = function() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }
  //가속도를 속도에 더하고~^^* 속도를 위치에 더하여~^^* 위치이동을 이룬 후 가속도는 0로 다시 세팅합니다~~^^*

  this.show = function() {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    rectMode(CENTER);
    rect(0, 0, 50, 10); 
    pop();
  } 
 //위치좌표를 중점으로 상대좌표체계로 변환한 뒤~~^^* 속도벡터의 방향으로 몸을 틀어서~^^* 가로 20 세로 10 너비의 사각형으로 모습을 표현합니다~^^* 몸을 틀었기 때문에 세로로 길쭉한 직사각형처럼 보이게 될 것 같습니다~^^*
//여러 개의 로켓이 개별 활동을 할 수 있도록~^^* push() - pop() 구조를 사용하겠습니다~^^* 
}

그럼 우리 이제~~^^* 검은 캔버스 바닥 한 가운데에서 하얀 로켓 하나가 예쁘게 떠오르는 모습을 표현해 볼까요~~^^*

var rocket; 

function setup() {
  createCanvas(400, 400);
  rocket = new Rocket();
}
// 함수 Rocket()을 호출하여 Rocket 하나를 생성하여 변수 rocket에 담습니다~^^* 

function draw() {
   background(0);
   rocket.update();
   rocket.show(); 
} 
//검은 우주 공간에~~^^*
//rocket의 위치변화 과정을 시각적으로 표현합니다.   


function Rocket() {
  this.pos = createVector(width/2, height);
  this.vel = createVector(0, -1);
  this.acc = createVector();
  
  this.applyForce = function(force) {
    this.acc.add(force);
  }
  
  this.update = function() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  this.show = function() {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    rectMode(CENTER);
    rect(0, 0, 50, 10); 
    pop();
  } 
}

네~^^* 물체의 운동을 표현하는 핵심코드의 복습!! 한 번 플레이 해 보시겠어요~~^^*

네~~^^* 오늘 저와 함께 <<물체의 운동 : 위치-속도-가속도 벡터>>를 복습해 주셔서 감사합니다~~^^*

우리 내일은 이 로켓에 DNA를 심어 볼까요~~~^^*

후배님들의 멋진 축하 함성에 힘을 받아 고등학교를 졸업하고 사회의 멋진 구성원으로 활약하게 될 선배님들처럼~~^^*