ì openFrameworks Kyoto 0002 パーティクル入門
wrriten by P2 future media lab
“Another idea I preach is DIWO (Do it with others).” By Zachary Lieberman
今回の目標
ì テーマ 「openFrameworksの力を存分に扱うための基礎練習」
ì 基本の描画 ì クラスをつくる ì 一つのパーティクルを動かす ì たくさんのパーティクルを飛ばす
ì こそっとポインタや配列も使ってみます
wrriten by P2 future media lab
本日のサンプル
ì https://github.com/fumikistrider/ofKyoto
wrriten by P2 future media lab
前回のおさらい:プロジェクト作成
ì プロジェクトは「particlesystem」とします
wrriten by P2 future media lab
描画してみる
ì testApp.cpp を編集する
ì openFrameworksの関数は「of」から始まる
ì draw()の内側に描画したい内容を描く
wrriten by P2 future media lab
背景色の設定
ì RGBを使った指定 ì ofBackground( 0 ); // 黒(モノクロ)
ì ofBackground( 0, 0, 255 ); // 青色
ì ofBackground( ofColor::blue); // ofColorクラスの定数を使って
ì 背景色を塗るメソッドは draw の先頭で呼び出す ì 後の方で呼び出すと、それより以前に描画したものが塗り潰されてしまうから
wrriten by P2 future media lab
描画色・スタイルの設定
ì 背景色と同じように指定する
wrriten by P2 future media lab
設定した行から後、他の設定をするまで有効
スタイル(塗り潰し)も他の設定をするまで有効
座標の指定
ì 座標は画面左上が原点に設定されている
wrriten by P2 future media lab
「 ofCircle( 100 , 100 , 30); 」 で描画した丸い円
中央に描画する
ì 座標に数値の代わりに関数を使う
ì ofGetWindowWidth ウィンドウの横幅 ì ofGetWindowHeight ウィンドウの縦幅 ì ofGetScreenWidth 画面の横幅 ì ofGetScreenHeight 画面の縦幅
wrriten by P2 future media lab
マウスの位置に描画する
ì 座標に数値の代わりに変数を使う
ì mouseX マウスカーソルのX座標 ì mouseY マウスカーソルのY座標
wrriten by P2 future media lab
パーティクルをつくる
ì パーティクルを管理するためにクラスを作る
ì 「Ballクラス」を作る
ì プロジェクトの「src」 を右クリックして 「New File…」を選択
wrriten by P2 future media lab
新しいクラスを作る
ì C++ Classを選択 ì C++ファイルとヘッ ダーファイルのセッ トを同時に生成して くれる
wrriten by P2 future media lab
ファイルダイアログで Ballと入力してCreate
Ball.cpp と Ball.h が できた
※ Xcode 4.4から ※ Xcode 3でもバージョンによっては生成される
ヘッダーファイルを編集
ì Ball.h
wrriten by P2 future media lab
ofColorを使うため
二重読み込み防止
} の後の ; を忘れずに
C++ファイルを編集
ì Ball.cpp
wrriten by P2 future media lab
コンストラクタ (インスタンス生成時に実行)
実際に描画するメソッド
Ballクラスを使う
ì testApp.h
wrriten by P2 future media lab 加える
クラスを使って修正
ì draw()での処理を ball.draw() に置き換え
ì 実行した結果の表示は同じ
wrriten by P2 future media lab
位置をランダムにする
ì Ball.h コンストラクタにofRandomを使う
wrriten by P2 future media lab
Ballをポインタにする
ì コンストラクタを呼び出すためにBall変数をポインタで宣言する ì testApp.h
ì testApp.cpp
wrriten by P2 future media lab
Ballのうしろに「*」を つけるとポインタ
ポインタに、新しいインスタンスのアドレスを代入
.(ドット) と -‐>(アロー)
ì ポインタからメソッドを呼び出すときには「.」の代わりに「ー>」を使う
wrriten by P2 future media lab 実行のたびに、色と位置が異なる
動きをくわえる
ì Ballに位置を動かすメソッドを追加する ì Ball.h
wrriten by P2 future media lab
引数を受け取れるように変更
動きを実装
ì Ball.cpp
wrriten by P2 future media lab
moveToメソッドを実装
完成
ì testApp.cpp
wrriten by P2 future media lab
複数のパーティクルを使う
ì サンプルのParticleクラスを使う ì testApp.h
wrriten by P2 future media lab
追加する
配列(動的配列)
ì たくさんのパーティクルを操作するためにvector(動的配列)をつかう ì testApp.h
wrriten by P2 future media lab
配列
配列の数のための変数
パーティクルのセットアップ
ì testApp.cpp
wrriten by P2 future media lab
新しいParticleを生成して配列に追加するループ
パーティクルの更新・描画
ì testApp.cpp
wrriten by P2 future media lab
インタラクション
ì マウスをクリックしたところからパーティクルが広がるようにする
wrriten by P2 future media lab
イベントハンドラ
ì 入力イベントの発生に合わせて呼び出される
wrriten by P2 future media lab
マウスが押されたとき
マウスボタンを離したとき
パーティクルの位置を マウスの近くに更新