iTmabiの履修者の方々の開発したiPhoneアプリです。
ACCEL SEQUENCER
iPhoneをシェイクすることで音を入力していく、ステップシーケンサー。音色のセットを切り替えることも可能。複数台のiPhoneでセッションをすると楽しい。
馬場美沙紀 (情報芸術)
加治 洋紀 (情報芸術)
出雲優子 (情報芸術)
星野泰宏 (情報芸術)
barcode clock
現在の時間をバーコードで表示する時計アプリ。表示されるのは、実際に読み取り可能な本物のバーコード。
A Cloclwork Light
光の粒が時間の変化とともに飛び散りながら変化する。表示される光は、実際にライトを撮影して素材にしている。
林響太朗 (情報デザイン)
梶原恵 (情報デザイン)
浮島佳祐 (情報デザイン)
Draw Sound
画面上を指で線を描くと、その形からメロディーが生まれる。
dripple
画面をタップすると、波紋が拡がり、水滴が落ちる音で音楽を奏でる。
DropClock
重力によってデジタル時計の文字がiPhoneの傾きと一致して、重力によって崩れていく。しばらくするとまた文字が表示され、また崩れるという繰り返し。
GulinClock
デジタル時計の後ろで、物理演算によって運動する球体が動きまわる。
hagunet planet
ネコのキャラクターを操作して敵を避けていく、本格的なアクションゲーム。画面をタッチしてロケットの推進力をコントロールする。
未来派気取り
二進数の数値によって時間がリアルタイムに変化し、経過していく過程をビジュアライズしている。
montage
モンタージュ写真を作成するアプリ。画面をタップして、目と鼻と口を左右にスライドさせて、様々なキャラクターの断片から新たな顔を生成する。
PANDA
パンダのキャラクターが上下にバウンド。画面をタップするとバウンドのスピードが変化する。
Potope
iPhoneのカメラで撮影した写真の色情報を分析して、万華鏡のような模様がアニメーションする。
PIKADOOOM
iPhoneのマイクを通して入力された周囲の音にあわせて、空から稲妻が落ちてくる。
Rough Coaster
手書きアニメーションによる、3Dローラーコースター。
sensitiveA
一見普通のアナログ時計だが、画面をタッチすると敏感(sensitive)に反応して針が震える。
sensitiveD
Sensiteive A のデジタル版。画面タッチでデジタルの数値が敏感に反応する。
SoundSwitch
マトリクス上にならんだスイッチをON/OFFすることで演奏するシーケンサー。スイッチの状態とONにするタイミングで、リズムパターンを生成する。
一日時計タマビ行き
時計の背景に、実際の時間と連動して多摩美の一日の様子が変化する。
Tamabi百景
キャンパスの地図上に表示されたポイントをクリックすると、その場所で描かれた絵画やイラストが表示される。地図と連動したポートフォリオ。
tamanekorogashi
多摩美に生息する猫の写真のスライドショー。画面をタップすると、運動する円を配置できる。
あたりゲーム
3人の中から一人のあたりを決める抽選ゲーム。それぞれ自分の色を決めて、回転する円が一番上の位置に来たらあたりになる。
openFrameworksを、iPhoneのiOS4用にビルドする方法について解説します。このページでは、下記の環境でテストしています。
Xcodeと、iOS SDKの最新版をダウンロードする
XcodeとiOSX SDKの最新版を、Apple Developper Center (ADC) からダウンロードしてインストールします。iPhone Dev CenterのURL (http://developer.apple.com/iphone/ ) にアクセスし、登録したADCのアカウントでログインした上で、「iOS SDK 4」のタブを選択します。「Downloads」のメニューより、「Xcode 3.2.3 and iOS SDK 4.0.1」を選択し、ダウンロードします。
ダウンロードしたディスクイメージをダブルクリックしてマウントし、インストーラーを起動して、XCodeとiPhone SDKをインストールします。
FreeImageのライブラリをダウンロード
下記のリンクより、iOS4用にビルドし直されたバージョンのFreeImageのライブラリをダウンロードします。
FreeImageのライブラリを入れ替え
openFrameworksの配布パッケージ内のFreeImageのライブラリを、ダウンロードしたiOS4用のライブラリと入れ替えます。
既存のライブラリを消去します。
of_preRelease_v0061_iPhone_FAT-pre3/libs/FreeImage/lib/iphone/libFreeImage_iphone_universal.a
同じフォルダにダウンロードしたライブラリ(2種類)をインストールします。iOS4用のライブラリは、ダウンロードしたフォルダの「FreeImage/lib/iphone/」以下にあります。その中身を以下の場所にコピーします。
of_preRelease_v0061_iPhone_FAT-pre3/libs/FreeImage/lib/iphone/libfreeimage-iphone.a
of_preRelease_v0061_iPhone_FAT-pre3/libs/FreeImage/lib/iphone/libfreeimage-iphonesimulator.a
※ includeフォルダの中身は変更の必要はありません。
openFrameworksのプロジェクトにFreeImageライブラリを追加
まず、XCode 3.2.3で、openFrameworksの既存のプロジェクトファイルをオープンします。左側の「グループとファイル」のリストから、FreeImageのiPhone用ライブラリのフォルダ内にある古いライブラリを選択します。
[プロジェクトのアイコン]/libs/core/core libraries/FreeImage/lib/iphone/libFreeImage_iphone_universal.a
ファイルを選択した状態で、Deleteキー、もしくは右クリックで表示されるリストから「削除」を選択して、ファイルを削除します。
次に、ライブラリが格納されていたiphoneフォルダを右クリックして、「追加」→「既存のファイルの追加」を選択します。ファイルの選択画面が表示されるので、iOS4用のライブラリを選択して、「追加」を選びます。
of_preRelease_v0061_iPhone_FAT-pre3/libs/FreeImage/lib/iphone/libfreeimage-iphone.a
of_preRelease_v0061_iPhone_FAT-pre3/libs/FreeImage/lib/iphone/libfreeimage-iphonesimulator.a
この操作は、プロジェクトを新規に作成する際に毎回必要となります。ライブラリーをiOS4用に設定した空のプロジェクトファイルを作成して、新規に「EmptyProject」という名前で保存して再利用すると、次回はその「EmptyProject」をコピーすることで設定済みの状態から初めることが可能です。
Xcodeビルド設定の変更
iOS4に更新した関係で、以前のプロジェクトファイルに設定されていた、ビルドの設定が使えなくなっています。最新版の環境にあわせて、ビルドの設定をする必要があります。設定箇所は2箇所です。
「グループとファイル」のリストの一番上にある、プロジェクトのアイコンを選択した状態で、メニューバーから「情報」を選択し、設定画面が表示されるので、「ビルド」のタブを選択。
「アーキテクチャ」→「ベースSDK」の設定を、「iPhoneデバイス 4.0」に
「グループとファイル」のリストの「ターゲット」の中にある実行ファイルのアイコン(例：emptyExample)を選択した状態で、プロジェクトファイルと同様に変更。
「アーキテクチャ」→「ベースSDK」の設定を、「iPhoneデバイス 4.0」に
iPhone実機で動かす場合には、ofxiphone-info.plistの設定や、コード署名IDの設定を行います。
追記：iPad (3.2 or 3.2.1) 用にビルドする
iPad用にビルドするには、上記のiOS4の設定と同じ操作をした後で、追加で以下の設定をすることでビルドが可能となります。
「グループとファイル」から、「ターゲット」内にある実行ファイル (例：emptyExample) を選択し、右クリックします。表示されるメニューから「現在のターゲットをiPad用にアップグレード」を選択します。
アップグレードの形式を、iPhoneとiPadで共通の1つのユニバーサルアプリケーションにまとめるか、2つの独立したアプリケーションにするかを選択します。この説明では、1つのユニバーサルアプリケーションを選択しています。
最後にメニュバーの「概要」のプルダウンメニューから「アクティブな実行可能ファイル」の中からiPad用の実行可能ファイルを選択します。
これで設定は完了です。「ビルドして実行」ボタンを押すと、シミュレータ、またはiPad実機でopenFrameworksのアプリケーションが動作します。
今日の内容
ドロー(お絵描き)アプリをつくる
簡単なサンプルから徐々に複雑なサンプルへと進めていきます
ドロー系アプリのサンプル
ドローアプリを作る
ステップ1：タッチした軌跡に円を描く
touchDownとtouchMoveした際のX座標とY座標を取得
取得した座標の場所に円を描いていく
円の連なりで線を描いていく
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofPoint touchLoc; //画面をタッチしている場所
testApp.mm
//————————————————————–
//横位置で起動
//画面の基本設定
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
ステップ2：線で描く
ひとつ前のタッチした座標を記録しておく
ひとつ前のタッチした座標と現在の座標を線で結ぶ
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofPoint touchLoc; //現在タッチしている場所
testApp.mm
//————————————————————–
//横位置で起動
//画面基本設定
drawing = false;
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
ステップ3：線の太さを変化させる
前のタッチした座標から、現在の座標までの移動した距離を測定
移動した距離に応じて線の太さを変化させる
移動距離が長いときは細い線で
移動距離が短いときには太い線で
筆で書いたような効果
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofPoint touchLoc; //現在タッチしている場所
testApp.mm
//————————————————————–
//横位置で起動
//画面基本設定
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
ステップ4：よりなめらかな線に
線が細くなった際に、線が切れぎれになってしまう問題に対処
座標を一気に移動するのではなく、補完していくことで、なめらかな線にしている
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofPoint touchLoc; //現在タッチしている場所
};
testApp.mm
//————————————————————–
//横位置で起動
//画面基本設定
//補完の割合を設定
//————————————————————–
}
//————————————————————–
//前のタッチした座標と現在の座標の距離を算出
//————————————————————–
}
//————————————————————–
//————————————————————–
//タッチしている場所を記録
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
ステップ5：文字で描く
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofPoint touchLoc;
testApp.mm
//————————————————————–
//横位置で起動
//画面基本設定
//表示する文字列を設定
//————————————————————–
}
//————————————————————–
if (dist > size) {
ofPushMatrix();
counter++;
}
//————————————————————–
}
//————————————————————–
//————————————————————–
//タッチしている場所を記録
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サンプルファイルのダウンロード
今回の授業で紹介したプログラムのソースコードは以下からダウンロードしてください。
今日の内容
openFrameworksに画像ファイルを読み込む
画像を連続して読み込んで、手書きアニメーションに挑戦!!
画像ファイルを読み込む
openFrameworksで、画像を扱うには、ofImageクラスを使用する
ofImage – freeImageライブラリをopenFrameworksで使用しやすいようにしたクラス
主要な画像フォーマットに対応(PNG, JPEG, TIFF, BMP, GIF など)
ofImageを利用して読み込む画像ファイルは、[プロジェクトのフォルダ]/bin/data/ 以下に配置する
画像を読み込む手順
ofImageのインスタンスを生成
例) ofImage myImage;
ofImageクラスのインスタンスmyImageを生成
画像ファイルを読み込み
例) myImage.loadImage("hoge.png");
bin/data フォルダ内にある、hoge.pngファイルを読み込む
画像を表示
例) myImage.draw(0, 0);
座標(0, 0)を左上にして、画像を表示
画像を1枚読み込んで表示する
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//ofImageクラスのインスタンスmyImageを生成
};
testApp.mm
//————————————————————–
//画像ファイルの読み込み
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
複数の画像を読み込んで順番に表示する
testApp.h
#include "ofMain.h"
#define FRAMENUM 12 //読み込む画像の枚数
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//ofImageのインスタンスの配列を生成
testApp.mm
//————————————————————–
//連番がふられた画像を順番に読み込み
//————————————————————–
}
//————————————————————–
//フレーム数をひとつ進める
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
テンプレートをもとにオリジナルのアニメーションを作成してみる
作成する画像のフォーマットは、320 x 480のPNGファイル
作成した画像は順番に、myAnim[番号].png という名前で保存していく、番号は0詰めで4桁で。
myAnim0001.png、myAnim0002.png、myAnim0003
作成した枚数で、testApp.h で定義されている定数"FRAMENUM"を変更する
まずは2枚から
うまくいったら、枚数を増やしてみる
サンプルファイルのダウンロード
今回の授業で紹介したプログラムのソースコードは以下からダウンロードしてください。
今日の内容
サウンドファイルの再生「Buddha Machine」的なアプリを作ってみる
サウンドの録音と再生を使用した音アプリに挑戦
録音した音のデータをインタラクティブに操作する
サウンドファイルの再生
サンプル1：サウンドファイルの再生
オリジナルな"Buddha Machine"的アプリを制作できる雛形
サウンドファイル(caf形式)と表示する画像を入れ替えれば、そのままアプリにできるテンプレートを以下に掲載
音ファイル(caf形式)は、「プロジェクトのフォルダ」→「bin」→「data」→「mySound.caf」に入れる
caf形式のフォーマット – リニアPCM、16bit リトルエンディアン符号付き整数、22050Hz
表示する画像ファイル(PNG形式)は、「プロジェクトのフォルダ」→「bin」→「data」→「myScreen.png」に入れる
PNGファイルノフォーマット – PNG 320 x 480 pixel
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//表示する画面イメージ
//OpenALを利用して音を再生するプレーヤー
testApp.mm
//————————————————————–
//画面イメージを読みこみ
//ループ再生するcafファイルをロードして、Synthにわりあて
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サウンドを録音・再生する (サンプリング＆プレイバック)
あらかじめ録音したサウンドファイルを再生するのではなく、iPhoneのマイク入力から音を録音したり、録音した音を再生するには、SoundStreamを使用する必要がある
SoundStreamは、音のサンプルのデータ自体を数値として配列に記憶し、それを再生することができる機能 → サンプリング＆プレイバック
サンプリグ (標本化)とは
時間的に連続した信号を一定の間隔をおいて測定することにより、離散的な（連続でない）データとして収集すること
時間的に連続した信号 = アナログ信号
離散的な信号 = デジタル信号
サンプリング周波数と量子化ビット数
サンプリング周波数 – 1秒間にいくつのサンプルを使用してサンプリングするか、単位はHz
量子化ビットレイト – AD変換の際に信号を何段階の数値で表現するか、単位はbit
iPhoneシミュレータでサンプリング＆プレイバックのプレビューを行う際には「Audio MIDI 設定で」下記の設定にする
サンプリング周波数、44.1KHz
量子化ビットレイト – 24bit
Sound Streamの機能
SoundStreamを使用するにはまず ofSoundStreamSetup() で初期設定を行う、通常は、setup() の中で指定
ofSoundStreamSetup(int nOutputs, int nInputs, ofSimpleApp * OFSA, int sampleRate, int bufferSize, int nBuffers)
サウンドの録音再生の初期設定を行う
int nOutput – 再生する音のチャンネル数
int nInput – 録音する音のチャンネル数
ofSimpleApp * OFSA – 呼び出し元のofSimpleApp (普通は、this でOK)
int sampleRate – サンプリングレイト
int bufferSize – 音をバッファ(格納)するサイズ
Sound Streamに関連するイベント
testApp では、ofSoundStreamSetup() の設定すると音の入出力に関するイベントが発生する
audioReceived(float * input, int bufferSize, int nChannels)
音が入力(録音)される際に発生するイベント
float * input – 入力された音のサンプルの配列
int bufferSize – バッファサイズ、一度に格納されるサンプルの長さ
int nChannels – チャンネル数
audioRequested(float * output, int bufferSize, int nChannels)
音が出力(再生)される際に発生するイベント
float * output – 音として出力するサウンドのサンプルの配列
int bufferSize – バッファサイズ、一度に格納されるサンプルの長さ
int nChannels – チャンネル数
サンプル2：サンプリング&プレイバック
音を録音して再生するという「サンプリング＆プレイバック」の機能をシンプルに実現してみる
画面をタッチ(touchDown)すると録音、タッチしている指を離すと(touchUp)録音した音を再生するように設計
録音した音の波形を画面に表示する
testApp.h
#include "ofMain.h"
//録音・再生する音の長さ
class testApp : public ofxiPhoneApp{
public:
void touchDown(ofTouchEventArgs &touch);
void audioReceived( float * input, int bufferSize, int nChannels );
float buffer[LENGTH]; //オーディオバッファ
testApp.mm
//————————————————————–
//横位置で使用
//サンプリングレイトの設定
//サウンド録音再生の初期化
//再生モードに
//録音、再生の位置を先頭に
//————————————————————–
//————————————————————–
if (mode == 1) {
//画面の幅と録音サンプル数の比率を計算
//画面の横幅にあわせて、波形を描画
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
}
サンプル3：録音した音をインタラクティブに操作する
録音した音のピッチや音量を変化できるようにする
簡易版"Sampletoy" – 参考：Sampletoy
録音したサンプルを再生する際に工夫を加えてみる
そのままの状態で録音開始
画面をタッチすると再生
画面をタッチしながら横に移動すると、音のピッチが変化
画面をタッチしながら縦に移動すると、音量が変化
testApp.h
#include "ofMain.h"
//録音・再生する音の長さ
class testApp : public ofxiPhoneApp{
public:
void touchDown(ofTouchEventArgs &touch);
void audioReceived( float * input, int bufferSize, int nChannels );
float buffer[LENGTH]; //オーディオバッファ
testApp.mm
//————————————————————–
//横位置で使用
//サンプリングレイトの設定
//サウンド録音再生の初期化
//録音モードに
//録音、再生の位置を先頭に
playSpeed = 1.0;
}
//————————————————————–
//————————————————————–
if (mode == 1) {
//画面の幅と録音サンプル数の比率を計算
//画面の横幅にあわせて、波形を描画
//————————————————————–
//————————————————————–
//————————————————————–
//音量を設定
//————————————————————–
//————————————————————–
//————————————————————–
}
サンプルファイルのダウンロード
今回の授業で紹介した全てのサンプルは、下記のリンクからダウンロード可能です
今日の内容
iPhoneで時計をつくってみる
openFrameworksで、現在の時刻の取得は簡単に実現可能
あとは、その数値を使って、いろいろな表現を試す
時刻の取得
openFrameworksでは、現在の時間、分、秒を取得する関数が用意されている
だたし、この時間はiPhone (シミュレータの場合はMac) の時計を参照しているので、常に正確とは限らない
時刻を取得する関数
ofGetHours(); – 「時」を取得 (0〜24)
ofGetMinutes(); – 「分」を取得 (0〜60)
ofGetSeconds(); – 「秒」を取得 (0〜60)
サンプル1：時刻を表示する
testApp.mm
//————————————————————–
//————————————————————–
}
//————————————————————–
//文字で表示する
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サンプル2：デジタル時計
フォントを読み込んで、きれいな文字で表示
時、分、秒ともに、値が10以下の時は、左に0を追加して2桁表示にする
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
};
testApp.mm
//————————————————————–
//————————————————————–
}
//————————————————————–
//秒を読み込み、10以下の場合には左に0づめで2桁に
//読み込んだフォントで、時刻を表示
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サンプル3：アナログ時計(簡易版)
取得した時刻から、アナログ時計を作成する
時針、分針、秒針のそれぞれの角度を求める
時針：12時間で360°変化する。1時間あたりの変化は、360 / 12 = 30°
時刻から時針の角度を求める
現在の時刻(時) x 30
分針：60分で360°変化する。1時間あたりの変化は、360 / 60 = 6°
時刻から分針の角度を求める
現在の時刻(分) x 6
秒針：60秒で360°変化する。1時間あたりの変化は、360 / 60 = 6°
時刻から秒針の角度を求める
現在の時刻(秒) x 6
testApp.mm
//————————————————————–
//————————————————————–
}
//————————————————————–
//時計の大きさを設定
//背景に円を描く
//秒針
//分
//時針
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サンプル4：アナログ時計(完成版)
作成したプログラムの表示と実際のアナログ時計と比べてみる
なにか違いはないだろうか?
分が切り替わった瞬間の動き
時間が切り替わった瞬間の動き
実際の時計
時針、分針も常にゆっくりと動いている
時刻が変化した瞬間に動くのではなく、ゆっくりと移動して、気がつくと角度が変化している
実際の分針
秒の影響を受けている
毎秒あたり、1/60の影響 (1分 = 60秒なので)
m = m + (s/60);
実際の時針
分の影響を受けている
毎分あたり、1/60の影響 (1時間 = 60分なので)
h = h + (m/60);
分針と時針の補正をしたアナログ時計に修正する
文字盤を追加
角度を変更しながら、一定間隔に目盛を刻んでいく
小さな目盛：6度づつ
大きな目盛：30度づつ
testApp.mm
//————————————————————–
//————————————————————–
}
//————————————————————–
//時計の大きさ
//座標全体を中心に移動
//時計の背景
//分の目盛を描く
//時の目盛を描く
ofSetColor(255, 255, 255);
//秒針
//分
//時針
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サンプル5：大きさによる時間の表現
時刻の数値をより自由な発想で使用してみる
時、分、秒、ミリ秒の値で半径を変化させながら、円を描いてみる
大きさによる時計
testApp.mm
//————————————————————–
//————————————————————–
}
//————————————————————–
//円の最大の大きさを設定
ofSetColor(127, 127, 127);
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サンプル6：位置による時間の表現
時、分、秒、ミリ秒の値で位置を変化させながら、直線を引いてみる
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofTrueTypeFont verdana;
testApp.mm
//————————————————————–
verdana.loadFont("verdana.ttf",12, false, true);
//————————————————————–
}
//————————————————————–
//時刻を取得
//枠
//線の位置で時間を表現
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サンプルファイルのダウンロード
今日とりあげた全てのサンプルは、下記よりダウンロードすることができます。
今日の内容
openFrameworks for iPhoneで、地図を表示する
地図から緯度経度の情報をとりだしたり、地図上に図形を配置してみる
iTamabiアプリへ応用できるかも?
ofxiPhoneMapKit
ofxiPhoneMapKit – openFrameworksでMapKitを利用できるようにしたAddon
MapKitは、iPhone OS 3.0から追加された、地図の表示を扱う事ができるフレームワーク
MapKitを利用することで、iPhoneに付属の「マップ」アプリと同等の地図を利用することができる
ofxiPhoneMapKitは、最新のopenFrameworksのiPhone版であれば、既に利用できる形でインストールされている
ofxiPhoneMapKit の使用方法
ofxiPhoneMapKitクラスをインスタンス化する
あとは、そのインスタンスに様々なメソッド(関数、動作)を指定するだけで、地図に関する機能を付加していくことができる
opxiPhoneMapKit で使用可能なメソッド
open() – 地図を開く
close() – 地図を閉じる
void setCenter(double latitude, double longitude, bool animated = true); – 地図の中心位置を指定した緯度経度に移動する
void setSpan(double latitudeDelta, double longitudeDelta, bool animated = true); – 地図の表示範囲を角度で指定
void setSpanWithMeters(double metersLatitude, double metersLongitude, bool animated = true); – 地図の表示範囲を距離(メートル)で指定
void setRegion(double latitude, double longitude, double latitudeDelta, double longitudeDelta, bool animated = true); – 地図の中心位置の緯度経度と、表示範囲の角度を同時に指定
void setRegionWithMeters(double latitude, double longitude, double metersLatitude, double metersLongitude, bool animated = true); – 地図の中心位置の緯度経度と、表示範囲の距離を同時に指定
void setType(ofxiPhoneMapKitType type = OFXIPHONE_MAPKIT_MAP); – 地図の表示方法を指定する
通常の地図:OFXIPHONE_MAPKIT_MAP
衛星画像:OFXIPHONE_MAPKIT_SATELLITE
ハイブリット:OFXIPHONE_MAPKIT_HYRBID
void setShowUserLocation(bool b); – ユーザの位置を青い点で表示する
void setAllowUserInteraction(bool b); – 地図とのインタラクションの有効/無効の設定、有効にするとiPhoneのtouchイベント(testApp::touchXXXX)が無視される
void setAllowZoom(bool b); – ズームの有効/無効
void setAllowScroll(bool b); – 地図の移動の有効/無効
bool isUserOnScreen(); – ユーザの位置の表示がされているかどうかを調べる
ofxMapKitLocation getCenterLocation(); – 現在表示している地図の位置(緯度、経度)を調べる
ofPoint getScreenCoordinatesForLocation(double latitude, double longitude); – 地図上の位置(緯度、経度)を、画面の座標(ピクセル)に変換
ofxMapKitLocation getLocationForScreenCoordinates(float x, float y); – 画面の座標(ピクセル)を、地図上の位置(緯度、経度)に変換
ofRectangle getScreenRectForRegion(double latitude, double latitudeDelta, double longitudeDelta); – 地図上の位置(緯度、経度)と角度(°)から、四角形の領域を生成
ofRectangle getScreenRectForRegionWithMeters(double latitude, double longitude, double metersLatitude, double metersLongitude); – 地図上の位置(緯度、経度)と距離(メートル)から、四角形の領域を生成
bool isOpen(); – 現在地図が表示されているかどうかを調べる
ステップ1：地図を表示する
まず、ofxiPhoneMapkitを使用して、地図を表示してみる
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp, ofxiPhoneMapKitListener {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//ofxiPhoneMapKitをインスタンス化
//地図に関するイベント
testApp.mm
//表示する緯度と経度を定義(多摩美の場所)
//————————————————————–
//load font for displaying info
//MapViewを開く
//最初に表示する位置と、拡大率(200m x 200m)を設定
//マップに関するイベントのリスナーを追加する
//ユーザの現在位置を表示(青い点で表示される)
//マップの表示形式を設定
//————————————————————–
//————————————————————–
void testApp::regionWillChange(bool animated) {
void testApp::regionDidChange(bool animated) {
void testApp::willStartLoadingMap() {
void testApp::didFinishLoadingMap() {
void testApp::errorLoadingMap(string errorDescription) {
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
ステップ2：地図の中心の緯度経度を表示する
地図の中心位置の緯度と経度を取得し、地図に重ねて表示する
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp, ofxiPhoneMapKitListener {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//ofxiPhoneMapKitのインスタンス
//ログ出力用文字列
//地図に関するイベント
testApp.mm
//表示する緯度と経度を定義(多摩美の場所)
//————————————————————–
//load font for displaying info
//MapViewを開く
//最初に表示する位置と、拡大率(1000km x 1000km)を設定
//マップに関するイベントのリスナーを追加する
//ユーザの現在位置を表示(青い点で表示される)
//マップの表示形式を設定
//OpenGLの表示を前面に
//————————————————————–
//————————————————————–
//中心位置に円を表示
void testApp::regionWillChange(bool animated) {
}
void testApp::regionDidChange(bool animated) {
}
void testApp::willStartLoadingMap() {
}
void testApp::didFinishLoadingMap() {
}
void testApp::errorLoadingMap(string errorDescription) {
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
ステップ3：地図上に図形を配置する
緯度と経度を指定して、地図の上に図形を描いて配置していく
地図を拡大/縮小したり、位置を移動しても、地図上の点の位置がずれていないところに注目
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp, ofxiPhoneMapKitListener {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//ofxiPhoneMapKitのインスタンス
//ログ出力用文字列
//緯度、経度で位置を指定するための配列
//地図に関するイベント
testApp.mm
//表示する緯度と経度を定義(多摩美の場所)
//————————————————————–
//緯度、経度で位置を指定
mapLoc[1].latitude = 35.61090;
mapLoc[2].latitude = 35.61124;
mapLoc[3].latitude = 35.61139;
mapLoc[4].latitude = 35.61207;
mapLoc[5].latitude = 35.61185;
mapLoc[6].latitude = 35.61153;
mapLoc[7].latitude = 35.61222;
mapLoc[8].latitude = 35.61150;
//MapViewを開く
//最初に表示する位置と、拡大率(300m x 300m)を設定
//マップに関するイベントのリスナーを追加する
//ユーザの現在位置を表示(青い点で表示される)
//マップの表示形式を設定
//OpenGLの表示を前面に
//————————————————————–
//————————————————————–
//中心位置に赤い円を表示
//位置を指定した場所に青い円を表示
void testApp::regionWillChange(bool animated) {
}
void testApp::regionDidChange(bool animated) {
}
void testApp::willStartLoadingMap() {
}
void testApp::didFinishLoadingMap() {
}
void testApp::errorLoadingMap(string errorDescription) {
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
サンプルファイルのダウンロード
今日の授業の全てのサンプルファイルは、以下のリンクよりダウンロードしてください
Addonについて
Addonとは
OpenFrameworksに機能を拡張するためのライブラリー
processingのLibrariesのような存在
OpenFrameworks単体ではできなかった様々な機能を実現
oF本体の開発者以外でも独自に開発して追加することが可能
アドオン情報
openFramewokrs v0.0061 for iPhone FAT版にインストールされているAddon
他のプラットフォーム(Mac/Win/Linux)と共通のもの
ofxDirList – ディレクトリの項目の一覧を生成
ofxVectorGraphics – OpenFrameworksからPostscriptを生成し出力する
ofxVectorMath – ベクトルや、座標、行列の計算を行う
ofxXmlSettings – アプリケーションの設定をXML形式で保存、読込み
iPhone版固有のAddon
ofxiPhone – openFrameworksをiPhoneで作動させるためのコアな機能
ofxAccelerometer – iPhone/iPad版固有のAddon、iPhone/iPadの加速度センサーの値を取得
ofxMultiTouch – マルチタッチのインタフェイスを使用するための機能
Addonの追加方法
Addonは、フォルダ内のソース(src)、またもし存在すればライブラリ(libs)フォルダをプロジェクトに追加する
まず、Addonのフォルダごとプロジェクトに追加した後で、余計なものを取り除く(examples, install.xmlなど)
複数のAddonが存在する際などは、プロジェクト内に「Addons」というグループを作成し、その中に追加していくとわかりやすい
Addonを使ってみる
物理シミュレーション – ofxBox2D
Box2Dとは
C++で書かれた、物理エンジン
重力や反発力、摩擦、衝突判定といった物理計算を複雑な計算をすることなく利用できる
ActionScript、Java、C#、Pythonなどにも移植されている
ダウンロードとインストール
ofxBox2dをプロジェクトに追加
XCodeで「ファイル」→「新規プロジェクト」を選択して新規プロジェクトを作成
XCode画面の左側のコラム「グループとファイル」の欄の一番先頭にあるプロジェクト名の表示されたアイコンをコントロール+クリック、もしくは右クリック – 「追加」→「新規グループ」を選択
追加されたグループのフォルダに「addons」という名前をつける
addonsフォルダをコントロール+クリック、もしくは右クリック – 「追加」→「既存のファイル」を選択
addonsフォルダから「ofxBox2d」フォルダを選択
設定画面の設定はそのままで「追加」をクリック
ofxBox2dフォルダ内の「example」はフォルダごと削除して、「参照を削除」を選択
サンプルテンプレートをダウンロード
Box2Dの基本設定をしたサンプルテンプレートを下記にアップロードしました
Box2Dの世界の基本設定を一通りしたもの
testApp.h
#include "ofMain.h"
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofxBox2d box2d; //Box2Dのインスタンス
testApp.mm
//————————————————————–
ofBackground(0,0,0);
//Box2Dの基本設定
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
物理世界に物体を置いてみる
ofxBox2dCircle – 円形の物理法則を適用可能な物体
生成した円は、vector(動的配列)に格納して管理してみる – circles
画面をタッチすると、その座標をとりだして、円(ofxBox2dCircle)を生成し、vector circlesに追加する
testApp.mmのdrawメソッド内で、circlesに格納された全ての円(ofxBox2dCircle)を描画している
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofxBox2d box2d; //Box2Dのインスタンス
testApp.mm
//————————————————————–
ofBackground(0,0,0);
//Box2Dの基本設定
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
iPhone / iPadの加速度センサーで、重力の向きと大きさを変化させる
– testApp.mm のupdateメソッドの中に、加速度センサーの値を参照するコードを追加する
testApp.h
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
ofxBox2d box2d; //Box2Dのインスタンス
testApp.mm
//————————————————————–
ofBackground(0,0,0);
//Box2Dの基本設定
//————————————————————–
//加速度センサーで重力を設定
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
今日の目標 – オリジナルのカメラアプリを作成する
iPhoneのカメラを使用して、オリジナルのカメラアプリを作成してみる
openFramworks for iPhoneを使用すると、簡単に内蔵カメラの画像を使用できる
内蔵カメラから画像イメージを取得するには、ofxiPhoneImagePicker アドオンを使用する
カメラアプリ1：写真を撮影する
内蔵カメラで写真を撮影し、撮影した写真を画像(ofImage)にコピーして表示する
以降のカメラアプリの基本となる機能
testApp.h
[code language=”cpp”]
#include "ofMain.h"
//シミュレータを使用する際には、コメントアウトを外す
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//カメラの画像を一時的に格納する領域
};
testApp.mm
[code language=”cpp”]
//————————————————————–
//カメラ初期設定
status = 0;
//————————————————————–
//カメラの画像のままだと上下反転してるので、イメージの上下を反転
//カメラから取得したイメージを、処理用のofImage(photo)にコピーする
//————————————————————–
if(status == 1){
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
カメラアプリ2：モザイクカメラ
撮影した写真をモザイク状に加工する
撮影した写真のピクセル情報を一定間隔でとりだして、取得したRGB情報をもとに四角形を描いている
写真画像ののピクセル情報は、getPixel() 関数を用いて取り出している
写真のイメージは、1ピクセルごとにRGBA(Red, Green, Blue, Alpha)の4つの情報が含まれている
ピクセルをスキャンしていく際には、4ピクセルを1単位として扱うように留意する
testApp.h
[code language=”cpp”]
#include "ofMain.h"
//シミュレータを使用する際には、コメントアウトを外す
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//カメラの画像を一時的に格納する領域
testApp.mm
[code language=”cpp”]
//————————————————————–
//カメラ初期設定
status = 0;
//————————————————————–
//カメラの画像のままだと上下反転してるので、イメージの上下を反転
//カメラから取得したイメージを、処理用のofImage(photo)にコピーする
//————————————————————–
if(status == 1){
//画像データのビットマップ情報を配列に格納
//画像の幅と高さを所得
//スキャンする間隔
//モザイク化:等間隔にピクセルの色を検知し、四角形を描く
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
カメラアプリ3：スキャンカメラ
モザイクの応用
ある高さ(Y座標)のピクセル情報のみとりだす
全てのX座標のRGBAの値を取得して、縦に拡げてバーコード状に表示する
取得する高さは、画面をタッチして変更できるようにする
写真を指定したラインでスキャンするような効果を得ることができる
testApp.h
[code language=”cpp”]
#include "ofMain.h"
//シミュレータを使用する際には、コメントアウトを外す
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//カメラの画像を一時的に格納する領域
testApp.mm
[code language=”cpp”]
//————————————————————–
//カメラ初期設定
status = 0;
//————————————————————–
//カメラの画像のままだと上下反転してるので、イメージの上下を反転
//カメラから取得したイメージを、処理用のofImage(photo)にコピーする
//————————————————————–
if(status == 1){
//画像データのビットマップ情報を配列に格納
//画像の幅と高さを所得
//モザイク化:等間隔にピクセルの色を検知し、四角形を描く
//今スキャンしている場所を表示
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
カメラアプリ4：ピクセレイトカメラ(グレイスケール版)
写真イメージのピクセル情報を解析
一定間隔ごとに写真のRGB別のレベル(明るさ)を取得して、その平均値をとる
その値で半径を変化させながら円を描いていく
モノクロで写真を印刷したようなドットによる濃淡の表現になる
testApp.h
[code language=”cpp”]
#include "ofMain.h"
//シミュレータを使用する際には、コメントアウトを外す
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//カメラの画像を一時的に格納する領域
testApp.mm
[code language=”cpp”]
//————————————————————–
//カメラ初期設定
status = 0;
//————————————————————–
//イメージの上下を反転
//カメラから取得したイメージを、処理用のofImage(photo)にコピーする
//————————————————————–
if(status == 1){
//画像の幅と高さを所得
//ピクセレイトの半径を設定
//画像を等間隔にスキャン
//RGBの値の平均値を算出
//取得したRGB値をもとに、円を描画
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
カメラアプリ5：ピクセレイトカメラ(カラー版)
ピクセレイトのカラー版
RGB別々に円を描いて、重ねていく
描画する際の色の合成を、加算合成に変更するところがポイント
OpenGLの命令を直接使用する – glEnable(GL_BLEND); と glBlendFunc(GL_SRC_ALPHA, GL_ONE); で実現可能
カラー写真を印刷したようなドットによる濃淡の表現になる
testApp.h
[code language=”cpp”]
#include "ofMain.h"
//シミュレータを使用する際には、コメントアウトを外す
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//カメラの画像を一時的に格納する領域
testApp.mm
[code language=”cpp”]
//————————————————————–
//カメラ初期設定
status = 0;
//————————————————————–
//イメージの上下を反転
//カメラから取得したイメージを、処理用のofImage(photo)にコピーする
//————————————————————–
if(status == 1){
//画像データのビットマップ情報を配列に格納
//画像の幅と高さを所得
//ピクセレイトの半径を設定
//画像を8ピクセル間隔でスキャン
//ピクセルのRGBの値を取得
//取得したRGB値をもとに、円を描画
//ステイタスを変更し、描画は1度だけに
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
サンプルファイルのダウンロード
今回の授業でとりあげた全てのサンプルは下記よりダウンロードすることが可能です。
サンプルファイルのダウンロード
サンプルファイルは以下のリンクよりダウンロードしてください。
マルチタッチイベントの取得
マルチタッチの情報が取得できるイベント
定義
機能
touchDown
画面をタッチした瞬間に実行される
touchMoved
画面をタッチして移動した際に実行される
touchUp
タッチしていた画面から離れた瞬間実行される
touchDoubleTap
ダブルタップ(素早く2回画面をタップ)した瞬間に実行される
タッチされた情報は、以下のように格納される
touch.id – 現在タッチされたポイントのID (0〜4)
touch.x – 現在タッチされたポイントのx座標
touch.y- 現在タッチされたポイントのy座標
とりだしたタッチの座標情報は、配列に格納すると便利
配列 – 簡単な配列の説明「情報のロッカーみたいなもの」
マルチタッチイベントの取得1
ofPointクラスを利用して、タッチした座標を1つのインスタンス(変数)で管理している
[ofPointのインスタンス].x – X座標
[ofPointのインスタンス].y – Y座標
さらにそのofPointのクラスを配列にして、5つのポイントをtouchLocという配列で一括して管理している
touchDownした際に配列toucLocに座標を記録して、drawで記録された座標を中心に円を描いている
testApp.h
[code language=”cpp”]
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//タッチした座標の配列(5コ)
testApp.mm
[code language=”cpp”]
//————————————————————–
//背景色を黒に
//タッチポイントを初期化、画面の外に
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
マルチタッチイベントの取得2
タッチした場所から円が徐々に拡大していくように変更してみる
testApp.h
[code language=”cpp”]
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//タッチした座標
testApp.mm
[code language=”cpp”]
//————————————————————–
//背景色を黒に
//タッチポイントを初期化、画面の外に
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
音を鳴らす
iPhoneの音系アプリの紹介 – Bloom、SoundDrop、Rain、VectorRain ..etc
openFrameworksを使うと、こうした「音のおもちゃ」が簡単に作れる!!
openFrameworks for iPhoneで音を鳴らすには – OpenALを使用する
OpenAL – クロスプラットフォームのオーディオAPI
3次元定位オーディオを効率よく表現するように設計されている
OpenGLとの相性が良い
openFrameworksで、OpenALを利用するプロジェクトには、ofxALSoundPlayerアドオンのファイルが入っている必要がある
「グループとファイル」の「addons」を右クリックして、「追加」→「既存のファイル」を選択
ofxALSoundPlayerのフォルダを追加する
[oFのフォルダ]/apps/iPhoneSpecificExamples/OpenAlExample/src/ofxALSoundPlayer
caf形式のサウンドファイルの準備
iPhoneでサウンドファイルを扱うには、Core Audio Format(.caf)という形式に変換する必要がある
ターミナルから、”/usr/bin/afconvert”コマンドを使用して、AIFFファイルをCAFファイルに変換することが可能
% afconvert -f caff -d ima4 -d LEI16@22050 -c 1 -o [出力ファイル名].caf [入力ファイル名].wav
OpenALの利用1 – マルチタッチとの組み合せ
マルチタッチのサンプルと組み合わせてみる
touchDownした瞬間に、音を鳴らす
X座標の情報を、音の左右の定位(パン)に利用
Y座標の情報を、音程に利用
testApp.h
[code language=”cpp”]
#include "ofMain.h"
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//OpenALを利用して音を再生するプレーヤー(5つ)
testApp.mm
[code language=”cpp”]
//————————————————————–
//背景色を黒に
//タッチポイントを初期化、画面の外に
//CAFファイルをロードして、Synthにわりあて
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
OpenALの利用2 – Bloomっぽいアプリを作る
タッチした演奏情報を記録して、くりかえし演奏させてみたい (超簡易シーケンサー?)
次の方法で簡単に実装可能
タッチした瞬間に音を鳴らす
タッチした座標を中心にして、円が一定速度で拡大していく
円が一定の大きさより大きくなったら、最小のサイズに戻す
最小のサイズに戻す際に、また音を鳴らす
調整のある音階を鳴らしてみたい
音階の比率をあらかじめ定義しておく
(純正律の)ドレミファソラシは、下記の比率になる
1 : 9/8 : 5/4 : 4/3 : 3/2 : 5/3 : 15/8
testApp.h
[code language=”cpp”]
#include "ofMain.h"
//最大発音数を定義 (20)
class testApp : public ofxiPhoneApp {
public:
void touchDown(ofTouchEventArgs &touch);
void lostFocus();
//サウンドプレーヤーの配列
testApp.mm
[code language=”cpp”]
//————————————————————–
//背景色を黒に
//タッチポイントを初期化、画面の外に
//現在タッチされた数
//音階を生成
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
ACCEL SEQUENCER
barcode clock
A Cloclwork Light t
draw sound
dripple
DropClock
GulinClock
hagunet planet
未来派気取り
montage
あたりゲーム
PANDA
Potope
PIKADOOOM
Rough Coaster
sensitiveA
sensitiveD
SoundSwitch
一日時計タマビ行きk
Tamabi百景
tamanekorogashi
