Creative Coding 독학 제121일 2024년07월26일(금)

2024년 7월 26일

오늘은 하나의 target을 pursue하면서 다른 하나의 target을 evade하는 모습을 프로그램으로 표현해 보겠습니다~^^*

아, 네!! 그렇죠~~!!

이틀 동안 우리가 만들어 보았던 함수 pursue()와 함수 evade()를 모두 사용하면 될 것 같아요~^^*

은근 간단~~~^^* 오늘은 금요일~~~^^* 은근 간단 프로그램이 제격인 오늘은 금요일~~^^*

TGIF!!

음….근데요….evade하고 싶은 target과 pursue하고 싶은 target을 우리가 구별할 수 있어야 할 것 같아요…

그래서~!!

Class Target의 함수 show()가 RGB 수치를 인자로 받도록 살짝 고쳐 볼게요~^^*

이제~ 대략의 청사진은 그려졌으니, 오늘의 동영상 강의를 편안한 마음으로 시청해 보셔도 좋을 것 같습니다~~^^*

아래 영상을 클릭하시면 오늘 공부 내용을 바로 시작(10:03)하실 수 있어요~^^* 10:34까지 보시면 오늘 공부 끝~^^*

먼저~~^^* 핵심 코드를 살펴 보도록 할게요~^^*

class Target의 함수 show()가 R, G, B 수치를 받아 색칠하도록 수정하였습니다~^^*

class Target extends Vehicle {
 
  constructor(x, y) {
    super(x, y);
    this.vel = p5.Vector.random2D();
    this.vel.mult(5);
  }

  show(r, g, b,) {
    stroke(255);
    strokeWeight(2);
    fill(r,g,b);
    push();
    translate(this.pos.x, this.pos.y);
    circle(0, 0, this.r * 2);
    pop();
     
  }
}

target을 두 개 생성하여 하나는 evade하고 다른 하나는 pursue하도록 하겠습니다.

두 target의 함수 show(r, g, b)를 호출하면서 색상지정을 하겠습니다~^^*

let pursuer;
let targetE;
let targetP

pursuer = new Vehicle(100, 100);
targetE = new Target(200, 100);
targetP = new Target(200, 300);
  
let steeringE = (pursuer.evade(targetE));
let steeringP = (pursuer.pursue(targetP)); 
pursuer.applyForce(steeringE); 
pursuer.applyForce(steeringP);

targetE.show(255, 0, 0);
targetP.show(0, 255, 0);

그럼 이제 전체 코드를 함께 살펴 볼까요, 우리~~^^*

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

  </head>
  <body>
    http://vehicle.js
    http://sketch.js
  </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;
  }

  evade(vehicle) {
    let pursuit = this.pursue(vehicle); 
    pursuit.mult(-1); 
    return pursuit; 
  }
  
  pursue(vehicle){ 
   let target = vehicle.pos.copy(); 
   let prediction = vehicle.vel.copy(); 
   prediction.mult(10); 
   target.add(prediction); 
   return this.seek(target); 
 }

  seek(target) { 
    let force = p5.Vector.sub(target, this.pos);       
    force.setMag(this.maxSpeed); 
    force.sub(this.vel); 
    force.limit(this.maxForce);      
    return force;  
  }
  
  applyForce(force) {
    this.acc.add(force); //21
  }

  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;
    }
  }
}

class Target extends Vehicle {
 
  constructor(x, y) {
    super(x, y);
    this.vel = p5.Vector.random2D();
    this.vel.mult(5);
  }

  show(r, g, b,) {
    stroke(255);
    strokeWeight(2);
    fill(r,g,b);
    push();
    translate(this.pos.x, this.pos.y);
    circle(0, 0, this.r * 2);
    pop();
     
  }
}

let pursuer;
let targetE;
let targetP;

function setup() {
  createCanvas(400, 400);
  pursuer = new Vehicle(100, 100);
  targetE = new Target(200, 100);
  targetP = new Target(200, 300);
}

function draw() {
  background(0);
  
  let steeringE = (pursuer.evade(targetE));
  let steeringP = (pursuer.pursue(targetP)); 
  pursuer.applyForce(steeringE); 
  pursuer.applyForce(steeringP);
  
  pursuer.edges();
  pursuer.update();
  pursuer.show();
  
  targetE.edges();
  targetE.update();
  targetE.show(255, 0, 0);
  
  targetP.edges();
  targetP.update();
  targetP.show(0, 255, 0);
}

하나의 target은 evade하고 다른 하나의 target은 pursue하느라 바쁜 우리 pursuer를 응원하러 가볼까요~~^^*

기약없이 쫓고 쫓기는 삶의 고단함을 우리 pursue가 작은 p5.js 캔버스 화면 위에서 보여주고 있네요…