선회하면서 쫓는 움직임 (조타 행동/추적 = Steering Behaviors/Seek)

이런 움직임. 원심력으로 휘두르도록 움직입니다.


오늘은 보통 "x += 10; y + = 30;"라는 세계에서 한 걸음 나아갑니다.
재미있는 것에 인지도가 낮고, 일본어 문장이 적기 때문에 써 보겠습니다.
이번에는 이동과 드로잉을 위해 p5.js라는 라이브러리를 사용하고 있지만 Unity, d3.js, Canvas, enchant.js 등 무엇이든 괜찮습니다.

적용 가능한 모션 시스템, Steering Behaviors 정보

원래 이 "Steering Behaviors"라는 시스템은 Craig W. Reynolds 씨가 생각한 것으로, "실례로 배우는 게임 AI 프로그래밍"이나 "Nature of Code"와 같은 게임계, 비주얼 프로그래밍계의 서적에서 소개되어 하는 기법입니다.
홈 사이트는 여기 h tp // w w. d3d. 이 m/cwr/s테에 r/

이것은 좌표 계산에 벡터를 사용하여 독자적으로 확립 된 모션 프로그래밍 시스템입니다.

Steering은 자동차 스티어링과 동일합니다. 즉 방향타를 자른다는 점에 주목하고 있습니다. 차는 갑자기 방향타를 180도 뒤에 올 수 없지요? 그럼 어떻게 프로그래밍하면 좋을까? 그런 느낌입니다.
방향타를 오는 힘을 약하게 하면 선회력이 약해지고, 강화하면 선회력이 강해져 바로 이동할 수 있습니다. 이런 관점에서 리얼한 움직임을 만들어 갑니다.

이렇게 하면 호밍 미사일의 호밍의 움직임이나, 차나 배의 움직임, 룸바와 같은 간단한 로봇의 움직임(룸바는 곡선을 그리지 않기 때문에 예는 적절하지 않지만 w)나 벌레와 같은 간단한 움직임으로 그렇다면 시뮬레이션 할 수 있습니다. 즉 응용이 온다는 것입니다.

쫓는 흐름

이것은 모두 아래 코드의 this.seek() 라는 함수의 설명입니다.

그건 그렇고, 여기서 말하는 벡터는 무엇입니까? 라고 하면, 프로그래밍적으로 말하면 x와 y를 프로퍼티에 가지는, 단순한 오브젝트입니다.
그런 의미에서는 좌표도, 속도도 가속도 모두 벡터입니다.

아래에 플로우를 나타내지만,
뭐, 확실히 의미를 모르겠다고 생각하므로 코드와 대조하면서 읽어 가는 것이 좋을지도 모릅니다.

1. 우선 원하는 방향(벡터)을 낸다. 내는 방법은 "현재 위치 - 목표 위치"
2 . 원하는 방향의 벡터를 정규화합니다.
3 . 희망 벡터의 길이를 최대까지 늘린다
4 . 스티어링 벡터를 꺼냅니다. 내는 방법은 "희망 벡터 - 현재 벡터"
5 . 스티어링 벡터의 크기를 제한한다 (limit() 함수)

추천 동영상, 책

영어입니다만 동영상이 있으므로 보고 이해하는 편이 빠를지도 모릅니다.
h tps://ゔぃ메오. 코 m / 찬 ls / 나츠레 오 f 코데 / 63089177

나머지는 깊이 알고 싶다면 '실례로 배우는 게임 AI 프로그래밍'과 'Nature of Code'를 읽어보자. 다만 불행히도, 전자는 C++로 후자는 Java(Processing)의 책입니다.

코드

어쨌든 코드를 게시합니다. p5.js 특유의 API도 혼동하고 있습니다만, Canvas라든지에서도 표현할 수 있는 것입니다. (길게는 되지만)
간단히 전치해 두면, setup()는 최초로 불리는 함수로, draw()가 매 프레임 불리는 함수입니다.

jsdoit : htp : // js. t/hp0째_/vKq7

sketch.js

var obj,randomObj;

//最大スピード
var maxspeed = 7;

//旋回力 大きいほど舵を切りやすい
var maxsteer = 0.3;

function setup() {
  createCanvas(600,400);
  smooth();
  obj = new MovingObj(100,100);
  randomObj = new RandomMovingObj(300,300);
}

function draw() {
  background(205);

  //これはブロック崩しのボールのように動く
  randomObj.move();
  randomObj.draw();

  //ボールを追いかける（追跡 = seek）
  obj.seek(randomObj.pos);
  obj.move();
  obj.draw();

}

function mousePressed() {
  var wind = createVector(-12.4,0);
  obj.applyForce(wind);
}

//Steering Behavior（操舵行動）を扱うクラス
var MovingObj = function(x,y){

  this.pos = createVector(x,y); //位置
  this.vel = createVector(0,0); //速度
  this.acc = createVector(0,0); //加速度

  this.move = function(){
    this.vel.add(this.acc);//速度に加速度をプラス
    this.pos.add(this.vel);//位置に速度をプラス
    this.acc.mult(0);
  };

  //操舵行動 追跡(seek)
  this.seek = function(target){
    //希望ベクトル = 目標位置 - 現在位置
    var desired = p5.Vector.sub(target,this.pos);

    //希望ベクトルをノーマライズ
    desired.normalize();

    //希望ベクトルのマグニチュードをmaxに
    desired.setMag(maxspeed);

    //ステアリングベクトル（速度） = 希望ベクトル - 現在のベクトル（速度）
    var steer = p5.Vector.sub(desired,this.vel);

    //速度を限る
    steer.limit(maxsteer);

    //適用
    this.applyForce(steer);
  };


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

  this.draw = function(){
    ellipse(this.pos.x,this.pos.y,30,30);
  };
};


//ここからはランダムに動くオブジェクトなので蛇足
var RandomMovingObj  = function(x,y){
  this.pos = createVector(x,y);
  this.vel = createVector(5,5);

  this.move = function(){
    this.pos.add(this.vel);
    if(this.pos.x < 0 || this.pos.x > 600){
      this.vel.x *= -1;
    }
    if(this.pos.y < 0 || this.pos.y > 400){
      this.vel.y *= -1;
    }
  };

  this.draw = function(){
    ellipse(this.pos.x,this.pos.y,10,10);
  };
}

추가

이것을 Arduino라든지로 움직이고 싶네요・・・w
하드웨어 분야에서 응용할 수 있으면 대단합니다.