iTamabi 13　第4回：iPhoneアプリ実践開発講座 2時計アプリをつくる2013年10月7日多摩美術大学 PBL科目担当：田所 淳

今日の内容 ‣ 時計アプリをつくってみましょう!‣ 最初はオーソドックスなデジタルとアナログ時計‣ さらにアバンギャルドな時計へ

時計アプリの拡がり‣ 時間を表現したアプリケーションは、iPhoneアプリの世界でも様々存在します

‣ 参考：‣ It's About Time - Volume 1 [iPhone] - 10 Most wonderful

Clock Apps for the iPhone/iPod Touch | CreativeApplications.Net - http://goo.gl/Q60Ai

‣ It's About Time - 10 Most wonderful Clock Apps for the iPhone and iPad - Volume 2 | CreativeApplications.Net - http://goo.gl/4Oji

時計アプリの拡がり‣ Clock Series by Rhizomatiks

‣ Rizomatiksによる時計アプリのシリーズ‣ Clock01 ～ Clock12 全12種類!!

時計アプリの拡がり‣ 昨年度のiTamabiオリジナル時計アプリ‣ A Clockwork Light

時計1：デジタルクロック‣ まずはシンプルなデジタル時計から

‣ openFrameworksで時刻の取得はとても簡単!‣ 時間：ofGetHours();‣ 分：ofGetMinutes();‣ 秒：ofGetSeconds();

‣ この関数で取得した数値(int)を表示するだけで、デジタル時計になる!!

時計1：デジタルクロック‣ testApp.mm#include "testApp.h"

int h, m, s; //時間、分、秒

