Your SlideShare is downloading. ×
0
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

メディア・アート II 第1回: ガイダンス openFrameworks入門

12,654

Published on

0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,654
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
110
Comments
0
Likes
32
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. メディア・アート II 第1回: ガイダンス openFrameworks入門 2013年9月9日 多摩美術大学情報デザイン学科メディア芸術コース 田所淳
  • 2. このワークショップのテーマ
  • 3. このワークショップのテーマ ‣ openFrameworksを用いて、メディアアート作品を制作するた めの実践的なスキルを演習を通じて身につける
  • 4. このワークショップのテーマ ‣ 今期は、プロジェクションマッピングに挑戦してみたい! ‣ 参考: mapamok - YCAM Interlab + Kyle McDonald ‣ https://vimeo.com/37089912
  • 5. このワークショップのテーマ ‣ 将来、巨大プロジェクトに関わることも夢じゃない! ‣ Perfume Performance Cannes Lions International Festival ‣ http://www.youtube.com/watch?v=gI0x5vA7fLo
  • 6. このワークショップのテーマ ‣ よりパーソナルな表現の探求も ‣ Cyril Diagne - 3d print + motor + pico projection mapping ‣ http://www.flickr.com/photos/kikko_fr/8196397623
  • 7. openFrameworksって何?
  • 8. openFrameworks とは? ‣ C++によるクリエイティブなコーディングのためのオープン ソースのツールキット ‣ http://openframeworks.cc/  ‣ 現在のバージョンは、v0.8.0
  • 9. openFrameworks とは? ‣ openFrameworksを紹介した映像を鑑賞 (20minくらい)
  • 10. 簡単な歴史 ‣ 2004年Zachary Liebermanがニューヨークのパーソンズ美術 大学での大学院のクラスの作品制作のためのツールとして開発 ‣ その後、Zachary Lieberman、Theo Watson、Arturo Castroを 主要メンバーとして、世界中の開発者と協力しながら発展
  • 11. Zachary Lieberman
  • 12. 様々なメディアを駆使した作品を作りたい!! 様々な技術に精通しなくてはならない サウンド、ビデオ、フォント、画像解析...etc.
  • 13. openFrameworksを利用すると… 既存の道具(ライブラリ)を設定なしに使用可能 → 作品制作のための「糊」
  • 14. openFrameworks とは? OpenGL GLUT FreeImage FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc.
  • 15. openFrameworks とは? OpenGL GLUT FreeImage FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. 実際に編集する部分
  • 16. openFrameworks とは? OpenGL GLUT FreeImage FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. 実際に編集する部分 openFrameworksの様々な機能
  • 17. openFrameworks とは? OpenGL GLUT FreeImage FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. 実際に編集する部分 openFrameworksの様々な機能 既存のフリーなライブラリ群
  • 18. openFrameworks とは? OpenGL GLUT FreeImage FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. プログラム開発のための 糊 (Glue)
  • 19. openFrameworks とは? ‣ 様々なアートやコマーシャルプロジェクトに活用 ‣ http://www.creativeapplications.net/openframeworks/
  • 20. DIWO ‣ DIWO! (Do it with Others!) - oF dev-con 2013 @YCAM
  • 21. openFrameworks 開発環境の構築
  • 22. openFrameworksをダウンロード ‣ openFrameworksのダウンロードページより ‣ http://www.openframeworks.cc/download
  • 23. openFrameworksをダウンロード ‣ Mac OS X ‣ osx - xcode版をダウンロード ‣ Windows ‣ windows - code::blocks版をダウンロード
  • 24. openFrameworksの開発環境 ‣ openFrameworksには、ProcessingやFlashなどのように専用 の開発環境があるわけではない ‣ それぞれのOSに応じた、C++の開発環境を使用する ‣ Mac OSXの場合 - XCode ‣ Windowsの場合 - Code::Blocks もしくは Visual Studio 2010 ‣ Linuxの場合 - Code::Blocks
  • 25. openFrameworksの開発環境 ‣ XCodeをを入手するには → App Store.app を利用する ‣ App Storeで「Xcode」で検索
  • 26. openFrameworksの開発環境 ‣ XCodeのバージョン ‣ OSX 10.7 Lion、 10.8 Mountain Lion → XCode 4.x ‣ 2013年9月現在の最新版は、4.6.3 ‣ OSX 10.6以下の方はOSのバージョンアップをお薦めします
  • 27. openFrameworksの開発環境 ‣ Windowsの方には、code::blocks がおススメ! ‣ フリーウェア ‣ http://www.codeblocks.org/
  • 28. サンプルを実行してみよう!! ‣ openFrameworksには、大量のサンプルが付属している ‣ どれも素晴しいサンプル!
  • 29. サンプルを実行してみよう!! ‣ サンプルの内容 1 of 2 ‣ 3d - 3次元表現いろいろ ‣ addons - 拡張機能のサンプル ‣ communication - 外部デバイスとの通信(シリアル通信) ‣ empty - 制作のテンプレートとなる「空」サンプル ‣ events - イベント(プログラムへの外部からのアクション)処理 ‣ gl - OpenGLの活用(Shader、VBO、カメラなど)
  • 30. サンプルを実行してみよう!! ‣ サンプルの内容 2 of 2 ‣ graphics - グラフィクスプログラミング ‣ math - 数式による表現、ノイズ、周期など ‣ sound - 音響生成、サウンドファイルの再生 ‣ utils - 補助的な機能の例 ‣ video - 動画の再生、カメラからの入力
  • 31. サンプルを実行してみよう!! ‣ 「of_v0.8.0_osx_release/examples/」以下のフォルダ内 ‣ プロジェクトファイル「.xcodeproj」を開く ‣ 例えば、graphicsExample.xcodeproj ‣ プロジェクトファイルを開くと、自動的にXcodeが起動する
  • 32. サンプルを実行してみよう!! ‣ プログラムを実行するには ‣ まず、Schemeのプルダウンより「サンプル名 Debug」を選択 する
  • 33. サンプルを実行してみよう!! ‣ 左上の「Run」ボタンを押す
  • 34. サンプルを実行してみよう!! ‣ 実行例:graphics example
  • 35. 実習:いろいろなサンプルを実行してみる ‣ まずは、examples以下のサンプルをいろいろ実行してみま しょう! ‣ いったい何をやっているのかを類推しつつ ‣ うまく実行できない場合は、質問してください
  • 36. openFrameworks プログラミング、はじめの一歩
  • 37. 新規にプロジェクトを作成する ‣ 新規にプロジェクトを作成する方法は2つ ‣ 方法1: ProjectGeneratorを利用する ‣ 方法2: 空プロジェクト(EmptyProject)をコピーする
  • 38. 新規にプロジェクトを作成する ‣ 方法1: ProjectGeneratorを利用する方法 ー とても簡単! ‣ projectGeneratorフォルダ内のprojectGenerator.appを起動
  • 39. 新規にプロジェクトを作成する ‣ 方法1: ProjectGeneratorを利用する方法 ‣ 新規プロジェクトの作成手順 ‣ 「CLICK TO CHANGE THE NAME」を選択して名前を設定 ‣ (もし必要なら)「CLICK TO CHANGE THE NAME」で場所を変更 ‣ 「GENERATE PROJECT」で生成 ‣ これで新規プロジェクトに必要なファイル一式が生成される
  • 40. 新規にプロジェクトを作成する ‣ 方法2: 空プロジェクトをコピーする方法 ‣ 新規にプロジェクトを作成するには、空プロジェクトをコピー ‣ 空プロジェクトは、下記のものをコピーしてつかう ‣ examples > empty > emptyExample
  • 41. openFrameworks、フォルダの階層構造 ‣ openFrameworksは、フォルダの階層構造がとても大事!! ‣ ここを間違えるとBuildできなくなってしまう
  • 42. openFrameworks、フォルダの階層構造 ‣ oFルートフォルダ (oF root folder) ‣ openFramewroksの一番先頭(root = 根っこ)の階層 oF root folder
  • 43. openFrameworks、フォルダの階層構造 ‣ ワークスペース (Workspace) ‣ プロジェクトのまとまりを分類して整理 (examples など) Workspace
  • 44. openFrameworks、フォルダの階層構造 ‣ プロジェクト群 (Projects) ‣ この階層に一つ一つのプロジェクトのフォルダが格納 Projects
  • 45. openFrameworks、フォルダの階層構造 ‣ プロジェクト単体 (a project) ‣ Xcodeのプロジェクトファイルを含んだ単一のプロジェクトの 中身 a project
  • 46. openFrameworks、フォルダの階層構造 ‣ 今回のワークショップ用に、ワークスペースに一つ専用のフォ ルダを用意しておきましょう ‣ 例えば、myAppsというフォルダを作成した場合
  • 47. openFrameworksのコード構造 ‣ さしあたって編集するのは、testApp.hとtestApp.cpp OpenGL GLUT FreeImage FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. ココ
  • 48. openFrameworksのコード構造 ‣ testApp.cppとtestApp.h XCode内の場所 ココ
  • 49. プロジェクトの中身を開いてみよう! ‣ testApp.cpp を開いてみる!
  • 50. 2つのファイル ‣ testApp.h - ヘッダファイル ‣ プログラム全体で使用される部品 (変数、関数) を宣言 ‣ testApp.cpp - 実装ファイル ‣ 実際に何をするかを記述
  • 51. 2つのファイル ‣ ヘッダファイル(.h)と実装ファイル(.cpp)を料理にたとえると… ヘッダファイル = レシピ 必要な材料の一覧 料理の手順を書き出す
  • 52. 2つのファイル ‣ ヘッダファイル(.h)と実装ファイル(.cpp)を料理にたとえると… ヘッダファイル = レシピ 必要な材料の一覧 料理の手順を書き出す 実装ファイル = 料理 料理完成までの過程を 具体的に全て記述
  • 53. 重要な3つのブロック ‣ とりあえず今の段階で重要になるのは、下記の3つ処理のブ ロック (関数, function) setup - 準備 update - 更新 draw - 描画 ‣ 絵を描く準備をしたら継続的に更新しながら描画する
  • 54. 重要な3つのブロック setup プログラム開始 update draw プログラム終了までくりかえし
  • 55. testApp.h では 準備 #pragma once #include "ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { ! public: ! void setup(); ! void update(); ! void draw(); ! void exit(); ! ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void lostFocus(); ! void gotFocus(); ! void gotMemoryWarning(); ! void deviceOrientationChanged(int newOrientation); 準備
  • 56. testApp.h では 準備 #pragma once #include "ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { ! public: ! void setup(); ! void update(); ! void draw(); ! void exit(); ! ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void lostFocus(); ! void gotFocus(); ! void gotMemoryWarning(); ! void deviceOrientationChanged(int newOrientation); 更新
  • 57. testApp.h では 準備 #pragma once #include "ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { ! public: ! void setup(); ! void update(); ! void draw(); ! void exit(); ! ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void lostFocus(); ! void gotFocus(); ! void gotMemoryWarning(); ! void deviceOrientationChanged(int newOrientation); 描画
  • 58. testApp.cpp では 準備 #include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ } //-------------------------------------------------------------- void testApp::keyPressed(int key){ } //-------------------------------------------------------------- void testApp::keyReleased(int key){ } //--------- 後略 --------- 準備
  • 59. testApp.cpp では 準備 #include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ } //-------------------------------------------------------------- void testApp::keyPressed(int key){ } //-------------------------------------------------------------- void testApp::keyReleased(int key){ } //--------- 後略 --------- 更新
  • 60. testApp.cpp では 準備 #include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ } //-------------------------------------------------------------- void testApp::keyPressed(int key){ } //-------------------------------------------------------------- void testApp::keyReleased(int key){ } //--------- 後略 --------- 描画
  • 61. 図形を描いてみる! ‣ まず円を描いてみましょう ‣ 何を指定したら円を描けるのか、を考える
  • 62. 図形を描いてみる! ‣ 座標系:画面の中の場所(点)を指定するしくみ ‣ 横 (x座標) と 縦 (y座標) で考える ‣ openFramewroksの場合、原点 (0, 0) は左上 x座標 y座標 原点 (0, 0)
  • 63. 図形を描いてみる! ‣ 例えば、(80, 60) の点(x = 80, y = 60)だったら ‣ 左上の点から、80pixel右、上から60pixel下にいったところ 80 60 (0, 0)
  • 64. 図形を描いてみる! ‣ 中心の位置(座標 = x, y)と半径( r )の長さがわかれば円は描くこ とができる! (x, y) r
  • 65. 図形を描いてみる! ‣ openFrameworksでは、下記のように指定する ‣ ofCircle (中心のx座標, 中心のy座標, 半径の長さ); ‣ 例: ‣ ofCircle (100, 200, 50);  ‣ 座標(100, 200) を中心に、半径50の円を描く
  • 66. やってみよう!! < 前略 > //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ ofCircle(512, 384, 200); } //-------------------------------------------------------------- void testApp::exit(){ } < 後略 > Text
  • 67. やってみよう!! ‣ 円が描けた!
  • 68. 参考:oFの命令を調べる ‣ 円以外の形を描きたくなったとき、どうやって調べる? ‣ リファレンスを参考にすると良い ‣ http://www.openframeworks.cc/documentation
  • 69. 色を塗ってみる ‣ コンピュータの画面はどうなっているのか? ‣ コンピュータの画面を拡大していくと... ‣ 縦横に並んだ点の集合 → ピクセル (Pixel) ‣ 一つのピクセルは赤、緑、青の三原色から成り立っている
  • 70. 色を塗ってみる ‣ 色を指定するには? ‣ R(赤) G(緑) B(青)の三原色で指定する ‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色
  • 71. 色を指定するには? ‣ openFrameworks で色を指定するには? ‣ ofSetColor を使用する ‣ ofSetColor (Red, Green, Blue, Alpha); ‣ それぞれの色の範囲は 0 ∼ 255 ‣ Alphaは透明度をあらわす ‣ 色を指定した以降の図形に適用される ‣ 例: ‣ ofSetColor(0, 127, 255, 127);
  • 72. 色を指定するには? #include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ ofSetColor(0, 127, 255, 200); ofCircle(412, 384, 200); ofSetColor(255, 127, 0, 200); ofCircle(612, 384, 200); } < 後略 >
  • 73. 色を指定するには? ‣ 色がついた!
  • 74. 背景色や描画方法の初期設定 ‣ setup() に様々な初期設定を行う ‣ 透明度を有効に - ofEnableAlphaBlending(); ‣ 円を描画する精度 - ofSetCircleResolution(分割数); ‣ 背景色 - ofBackground(R, G, B);
  • 75. 背景色や描画方法の初期設定 #include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ ! ofEnableAlphaBlending(); ! ofSetCircleResolution(64); ! ofBackground(0, 0, 0); } //-------------------------------------------------------------- void testApp::update(){ ! } //-------------------------------------------------------------- void testApp::draw(){ ofSetColor(0, 127, 255, 200); ofCircle(412, 384, 150); ofSetColor(255, 127, 0, 200); ofCircle(612, 384, 150);! } < 後略 >
  • 76. 背景色や描画方法の初期設定
  • 77. 図形を動かしてみよう! ‣ いよいよ図形を動かしてみましょう! ‣ 円を画面の中心を軸にして、ぐるぐる回転させてみます
  • 78. 図形を動かしてみよう! ‣ 回転運動をするには… ‣ 現在の回転角度を憶えておかなければならない ‣ 次のコマで現在の回転角度から少し変化させるため ‣ 値を憶えるための仕組み → 「変数 (veriables)」 時間
  • 79. ‣ 変数とは? ‣ 一時的に値(文字、文字列、数字など)を記憶しておく場所 ‣ データを入れておく「箱」のようなもの 変数 ver
  • 80. ‣ データ型 - 値の種類 ‣ よく用いられるデータ型 ‣ int:整数 (-1, 0, 1, 2, 3....) ‣ float:少数 (-0.01, 3.14, 21.314) ‣ bool:ブール値、真か偽か、(true, false) ‣ char:1文字分のデータ(a, b, c, d...) ‣ string:文字列 Hello World! 変数 int float char
  • 81. ‣ 宣言:使用する変数の名前の箱を準備する ‣ 代入:変数の箱に値を入れる ‣ 演算:変数の値を計算する 変数 int hoo; hoo = 0; hoo = hoo + 1;
  • 82. 図形を動かしてみよう! ‣ 回転角度を記録する箱 ‣ 小数点以下の値は必要ないので、int の箱 (int型という) で ‣ testApp全体で使用する変数は、ヘッダファイル( = レシピ ! )に 記述する ヘッダファイル = レシピ 回転角度 (int rotation)
  • 83. #pragma once #include "ofMain.h" class testApp : public ofBaseApp{ ! public: ! void setup(); ! void update(); ! void draw(); ! ! void keyPressed (int key); ! void keyReleased(int key); ! void mouseMoved(int x, int y ); ! void mouseDragged(int x, int y, int button); ! void mousePressed(int x, int y, int button); ! void mouseReleased(int x, int y, int button); ! void windowResized(int w, int h); ! void dragEvent(ofDragInfo dragInfo); ! void gotMessage(ofMessage msg); ! ! int rotation; }; 図形を動かしてみよう! ‣ testApp.h を編集 追加
  • 84. 図形を動かしてみよう! ‣ 実装ファイル testApp.cpp にも変更を加える ‣ setup( ): ‣ フレームレート(1秒間に更新する回数)を設定 ‣ update( ): ‣ 1コマ描画するごとに角度を更新 ‣ draw( ): ‣ 設定した角度回転してから、円を描く
  • 85. #include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ ! ! ofEnableAlphaBlending(); ! ofSetCircleResolution(64); ! ofBackground(0, 0, 0); ! ofSetFrameRate(60); ! ! rotation = 0; } 図形を動かしてみよう! ‣ testApp.cpp を編集 追加 追加
  • 86. //-------------------------------------------------------------- void testApp::update(){ ! rotation = rotation + 5; } //-------------------------------------------------------------- void testApp::draw(){ ! ! ofRotateZ(rotation); ! ! ofSetColor(0, 127, 255, 200); ! ofCircle(412, 384, 150); ! ofSetColor(255, 127, 0, 200); ! ofCircle(612, 384, 150); ! } 図形を動かしてみよう! ‣ testApp.cpp を編集 追加 追加
  • 87. 図形を動かしてみよう! ‣ あれ、なんか意図と違う…?
  • 88. 図形を動かしてみよう! ‣ ofRotateZ() は原点を中心軸にして回転する ‣ 左上を中心に回転 → 画面の中心を軸にしたい
  • 89. 図形を動かしてみよう! ‣ 回転軸を移動するには → 座標全体の位置を移動する ‣ ofTranslate(x, y) 座標全体を移動する命令 (0, 0) (0, 0) ofTranslate(x, y)
  • 90. 図形を動かしてみよう! ‣ 画面の中心点を求める:画面サイズが変化するたびに計算する のは面倒 → 便利な関数が存在する!! ‣ ofGetWidth() 画面の幅、ofGetHeight() 画面の高さ ‣ つまり画面の中心点は (ofGetWidth()/2, ofGetHeight()/2) ofGetWidth() ofGetHeight() (ofGetWidth()/2, ofGetHeight()/2)
  • 91. //-------------------------------------------------------------- void testApp::draw(){ ! ofTranslate(ofGetWidth()/2, ofGetHeight()/2); ! ofRotateZ(rotation); ! ! ofSetColor(0, 127, 255, 200); ! ofCircle(-100, 0, 150); ! ofSetColor(255, 127, 0, 200); ! ofCircle(100, 0, 150); ! } 図形を動かしてみよう! ‣ testApp.cpp を編集 追加 変更 変更
  • 92. 図形を動かしてみよう! ‣ 画面の中心を軸にして回転!!
  • 93. 図形を動かしてみよう! ‣ さらに変化をつけてみる ‣ マウスの現在位置で、パラメーターを変化させる ‣ マウスの現在位置の取得:mouseX、mouseY ‣ mouseX - 現在のマウスのX座標 ‣ これを、回転スピードに割りあてる ‣ mouseY - 現在のマウスのY座標 ‣ これを、円の半径に割りあてる
  • 94. //-------------------------------------------------------------- void testApp::update(){ ! rotation = rotation + mouseX / 4.0; } //-------------------------------------------------------------- void testApp::draw(){ ! ofTranslate(ofGetWidth()/2, ofGetHeight()/2); ! ofRotateZ(rotation); ! ! ofSetColor(0, 127, 255, 200); ! ofCircle(-100, 0, mouseY / 2.0); ! ofSetColor(255, 127, 0, 200); ! ofCircle(100, 0, mouseY / 2.0); ! } 図形を動かしてみよう! ‣ testApp.cpp を編集 変更 変更 変更
  • 95. 図形を動かしてみよう! ‣ 半径と回転スピードを変化させながら、高速回転!!
  • 96. 次回までの宿題!!
  • 97. コードをつかった作品リサーチ ‣ コード (= プログラム) を使用した作品を調査して、自分が一番 良いと思った作品をひとつピックアップする ‣ その作品を再現するとしたら、何が必要か考える ‣ ソフトウェアの技術 (ライブラリ、フレームワーク) ‣ ハードウェア ‣ その他… ‣ 来週、各自簡単に発表してもらいます
  • 98. コードをつかった作品リサーチ ‣ 参考サイト ‣ CreativeApplications ‣ http://www.creativeapplications.net/ ‣ information aesthetics ‣ http://infosthetics.com/ ‣ Create Digital Motion ‣ http://createdigitalmotion.com/ ‣ Co.Create ¦ creativity + culture + commerce ‣ http://www.fastcocreate.com/

×