2017-07-12

openFrameworksでやっておくとよいこと

openFrameworks

仕事するたびに毎回忘れてしまった！って思ったりするのでまとめておく。

設計編

全体の設計を考える
- アプリを分けてOSCで連携する
  - 規模が大きい & 期間が長い場合はAPIを先に定義し、各々がモックで開発するべき
- ofxStateMachineを使って各Stateごとの動作にする
- そもそもoFを使わない（UI系はネイティブなども検討する）
クラスの設計
- 基本はシンプルにオブジェクトの保有とポリモーフィズムで
- コールバックはofEventを使う
設計と資料（全て手書きで良い）
- クラスが10を超えるならクラス図を作る
- 複雑な処理はシーケンス図を書いて把握する
- 他のアプリやデバイスと連携が必要なときもシーケンス図で処理を把握する
- 状態遷移が多いものは、画面遷移図か状態遷移図を用意する
設計のためのデザインパターンを知っておく
- 非直感的な設計のデザインパターンは大変便利なときがある
- デザインパターンは一度覚えて忘れるといいと言うネットミームがあるが、割とそう思う
- 他のフレームワークに使われるパターンを踏襲すると良かったりする

プロジェクトの進め方編

文と図
- タスクはまず文にする
- 文で把握出来ないタスク（=1次元で把握できない）は図に起こす（=2次元化する）
いきなり実装しようとしない
- メソッド呼び出しだけで終わらないと思ったらシーケンス図を描く
  - コールバックは1回あるだけでも追いづらい（クロージャは別だと思う）
  - マルチスレッドなどの並行的な動作やShaderなどとの連携は慎重に扱う
- 普通の処理もまずはやりたい処理を日本語で書いてタスク化すると迷わない
大きめの検証は別アプリでやる
- ある機能を加えたいが、その機能の検証が必要になったら別アプリで確認しその後本番の方に反映する

Tips編

ofxGUIを使いこなす
- 全ての調整しうるパラメータはofxGUI経由で変更出来るようにする
  - ofParameterとofXmlSettingsを使ってファイルに保存、読込が出来るようにすると完璧
ハードとの連携
- ofxGUIを使い、ハードからの値を表示
- 上記をすることで、ソフト的にシミュレーションも可能になり開発スピードが上がる
git管理は必須
- oFは設定が壊れやすいのでgitで管理する
- どうやっても動かなくなったら、変更済みファイルを別に保存しrevertしよう
- ルートに置くreadme.mdにプロジェクトの説明（バージョン情報と利用するデバイスの型番など）を書いとくと将来に便利

Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド

作者: 田所淳,齋藤あきこ
出版社/メーカー: ビー・エヌ・エヌ新社
発売日: 2013/06/26
メディア: 単行本（ソフトカバー）
この商品を含むブログ (4件) を見る

2017-07-12

UnityのTextureで線が繋がるお絵描きをする

Unity

miso-engine.hatenablog.com
oFでお絵描きしたら、今度はUnityでもやってみる。先人たちが結構やっているので、まず参考リンクから。
Unityでテクスチャにお絵描きしよう - おもちゃラボ

点を打つのではなく線を引く

上記の実装だと点なので、oFでもやったように線にしよう。Unityではテクスチャに対する描画系のメソッドが一切ないからよりプリミティブな実装が必要になる。「ブレゼンハムのアルゴリズム」というものがあるので、それを利用した。
ブレゼンハムのアルゴリズム - Wikipedia

実際のコードはこちらのQiitaの記事が参考になったというかほぼ同じになったので掲載しない。Qiitaを参照して欲しい。
ＤＸライブラリとブレゼンハムのアルゴリズムを使って線分を描画 - Qiita

線にする条件マジックナンバー0.12

oFのときは線にするかどうかをマウスイベントで判断していたが、マウスイベントを渡す実装がちょっと手間だったので描画メソッド呼び出しの間隔で判断するようにした。つまり前回の描画メソッドの呼び出しからの秒数によって前回打った点と今回の点との間で、線を描くかどうかを決めるという仕組みだ。これは非常にうまくいった。今回のプロジェクトでは0.12秒以内だといい感じだった。最初は0.5秒にしていたが、そうすると例えばひらがなを書くと指を離したはずなのに繋がってしまっていた。というわけでマジックナンバー0.12、オススメです。マウスイベントによって分岐させるよりもシンプルに書けるし。

消しゴム

消しゴムは色をColor.clearにすることで簡単に実現できる。UI的にはペンよりもブラシの幅を太くするとしっくりくる。

2017-07-12

openFrameworksでマウス入力からある程度滑らかな線を引く

openFrameworks

お絵描き機能の実現のためにタイトルのことをしたいときのソリューションをまとめておく。本気で滑らかにしたいならよりよいアルゴリズムがあるはずなので、他の場所で記事を探して欲しい。

基本

一番単純な実装は、マウスが押されている時の各フレームごとのマウス位置で点を打つ方法だ。しかし、これ少し早くマウスを動かすだけで点線になってしまう。そこで現在のマウス位置と直前のフレームでのマウス位置の間でofDrawLineで線を引く。こうすると必ず線はつながる。線を引くだけだとつなぎ目が見えてしまうことがあるが、そんなときは線の終端に線の太さと同じ円を描くと滑らかになる。

shaderを使うとき

上記のやり方でやっていくとshaderを使ったときに、ofDrawLineで描く線がofSetLineWidthの値に関わらず細くなる現象に遭遇する。shader側に渡すことで解決出来るらしいのだが、それもちょっとなと思って描き方を変えた。線の角度と長さを計算し、ofVertexを利用して四角形を描くのだ。メソッドにまとめたのが以下のコードになる。

void Test::drawLine(ofPoint startPos, ofPoint stopPos, float lineWidth){
    ofPoint vec = (stopPos - startPos).normalize() * lineWidth/2;
    vec.rotate(90, ofPoint(0, 0, 1));
    
    ofPoint first = startPos + vec;
    ofPoint second = stopPos + vec;
    ofPoint third = stopPos - vec;
    ofPoint fourth = startPos - vec;
    ofBeginShape();
    ofVertex(first);
    ofVertex(second);
    ofVertex(third);
    ofVertex(fourth);
    ofEndShape();
    
    ofDrawCircle(startPos, lineWidth/2);
    ofDrawCircle(stopPos, lineWidth/2);
}