iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる

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)を表示するだけで、デジタル時計
になる!!

‣ 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);
}
//--------------------- 後略 ---------------------

‣ 完成!!

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

‣ それぞれの針の角度を計算するには?
‣ 単位時間あたりの変化角度を求めればOK
‣ 時針：12時間で1周、1時間あたりに動く角度は?
‣ 360° / 12 = 30°
‣ 分針：60分で1周、1分あたりに動く角度は?
‣ 360° / 60 = 6°
‣ 秒針：60秒で1周、1秒あたりに動く角度は?
‣ 360° / 60 = 6°

‣ 単位時間で動く角度に、現在の時刻を掛け算する
‣ 現在の針の角度が求まる
‣ 例：4時23分12秒だったら
‣ 時針：4 * 30 = 120°
‣ 分針：23 * 6 = 138°
‣ 秒針：12 * 6 = 72°
‣ あとは、直線で針を描くだけ
‣ 追加で周囲に円を描いて、時計の枠にする

‣ testApp.mm
float h, m, s;
! ofBackground(0, 0, 0);
ofEnableSmoothing();
}
s = ofGetSeconds();
m = ofGetMinutes();
h = ofGetHours();
}
//時計の大きさを設定
float clockSize = ofGetWidth()/2 - 20;
//背景に円を描く
ofSetColor(255, 255, 255);
ofNoFill();
ofTranslate(ofGetWidth()/2, ofGetHeight()/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);
ofPopMatrix();
//時針
ofPushMatrix();
ofRotateZ(h*30.0);
ofSetLineWidth(4);
ofLine(0, 0, 0, -clockSize*0.75);
ofPopMatrix();
}
//--------------------- 後略 ---------------------

‣ 完成!! …でもなんか変?
‣ 例えば、時針の角度

時計3：アナログクロック (改良版)
‣ 時針、分針は、単位時間ごとに一気に変化するわけではない
‣ 毎秒すこしずつ動いている
‣ ただしとても遅い動きなので判別できないだけ
‣ どのくらいの変化か?
‣ 分針 → 1秒あたり、1/60分の影響を受けている
‣ 時針 → 1分あたり、1/60時間の影響を受けている
‣ この微妙な影響を含めて角度を再計算しなければいけない

‣ testApp.mm
float h, m, s;
! ofBackground(0,0,0);
! ofSetColor(255, 255, 255);
}
//秒を取得
s = ofGetSeconds();
//秒の影響を加えた、分の算出
m = ofGetMinutes() + (s/60.0);
//分の影響を加えた、時の算出
h = ofGetHours()%12 + (m/60.0);
}

‣ testApp.mm
//時計の大きさ
! //背景に円を描く
ofSetColor(255, 255, 255);
ofNoFill();
ofSetLineWidth(3);
ofCircle(0, 0, clockSize);
//秒針
ofPushMatrix();
ofRotateZ(s*6.0);
ofSetLineWidth(1);
ofPopMatrix();
//分針
ofPushMatrix();
ofRotateZ(m*6.0);
ofSetLineWidth(2);
ofPopMatrix();
//時針
ofPushMatrix();
ofRotateZ(h*30.0);

‣ testApp.mm
ofSetLineWidth(4);
ofPopMatrix();
}
//------------------------- 後略 -----------------------------

‣ 完成!!

時計4：アナログクロック(ゴージャス版)
‣ 文字盤のデザインを工夫してみる
‣ 背景に画像を配置
‣ 文字盤の工夫
‣ 秒と分の刻みに小さい円を描く
‣ 時間の刻みに大きい円を描く
‣ for文でくりかえしをすれば、簡単に作成可能!!

‣ testApp.mm
float h, m, s;
ofImage background;
background.loadImage("background.jpg");
}
//秒を取得
s = ofGetSeconds();
//秒の影響を加えた、分の算出
m = ofGetMinutes() + (s/60.0);
//分の影響を加えた、時の算出
h = ofGetHours()%12 + (m/60);
}

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

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

‣ testApp.mm
ofSetLineWidth(4);
ofPopMatrix();
}
//--------------------------- 後略 ---------------------------

‣ 完成!!

より自由な発想で!
‣ 既存の時計の表現を忘れて、より自由な発想で
‣ 自分オリジナルな時間の表現を考える
‣ 所得した時間、分、秒の値を図形の様々な属性に
‣ 大きさ
‣ 色
‣ 位置、動き
‣ ...etc

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

‣ testApp.mm
float ms, s, m, h;
}
//時刻を取得
ms = ofGetElapsedTimeMillis() % 1000;
s = ofGetSeconds();
m = ofGetMinutes();
h = ofGetHours();
}
float circleSize = ofGetHeight()/8;
//ミリ秒
! ofSetColor(67, 121, 214);
ofCircle(ofGetWidth()/2, ofGetHeight()/8*7, ms/1000.0*circleSize);!

‣ 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);
}
//--------------------------- 後略 ---------------------------

‣ 完成!!

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

‣ testApp.mm
float ms, s, m, h;
! ofEnableAlphaBlending();
}
//時刻を取得
s = ofGetSeconds();
m = ofGetMinutes();
h = ofGetHours();
}

‣ testApp.mm
//ミリ秒
! 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);
}

‣ 完成!!

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

‣ testApp.mm
float ms, s, m, h;
ofSetBackgroundAuto(false);
ofEnableAlphaBlending();
}
//時刻を取得
s = ofGetSeconds();
m = ofGetMinutes();
h = ofGetHours();
}
//背景
ofSetColor(0, 0, 0, 15);
ofRect(0, 0, ofGetWidth(), ofGetHeight());

‣ 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);
//時

‣ 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());
}

‣ 完成!!

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

iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる

Recomendados

Recomendados

Más contenido relacionado

Más de Atsushi Tadokoro

Más de Atsushi Tadokoro (20)

iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる