openFrameworks Kyoto 0002 · 2012. 9. 24. · テーマ! 「openFrameworksの力を存分に扱うための基礎練習」!! 基本の描画!! クラスをつくる!! 一つのパーティクルを動かす!!

ì openFrameworks Kyoto 0002 パーティクル入門

wrriten by P2 future media lab

“Another idea I preach is DIWO (Do it with others).” By Zachary Lieberman

今回の目標

ì  テーマ「openFrameworksの力を存分に扱うための基礎練習」

ì  基本の描画 ì  クラスをつくる ì  一つのパーティクルを動かす ì  たくさんのパーティクルを飛ばす

ì  こそっとポインタや配列も使ってみます


本日のサンプル

ì  https://github.com/fumikistrider/ofKyoto


前回のおさらい：プロジェクト作成

ì  プロジェクトは「particlesystem」とします


描画してみる

ì  testApp.cpp を編集する

ì  openFrameworksの関数は「of」から始まる

ì  draw()の内側に描画したい内容を描く


背景色の設定

ì  RGBを使った指定 ì  ofBackground( 0 ); // 黒（モノクロ）

ì  ofBackground( 0, 0, 255 ); //　青色

ì  ofBackground( ofColor::blue); // ofColorクラスの定数を使って

ì  背景色を塗るメソッドは draw の先頭で呼び出す ì  後の方で呼び出すと、それより以前に描画したものが塗り潰されてしまうから


描画色・スタイルの設定

ì  背景色と同じように指定する


設定した行から後、他の設定をするまで有効

スタイル（塗り潰し）も他の設定をするまで有効

座標の指定

ì  座標は画面左上が原点に設定されている


「　ofCircle( 100 , 100 , 30);　」　で描画した丸い円

中央に描画する

ì  座標に数値の代わりに関数を使う

ì  ofGetWindowWidth ウィンドウの横幅 ì  ofGetWindowHeight ウィンドウの縦幅 ì  ofGetScreenWidth 画面の横幅 ì  ofGetScreenHeight 画面の縦幅


マウスの位置に描画する

ì  座標に数値の代わりに変数を使う

ì  mouseX 　マウスカーソルのX座標 ì  mouseY 　マウスカーソルのY座標


パーティクルをつくる

ì  パーティクルを管理するためにクラスを作る

ì  「Ballクラス」を作る

ì  プロジェクトの「src」　を右クリックして　「New File…」を選択


新しいクラスを作る

ì  C++ Classを選択 ì  C++ファイルとヘッダーファイルのセットを同時に生成してくれる


ファイルダイアログで Ballと入力してCreate

Ball.cpp と Ball.h ができた

※　Xcode 4.4から ※　Xcode 3でもバージョンによっては生成される

ヘッダーファイルを編集

ì  Ball.h


ofColorを使うため

二重読み込み防止

} の後の ; を忘れずに

C++ファイルを編集

ì  Ball.cpp


コンストラクタ（インスタンス生成時に実行）

実際に描画するメソッド

Ballクラスを使う

ì  testApp.h

wrriten by P2 future media lab 加える

クラスを使って修正

ì  draw()での処理を　ball.draw() に置き換え

ì  実行した結果の表示は同じ


位置をランダムにする

ì  Ball.h　　コンストラクタにofRandomを使う


Ballをポインタにする

ì  コンストラクタを呼び出すためにBall変数をポインタで宣言する ì  testApp.h

ì  testApp.cpp


Ballのうしろに「*」をつけるとポインタ

ポインタに、新しいインスタンスのアドレスを代入

.(ドット）と -‐>（アロー）

ì  ポインタからメソッドを呼び出すときには「．」の代わりに「ー＞」を使う

wrriten by P2 future media lab 実行のたびに、色と位置が異なる

動きをくわえる

ì  Ballに位置を動かすメソッドを追加する ì  Ball.h


引数を受け取れるように変更

動きを実装

ì  Ball.cpp


moveToメソッドを実装

完成

ì  testApp.cpp


複数のパーティクルを使う

ì  サンプルのParticleクラスを使う ì  testApp.h


追加する

配列（動的配列）

ì  たくさんのパーティクルを操作するためにvector(動的配列)をつかう ì  testApp.h


配列

配列の数のための変数

パーティクルのセットアップ

ì  testApp.cpp


新しいParticleを生成して配列に追加するループ

パーティクルの更新・描画

ì  testApp.cpp


インタラクション

ì  マウスをクリックしたところからパーティクルが広がるようにする


イベントハンドラ

ì  入力イベントの発生に合わせて呼び出される


マウスが押されたとき

マウスボタンを離したとき

パーティクルの位置をマウスの近くに更新

Documents

openFrameworks Kyoto 0002 · 2012. 9. 24. · テーマ! 「openFrameworksの力を存分に扱うための基礎練習」!! 基本の描画!! クラスをつくる!! 一つのパーティクルを動かす!!