Creative Coding 독학 제314일 2025년02월04일(화)

2025년 2월 4일

오늘은 genetic algorithm 기반으로 맛있는 것에 다가가고 위험한 것에서 멀어지는 귀엽고 총명한 vehicle 차량 프로그램 공부를 다시 시작하는 날~~^^* Yeah~~^^*

부드러운 음파에 몸을 맡기고 편안한 아침을 열고 계셔요~^^* 공부 정리해서 돌아 올게요~^^* 쓩우웅~^^*

네~^^* 먼저~^^*

우리의 귀엽고 총명한 vehicle 차량이 물체를 잘 추구하는 지 확인해 보겠습니다~^^*

마우스로 target을 이리저리 움직여 vehicle이 target을 잘 따라오는 지 테스트 해 볼게요~^^*

class Vehicle {
  constructor(x, y) {
    this.acceleration = createVector(0, 0);
    this.velocity = createVector(0, -2);
    this.position = createVector(x, y);

    this.health = 1;

    this.r = 6;
    this.maxspeed = 8;
    this.maxforce = 0.2;
  }


  update() {
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxspeed);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
  }

  applyForce(force) {
    this.acceleration.add(force);
  }


  seek(target) {

    const desired = p5.Vector.sub(target, this.position); 
    // vehicle의 현재 위치에서 target으로 향하는 벡터입니다. 
 
    desired.setMag(this.maxspeed); 
    //벡터 desired의 힘의 크기를 maxspeed로 세팅하겠습니다. 

    let steer = p5.Vector.sub(desired, this.velocity);
    // 가고자 하는 방향의 벡터 desired에서 현재 vehicle이 가고 있는 방향의 벡터 this.velocity를 뺄셈하여 vehicle이 몸을 틀어야 할 방향을 가진 벡터 steer에 저장합니다. 

    steer.limit(this.maxforce); 
    // 벡터 steer의 힘을 this.maxforce 값까지로 제한하겠습니다.

    this.applyForce(steer); 
    //벡터 steer를 vehicle에 작용시킵니다. 
  }

  display() {
    let theta = this.velocity.heading() + PI / 2;
    fill(127);
    stroke(200);
    strokeWeight(1);
    push();
    translate(this.position.x, this.position.y);
    rotate(theta);
    beginShape();
    vertex(0, -this.r * 2);
    vertex(-this.r, this.r * 2);
    vertex(this.r, this.r * 2);
    endShape(CLOSE);
    pop();
  }
}

var vehicle;


function setup() {
  createCanvas(400, 400);
  vehicle = new Vehicle(width/2, height/2);
}

function draw() {
  background(51);
  
  var target = createVector(mouseX, mouseY);
  
  fill(127);
  stroke(200);
  strokeWeight(2);
  ellipse(target.x, target.y, 48, 48);
  
  vehicle.seek(target);
  vehicle.update();
  vehicle.display();
}

마우스/손가락을 이리저리 움직여 target의 위치를 바꾸어 볼까요~^^* 우리의 귀엽고 총명한 vehicle 차량이 잘 따라 오나요~^^*

네~^^* 함수 seek()가 잘 작동되고 있는 것 같아요~~^^* 우리 작은 성공에 감사하며~^^*

이번엔, 몸에 좋은 맛있는 음식을 만들어 볼까요~~^^*

배열 food[]를 준비해 보겠습니다~^^* 무작위 위치값을 가진 구성요소 열 개를 생성하여 배열 food[]에 담아 보겠습니다~^^* 녹색의 작은 동그라미로 표현해 볼게요~^^*

var vehicle;
var food = [];

function setup() {
  createCanvas(400, 400);
  
  vehicle = new Vehicle(width/2, height/2);
  
  for( var i = 0; i < 10; i++) {
    var x = random(width);
    var y = random(height);
    food.push(createVector(x, y));
  }
}

function draw() {
  background(51);
  
  var target = createVector(mouseX, mouseY);
  
  fill(127);
  stroke(200);
  strokeWeight(2);
  ellipse(target.x, target.y, 48, 48);
  
  for(var i = 0; i < food.length; i++) {
    fill(0, 255, 0);
    noStroke();
    ellipse(food[i].x, food[i].y, 8, 8);
  }
  
  vehicle.seek(target);
  vehicle.update();
  vehicle.display();
}

건강한 초록색 뿜뿜~^^* 맛있는 음식들이 생겨났나요~^^*

네~^^* 몸에 좋은 맛있는 음식들이 차르르 차려지니 보는 것만으로도 배가 부르네요~~^^*

그럼, 이제 이 맛있는 음식들을 먹어 봐야겠네요!!!

새로운 함수 eat()를 만들어 보겠습니다~~~^^*

먼저, 자신에게서 가장 가까운 음식에게 다가가는 동작을 표현해 보도록 하겠습니다.

eat(list) {
    var record = Infinity;
    var closest = -1;
    for (var i = 0; i < list.length; i++) {
      var d = this.position.dist(list[i]);
      if(d < record) {
        record = d;
        closest = i;
      }
    }
    this.seek(list[closest]);
  }
  //가장 가까운 거리에 대한 신기록 record는 앞으로 점점 수치가 작아질 것이므로, 시작하기 전까지는 알 수 없는 가장 큰 값 Infinity 무한대 값으로 초기 설정하겠습니다~^^*
  //배열 list[]의 첫 구성요소 list[0]도 살펴봐야 하기 때문에, 가장 가까운 list 구성요소의 인덱스를 표현할 closest는 -1로 초기 설정하겠습니다. 
  //vehicle과 가장 가까운 거리에 있는 list의 구성요소인 list[closest]를 추구하도록 함수 seek를 호출하겠습니다~^^*

그럼 이제, 자신에게서 가장 가까운 맛있는 음식을 eat하려고 seek하는 vehicle 차량을 만나볼까요~^^*

네~^^* 맛있는 음식 곁을 떠나지 못하는 귀여운 vehicle이 탄생되었네요~~^^*

이제는 자신이 찾은 이 맛있는 음식을 냠냠 먹도록 해 볼까요~~^^* 함수 splice()를 사용해 보겠습니다~^^*

 eat(list) {
    var record = Infinity;
    var closest = -1;
    for (var i = 0; i < list.length; i++) {
      var d = this.position.dist(list[i]);
      if(d < record) {
        record = d;
        closest = i;
      }
    }
    this.seek(list[closest]);
    
    if(record < 5) {
      list.splice(closest, 1);
    }
  }
  //가장 가까운 거리에 대한 신기록 record는 앞으로 점점 수치가 작아질 것이므로, 시작하기 전까지는 알 수 없는 가장 큰 값 Infinity 무한대 값으로 초기 설정하겠습니다~^^*
  //배열 list[]의 첫 구성요소 list[0]도 살펴봐야 하기 때문에, 가장 가까운 list 구성요소의 인덱스를 표현할 closest는 -1로 초기 설정하겠습니다. 
  //vehicle과 가장 가까운 거리에 있는 list의 구성요소인 list[closest]를 추구하도록 함수 seek를 호출하겠습니다~^^*
  //가장 가까운 거리에 대한 신기록 recordrk 5 pixel보다도 작다면, 정말 가까운 것이니까, "제가 한 번 먹어 보도록 하겠습니다~"
  //list의 closest번째부터 구성요소 하나만을 제거하도록 하겠습니다. 즉, closest 번째 구성요소를 제거하겠습니다.

우리의 귀엽고 총명한 vehicle 차량이 몸에 좋은 맛있는 음식을 냠냠 먹는 먹방 타임~~^^* YEAH~~^^*