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のアプリケーションが動作します。
「時間」を表現する
前回の授業で取り上げた、時計のプログラムで学んだ内容を生かして、時間を表現するプログラムについて考えてみる
場所 (位置) による時間の表現 色・濃度 による時間の表現 数で時間を表現する …etc. 時間の表現の例
NOOKA
Tokyoflash
Ora Unica
Denis Guidoneデザイン、1本の線で時間を表示する
Clocks Series by rhizomatics
iPhone向けの時計アプリシリーズ、継続的に、多様でユニークな時計アプリをリリースしている
Creative Applicationsで紹介されている様々な時計の試み
Processingで時間を表現してみる
Processingで、シンプルなサンプルを作りながら、いろいろな表現の可能性について考えてみましょう。
clock01： 場所による時間の表現 clock02： 濃度による時間の表現 clock03： 色相による時間の表現 clock04： 文字と動きによる時間表現 clock05： 2進数による時間表現 時間の表現1：場所による時間の表現
図形の場所によって、時間を表現する 時間、分、秒、ミリ秒の値に対応して、ラインの位置を変化させてみる int ms, s, m, h;
int lastSecond = 0;
void setup() {
size(640, 480);
frameRate(60);
background(0);
}
void draw() {
ms = millis() % 1000;
s = second();
m = minute();
h = hour();
fill(0, 4);
noStroke();
rect(0, 0, width, height);
noFill();
float ms_pos = width / 1000.0 * ms;
stroke(255);
line(ms_pos, 0, ms_pos, height / 4);
translate(0, height / 4);
stroke(63);
line(0, 0, width, 0);
float s_pos = width / 60.0 * s;
stroke(255);
line(s_pos, 0, s_pos, height / 4);
translate(0, height / 4);
stroke(63);
line(0, 0, width, 0);
float m_pos = width / 60.0 * m;
stroke(255);
line(m_pos, 0, m_pos, height / 4);
translate(0, height / 4);
stroke(63);
line(0, 0, width, 0);
float h_pos = width / 24.0 * h;
stroke(255);
line(h_pos, 0, h_pos, height / 4);
}
時間の表現2：濃度による時間の表現
図形の濃度 (アルファ値) によって時間を表現する 4つの正方形を横に並べて、その濃度を、時間、分、秒、ミリ秒に対応させてみる float ms, s, m, h;
void setup() {
size(800, 200);
noStroke();
}
void draw() {
ms = millis() % 1000;
s = second();
m = minute();
h = hour();
background(0);
fill(255, 255 * (h / 24.0));
rect(0, 0, width / 4, height);
translate(width / 4, 0);
fill(255, 255 * (m / 60.0));
rect(0, 0, width / 4, height);
translate(width / 4, 0);
fill(255, 255 * (s / 60.0));
rect(0, 0, width / 4, height);
translate(width / 4, 0);
fill(255, 255 * (ms / 1000.0));
rect(0, 0, width / 4, height);
}
時間の表現3：色相による時間の表現
同じ図形で、今度は透明度はそのまで、色の色相(Hue)を変化させていく colorModeをCSVにして、色相の変化を計算しやすいように あとは色相を、時間、分、秒、ミリ秒に適用させるだけ float ms, s, m, h;
void setup() {
size(800, 200);
colorMode(HSB, 360, 100, 100);
noStroke();
}
void draw() {
ms = millis() % 1000;
s = second();
m = minute();
h = hour();
background(0);
fill(360 * (h / 24.0), 50, 100);
rect(0, 0, width / 4, height);
translate(width / 4, 0);
fill(360 * (m / 60.0), 50, 100);
rect(0, 0, width / 4, height);
translate(width / 4, 0);
fill(360 * (s / 60.0), 50, 100);
rect(0, 0, width / 4, height);
translate(width / 4, 0);
fill(360 * (ms / 1000.0), 50, 100);
rect(0, 0, width / 4, height);
}
時間の表現4：文字と動きによる時間表現
デジタル時計と、アナログ時計を融合させてみる 時間、分、秒を表示した針が、秒針の角度で回転していく 時間の経過を感じさせるため、余韻を残しながら、消えていくようにする フォントの表示のため、Tools → Create font を利用して、”myFont.vlw” を生成する PFont font;
int s, m, h;
int lastSecond = 0;
void setup() {
size(600, 600);
font = loadFont("myFont.vlw");
textFont(font);
frameRate(30);
smooth();
background(0);
}
void draw() {
s = second();
m = minute();
h = hour();
if (lastSecond != s) {
textAlign(CENTER);
fill(0, 10);
noStroke();
rect(0, 0, width, height);
fill(255);
stroke(255);
pushMatrix();
translate(width / 2, height / 2);
rotate(radians(6.0 * s));
String time = nf(h, 2) + "\n" + nf(m, 2) + "\n" + nf(s, 2);
text(time, 0, -height / 2.2);
line(0, 0, 0, -height / 3);
popMatrix();
}
lastSecond = s;
}
時間の表現5：2進数による時間表現
時間の経過を2進数のon/offで表現してみる 現在の時刻をの時間、分、秒をそれぞれ6桁の2進数に変換
例：18:11:49 → 010010001011110001
2進数の0と1を利用して図形を描いていく 時間の経過が蓄積していくように工夫 PFont font;
int s, m, h;
int lastSecond = 0;
int bufferNum = 480;
String[] timeArray = new String[bufferNum];
void setup() {
size(640, 480);
frameRate(30);
background(0);
noStroke(); h
for (int i = 0; i < timeArray.length; i++) {
timeArray[i] = "000000000000000000";
}
}
void draw() {
s = second();
m = minute();
h = hour();
if (lastSecond != s) {
background(0);
String bs = nf(int(binary(s)), 6);
String bm = nf(int(binary(m)), 6);
String bh = nf(int(binary(h)), 6);
println(nf(h, 2) + ":" + nf(m, 2) + ":" + nf(s, 2) + ", " + bh + bm + bs);
float rectWidth = width / 18.0;
float rectHeight = height / float(bufferNum);
for (int i = timeArray.length; i & gt; 1; i--) {
timeArray[i - 1] = timeArray[i - 2];
}
timeArray[0] = bh + bm + bs;
for (int j = 0; j < timeArray.length - 1; j++) {
for (int i = 0; i < 18; i++) {
if (timeArray[j].charAt(i) == '1') {
fill(255);
}
else {
fill(0);
}
rect(i * rectWidth, j * rectHeight, rectWidth, rectHeight);
}
}
}
lastSecond = s;
}
サンプルファイルのダウンロード
今回のとりあげた全てのサンプルのソースコードは、下記からダウンロードしてください。
今日の内容
最終課題のテーマ発表
最終課題に関連した演習
基礎：普通のアナログ時計を作る
時刻の取得
時刻の情報から針の角度を計算する
より正確な時計にしていくには?
応用：単純な図形で「時間」を表現する
位置による時間の表現
数による時間の表現
色による時間の表現
形態による時間の表現 …etc
最終課題について
テーマ：Processingを用いて「時間」を表現する
Processingを用いて、「時間」を表現するプログラムを作成してください。
時間を表現するといっても、普段身近に接している時計を作成するという意味ではなく、いままで見たことのないような表現手段で「時間」を感じさせる方法を考えてください。
作品の完成度よりは、斬新なアイデアを重視します。
完成したプログラムは下記のWebサーバのアドレスにアップロードすることで提出したこととします。
http://www.cuc.ac.jp/~[ログイン名]/proga/final/index.html
時計を作る 1 – アナログ時計を作る
課題の内容と関連して、まずは普通のアナログ時計を作成する
時刻の取得
取得した時刻から、秒針、分針、時針の角度を計算する
時刻を取得するための関数
取得される時刻は、コンピュータのOSに設定された時刻
//秒の取得
second();
//分の取得
minute();
//時の取得
hour()；
試しに現在の秒数を取得して、出力してみる
println() を利用して、Processingのコンソールのテキストエリアに現在の秒数を表示してみる
void setup() {
frameRate(30);
}
void draw() {
int h = hour();
int m = minute();
int s = second();
println("現在の時刻は "+h+":"+m+":"+s);
}
取得した「時」「分」「秒」の値から針の角度を計算する
それぞれの1単位あたり、何度針が動くのか計算する (角速度)
時間
12時間で時計を1周する
1時間あたりの移動角度 → 360/12 = 30°
分
60分で時計を1周する
1分あたりの移動角度 → 360/60 = 6°
秒
60秒で時計を1周する
1秒あたりの移動角度 → 360/60 = 6°
現在の時刻の値にそれぞれの角速度をかけ算すると、現在の角度が算出されるはず
時刻から、針の角度を計算する
例：8時30分20秒
時針：8 x 30 = 240°
分針：30 x 6 = 180°
秒新：20 x 6 = 120°
Processingのプロラムで表現してみる
座標系全体を画面の中央に移動 translate(width/2, height/2);
時刻を取得
時間の針
pushMatrix();
rotate(時間 x 15°);
popMatrix();
分の針
pushMatrix();
rotate(時間 x 6°);
popMatrix();
秒の針
pushMatrix();
rotate(時間 x 6°);
popMatrix();
Processingの rotate() 関数で用いられる角度の単位に注意する必要あり
角度の単位は「度 (degree)」ではなく「ラジアン (radian)」で指定しなくてはならない
Processingでの、degreeからradianへの変換
radianからdegreeへの変換
void setup() {
size(300,300);
stroke(255);
smooth();
frameRate(30);
}
void draw() {
background(0);
float s = second();
float m = minute();
float h = hour() % 12;
translate(width/2, height/2);
ellipse(0,0,width,height);
noFill();
stroke(255);
//秒針
pushMatrix();
rotate(radians(s*(360/60)));
strokeWeight(1);
line(0,0,0,-height/2);
popMatrix();
//分針
pushMatrix();
rotate(radians(m*(360/60)));
strokeWeight(2);
line(0,0,0,-height/2);
popMatrix();
//時針
pushMatrix();
rotate(radians(h*(360/12)));
strokeWeight(4);
line(0,0,0,-height/3);
popMatrix();
}実際の時計との違い
作成したプログラムの表示と実際のアナログ時計と比べてみる
なにか違いはないだろうか?
分が切り替わった瞬間の動き
時間が切り替わった瞬間の動き
実際の時計
時針、分針も常にゆっくりと動いている
時刻が変化した瞬間に動くのではなく、ゆっくりと移動して、気がつくと角度が変化している
実際の分針
秒の影響を受けている
毎秒あたり、1/60の影響 (1分 = 60秒なので)
m = m + (s/60);
実際の時針
分の影響を受けている
毎分あたり、1/60の影響 (1時間 = 60分なので)
h = h + (m/60);
実際にアナログ時計の動きと同じになるよう、プログラムを改良する
void setup() {
size(300,300);
stroke(255);
smooth();
frameRate(30);
}
void draw() {
background(0);
float s = second();
float m = minute() + (s/60.0);
float h = hour()%12 + (m/60.0);
translate(width/2, height/2);
ellipse(0,0,width,height);
noFill();
stroke(255);
//秒針
pushMatrix();
rotate(radians(s*(360/60)));
strokeWeight(1);
line(0,0,0,-height/2);
popMatrix();
//分針
pushMatrix();
rotate(radians(m*(360/60)));
strokeWeight(2);
line(0,0,0,-height/2);
popMatrix();
//時針
pushMatrix();
rotate(radians(h*(360/12)));
strokeWeight(4);
line(0,0,0,-height/3);
popMatrix();
}
文字盤を追加
角度を変更しながら、一定間隔に目盛を刻んでいく
小さな目盛：6度づつ
大きな目盛：30度づつ
int MARGIN = 20;
void setup() {
size(300,300);
stroke(255);
smooth();
frameRate(30);
}
void draw() {
background(0);
float s = second();
float m = minute() + (s/60.0);
float h = hour()%12 + (m/60.0);
translate(width/2, height/2);
rotate(radians(180));
// 文字盤の表示
pushMatrix();
fill(128);
noStroke();
for(int i=0; i<60; i++){
rotate(radians(6));
ellipse(width/2-MARGIN,0,3,3);
}
for(int i=0; i<12; i++){
rotate(radians(30));
ellipse(width/2-MARGIN,0,10,10);
}
popMatrix();
noFill();
stroke(255);
// 秒針
pushMatrix();
rotate(radians(s*(360/60)));
strokeWeight(1);
line(0,0,0,width/2-MARGIN);
popMatrix();
// 分針
pushMatrix();
rotate(radians(m*(360/60)));
strokeWeight(2);
line(0,0,0,width/2-MARGIN);
popMatrix();
// 時針
pushMatrix();
rotate(radians(h*(360/12)));
strokeWeight(4);
line(0,0,0,width/3-MARGIN);
popMatrix();
}アナログ時計 OOP版
int MARGIN = 20;
Clock myClock = new Clock();
void setup() {
size(300,300);
stroke(255);
smooth();
frameRate(30);
}
void draw() {
background(0);
myClock.getTime();
myClock.draw();
}
class Clock {
float s, m, h;
Clock(){
}
void getTime(){
s = second();
m = minute() + (s/60.0);
h = hour()%12 + (m/60.0);
}
void draw(){
translate(width/2, height/2);
rotate(radians(180));
pushMatrix();
fill(128);
noStroke();
for(int i=0; i<60; i++){
rotate(radians(6));
ellipse(width/2-MARGIN,0,3,3);
}
for(int i=0; i<12; i++){
rotate(radians(30));
ellipse(width/2-MARGIN,0,10,10);
}
popMatrix();
noFill();
stroke(255);
pushMatrix();
rotate(radians(s*(360/60)));
strokeWeight(1);
line(0,0,0,width/2-MARGIN);
popMatrix();
pushMatrix();
rotate(radians(m*(360/60)));
strokeWeight(2);
line(0,0,0,width/2-MARGIN);
popMatrix();
pushMatrix();
rotate(radians(h*(360/12)));
strokeWeight(4);
line(0,0,0,width/3-MARGIN);
popMatrix();
}
}
最終課題について
最終課題テーマ：「気持のよい」インタラクションをつくる
インタラクションにおける、気持ちの良さとは何かを、Flashを使用して探求する
気持ちのよい動き
気持のよい反応
気持のよいタイミング
気持のよい変化 …etc.
制作する課題は、以下の条件を満たしていること
Flashを使用すること
ムービーの閲覧者の何かしらのアクションに反応すること
マウスの動き、位置、クリック
キーボードからの入力
音 (応用)
カメラからの入力 (応用)
動きの表現には、TweenMaxライブラリを使用する
反応するオブジェクトは、単純な図形でも構いませんし、オリジナルのイラストや写真などの使用しても良い
作成した作品は、CUCのPublic Webサーバーの以下の場所から閲覧可能な状態にする
締切：7月28日 の1限の、授業開始まで。最後の授業で簡単な講評会をやります。
オンラインポートフォリオの制作テンプレート
オンラインポートフォリオの制作にあたっては、下記URLからテンプレートをダウンロードして参考にしてください。テンプレートには、画像、動画、音声、Javaアプレット(Processigの作品) などのメディアを載せる実例も掲載されていますので、適宜参考にしてください。
オンラインポートフォリオのテンプレートをダウンロード (Zip形式、693KB)
今回制作するオンラインポートフォリオは、この授業だけでなく、入学から卒業制作まで制作してきた自身の作品を掲載する重要な記録となります。この授業の講評を終えた後も、更新を続けていくようにしましょう。また、将来的には、このポートフォリオをスタジオの選択や卒業制作の審査などの際に参考資料として提出することもあります。
オンラインポートフォリオに最低載せる内容
表紙 (index.html)：
自己紹介：画像、簡単な経歴など自己アピールしたい内容を記述してください。
ブックマーク：(もしあれば)自分のWebページ、自身のブログなどへのリンク。自分の興味のある分野のWebページ、好きなアーティストのページなど。
実技系の授業で作成した作品を掲載
メディア芸術基礎(情報デッサン / メディアリテラシー)：情報デッサンで制作したデッサンの画像
イメージリテラシー：制作した映像作品
インタラクション：制作したProcessingの作品(Javaアプレット)
個人制作
授業とは関係なく自分自身で制作した作品があれば、積極的にポートフォリオに追加してください
イラスト、映像、音楽、
1年生後期に追加する作品
サウンド&CGI：制作した音響作品、映像作品
クラフト&マテリアル：制作した作品(映像、写真)
2年生以降も制作した作品は全てオンラインポートフォリオに記録していく
メディアに応じた作品の掲載方法
1. 画像 (写真、イラストなど)
大きくわけて、2つの方法があります。
Webサーバー内に画像を保存する方法
HTML内に、img要素を記述して写真や画像を読み込みます。
例) htmlファイルと同じ階層に「img」というフォルダを作成して、その中に「hoo.jpg」という画像を入れた場合
[code lang=”html”]
写真共有サービスを利用する場合 – Picasaウェブアルバムを利用した例
画像をアップロード
ヘッダーの右にある「アップロード」ボタンを押す
アルバムを選択、または新規に作成 – 写真は「アルバム」という単位で整理されます、授業毎にアルバムを分けたり、時系列にアルバムを作成したりと、適宜整理の方針を決めてアルバムを作成
新規にアルバムを作成する際は、共有の設定を「一般公開」にするように注意
ファイルのアップロード画面に遷移するので、画像を選択してアップロード
写真へのリンクを取得
アルバムからWebに載せたい画像を選択する
選択した写真の右側のメニューの「この写真へのリンク」を押して、リンクの設定を表示
貼りつける画像のサイズを選択
「画像を埋め込み」の欄に表示されているHTMLのタグをコピー
制作するページのHTMLファイルにコピーしたタグをペーストする
画像を埋めこんだ例
埋めこみコード
[code lang=”html”]
2. 動画 (記録映像、映像作品、アニメーションなど)
YouTubeに動画をアップする場合
動画のアップロード
YouTubeにGoogleアカウントでログインする (右上のリンク)
検索欄の右にある「アップロード」を選択
アップロード終了後、サーバ側で画像の圧縮処理が始まる
動画を埋め込む
アップロードした動画の圧縮が終わったら、埋め込みコードを取得して、動画を貼りつける
ログインした後の画面の右上にあるアカウント名のメニューから「マイ動画」を選択
埋め込みたい動画を選択
動画の画面から「埋めこみコード」ボタンを押す
動画のサイズ、インターフェイスの色などを設定
埋め込みコードをコピーして、動画を埋めこみたいHTMLページにペーストする
動画を埋めこんだ例
埋めこみコード
[code language=”html”]
3. 音 (音楽・音響作品など)
音作品もWebサービスを利用すると便利
SoundCloudを利用する
SoundCloud (http://soundcloud.com/ ) – サウンドを共有することのできるWebサービス
ユーザー登録する
まずは「Sign Up」ボタンを押して、ユーザ登録をする
必要事項を記入して登録する
サウンドファイルのアップロード
ヘッダーのメニューの右にある「Upload & Send」ボタンを押す
ファイルを選択画面に遷移、「Coose File」ボタンを押してディスク上のサウンドファイルを選択
アップロードが開始されると、詳細な情報を設定する画面に遷移する、記入できる項目に情報を記述
共有の設定 – 3. Who is this track for? の設定は「Public (available for everyone)」にすること
全ての設定が完了したら、「Save Track」ボタンを押してトラックを保存
サウンドの共有
保存したトラックの波形が表示される
左上にある「Share」ボタンを押す
表示される画面の「The embed code for the player」の下にあるHTMLコードをコピー
サウンドを貼りつけたいHTMLファイルの中にコピーしたHTMLコードをペースト
サウンドを埋めこんだ例
SC Test by tadokoro
埋めこみコード
[code language=”html”]
今日の内容
Pachubeを使ってみる
世界各地のpachubeの情報をモニターしてみる
Processingで、Pachubeの情報をリアルタイムに取得して、視覚化する
Arduinoで取得したセンサーの情報を、Pachubeに書き出し
センサーの情報をシェアしてみる
Pachubeとは?
http://www.pachube.com/
インターネットを介してリアルタイムにセンサーやからの情報を共有するプロジェクト
世界中の環境、センサーからのリアルタイムの情報をモニター
自作のデバイスを接続、世界に向けて情報を発信
ユーザ登録することで、APIを利用して様々なアプリケーションからPachubeの情報を送受信可能となる
Processing, openFrameworks, Java, Ruby, PHP, iPhone ..etc.a
ユーザ登録
PachubeのAPIを利用するために、まずはPachubeにユーザ登録する
もちろん無料
Sign upの登録フォームに必要情報を記入して送信 https://www.pachube.com/signup
登録したemailアドレスに、メールが返送される
登録完了メールの中の「API Key」というアルファベットと数値の文字列が開発の際に必要となるので、控えておく
Webブラウザで情報を取得
[code language=”html”]
このEEML形式のXMLファイルを様々なアプリケーションで解析することで、オリジナルのPachubeモニタを作成できる
Extended Environments Markup Language (EEML)
Pachubeでは、センサーや環境の情報を記述XML形式のフォーマットとして、Extended Environments Markup Language (EEML)というものを策定している
EEMLに関する詳細な情報は、http://www.eeml.org/ を参照
ProcessingでPachubeの情報を視覚化
EEML for Processingをインストール
EEML for Processingのページから、Processing用のライブラリをダウンロード(http://www.eeml.org/library/eeml.zip )
Zipファイルを展開した「eeml」フォルダを、「ProcessingのSketchbookの場所/libaries/」以下にコピーする
ProcessingのSketchbookの場所は、ProcessingのPreferenceの、「Sketchbook location」で確認
まずは、シンプルに情報を表示
最初のステップとして、遠隔地のセンサーの値を取得してテキストで出力してみる
[code language=”java”]
//場所のIDを指定、iBioartは2263
void setup() {
void draw() {
//EEMLのデータを受信したら呼び出されるイベント
センサーの変化をグラフ化する
センサーの値の変化をグラフで表示してみる
このコードを応用すれば、Pachubeの時系列のデータを様々な方法でビジュアライズできるはず
[code language=”java”]
//場所のIDを指定、iBioartは2263
void setup() {
void draw() {
//グラフの表示を初期化する
//グラフの表示を更新
//EEMLのデータを受信したら呼び出されるイベント
Pachubeにデータを配信する
Pachubeにユーザ登録をすると、データの受信だけでなく、データの配信をすることも可能
配信したデータは、Pachubeの地図上に表示され、世界中から閲覧可能となる
しかし、配信するにはグローバルIPが設定された、外部から閲覧可能なサーバが必要となる
今回は、ローカルなネットワーク(LAN)の中で、擬似的にPachubeのデータ共有を試してみる
Arduino + ブレットボード側の配線
光センサー、温度センサー、湿度センサーなど、変化する値を出力可能なセンサーをブレッドボードに配線
ArduinoのAnalog inに接続する
Funnelライブラリのインストール
今回はArduinoとProcessingの通信にFunnelライブラリを使用
Google CodeよりFunnelの最新版をダウンロードする http://code.google.com/p/funnel/
右側にある「Featured downloads: 」より、Funnelの最新版のパッケージ「Funnel-….zip」を選択
「ProcessingのSketchbookの場所/libaries/」以下に「funnel」フォルダを作成
Zipファイルを展開、フォルダ「libraries」の中にある「processing」フォルダの中身を、作成した「funnel」フォルダ以下にコピー
Arduino側の準備
Arduinoには、StandardFirmataを読み込んでアップロードしておく
File > Example > Firmata > StandardFirmarta からロード
Processing側のプログラム
Arduinoからの入力を、Funnelを経由して取得し、それをeeml形式で送信するプログラム
[code language=”java”]
//Arduinoクラスを定義
void setup() {
void draw() {
//データ送出のリクエストで呼びだされるイベント
プログラムを起動したら、以下のURLにWebブラウザでアクセスしてみる
送出したEEML形式のデータが見えているはず
Pachubeのデータをシェアする
教室内の他の人のEEMLデータを見てみる
システム環境設定 > ネットワーク を開く
その中に表示されているIPアドレスを控えておき、周囲の人同士で、IPアドレスを教えあう
それぞれのURLにアクセス
他の人のアドレスが参照できるはず
[参考] Pachubeデータを世界に公開する
ユーザ登録をすると、Pachubeのデータを公開することも可能
公開するには、ArduinoとProcessingの稼動しているPCが、外部から参照可能なIPアドレス(グローバルIP)に接続されていることが必要
Pachubeにサインアップした状態で、新規にフィードを生成するページへ http://www.pachube.com/feeds/new
Feed Typeを「automatic」に
Feed URLを、Arduinoが接続されたPCの「グローバルIP:5210」にする
地図をダブルクリックして、データを配信している場所を指定
その他配信できる情報は全て記入
「Save Feed」をクリックして配信開始!!
サンプルファイルのダウンロード
授業内でとりあげたコードは下記からダウンロードしてください。
今日の内容
ドロー(お絵描き)アプリをつくる
簡単なサンプルから徐々に複雑なサンプルへと進めていきます
ドロー系アプリのサンプル
ドローアプリを作る
ステップ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++;
}
//————————————————————–
}
//————————————————————–
//————————————————————–
//タッチしている場所を記録
//————————————————————–
//————————————————————–
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
//————————————————————–
}
サンプルファイルのダウンロード
今回の授業で紹介したプログラムのソースコードは以下からダウンロードしてください。
今日の内容
先週に引き続き、Tweenライブラリについて学んでいきます
ユーザのアクションに反応する、Tweenを使用した様々な動きを試していきます
触れると拡大する物体
マウスで触れると(ROLL_OVER)、拡大します
マウスを離すと(ROLL_OUT)、もとの大きさに戻ります
Easingの関数や、拡大・縮小に要する時間をいろいろ変化させて、動きのニュアンスの違いを試してみましょう
[code language=”javascript”]
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
function rollOverHandler(e:MouseEvent):void {
function rollOutHandler(e:MouseEvent):void {
https://yoppa.org/wp-content/uploads/2010/07/01_touchEaseing.swf,550,400
触ろうとすると、逃げていく物体
マウスで触れようとすると、スルリすり抜けて逃げていきます
ランダムな値を指定するには、Math.random() という命令を使用します、Math.random() は、0〜1の範囲でランダムな値を生成します
[code language=”javascript”]
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
function rollOverHandler(e:MouseEvent):void {
https://yoppa.org/wp-content/uploads/2010/07/02_touchEaseing.swf,550,400
触れると色が変化する
色を変化させるには、「tint」というプロパティを変化させます
tintを有効にするには、プラグインを読みこむ必要があります。冒頭で「import com.greensock.plugins.*」と指定します。
[code language=”javascript”]
TweenPlugin.activate([TintPlugin]);
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
function rollOverHandler(e:MouseEvent):void {
function rollOutHandler(e:MouseEvent):void {
https://yoppa.org/wp-content/uploads/2010/07/03_touchEaseingColor.swf,550,400
触れるとぼやける
色の変化だけでなく、様々なエフェクトを利用可能です
プラグインを利用して、ぼかし(blur)をかけてみます。
[code language=”javascript”]
TweenPlugin.activate([TintPlugin]);
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
function rollOverHandler(e:MouseEvent):void {
function rollOutHandler(e:MouseEvent):void {
https://yoppa.org/wp-content/uploads/2010/07/04_touchEaseingBlur.swf,550,400
触れると光る
glow という効果を使用すると、全体が光っているような効果を生みだします
[code language=”javascript”]
TweenPlugin.activate([TintPlugin]);
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
function rollOverHandler(e:MouseEvent):void {
function rollOutHandler(e:MouseEvent):void {
https://yoppa.org/wp-content/uploads/2010/07/04_touchEaseingGlow.swf,550,400
今日の内容
Arduinoからのデータを、Procssingを使用して「可聴化」する
データを音に変換する方法 – Processing minimライブラリについて
サウンドの生成
サウンドファイルを再生
可変抵抗の値でサウンドをコントロール
植物にとりつけたタッチセンサーで、音を鳴らす – 「植物シンセ」簡易版
Minimライブラリについて
Minimライブラリ – Processingで音を扱うためのライブラリ、Java Sound APIを使用している
音に関する様々な機能が利用できる
サウンドの再生 – WAV, AIFF, AU, SND, MP3形式のサウンドファイルを読み込んで再生する
録音：入力された音を、ディスクに直接、またはメモリー上のバッファーに録音可能
オーディオ入力：モノラル、ステレオのオーディオ入力の値を取得
オーディオ出力：モノラル、ステレオでサウンドを出力
音響合成：音響合成のためのシンプルなインタフェイスを提供
エフェクト：サウンドエフェクトのためのインタフェイスを提供
FFT：高速フーリエ変換で、リアルタイムにスペクトル解析が可能
今日の授業では、シンプルなサイン波の生成と、サウンドファイルの再生を使用
Minimライブラリを使用してみる
サイン波の生成
ステレオのサイン波を生成する
マウスのX座標で周波数を変化させる
マウスのY座標で音量を変化させる
import ddf.minim.*;
import ddf.minim.signals.*;
//Minimクラスのインスタンスminimを定義
Minim minim;
//オーディオをoutに出力する
AudioOutput out;
//サイン波の波形をsineに生成
SineWave sine;
void setup() {
size(800, 400);
//Minimクラスをインスタンス化
minim = new Minim(this);
//モノラルのオーディオ出力として、outを準備
out = minim.getLineOut(Minim.MONO);
//440Hz、音量1.0でサイン波を出力
sine = new SineWave(440, 1.0, out.sampleRate());
//ポルタメント(音程変化のなめらかさ)を200msecに
sine.portamento(200);
//生成したサイン波をオーディオ出力に追加
out.addSignal(sine);
}
void draw() {
background(0);
}
void mouseMoved() {
//マウスのX座標を周波数に設定
//X座標の(0, width)を、周波数(40, 2000)にマップ
float freq = map(mouseX, 0, width, 40, 2000);
sine.setFreq(freq);
//マウスのY座標を音量に設定
//Y座標の(0, height)を、周波数(1.0, 0.0)にマップ
float amp = map(mouseY, 0, height, 1.0, 0.0);
sine.setAmp(amp);
}
void stop() {
//プログラムの終了処理
out.close();
minim.stop();
super.stop();
}波形の表示
import ddf.minim.*;
import ddf.minim.signals.*;
Minim minim;
AudioOutput out;
SineWave sine;
void setup() {
size(800, 400);
frameRate(60);
smooth();
strokeWeight(2);
minim = new Minim(this);
out = minim.getLineOut(Minim.MONO);
sine = new SineWave(440, 1.0, out.sampleRate());
sine.portamento(200);
out.addSignal(sine);
}
void draw() {
//波形を表示
background(0);
stroke(0,255,0);
//Y座標の原点を画面の中心に移動
translate(0, height / 2);
//バッファーに格納されたサンプル数だけくりかえし
for (int i = 0; i & lt; out.bufferSize() - 1; i++) {
// サンプル数から、画面の幅いっぱいに波形を表示するようにマッピング
float x = map(i, 0, out.bufferSize(), 0, width);
// 画面の高さいっぱになるように、サンプルの値をマッピング
float y = map(out.mix.get(i), 0, 1.0, 0, height / 2);
// 値をプロット
point(x, y);
}
}
voidmouseMoved() {
float freq = map(mouseX, 0, width, 20, 1000);
sine.setFreq(freq);
float amp = map(mouseY, 0, height, 1, 0);
sine.setAmp(amp);
}
void stop() {
out.close();
minim.stop();
super.stop();
}
複数の音を鳴らす
2種類のsin波を生成し、同時に鳴らす
波形の表示を工夫してみる – 1つめのSin波のレベルをX軸に、2つめのSin波のレベルをY軸にして波形をプロットとするとどうなるか?
リサージュ図形 – 互いに直交する二つの単振動を順序対として得られる点の軌跡が描く平面図形
import ddf.minim.*;
import ddf.minim.signals.*;
Minim minim;
AudioOutput out;
//2つのサイン波を定義
SineWave sine1, sine2;
void setup() {
size(600, 600);
frameRate(30);
smooth();
strokeWeight(2);
minim = new Minim(this);
//ステレオで出力
out = minim.getLineOut(Minim.STEREO);
//1つめのサイン波
sine1 = new SineWave(440, 0.8, out.sampleRate());
sine1.portamento(200);
//左から出力
sine1.setPan( -1);
//オーディオ出力に追加
out.addSignal(sine1);
//2つめのサイン波
sine2 = new SineWave(440, 0.8, out.sampleRate());
sine2.portamento(200);
//右から出力
sine2.setPan(1);
//オーディオ出力に追加
out.addSignal(sine2);
background(0);
}
void draw() {
//背景を黒にフェードさせる
fill(0, 0, 0, 15);
noStroke();
rect(0, 0, width, height);
//色の設定
noFill();
stroke(0,255,0);
//画面の中心へ原点を移動
translate(width / 2, height / 2);
//波形を描画
for (int i = 0; i & lt; out.bufferSize() - 1; i++) {
// X座標を右チャンネンル、Y座標を左チャンネルにする
point(out.right.get(i) * width / 2, out.left.get(i) * height / 2);
}
}
voidmouseMoved() {
float freq1 = map(mouseX, 0, width, 20, 1000);
sine1.setFreq(freq1);
float freq2 = map(mouseY, 0, height, 20, 1000);
sine2.setFreq(freq2);
}
void stop() {
out.close();
minim.stop();
super.stop();
} サウンドファイルの読み込み、再生
import ddf.minim.*;
Minim minim;
//サウンドファイルのプレーヤーを定義
AudioPlayer player;
void setup() {
size(800, 400, P3D);
minim = new Minim(this);
//サウンドファイルを読み込む
player = minim.loadFile("anton.aif", 2048);
//サウンドファイルを再生
player.play();
}
void draw() {
//波形を描く
background(0);
stroke(0,255,0);
//左チャンネルを上半分に描く
//y座標の原点を移動
translate(0, height / 4);
for (int i = 0; i & lt; player.bufferSize() - 1; i++) {
// サンプルの値を画面にあわせてマッピング
float x = map(i, 0, player.bufferSize(), 0, width);
float y = map(player.left.get(i), 0, 1, 0, height / 4);
point(x, y);
}
// 右チャンネルを上半分に
// y座標の原点を移動
translate(0, height / 2);
for (int i = 0; i & lt; player.bufferSize() - 1; i++) {
//サンプルの値を画面にあわせてマッピング
float x = map(i, 0, player.bufferSize(), 0, width);
float y = map(player.right.get(i), 0, 1, 0, height / 4);
point(x, y);
}
}
//マウスボタンを押すとサンプルを再生
void mousePressed() {
//サウンドを巻き戻し
player.rewind();
//サウンドを再生する
player.play();
}
void stop() {
player.close();
minim.stop();
super.stop();
}ArduinoからProcessing+Minimをコントロールしてみる
センサーの値でSin波をコントロール
「複数の音を鳴らす」のサンプルを改造
2つのアナログ入力の値を、2つのSin波のそれぞれの周波数に対応させてみる
リサージュ図形の表示の部分はそのまま
Arduino + ブレッドボード配線図
Arduino側コード
//アナログ入力の数を定義する
#define NUM 2
//アナログ入力の値を格納する配列
int val[NUM];
void setup() {
//シリアル通信の開始
Serial.begin(9600);
}
void loop() {
//アナログ入力の数だけ繰り返し
for (int i = 0; i & lt; NUM; i++) {
// アナログ入力の値を読み込み
val[i] = analogRead(i);
}
// Processingからの読み込み完了通知を待つ
if (Serial.available() & gt; 0) {
//アナログ入力の数だけ繰り返し
for (int i = 0; i & lt; NUM; i++) {
//上位 8bit を送出
Serial.print(val[i] & gt; & gt; 8, BYTE);
//下位 8bit を送出
Serial.print(val[i] & 255, BYTE);
}
//合図用データを読み込んでバッファ領域を空にする
Serial.read();
}
}Processing側コード
import processing.opengl.*;
import ddf.minim.*;
import ddf.minim.signals.*;
import processing.serial.*;
Minim minim;
AudioOutput out;
SineWave sine1, sine2;
//アナログ入力の数を指定
int NUM = 2;
//Serialクラスのインスタンス
Serial myPort;
//Serialより読み込んだデータを格納する配列
int[] val = new int[NUM];
void setup() {
size(600, 600, OPENGL);
smooth();
strokeWeight(2);
//ポートの名前を取得
String portName = Serial.list()[1];
//Serialクラスをインスタンス化
myPort = new Serial(this, portName, 9600);
minim = new Minim(this);
out = minim.getLineOut(Minim.STEREO);
sine1 = new SineWave(440, 0.8, out.sampleRate());
sine1.portamento(200);
sine1.setPan(-1);
out.addSignal(sine1);
sine2 = new SineWave(440, 0.8, out.sampleRate());
sine2.portamento(200);
sine2.setPan(1);
out.addSignal(sine2);
background(0);
}
void draw() {
fill(0, 0, 0, 15);
noStroke();
rect(0, 0, width, height);
noFill();
stroke(0, 255, 0);
translate(width / 2, height / 2);
for (int i = 0; i & lt; out.bufferSize() - 1; i++) {
float x = map(i, 0, out.bufferSize(), 0, width);
point(out.right.get(i) * width / 2, out.left.get(i) * height / 2);
}
}
//シリアル入力を検出した際に発生するイベント
void serialEvent(Serial p) {
//もし、バッファーにアナログ入力の数の2倍(上位8bitと下位8bit)あれば
if (myPort.available() & gt; NUM * 2 - 1) {
//入力の数だけ繰り返し
for (int i = 0; i & lt; NUM; i++) {
//上位8bitを取得
int val_high = myPort.read();
//下位8bitを取得
int val_low = myPort.read();
//2つのbit列を合成
val[i] = (val_high & lt;& lt; 8 ) + val_low;
//もし全ての入力を処理したら
if (i == NUM - 1) {
//読み込み完了の合図を送る
myPort.write(255);
}
}
}
//取得したシリアルの値を周波数にマッピング
//サイン波1
float freq1 = map(val[0], 0, 1023, 20, 1000);
sine1.setFreq(freq1);
//サイン波2
float freq2 = map(val[1], 0, 1023, 20, 1000);
sine2.setFreq(freq2);
}
//マウスが押されたら通信開始
void mousePressed() {
//バッファ領域を空にする
myPort.clear();
//合図用データを送る
myPort.write(255);
}
void stop() {
out.close();
minim.stop();
super.stop();
}「植物シンセ」タッチセンサーでサウンドファイルを再生
まずはスイッチで実験
Arduino+ブレッドボード回路図
Arduino側コード
//スイッチの入力ピンを定義
const int buttonPin = 2;
//ボタンの状態(初期値：0)
int buttonState = 0;
void setup() {
//シリアル通信開始
Serial.begin(9600);
//スイッチの入力を定義
pinMode(buttonPin, INPUT);
}
void loop(){
//デジタル入力の状態を取得
buttonState = digitalRead(buttonPin);
//もしスイッチが押されていたら
if (buttonState == HIGH) {
//シリアルから値255を出力
Serial.print(255, BYTE);
}
}Processing側コード
import ddf.minim.*;
import processing.serial.*;
Minim minim;
AudioPlayer player;
Serial myPort;
int val;
void setup() {
size(800, 400, P3D);
//ポートの名前を取得
String portName = Serial.list()[1];
//Serialクラスをインスタンス化
myPort = new Serial(this, portName, 9600);
minim = new Minim(this);
player = minim.loadFile("anton.aif", 2048);
}
void draw() {
//波形を描く
background(0);
stroke(0, 255, 0);
for (int i = 0; i & lt; player.bufferSize() - 1; i++) {
float x = map(i, 0, player.bufferSize(), 0, width);
point(x, height / 4 + player.left.get(i) * height / 4);
}
for (int i = 0; i & lt; player.bufferSize() - 1; i++) {
float x = map(i, 0, player.bufferSize(), 0, width);
point(x, height / 4 * 3 + player.right.get(i) * height / 4);
}
}
//シリアル入力を検出した際に発生するイベント
void serialEvent(Serial p) {
//ポートの状態を確認
if (myPort.available() & gt; 1) {
//シリアルからの入力値を取得
val = myPort.read();
}
//もし値が0より大きく、まだ音を再生していなかったら
if (val & gt; 0 && amp; player.isPlaying() == false) {
//再生位置を巻き戻して、サウンドを再生
player.rewind();
player.play();
}
}
void stop() {
player.close();
minim.stop();
super.stop();
}植物にとりつけたタッチセンサーをスイッチにしてみる
矢坂先生の前回と前々回の講義を参考にする
タッチセンサーでスイッチを切り替えるArduinoのプログラムを利用
Arduino+ブレッドボード回路図
8番、9番のデジタル入力にタッチセンサを接続
8番ピンの手前に1MΩの抵抗を入れる
Arduino側コード
#define POWER 8
#define METAL 9
int filter = 0;
int counter = 0;
void setup() {
Serial.begin(9600);
pinMode(POWER, OUTPUT);
pinMode(METAL, INPUT);
}
void loop() {
counter = 0;
digitalWrite(POWER, HIGH);
while (digitalRead(METAL) != HIGH) {
counter++;
}
delay(1);
digitalWrite(POWER, LOW);
filter += (counter - filter) / 2;
if (filter & gt; 5) {
Serial.print(255, BYTE);
}
}Processing側コード
import ddf.minim.*;
import processing.serial.*;
Minim minim;
AudioPlayer player;
Serial myPort;
int val;
void setup() {
size(800, 400, P3D);
//ポートの名前を取得
String portName = Serial.list()[1];
//Serialクラスをインスタンス化
myPort = new Serial(this, portName, 9600);
minim = new Minim(this);
player = minim.loadFile("anton.aif", 2048);
}
void draw() {
//波形を描く
background(0);
stroke(0,255,0);
for (int i = 0; i & lt; player.bufferSize() - 1; i++) {
float x = map(i, 0, player.bufferSize(), 0, width);
point(x, height / 4 + player.left.get(i) * height / 4);
}
for (int i = 0; i & lt; player.bufferSize() - 1; i++) {
float x = map(i, 0, player.bufferSize(), 0, width);
point(x, height / 4 * 3 + player.right.get(i) * height / 4);
}
}
//シリアル入力を検出した際に発生するイベント
void serialEvent(Serial p) {
//ポートの状態を確認
if (myPort.available() & gt; 1) {
//シリアルからの入力値を取得
val = myPort.read();
}
//もし値が0より大きく、まだ音を再生していなかったら
if (val & gt; 0 && player.isPlaying() == false) {
//再生位置を巻き戻して、サウンドを再生
player.rewind();
player.play();
}
}
void stop() {
player.close();
minim.stop();
super.stop();
}音をランダムに再生する (Processing側コードを変更)
import ddf.minim.*;
import processing.serial.*;
Minim minim;
AudioPlayer player;
Serial myPort;
int val;
String[] soundfile = new String[8];
void setup() {
size(800, 400, P3D);
soundfile[0] = "anton.aif";
soundfile[1] = "cello-f2.aif";
soundfile[2] = "cherokee.aif";
soundfile[3] = "drumLoop.aif";
soundfile[4] = "jongly.aif";
soundfile[5] = "rainstick.aif";
soundfile[6] = "sho0630.aif";
soundfile[7] = "vibes-a1.aif";
//ポートの名前を取得
String portName = Serial.list()[1];
//Serialクラスをインスタンス化
myPort = new Serial(this, portName, 9600);
minim = new Minim(this);
player = minim.loadFile(soundfile[int(random(7))], 2048);
}
void draw() {
//波形を描く
background(0);
stroke(0,255,0);
for (int i = 0; i & lt; player.bufferSize() - 1; i++) {
float x = map(i, 0, player.bufferSize(), 0, width);
point(x, height / 4 + player.left.get(i) * height / 4);
}
for (int i = 0; i & lt; player.bufferSize() - 1; i++) {
float x = map(i, 0, player.bufferSize(), 0, width);
point(x, height / 4 * 3 + player.right.get(i) * height / 4);
}
}
//シリアル入力を検出した際に発生するイベント
void serialEvent(Serial p) {
//ポートの状態を確認
if (myPort.available() & gt; 1) {
//シリアルからの入力値を取得
val = myPort.read();
}
//もし値が0より大きく、まだ音を再生していなかったら
//if(val & gt; 0 && player.isPlaying() == false) {
if (val & gt; 0) {
//再生位置を巻き戻して、サウンドを再生
player = minim.loadFile(soundfile[int(random(7))], 2048);
player.rewind();
player.play();
}
}
void stop() {
player.close();
minim.stop();
super.stop();
}
今日の内容
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枚から
うまくいったら、枚数を増やしてみる
サンプルファイルのダウンロード
今回の授業で紹介したプログラムのソースコードは以下からダウンロードしてください。