void testApp::setup(){!! ofRegisterTouchEvents(this);! ofxAccelerometer.setup();! ofxiPhoneAlerts.addListener(this);! ofBackground(0,0,0);}void testApp::update(){ s = ofGetSeconds(); //秒の取得 m = ofGetMinutes(); //分の取得 h = ofGetHours(); //時の取得}void testApp::draw(){ //文字を表示するための文字領域確保 char time[32]; //時間、分、秒、をそれぞれ2桁表示に sprintf(time, "%02d : %02d : %02d", h, m, s); //画面に描画 ofSetColor(255, 255, 255); ofDrawBitmapString(time, 20, ofGetHeight()/2);}

//--------------------- 後略 ---------------------

時計1：デジタルクロック‣ 完成!!

時計2：アナログクロック‣ デジタルクロックからアナログクロックへ‣ 取得した、時、分、秒の値をもとに、針の角度を計算‣ 計算した角度で、中心から直線を描けば時計になるはず

h

m

s

時計2：アナログクロック‣ それぞれの針の角度を計算するには?‣ 単位時間あたりの変化角度を求めればOK

‣ 時針：12時間で1周、1時間あたりに動く角度は?‣ 360° / 12 = 30°

‣ 分針：60分で1周、1分あたりに動く角度は?‣ 360° / 60 = 6°

‣ 秒針：60秒で1周、1秒あたりに動く角度は?‣ 360° / 60 = 6°

時計2：アナログクロック‣ 単位時間で動く角度に、現在の時刻を掛け算する‣ 現在の針の角度が求まる

‣ 例：4時23分12秒 だったら‣ 時針：4 * 30 = 120°‣ 分針：23 * 6 = 138°‣ 秒針：12 * 6 = 72°

‣ あとは、直線で針を描くだけ‣ 追加で周囲に円を描いて、時計の枠にする

時計2：アナログクロック‣ testApp.mm#include "testApp.h"

float h, m, s;

void testApp::setup(){!! ofRegisterTouchEvents(this);! ofxAccelerometer.setup();! ofxiPhoneAlerts.addListener(this);! ofBackground(0, 0, 0); ofEnableSmoothing();}

void testApp::update(){ s = ofGetSeconds(); m = ofGetMinutes(); h = ofGetHours();}

void testApp::draw(){ //時計の大きさを設定 float clockSize = ofGetWidth()/2 - 20;

//背景に円を描く ofSetColor(255, 255, 255); ofNoFill(); ofTranslate(ofGetWidth()/2, ofGetHeight()/2);

時計2：アナログクロック‣ testApp.mm ofSetLineWidth(3); ofSetCircleResolution(64); ofCircle(0, 0, clockSize); //秒針 ofPushMatrix(); ofRotateZ(s*6.0); ofSetLineWidth(1); ofLine(0, 0, 0, -clockSize); ofPopMatrix(); //分 ofPushMatrix(); ofRotateZ(m*6.0); ofSetLineWidth(2); ofLine(0, 0, 0, -clockSize); ofPopMatrix(); //時針 ofPushMatrix(); ofRotateZ(h*30.0); ofSetLineWidth(4); ofLine(0, 0, 0, -clockSize*0.75); ofPopMatrix();}//--------------------- 後略 ---------------------

時計2：アナログクロック‣ 完成!! …でもなんか変?‣ 例えば、時針の角度

時計3：アナログクロック (改良版)

‣ 時針、分針は、単位時間ごとに一気に変化するわけではない‣ 毎秒すこしずつ動いている‣ ただしとても遅い動きなので判別できないだけ

‣ どのくらいの変化か?‣ 分針 → 1秒あたり、1/60分の影響を受けている‣ 時針 → 1分あたり、1/60時間の影響を受けている‣ この微妙な影響を含めて角度を再計算しなければいけない

時計3：アナログクロック (改良版)

‣ testApp.mm#include "testApp.h"

float h, m, s;

void testApp::setup(){!! ofRegisterTouchEvents(this);! ofxAccelerometer.setup();! ofxiPhoneAlerts.addListener(this);! ofBackground(0,0,0);! ofSetColor(255, 255, 255); ofEnableSmoothing();}

void testApp::update(){ //秒を取得 s = ofGetSeconds(); //秒の影響を加えた、分の算出 m = ofGetMinutes() + (s/60.0); //分の影響を加えた、時の算出 h = ofGetHours()%12 + (m/60.0);}

時計3：アナログクロック (改良版)

‣ testApp.mmvoid testApp::draw(){ //時計の大きさ float clockSize = ofGetWidth()/2 - 20;! //背景に円を描く ofSetColor(255, 255, 255); ofNoFill(); ofTranslate(ofGetWidth()/2, ofGetHeight()/2); ofSetLineWidth(3); ofSetCircleResolution(64); ofCircle(0, 0, clockSize); //秒針 ofPushMatrix(); ofRotateZ(s*6.0); ofSetLineWidth(1); ofLine(0, 0, 0, -clockSize); ofPopMatrix(); //分針 ofPushMatrix(); ofRotateZ(m*6.0); ofSetLineWidth(2); ofLine(0, 0, 0, -clockSize); ofPopMatrix(); //時針 ofPushMatrix(); ofRotateZ(h*30.0);

時計3：アナログクロック (改良版)

‣ testApp.mm ofSetLineWidth(4); ofLine(0, 0, 0, -clockSize*0.75); ofPopMatrix();}

//------------------------- 後略 -----------------------------

時計3：アナログクロック (改良版)

‣ 完成!!

時計4：アナログクロック(ゴージャス版)

‣ 文字盤のデザインを工夫してみる

‣ 背景に画像を配置

‣ 文字盤の工夫‣ 秒と分の刻みに小さい円を描く‣ 時間の刻みに大きい円を描く‣ for文でくりかえしをすれば、簡単に作成可能!!

時計4：アナログクロック(ゴージャス版)

‣ testApp.mm#include "testApp.h"

float h, m, s;ofImage background;

void testApp::setup(){!! ofRegisterTouchEvents(this);! ofxAccelerometer.setup();! ofxiPhoneAlerts.addListener(this);! ofBackground(67, 121, 214); ofEnableSmoothing(); background.loadImage("background.jpg");}

void testApp::update(){ //秒を取得 s = ofGetSeconds(); //秒の影響を加えた、分の算出 m = ofGetMinutes() + (s/60.0); //分の影響を加えた、時の算出 h = ofGetHours()%12 + (m/60);}

時計4：アナログクロック(ゴージャス版)

‣ testApp.mmvoid testApp::draw(){ ofSetColor(255, 255, 255); //背景イメージを描画 background.draw(0,0,320,480); //時計の大きさ float clockSize = ofGetWidth()/2 - 20; //座標全体を中心に移動 ofTranslate(ofGetWidth()/2, ofGetHeight()/2); //時計の背景 ofFill(); //分の目盛を描く for (int i=0; i<60; i++) { ofRotateZ(6); ofCircle(clockSize, 0, 2); } //時の目盛を描く for (int i=0; i<12; i++) { ofRotateZ(30); ofCircle(clockSize, 0, 6); } ofNoFill(); ofSetLineWidth(1);

時計4：アナログクロック(ゴージャス版)

‣ testApp.mm //分の目盛を描く(外枠) for (int i=0; i<60; i++) { ofRotateZ(6); ofCircle(clockSize, 0, 2); } //時の目盛を描く(外枠) for (int i=0; i<12; i++) { ofRotateZ(30); ofCircle(clockSize, 0, 6); } //秒針 ofPushMatrix(); ofRotateZ(s*6.0); ofSetLineWidth(1); ofLine(0, 0, 0, -clockSize); ofPopMatrix(); //分 ofPushMatrix(); ofRotateZ(m*6.0); ofSetLineWidth(2); ofLine(0, 0, 0, -clockSize); ofPopMatrix(); //時針 ofPushMatrix(); ofRotateZ(h*30.0);

時計4：アナログクロック(ゴージャス版)

‣ testApp.mm ofSetLineWidth(4); ofLine(0, 0, 0, -clockSize*0.75); ofPopMatrix();}

//--------------------------- 後略 ---------------------------

時計4：アナログクロック(ゴージャス版)

‣ 完成!!

より自由な発想で!

‣ 既存の時計の表現を忘れて、より自由な発想で‣ 自分オリジナルな時間の表現を考える

‣ 所得した時間、分、秒の値を図形の様々な属性に‣ 大きさ‣ 色‣ 位置、動き‣ ...etc

時計5：大きさによる時間表現‣ 物体の大きさによって、時間を表現してみる‣ 円の半径を時間の値で変化させてみる

時計5：大きさによる時間表現‣ testApp.mm#include "testApp.h"

float ms, s, m, h;

void testApp::setup(){!! ofRegisterTouchEvents(this);! ofxAccelerometer.setup();! ofxiPhoneAlerts.addListener(this);! ofBackground(0, 0, 0); ofSetCircleResolution(64);}

void testApp::update(){ //時刻を取得 ms = ofGetElapsedTimeMillis() % 1000; s = ofGetSeconds(); m = ofGetMinutes(); h = ofGetHours();}

void testApp::draw(){ float circleSize = ofGetHeight()/8; //ミリ秒! ofSetColor(67, 121, 214); ofCircle(ofGetWidth()/2, ofGetHeight()/8*7, ms/1000.0*circleSize);!

時計5：大きさによる時間表現‣ testApp.mm //秒! ofSetColor(67, 214, 74); ofCircle(ofGetWidth()/2, ofGetHeight()/8*5, s/60.0*circleSize); //分! ofSetColor(255, 245, 80); ofCircle(ofGetWidth()/2, ofGetHeight()/8*3, m/60.0*circleSize); //時! ofSetColor(214, 67, 67); ofCircle(ofGetWidth()/2, ofGetHeight()/8, h/24.0*circleSize);}

//--------------------------- 後略 ---------------------------

時計5：大きさによる時間表現‣ 完成!!

時計6：色の濃度による時間表現‣ 物体を塗る際のアルファ値(透明度)を、時間で変化‣ 背景を黒にすると、色の濃度で時間を表現できる‣ 色彩時計‣ このサンプルよりさらに複雑な図形にしても面白いかも

時計6：色の濃度による時間表現‣ testApp.mm#include "testApp.h"

float ms, s, m, h;

void testApp::setup(){!! ofRegisterTouchEvents(this);! ofxAccelerometer.setup();! ofxiPhoneAlerts.addListener(this);! ofEnableAlphaBlending();! ofBackground(0, 0, 0);}

void testApp::update(){ //時刻を取得 ms = ofGetElapsedTimeMillis() % 1000; s = ofGetSeconds(); m = ofGetMinutes(); h = ofGetHours();}

時計6：色の濃度による時間表現‣ testApp.mmvoid testApp::draw(){ //ミリ秒! ofSetColor(67, 121, 214, 255.0*ms/1000.0f); ofRect(0, ofGetHeight()/4*3, ofGetWidth(), ofGetHeight()/4); //秒! ofSetColor(67, 214, 74, 255.0*s/60.0f);! ofRect(0, ofGetHeight()/4*2, ofGetWidth(), ofGetHeight()/4); //分! ofSetColor(255, 245, 80, 255.0*m/60.0f);! ofRect(0, ofGetHeight()/4, ofGetWidth(), ofGetHeight()/4); //時! ofSetColor(214, 67, 67, 255.0*h/24.0f);! ofRect(0, 0, ofGetWidth(), ofGetHeight()/4);}

時計6：色の濃度による時間表現‣ 完成!!

時計7：物体の位置による時間表現‣ 今度は物体の位置で時間を表してみる‣ 時間、分、秒、ミリ秒をあらわす直線が左から右へスライド‣ 位置によって時間を知らせる

時計7：物体の位置による時間表現‣ testApp.mm#include "testApp.h"

float ms, s, m, h;

void testApp::setup(){!! ofRegisterTouchEvents(this);! ofxAccelerometer.setup();! ofxiPhoneAlerts.addListener(this);! ofBackground(0, 0, 0); ofEnableSmoothing(); ofSetBackgroundAuto(false); ofEnableAlphaBlending();}

void testApp::update(){ //時刻を取得 ms = ofGetElapsedTimeMillis() % 1000; s = ofGetSeconds(); m = ofGetMinutes(); h = ofGetHours(); }

void testApp::draw(){ //背景 ofSetColor(0, 0, 0, 15); ofRect(0, 0, ofGetWidth(), ofGetHeight());

時計7：物体の位置による時間表現‣ testApp.mm //枠 ofSetColor(63, 63, 63); ofSetLineWidth(1); ofLine(0, ofGetHeight()/4, ofGetWidth(), ofGetHeight()/4); ofLine(0, ofGetHeight()/2, ofGetWidth(), ofGetHeight()/2); ofLine(0, ofGetHeight()/4*3, ofGetWidth(), ofGetHeight()/4*3); //線の位置で時間を表現 ofSetColor(255, 255, 255); ofSetLineWidth(3); //ミリ秒 verdana.drawString(ofToString(ms, 0), ms/1000.0*ofGetWidth()+4, ofGetHeight()/8+6); ofLine(ms/1000.0*ofGetWidth(), 0, ms/1000.0*ofGetWidth(), ofGetHeight()/4); //秒 verdana.drawString(ofToString(s, 0), s/60.0*ofGetWidth()+4, ofGetHeight()/8*3+6); ofLine(s/60.0*ofGetWidth(), ofGetHeight()/4, s/60.0*ofGetWidth(), ofGetHeight()/2); //分 verdana.drawString(ofToString(m, 0), m/60.0*ofGetWidth()+4, ofGetHeight()/8*5+6); ofLine(m/60.0*ofGetWidth(), ofGetHeight()/2, m/60.0*ofGetWidth(), ofGetHeight()/4*3); //時

時計7：物体の位置による時間表現‣ testApp.mm //時 verdana.drawString(ofToString(h, 0), h/24.0*ofGetWidth()+4, ofGetHeight()/8*7+6); ofLine(h/24.0*ofGetWidth(), ofGetHeight()/4*3, h/24.0*ofGetWidth(), ofGetHeight());}

時計7：物体の位置による時間表現‣ 完成!!

自分独自の時間表現を考える‣ 自分独自の時間を表現するアプリを考えてみる‣ 位置、色、角度、濃度...etc