外部ライブラリ・物理エンジン

コンテンツ・メディア
プログラミング実習Ⅰ
コンピュータグラフィックス編③
外部ライブラリ・物理エンジン
橋本直
1
今日大事なのは…
未知のものに対処できる⼒をつけよう
◦ 解説本や解説サイトもない、新しいツールをどうや
って修得していくかを学ぼう。
推理しながらプログラムを読み書きする
◦ そこにあるルールを⾒つける
◦ 「こうかも？」とあたりをつけてやってみる
2
1. 外部ライブラリ
3
ライブラリとは
ある特定の機能を持ったプログラムを他のプロ
グラムから利⽤できるように部品化したもの。
⾼度な計算や特殊なデバイスを扱うためのライ
ブラリが言語ごとに存在する。
◦
◦
◦
◦
画像処理ライブラリ
⾳声認識ライブラリ
Kinectライブラリ
Oculus Riftライブラリ
などなど
4
標準ライブラリと外部ライブラリ
標準ライブラリ
◦ そのプログラミング言語にもともと⽤意され
ているライブラリのこと。なにもせずに最初
から使える。
外部ライブラリ
◦ 誰かが作って配布しているライブラリ。
◦ 入手して自分の環境にインストールすること
によって使えるようになる。
5
Processingの外部ライブラリ
Processing公式サイトの「Libraries」のペ
ージに⾏くと、有志が作ったいろいろなラ
イブラリが紹介されている。
Libraries - Processing.org
◦ http://processing.org/reference/libraries/
例えば
◦ GifAnimation: Gifアニメ生成ライブラリ
◦ SimpleOpenNI: Kinect⽤ライブラリ
◦ QRCode: QRコード認識ライブラリ
6
ライブラリのインストール
自分のプログラムがライブラリを認識できるよ
うに所定の場所にファイルを置いたり、その場
所を開発環境に設定したりすること。
Processingでは、ライブラリはJARファイル
（*.jar）という形式で配布されている。
◦ インストール方法は３種類
【方法A】自分のスケッチに直接ドラッグ＆ドロップ
【方法B】Processingのメニューから自動インストール
【方法C】ライブラリフォルダに手動でインストール
7
【方法A】
今回の演習ではこの【方法A】でやってください
スケッチに直接ライブラリをドラッグ＆ドロップ
ライブラリの配布サイトから入手したZIPファイルを展開
し、その中にあるすべてのJARファイル（○○.jar）を
Processingのスケッチ上にドラッグ＆ドロップする
Drag & Drop!
8
【方法A】について
この作業を１回やれば、以降そのスケッチ上でライブラ
リを使うことができる。
この方法では、スケッチが保存されているフォルダの中
に「code」というフォルダが作られ、そこにJARファイ
ルがコピーされる。
スケッチフォルダにライブラリが同梱された形になるの
で、全体のファイル容量は⼤きくなるが、他のPCで動
かすときなどにトラブルが少ない。
9
【方法B】
Processingのメニューから自動インストール
1. Processingのメニューで「sketch」→「Import Librar
y...」→「Add Library...」とたどると「Library Mana
ger」が表示される。
2. インストールしたいライブラリを選択して「Install」
をクリックすればインストールされ、各スケッチでラ
イブラリが利⽤可能になる。
通常はこの方法をとるが、⼤学のコンピュータルームで
は機能制限があるため、今回は方法Aで対応すること。
10
【方法C】
ライブラリフォルダに手動でインストール
ライブラリの配布サイトから入手したZIPファイルを展開
し、できたフォルダの名前をJARファイルと同名になる
よう変更し、そのフォルダを以下の場所へ移動。
C:¥Users¥ユーザ名¥Documents¥Processing¥libraries
Processingを起動しなおすと、ライブラリが認識され、
各スケッチでライブラリが利⽤可能になる。
個人サイトやGitHubなどで配布されているライブラリは
この方法でインストールする。
11
試しにひとつやってみよう
Handy
◦ 描いたCGが手描きっぽくなるライブラリ
◦ http://www.gicentre.net/handy
12
Handyライブラリの入手
配布サイトの「Download」の項目にある「handy.zip」
をクリックしてダウンロードする。
ダウンロードしたらZIPファイルを展開して中身を確認
◦ examples … サンプルコードが入っているフォルダ
◦ library
… ライブラリ本体が入っているフォルダ
13
初めてライブラリを使う時
ライブラリを入手したら、動作確認を兼ねて最初
にサンプルコードを動かそう。
ほとんどの場合、そのライブラリを使ったサンプ
ルコード（Examples）が付いているので、どんな
コードを書いたらどんな動きをするのかざっくり
眺めてみよう。
14
Handyのサンプルコードを動かす
1. Processingを起動したら、File→Open...を選択。
2. handy → examples → simplePresetStyles とフォ
ルダをたどり、その中にある
simplePresetStyles.pde を開く。
3. エクスプローラで handy → library とフォルダをた
どり、そこにある handy.jar をProcessingのスケッチ
上にドラッグ＆ドロップする。
4. プログラムを実⾏する。
15
ちなみに方法B, 方法Cでライブラリをインストールして
いる場合は、Processingのメニューからサンプルコード
を呼び出せる。
メニューの「File」→「Example
s...」を選択すると、サンプルコ
ード一覧が表示される。
その中にある「Contributed Libr
aries」がインストールされた外
部ライブラリのサンプルコード。
16
自分でもプログラムを書いてみる
import org.gicentre.handy.*;
HandyRenderer h;
void setup() {
size(350, 200);
h = new HandyRenderer(this);
}
void draw() {
background(255);
fill(0, 0, 255);
h.rect(50, 50, 100, 100);
}
fill(255, 0, 0);
h.ellipse(250, 100, 100, 100);
17
プログラムの解説
import org.gicentre.handy.*;
HandyRenderer h;
void setup() {
size(350, 200);
h = new HandyRenderer(this);
}
Handyというライブラリを
使いますよという宣言文
手描き処理をやってくれる
レンダラ（描画機構）
手描きレンダラの準備
void draw() {
background(255);
fill(0, 0, 255);
h.rect(50, 50, 100, 100);
}
fill(255, 0, 0);
h.ellipse(250, 100, 100, 100);
手描きレンダラを使って
四角形を描画
手描きレンダラを使って
円を描画
18
２. 物理エンジン
19
物理エンジンとは
物理演算を⾏うプログラムのこと。
物体の形状、質量、重⼒、摩擦係数などの情報を
与えると、それに基づいて物理シミュレーション
を⾏ってくれる。
◦ 物理法則を自分で記述しなくて良い！
CG、ゲーム、建築物の構造計算などで使われる。
20
fisica
Box2Dという物理エンジンをProcessingに
移植したもの
配布サイト
◦ http://www.ricardmarxer.com/fisica/
◦ DOWNLOADと書かれているところから
fisica.zip をダウンロード。
21
fisicaのサンプルを動かそう
fisicaのサンプルコードを一通り実⾏してどん
なことができるか確認してみよう。
◦ 「AndroidCanica」はAndroid⽤のプログラムのた
めPCでは動作しない。
◦ 「Letters」と「WingedStar」は、追加で
Geomerative というライブラリが必要になる
http://www.ricardmarxer.com/geomerative/
22
最もシンプルなプログラム
import fisica.*;
FWorld world;
void setup() {
size(400, 400);
Fisica.init(this);
world = new FWorld();
world.setEdges();
}
FCircle ball = new FCircle(50);
ball.setPosition( width/2, height/3 );
ball.setRestitution(0.5);
ball.setFill(255, 80, 120);
world.add(ball);
void draw() {
background(255);
world.step();
world.draw();
}
四方を壁に囲まれた空間で
ボールが自然落下し、床で
跳ねる。マウスでボールを
つかむこともできる。
23
import fisica.*;
FWorld world;
詳しい処理内容
// fisicaライブラリを使いますという宣言
// 世界
void setup() {
size(400, 400);
Fisica.init(this);
world = new FWorld();
world.setEdges();
}
// 画面サイズの設定
// fisicaライブラリの初期化
// 世界を新しく作る
// 世界の四方に壁を設定する
FCircle ball = new FCircle(50);
// 大きさ50のボールを作る
ball.setPosition( width/2, height/3 ); // ボールの位置を設定
ball.setRestitution(0.5);
// ボールの反発係数を設定
ball.setFill(255, 80, 120);
// ボールの色を設定
world.add(ball);
// 世界にボールを追加
void draw() {
background(255); // 背景の初期化
world.step();
// 世界の状態更新
world.draw();
// 世界の描画
}
24
物理エンジンの基本の流れ
世界を作る
world = new FWorld();
物体を作り、世界に追加
世界の状態を更新
world.step();
world.add(ball);
世界の状態を描画
world.draw();
25
リファレンスを読もう！
ライブラリが提供するクラスや関数の使い方は
配布サイトにあるリファレンス（参考資料）に
書いてある。
英語サイトの場合は「Documentation」や「
Reference」のページを探そう。ライブラリに
同梱されていることもある。
fisicaのリファレンス
◦ http://www.ricardmarxer.com/fisica/refe
rence/index.html
26
リファレンスの読み方・調べ方
クラス名をクリックすると、そのクラスで
使える関数（メソッド）一覧が出てくる。
27
リファレンスを読むコツ
英単語からなんとなく機能を予測しよう。
よくある関数名
◦ set○○ … 何かのデータを設定する関数
◦ get○○ … 何かのデータを取得する関数
◦ こういう名前の関数はないか？と予想する。
（例）「重⼒を設定する関数があるとすれば、たぶ
んsetGravityみたいな名前のはずだ！」
28
関数の具体的な使い方を知るには
リファレンスに記述例が載っていればそれを
参考にする。なければ、サンプルコードの中
で使われている箇所がないか探す。もちろん
ネットで検索して調べてもよい。
とりあえず自分のプログラムに足して動作を
確認しよう。予想して試すことが⼤事！
（例）
「setGravity()は重⼒を設定する関数らしいから、とりあえず
この⾏にいれて結果がどうなるか⾒てみるか。値は適当に
100としてみよう。これで物体の落下速度が変化すればあっ
ているはずだ。…お、うまくいったぞ」
29
調べながら試してみよう
world.setGravity( gx, gy );
◦ 世界の重⼒を設定する
ball.setDensity( density );
◦ ボールの密度（質量）を設定する
ball.setFriction( friction );
◦ ボールの摩擦係数を設定する
ほかにもいろいろある！
30
マウスクリックで物体生成
import fisica.*;
FWorld world;
void setup() {
size(400, 400);
Fisica.init(this);
world = new FWorld();
world.setEdges();
}
void mousePressed() {
FCircle ball = new FCircle(50);
ball.setPosition( mouseX, mouseY );
ball.setRestitution(1.0);
ball.setFill(255, 80, 120);
world.add(ball);
}
void draw() {
background(255);
world.step();
world.draw();
}
31
多角形の物体を生成
import fisica.*;
FWorld world;
void setup() {
size(400, 400);
Fisica.init(this);
world = new FWorld();
world.setEdges();
}
void draw() {
background(255);
world.step();
world.draw();
}
void mousePressed() {
FPoly poly = new FPoly();
poly.setFill(255, 200, 15);
poly.vertex( mouseX, mouseY );
poly.vertex( mouseX+50, mouseY );
poly.vertex( mouseX+50, mouseY+50 );
world.add(poly);
}
(mouseX, mouseY)
(mouseX+50, mouseY)
(mouseX+50, mouseY+50)
32
物体の固定と位置や回転の設定
import fisica.*;
void draw() {
background(255);
FWorld world;
FBox box;
int angle = 0;
if (frameCount % 5 == 0) {
FCircle ball = new FCircle(20);
ball.setPosition(width/2, 50);
ball.setFill(200, 30, 90);
world.add(ball);
}
void setup() {
size(400, 400);
Fisica.init(this);
world = new FWorld();
}
box.setPosition(mouseX,mouseY);
box.setRotation(radians(angle));
angle++;
box = new FBox(150,150);
box.setStatic(true);
box.setFill(255,200,120);
world.add(box);
}
world.step();
world.draw();
33
.setStatic( true/false );
◦ 静止物体かどうかを設定
◦ trueにすると、重⼒に
関係なくその場で静止する
.setPosition( x, y );
◦ 物体の位置を設定。
.setRotation( angle );
◦ 物体の回転角度を設定。
◦ 値はラジアン指定。
34
課題① drawPolygons
マウスをクリックすると、五角形の物体が
生成されていくプログラムを作成せよ。正
五角形でなくても構わない。
35
課題② drawPhysics
マウスの左ボタンを押しながら絵を描くと、描いた
形の静止物体が生成されるプログラムを作成せよ。
右ボタンを押すとその位置にボールが生成される機
能もつけること。
マウスの左ボタンを
押しながら描いて生成
右クリックでボール生成
36
課題②のヒント
fisicaのサンプルコードの中によく似たサンプルがある。
マウスボタンのドラッグイベントは以下の関数を使う。
void mouseDragged() {
// マウスがドラッグされた時の処理
}
左右のマウスボタンの判定方法はmouseButtonを使う。
if ( mouseButton == LEFT ) {
// 左ボタンが押されているときの処理
}
if ( mouseButton == RIGHT ) {
// 右ボタンが押されているときの処理
}
37
おまけ課題: handyPhysics
Handyとfisicaの両方を使って、手描き風
味の物理シミュレーションのプログラムを
作成せよ。
38
おまけ課題のヒント
以下の関数を使うと作れます。
FWorld
.getBodies();
FBody
.setName();
.getName();
.getX();
.getY();
世界にある物体のリストを取得
物体に名前を設定する
物体の名前を取得する
物体の位置（X方向）を取得する
物体の位置（Y方向）を取得する
39
おまけ課題２
物理演算パズルゲーム「Q」を作って
みよう
image from https://play.google.com/store/apps/details?id=jp.co.liica.physics
40
3. レポート課題
41
レポート課題
課題①
オリジナルのフラクタル図形を描くプログラムを作成
せよ。
・画面サイズは 500×500 にすること。
・アルゴリズムについて図と文章で説明せよ。
課題②
物理エンジン(fisica)を使って「ピタゴラ装置」のプロ
グラムを作成せよ。
・画面サイズは 768×432 にすること。
・仕掛けについて図と文章で説明せよ。
42
提出について
提出物：レポート（PDF形式）とプログラム
提出期限：6月23日昼12:00 厳守
Oh-o! Meijiの講義ページから提出してください。提出方
法の詳細は講義ページに記載します。
版権のある画像・⾳声を使⽤しないこと。オリジナルま
たは著作権フリーの素材を使⽤してください。
優秀作品は授業・Web・オープンキャンパスなどで紹介
します。
盗作が⾒受けられた場合は０点とします。友人からの盗
作については両者を０点とします。
43

Download Report