Creative Coding 독학 제114일 2024년07월19일(금)

2024년 7월 19일

오늘은 열심히 도망치는 굳센 autonomous agent Flee!를 만들어 보도록 할게요~^^*

아래의 동영상 강의를 1:30까지 보시면 오늘 공부 끝~~^^*

네~^^* Flee 참 쉽죠~^^* (밥 아저씨 목소리가 들린다????요~~^^*)

어제 우리가 만들어 본 Seek은 Target으로 다가가는 것이었다면,

오늘 우리가 만들어 볼 Flee는 Target으로부터 멀어지는 것이라서,

어제 만든 Seek()함수의 force 방향을 반대방향으로 돌리면 될 것 같아요!!

force.mult(-1);

어제 만든 프로그램에 이 실행문 하나만 더하면, autonomous agent Flee 탄생!

너무 간단해서 좀 어떨떨한데요….

전체 코드를 살펴 보며, 이 한 문장의 힘을 실감해 볼까요~^^*

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="vehicle.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>


class Vehicle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 4;
    this.maxForce = 0.25;
    this.r = 16;
  }

 // seek(target) {
 //   let force = p5.Vector.sub(target, this.pos);
 //   force.setMag(this.maxSpeed);
 //   force.sub(this.vel);
 //   force.limit(this.maxForce);
 //   this.applyForce(force);
 // }
  
  flee(chaser) {
    let force = p5.Vector.sub(chaser, this.pos);
    force.setMag(this.maxSpeed);
    force.sub(this.vel);
    force.limit(this.maxForce);
    force.mult(-1);
    this.applyForce(force);
  }
  
  //함수 seek()와 flee()를 비교해 보기위해, 
  //seek()를 지우지 않고 주석처리 하였습니다.
  //flee()는 seek()의 실행문들이 그대로 다 들어있고,
  //벡터 force의 방향을 반대로 바꾸기 위해 
  //force.mult(-1); 이 추가되었네요. 

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

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.set(0, 0);
  }

  show() {
    stroke(255);
    strokeWeight(2);
    fill(255);
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    triangle(-this.r, -this.r / 2, -this.r, this.r / 2, this.r, 0);
    pop();
  }

  edges() {
    if (this.pos.x > width + this.r) {
      this.pos.x = -this.r;
    } else if (this.pos.x < -this.r) {
      this.pos.x = width + this.r;
    }
    if (this.pos.y > height + this.r) {
      this.pos.y = -this.r;
    } else if (this.pos.y < -this.r) {
      this.pos.y = height + this.r;
    }
  }
}


let vehicle;
//let target;
let chaser;

function setup() {
  createCanvas(400, 400);
  vehicle = new Vehicle(100, 100);
}

function draw() {
  background(0);
  fill(255, 0, 0);
  noStroke();
  //target = createVector(mouseX, mouseY);
  //circle(target.x, target.y, 32);
  //vehicle.seek(target);
  chaser = createVector(mouseX, mouseY);
  circle(chaser.x, chaser.y, 32);
  vehicle.flee(chaser);
  vehicle.update();
  vehicle.show();
}
//seek:target & flee:chaser의 관계성을 비교해 보기 위해
//target 관련 실행문을 지우지 않고 주석처리해 놓았습니다.
//chaser가 생성되고 flee를 쫓아가는 실행문과 
//target이 생성되고 seek에 쫓기는 실행문의 구성이 동일하지요?^^*
//마우스/손가락을 움직여 chaser의 위치를 변화시켜 Flee를 추격해 보세요~^^*
//Flee가 엄청 빨리 화면 밖으로 도망가네요~^^* 
//달리기 선수인가봐요^^*

달리기선수인 우리의 autonomous agent Flee를 마우스/손가락을 화면 위에 움직여 추격해 보셔요~^^* 금세 달아나 버려 시원섭섭하실 것 같아요^^;;

벗어나고 싶은 환경과 존재에게서 ,