openFrameworks初心者向けの勉強資料です。 まずは基本の図形を描いてみましょう！

1. openFrameworks
新規プロジェクト作成・図形の描画

2. プロジェクト作成

3. プロジェクト作成
これからコーディングをしていくわけですが、
まずはその環境を整えていきましょう。
下記のURLから各々のOSに合わせたものを
ダウンロードしてください。
http://openframeworks.cc/ja/download/

4. プロジェクト作成
こんなファイルがダウンロードできたと思います。
その中にある「projectGenerator.app」を起動しましょう。

5. プロジェクト作成
起動させた「projectGenerator.app」は
下記のとおりに設定し、「Generate」をクリック！
Project name
わかりやすいものにしておきましょう
Project path
作成するプロジェクトのファイルパス
こちらもわかりやすい位置に
Addons
アドオンを利用する場合はここから設定
今回は使用しないので、触らないでOK

6. プロジェクト作成
プロジェクトの作成に成功すると、以下のようなポップアップが出てきます。
「Open in IDE」をクリックし、
XcodeあるいはVisual Studioで早速openFrameworksに触れていきましょう。

7. プロジェクト作成
ここまでできたら、一度作成したファイルにバグがないか実行してみましょう。
何もなければ、何もしないプロジェクトだけが立ち上がるはずです。

8. 図形の描画

9. 図形の描画
早速作成したプロジェクトのファイルを触っていきましょう。
基本的に書き換えていくファイルは以下の３つになります。
main.cpp:アプリ全体の設定をするところ
ofApp.h:ヘッダーファイル
ofApp.cpp:アプリケーションの処理を書くところ

10. 図形の描画
直線を描いてみましょう。
ofApp.cppの中にある赤枠の部分を
右のように書き換えます。
ofDrawLine(描き始めのx座標,
描き始めのy座標,
描き終えのx座標,
描き終えのy座標);
書き換えたら実行してみましょう。
右のようになっていたら成功です。
PC上での描画において、
座標の考え方は数学のものとは違う形になります。
左上を(0,0)と考え、右に行くほどxの値が増え、
下に行くほどyの値が増えていきます。
Tips!

11. 図形の描画
次は四角形を描いてみましょう。
ofApp.cppの中に書き足していきます。
ofDrawRectangle(左上のx座標,
左上のy座標,
四角形のwidth,
四角形のheight);

12. 図形の描画
次は円を描いてみましょう。
ofApp.cppの中に書き足します。
ofDrawCircle(円の中心点のx座標,
円の中心点のy座標,
円の半径の長さ);

13. 図形の描画
基本図形として最後は
三角形を描いてみましょう。
ofApp.cppの中に下記のものを追加します。
ofDrawTriangle(頂点1のx座標,
頂点1のy座標,
頂点2のx座標,
頂点2のy座標,
頂点3のx座標,
頂点3のy座標);

14. 図形の描画
次は色を変更してみましょう。
右のように下記を追加しましょう。
これまでとは違い、
書き込む位置はsetup()の部分です。
ofSetBackgroundColor(
Rの値,Gの値,Bの値);
ofSetColor(Rの値,Gの値,Bの値);
順に背景色と全体で利用する色を
設定しています。

15. 図形の描画
色を個別に変更することもできます。
右のように下線の位置に追加しましょう。
右下の図のようにそれぞれが指定した通り
別の色になっていれば成功です。
R,G,Bはそれぞれ三原色の赤、緑、青に相当し、
値は0~255の数値を取ります。
今回はRGBなので、加法混色と呼ばれるもので、
現実世界における光がこれに当たります。
RGB全てが0、すなわち光がない状態なので黒くなり、
全てが255の状態で白くなります。
Tips!

16. 図形の描画
図形の透明度を変更しましょう。
下線の位置に追加していきます。
ofEnableAlphaBlending();
透明度を利用するという宣言。
ofSetColor(R,G,B,透明度の値);
透明度の値も0~255の値を取る。
0で完全に透明に、
255で完全に不透明になる。
ofEnableAlphaBlending は「透明度を使う」という宣言。
対になっている ofDisableAlphaBlending を利用し、
透明度を使いたい部分を２つで囲んでやると、
一部分だけ透明度を利用することもできるぞ！
Tips!

17. これで基本的な描画方法についての説明はおしまいです！
おさらいがてらに好き好きに図形を描画してみてください
。