Creative Coding 독학 제122일 2024년07월27일(토) 늦은 보충

2024년 7월 28일

네…일요일 새벽이예요….

어제 코딩 공부를 했었는데요….

올림픽 개회식의 셀린 디옹님의 공연 모습을 보고….

많이 감동적이어서, 셀린 디옹님에 대한 자료를 많이 찾아 보게 되었어요…

평생 노래를 부르신 분이라 자료가 많아서…감동 속에 잠들어 버렸네요…

셀린 디옹님이 다시 건강해 지시고, 바라셨던 올림픽 공연을 너무 멋지게 해내셔서 기쁘고 감사해서, 모두 다 감동을 받은 하루였을 것 같아요~^^*

그래서~~^^* 저의 늦은 코딩 공부 업로드도 이해해 주시면 감사하겠습니다~^^*

평생 매일 노래를 부르신 저력이 에펠탑에서 울려퍼졌던 것 처럼~^^*

우리도 매일 코딩 공부 계속 해나가 보면 좋겠습니다~^^* YEAH!!

자 그럼! 토요일 어제 공부했던 코드 내용을 정리해 드리겠습니다~~^^*

pursue가 target을 붙잡으면, target이 푱~하고 사라지고는 예상치 못한 곳에서 Tara~~하고 다시 나타나고, pursue가 다시 target을 붙잡고, target이 사라지고, target이 다른 곳에서 나타나고, on and on~~!!!

어떤 작은 도전을 이루고 나면, 다른 도전이 또 나타나서 우리를 부르는~^^* 흥미진진한 pursuer의 삶을 p5.js 캔버스 위에 표현해 볼게요~~!!

질문 하나.

Q: pursue가 target을 만나는 것을 어떻게 표현하면 좋을까요?

A: pursue와 target 사이의 거리가 pursue와 target의 반지름의 합보다 작은 경우가 될 것 같아요!

질문 둘.

Q: target이 사라졌다가 다시 나타나는 것을 어떻게 표현하면 좋을까요?

A: target의 위치를 새로운 무작위 값으로 지정하면 될 것 같아요!

아!! 네~~!! 그럼, 이 아이디어를 알고리즘으로 정리해 볼게요~~^^*

if (pursue와 target의 거리가 둘의 반지름 합보다 작으면) {

   target의 위치를 random 값으로 새롭게 지정하라! }

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(10:54)하실 수 있어요~^^*

이제 핵심 코드를 우리 함께 살펴 볼까요~^^*

let d = p5.Vector.dist(pursuer.pos, target.pos);
if(d < pursuer.r + target.r) {
  target = new Target(random(width), random(height));
  pursuer.pos.set(wid/2, height/2); 
}   
//target을 맞추면, prsuer가 화면 중앙에서 다시 target을 기다립니다~^^*

그럼 이제 전체 코드를 보실까요~~^^*

<!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 = 10;
    this.maxForce = 0.25;
    this.r = 16;
  }

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

  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() {
    stroke(255);
    strokeWeight(2);
    fill(255,0,0);
    push();
    translate(this.pos.x, this.pos.y);
    circle(0, 0, this.r * 2);
    pop();
     
  }
}

let pursuer;
let target;

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

function draw() {
  background(0);
  let steering = (pursuer.pursue(target)); 
  pursuer.applyForce(steering);
  
  let d = p5.Vector.dist(pursuer.pos, target.pos);

  if(d <= pursuer.r + target.r) {
  target = new Target(random(width), random(height));
  pursuer.pos.set(width/2, height/2);
}
  
  pursuer.update();
  pursuer.show();
  
  target.edges();
  target.update();
  target.show();
}

target을 맞춘 기쁨을 만끽하기도 잠시.. 또 다시 나타나는 target을 맞추러 달려가는 pursuer! 작은 도전을 성취한 기쁨에 안주하지 않고 다음 도전에도 기꺼이 나아가는 멋진 pursuer를 우리 함께 응원해요~! 올림픽 정신으로~^^*

식탁 위에 올라가 가족들을 위해 노래를 불러주던 두 살배기 아가 셀린 디옹은! 십 여년이 흐른 뒤부터 본격적인 target들을 pursue하기 시작합니다~!!

첫 도전! 퀘백 TV 데뷰!