L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1
EN

HELLO!

JP

CONTACT - STEP01

お問い合わせ内容を以下の中から選択してください。

お仕事のご依頼
採用のお問い合わせ
その他お問い合わせ

CONTACT - STEP02

以下の項目よりご依頼内容を選択してください。

ブランディングに関するお問い合わせ
ディレクションに関するお問い合わせ
制作全般に関するお問い合わせ
デザインに関するお問い合わせ
開発に関するお問い合わせ

CONTACT - STEP03

以下よりご予算を選択してください。

APPROXIMATE BUDGET
0 yen
0 yen
~
2,000,000 yen
~
4,000,000 yen
~
6,000,000 yen
~
8,000,000 yen
~
10,000,000 yen

CONTACT - STEP04

以下よりプロジェクトの公開日を選択してください。

ESTIMATED TIMELINE
0 month
0 month
~
1 month
~
2 month
~
3 month
~
4 month
~
5 month
~
6 month

CONTACT - STEP05

以下のフォームよりプロジェクトの情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
COMPANY ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下の項目より職種を選択してください。

ディレクター
デザイナー
ディベロッパー
その他

CONTACT - STEP03

以下よりご経験年数を選択してください。

YEARS OF EXPERIENCE
1 year
0 year
~
1 year
~
2 year
~
3 year
~
4 year
~
5 year
~
6 year
~
7 year
~
8 year
~
9 year
~
10 year

CONTACT - STEP04

以下の項目よりご希望の雇用形態を選択してください。

正社員
契約社員

CONTACT - STEP05

以下のフォームより志望動機をご記入ください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
URL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下のフォームより情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎
STEP01

C L O S E

S U B M I T

CONTACT COMPLETE

お問い合わせありがとうございます。
お問い合わせ内容を確認させていただき次第、担当者より返信させていただきます。

THANK YOU
CLOSE

NEWS

BLOG Jan.13.2017

Boidsを調べる

by Hirokazu Goto

SHARE

はじめまして、developerの後藤です。

鳥や魚が群れをなして飛んでいく光景、テレビなどでも見たことあるでしょうか。
今回は群れの動きをシミュレーションできるアルゴリズムBoidsについてまとめておきたいと思います。

Boidsとは

Boidsは3つルールを設定するだけで群れの動きをシミュレーションできるアルゴリズムのことで、1987年のCraig Reynoldsさんが発表しました。Boidsのアルゴリズムは、CG、ゲーム、WEBなど様々なジャンルの表現に使われています。

Craig Reynolds Boids : http://www.red3d.com/cwr/boids/

群れの動きをシミュレーションするためのルールは

  • 結合(cohesion)
    鳥たちが多くいる方へ向かって飛ぶこと
  • 引き離し(separation)
    近くの鳥に近づきすぎたら、ぶつからないように離れる
  • 整列(alignment)
    近くの鳥たちと飛ぶスピードや方向を合わせようとする

この3つルールを定義することで再現できるそうです。3つのルールについてコードを交えてみていきます。

Boidsを実装するための3つのルール

結合(cohesion) → 「鳥たちが多くいる方へ向かって飛ぶこと」

「鳥たちが多くいる方」とは群れの中心のことです。
対象となる要素が群れの中心方向に飛んでいくようにしてあげるということですね。群れの中心を計算するには、各要素の位置(x,y)を加算して、平均を求めることで群れの中心となる位置を計算することができます。

cohesion(index) {
let c = {
x: 0,
y: 0
};
for (let i = 0; i < this.boids.length; i++) {
if (i !== index) {
c.x += this.boids[i].x;
c.y += this.boids[i].y;
}
}
c.x = c.x / (this.NUM_BOIDS - 1);
c.y = c.y / (this.NUM_BOIDS - 1);
this.boids[index].vx += (c.x - this.boids[index].x);
this.boids[index].vy += (c.y - this.boids[index].y);
}


引き離し(separation) → 「近くの鳥に近づきすぎたら、ぶつからないように離れる」

各要素の距離とその他の要素が、一定距離より近づいた場合は離れるというルールです。要素同士間のベクトルを比較して、対象となる2点の距離を計算し、一定距離近ければ離れるという判定を追加します。


separation(index) {
for (let i = 0; i < this.boids.length; i++) {
let s = this.getDistance(this.boids[i], this.boids[index]);
if (s < this.BOID_SIDE) {
this.boids[index].vx -= this.boids[i].x - this.boids[index].x;
this.boids[index].vy -= this.boids[i].y - this.boids[index].y;
}
}
}
getDistance(p1, p2) {
let dx = p1.x - p2.x;
let dy = p1.y - p2.y;
return Math.sqrt(dx * dx + dy * dy);
}


整列(alignment) → 「近くの鳥たちと飛ぶスピードや方向を合わせようとする」

速度や方向が他の要素と離れすぎないように、平均となるベクトルに徐々に近づいていく処理を追加します。


alignment(index) {
let al = {
x: 0,
y: 0
};
for (let i = 0; i < this.boids.length; i++) {
if (i !== index) {
al.x += this.boids[i].vx;
al.y += this.boids[i].vy;
}
}
al.x = al.x / this.NUM_BOIDS - 1;
al.y = al.y / this.NUM_BOIDS - 1;
this.boids[index].vx += (al.x - this.boids[index].vx) / 8;
this.boids[index].vy += (al.y - this.boids[index].vy) / 8;
}

実行結果

この3つのルールを各要素が計算した実行結果です。

群れといえば群れですが、鳥や魚の動きを再現するにはまだ工夫が必要そうですね。

参考

記事が日本語でBoidsについてわかりやすくまとめられています。

マッチ箱の脳 <群れの知能>

アルゴリズムだけはなく、canvasの描画など実装までできるようなJavaScriptのコードでまとめられています。

Boidsは結合、引き離し、整列に対して処理を加えることで、リアルな鳥や魚の動きに近づけたり、応用して他の表現にも利用できる拡張性のあるアルゴリズムです。

Boidsについては引き続きUNIELブログにて更新していく予定なので、ご興味ある方はたまに覗いてみてください。

by Hirokazu Goto

SHARE

OTHER ARTICLES

BLOG
Nov.27.2016

コーポレートサイトのアニメーション実装

by Staff

TOPIC
Jan.04.2017

あけましておめでとうございます。

by Kazuki Noda

BLOG
Nov.24.2016

仕事と子育ての両立を図るには

by Maho Noda

SCROLL TO
CLICK TO
N E W S   A L L
TAP TO NEWS ALL