Creative Coding 독학 제115일 2024년07월20일(토)

2024년 7월 20일

오늘은 return 명령어를 사용하여 , 꼬리에 꼬리를 무는 재미있는 구조로 Flee를 표현해 보겠습니다~^^*

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(1:35)하실 수 있어요~ 13:24까지 보시면 오늘 공부 끝~^^*

return은 ‘되돌아가다’ ‘되돌려주다’의 뜻을 가지고 있다고 하죠~^^*

어떤 함수 안에 return OOOO; 라는 실행문이 있는 경우, 그 함수를 호출한 다른 함수에게 자신이 일한 결과값 OOOO을 되돌려 주어요. 그러면, 값을 되돌려받은 함수는 그 값을 사용하여 어떤 다른 일을 하게 되겠지요~^^*

어제 우리는, 함수 flee()를 만들기 위해 함수 seek()의 내용을 그대로 따라 쓰고, 벡터 force의 방향을 반대 방향으로 만드는 실행문 하나를 더 했었지요~^^*

오늘은 flee()함수를 정말 정말 정말 짧은 실행문으로 완성해 보려고 합니다.

하나. 함수 seek()가 벡터 force의 값을 자신을 호출한 함수에게 return 하도록, 살짝 고치겠습니다.

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

둘. 함수 flee()는 이제 함수 seek()를 호출하여 그 return 값에 (-1)을 곱한 후, 그 값을 자신을 호출한 함수에게 return하도록 하겠습니다.

  flee(chaser) {
    return this.seek(chaser).mult(-1);
  }

셋. 함수 draw()는 함수 flee()를 호출하여 그 return 값을 autonomous agent Vehicle에 작용하는 힘에 반영하도록 하겠습니다~^^*

vehicle.applyForce(vehicle.flee(chaser));

프로그램이 작동되는 순서로 되살펴보면~

하나. 함수 draw()가 함수 flee()를 호출합니다.

둘. 함수 flee()가 함수 seek()를 호출합니다.

셋. 함수 seek()가 벡터 force값을 함수 flee()에게 return 합니다.

넷. 함수 flee()가 함수 seek()에게서 return 받은 벡터 force값에 (-1)을 곱하여 방향을 반대로 바꾼 후 벡터 force를 함수 draw()에게 return합니다.

다섯. 함수 draw()가 함수 flee()에게서 return 받은 벡터 force를 autonomous agent Vehicle의 힘에 반영합니다.

무언가를 받아서 다른 무언가를 되돌려주는 것이 꼬리에 꼬리를 물고 있는데요~^^*

오늘 우리가 만들어 볼 return 코드는,

(1) 야채사라다를 받아서,

(2) 식빵 두 조각 사이에 야채사라다를 넣어서,

(3) 야채사라다 샌드위치를 만들어서,

(4) 돌려주는

경우에 더 가까울 것 같아요~^^*

어떤 것을 건네받아 그것을 가지고 어떤 일을 하고 그 일의 결과를 되돌려주는 것~^^*이 될 것 같아요~^^*

그럼 전체 코드를 함께 살펴 볼까요~^^*

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

  flee(chaser) {
    return this.seek(chaser).mult(-1);
   }
  //2. 둘. seek()함수를 호출하여 draw()에게서 건네받은 chaser 값을 건네줍니다.
  //5. 다섯. seek()에게서 return 받은 force 값에 -1을 곱합니다.
  //6. 여섯. draw()에게 force 값을 return합니다.  
  
  seek(target) {
    let force = p5.Vector.sub(target, this.pos);        
    force.setMag(this.maxSpeed);
    force.sub(this.vel);
    force.limit(this.maxForce);      
    return force;
  }
  //3. 셋. flee()이 건네주는 chaser 값을 target 이라는 이름의 인자로 받아 force를 계산합니다.  
  //4. 넷. force 값을 flee()에게 return합니다. 
  
  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 chaser;

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

function draw() {
  background(0);
  fill(255, 0, 0);
  noStroke();
  chaser = createVector(mouseX, mouseY);
  circle(chaser.x, chaser.y, 32);
  
  vehicle.applyForce(vehicle.flee(chaser));
  //1. 하나. flee()를 호출하여 chaser 값을 건네줍니다. 
  //7. 일곱. flee()에게서 return 받은 force 값을 vehicle의 force에 반영합니다.
  
  vehicle.update();
  vehicle.show();
}

Return은 ‘되돌아가다/되돌아오다’의 뜻도 있지요~^^*

Return ‘어떤 것을 되돌려준다’는 것과 ‘어떤 상태로 되돌아간다’는 것은 많은 고민과 개선의 노력과 충실한 실행이 필요한 것 같아요. 우리의 Flee! Returns! 프로그램처럼요~^^*

우리가 어떤 시점으로 되돌아갈 수는 없지만, 되돌아가고 싶은 상황을 지금 현재부터 다시 만들어 낼 수는 있는 것 같아요~~^^*

(음…저는 노트정리를 매일 하는 것이 있는데요. 매일 매일 제때 제때 노트정리를 하면 기분이 참 좋았거든요…요즘…며칠 밀렸는데요…노트 정리가 제때 다 되었던 며칠 전으로 돌아갈 수는 없어도, 노트정리가 제때 다되어 기분이 좋은 상황은 지금 현재부터 다시 만들어 낼 수 있으니까…열심히 노트정리를 하도록 해 볼게요~^^*

어떤 상황을 지금 현재부터 다시 만들어 내고 싶으신가요~?^^* 그 소망 저도 응원드릴게요!)

우리 서로를 믿어주고 서로를 응원해 보기로 할까요~^^*

네!!, 그럼~~^^*, 우리 Flee!의 Return을 축하하며 마우스/손가락으로 Flee!와 즐거운 추격놀이를 해 볼까요~^^*