iTamabi 13 
第4回:iPhoneアプリ実践開発講座 2
時計アプリをつくる
2013年10月7日
多摩美術大学 PBL科目
担当:田所 淳
今日の内容
‣ 時計アプリをつくってみましょう!
‣ 最初はオーソドックスなデジタルとアナログ時計
‣ さらにアバンギャルドな時計へ
時計アプリの拡がり
‣ 時間を表現したアプリケーションは、iPhoneアプリの世界で
も様々存在します
‣ 参考:
‣ It's About Time - Volume 1 [iPhone] - 10 Most wonderful
Clock ...
時計アプリの拡がり
‣ Clock Series by Rhizomatiks
‣ Rizomatiksによる時計アプリのシリーズ
‣ Clock01 ∼ Clock12 全12種類!!
時計アプリの拡がり
‣ 昨年度のiTamabiオリジナル時計アプリ
‣ A Clockwork Light
時計1:デジタルクロック
‣ まずはシンプルなデジタル時計から
‣ openFrameworksで時刻の取得はとても簡単!
‣ 時間:ofGetHours();
‣ 分:ofGetMinutes();
‣ 秒:ofGetSeconds();
‣...
時計1:デジタルクロック
‣ testApp.mm
#include "testApp.h"
int h, m, s; //時間、分、秒
void testApp::setup(){!
! ofRegisterTouchEvents(this)...
時計1:デジタルクロック
‣ 完成!!
時計2:アナログクロック
‣ デジタルクロックからアナログクロックへ
‣ 取得した、時、分、秒の値をもとに、針の角度を計算
‣ 計算した角度で、中心から直線を描けば時計になるはず
h
m
s
時計2:アナログクロック
‣ それぞれの針の角度を計算するには?
‣ 単位時間あたりの変化角度を求めればOK
‣ 時針:12時間で1周、1時間あたりに動く角度は?
‣ 360° / 12 = 30°
‣ 分針:60分で1周、1分あたりに動く角度...
時計2:アナログクロック
‣ 単位時間で動く角度に、現在の時刻を掛け算する
‣ 現在の針の角度が求まる
‣ 例:4時23分12秒 だったら
‣ 時針:4 * 30 = 120°
‣ 分針:23 * 6 = 138°
‣ 秒針:12 * 6 = ...
時計2:アナログクロック
‣ testApp.mm
#include "testApp.h"
float h, m, s;
void testApp::setup(){!
! ofRegisterTouchEvents(this);
! ofx...
時計2:アナログクロック
‣ testApp.mm
ofSetLineWidth(3);
ofSetCircleResolution(64);
ofCircle(0, 0, clockSize);
//秒針
ofPushMatrix();
of...
時計2:アナログクロック
‣ 完成!! …でもなんか変?
‣ 例えば、時針の角度
時計3:アナログクロック (改良版)
‣ 時針、分針は、単位時間ごとに一気に変化するわけではない
‣ 毎秒すこしずつ動いている
‣ ただしとても遅い動きなので判別できないだけ
‣ どのくらいの変化か?
‣ 分針 → 1秒あたり、1/60分の影響...
時計3:アナログクロック (改良版)
‣ testApp.mm
#include "testApp.h"
float h, m, s;
void testApp::setup(){!
! ofRegisterTouchEvents(this);...
時計3:アナログクロック (改良版)
‣ testApp.mm
void testApp::draw(){
//時計の大きさ
float clockSize = ofGetWidth()/2 - 20;
! //背景に円を描く
ofSetCol...
時計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(){!
! ofRegi...
時計4:アナログクロック(ゴージャス版)
‣ testApp.mm
void testApp::draw(){
ofSetColor(255, 255, 255);
//背景イメージを描画
background.draw(0,0,320,480...
時計4:アナログクロック(ゴージャス版)
‣ testApp.mm
//分の目盛を描く(外枠)
for (int i=0; i<60; i++) {
ofRotateZ(6);
ofCircle(clockSize, 0, 2);
}
//時の...
時計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);...
時計5:大きさによる時間表現
‣ testApp.mm
//秒
! ofSetColor(67, 214, 74);
ofCircle(ofGetWidth()/2, ofGetHeight()/8*5, s/60.0*circleSize);...
時計5:大きさによる時間表現
‣ 完成!!
時計6:色の濃度による時間表現
‣ 物体を塗る際のアルファ値(透明度)を、時間で変化
‣ 背景を黒にすると、色の濃度で時間を表現できる
‣ 色彩時計
‣ このサンプルよりさらに複雑な図形にしても面白いかも
時計6:色の濃度による時間表現
‣ testApp.mm
#include "testApp.h"
float ms, s, m, h;
void testApp::setup(){!
! ofRegisterTouchEvents(this)...
時計6:色の濃度による時間表現
‣ testApp.mm
void testApp::draw(){
//ミリ秒
! ofSetColor(67, 121, 214, 255.0*ms/1000.0f);
ofRect(0, ofGetHeig...
時計6:色の濃度による時間表現
‣ 完成!!
時計7:物体の位置による時間表現
‣ 今度は物体の位置で時間を表してみる
‣ 時間、分、秒、ミリ秒をあらわす直線が左から右へスライド
‣ 位置によって時間を知らせる
時計7:物体の位置による時間表現
‣ testApp.mm
#include "testApp.h"
float ms, s, m, h;
void testApp::setup(){!
! ofRegisterTouchEvents(this...
時計7:物体の位置による時間表現
‣ testApp.mm
//枠
ofSetColor(63, 63, 63);
ofSetLineWidth(1);
ofLine(0, ofGetHeight()/4, ofGetWidth(), ofGe...
時計7:物体の位置による時間表現
‣ testApp.mm
//時
verdana.drawString(ofToString(h, 0), h/24.0*ofGetWidth()+4, ofGetHeight()/
8*7+6);
ofLin...
時計7:物体の位置による時間表現
‣ 完成!!
自分独自の時間表現を考える
‣ 自分独自の時間を表現するアプリを考えてみる
‣ 位置、色、角度、濃度...etc
Upcoming SlideShare
Loading in...5
×

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

2,458

Published on

iTamabi131007 時計アプリを作る

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

No Downloads
Views
Total Views
2,458
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. iTamabi 13  第4回:iPhoneアプリ実践開発講座 2 時計アプリをつくる 2013年10月7日 多摩美術大学 PBL科目 担当:田所 淳
  2. 2. 今日の内容 ‣ 時計アプリをつくってみましょう! ‣ 最初はオーソドックスなデジタルとアナログ時計 ‣ さらにアバンギャルドな時計へ
  3. 3. 時計アプリの拡がり ‣ 時間を表現したアプリケーションは、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
  4. 4. 時計アプリの拡がり ‣ Clock Series by Rhizomatiks ‣ Rizomatiksによる時計アプリのシリーズ ‣ Clock01 ∼ Clock12 全12種類!!
  5. 5. 時計アプリの拡がり ‣ 昨年度のiTamabiオリジナル時計アプリ ‣ A Clockwork Light
  6. 6. 時計1:デジタルクロック ‣ まずはシンプルなデジタル時計から ‣ openFrameworksで時刻の取得はとても簡単! ‣ 時間:ofGetHours(); ‣ 分:ofGetMinutes(); ‣ 秒:ofGetSeconds(); ‣ この関数で取得した数値(int)を表示するだけで、デジタル時計 になる!!
  7. 7. 時計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); } //--------------------- 後略 ---------------------
  8. 8. 時計1:デジタルクロック ‣ 完成!!
  9. 9. 時計2:アナログクロック ‣ デジタルクロックからアナログクロックへ ‣ 取得した、時、分、秒の値をもとに、針の角度を計算 ‣ 計算した角度で、中心から直線を描けば時計になるはず h m s
  10. 10. 時計2:アナログクロック ‣ それぞれの針の角度を計算するには? ‣ 単位時間あたりの変化角度を求めればOK ‣ 時針:12時間で1周、1時間あたりに動く角度は? ‣ 360° / 12 = 30° ‣ 分針:60分で1周、1分あたりに動く角度は? ‣ 360° / 60 = 6° ‣ 秒針:60秒で1周、1秒あたりに動く角度は? ‣ 360° / 60 = 6°
  11. 11. 時計2:アナログクロック ‣ 単位時間で動く角度に、現在の時刻を掛け算する ‣ 現在の針の角度が求まる ‣ 例:4時23分12秒 だったら ‣ 時針:4 * 30 = 120° ‣ 分針:23 * 6 = 138° ‣ 秒針:12 * 6 = 72° ‣ あとは、直線で針を描くだけ ‣ 追加で周囲に円を描いて、時計の枠にする
  12. 12. 時計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);
  13. 13. 時計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(); } //--------------------- 後略 ---------------------
  14. 14. 時計2:アナログクロック ‣ 完成!! …でもなんか変? ‣ 例えば、時針の角度
  15. 15. 時計3:アナログクロック (改良版) ‣ 時針、分針は、単位時間ごとに一気に変化するわけではない ‣ 毎秒すこしずつ動いている ‣ ただしとても遅い動きなので判別できないだけ ‣ どのくらいの変化か? ‣ 分針 → 1秒あたり、1/60分の影響を受けている ‣ 時針 → 1分あたり、1/60時間の影響を受けている ‣ この微妙な影響を含めて角度を再計算しなければいけない
  16. 16. 時計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); }
  17. 17. 時計3:アナログクロック (改良版) ‣ testApp.mm void 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);
  18. 18. 時計3:アナログクロック (改良版) ‣ testApp.mm ofSetLineWidth(4); ofLine(0, 0, 0, -clockSize*0.75); ofPopMatrix(); } //------------------------- 後略 -----------------------------
  19. 19. 時計3:アナログクロック (改良版) ‣ 完成!!
  20. 20. 時計4:アナログクロック(ゴージャス版) ‣ 文字盤のデザインを工夫してみる ‣ 背景に画像を配置 ‣ 文字盤の工夫 ‣ 秒と分の刻みに小さい円を描く ‣ 時間の刻みに大きい円を描く ‣ for文でくりかえしをすれば、簡単に作成可能!!
  21. 21. 時計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); }
  22. 22. 時計4:アナログクロック(ゴージャス版) ‣ testApp.mm void 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);
  23. 23. 時計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);
  24. 24. 時計4:アナログクロック(ゴージャス版) ‣ testApp.mm ofSetLineWidth(4); ofLine(0, 0, 0, -clockSize*0.75); ofPopMatrix(); } //--------------------------- 後略 ---------------------------
  25. 25. 時計4:アナログクロック(ゴージャス版) ‣ 完成!!
  26. 26. より自由な発想で! ‣ 既存の時計の表現を忘れて、より自由な発想で ‣ 自分オリジナルな時間の表現を考える ‣ 所得した時間、分、秒の値を図形の様々な属性に ‣ 大きさ ‣ 色 ‣ 位置、動き ‣ ...etc
  27. 27. 時計5:大きさによる時間表現 ‣ 物体の大きさによって、時間を表現してみる ‣ 円の半径を時間の値で変化させてみる
  28. 28. 時計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);!
  29. 29. 時計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); } //--------------------------- 後略 ---------------------------
  30. 30. 時計5:大きさによる時間表現 ‣ 完成!!
  31. 31. 時計6:色の濃度による時間表現 ‣ 物体を塗る際のアルファ値(透明度)を、時間で変化 ‣ 背景を黒にすると、色の濃度で時間を表現できる ‣ 色彩時計 ‣ このサンプルよりさらに複雑な図形にしても面白いかも
  32. 32. 時計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(); }
  33. 33. 時計6:色の濃度による時間表現 ‣ testApp.mm void 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); }
  34. 34. 時計6:色の濃度による時間表現 ‣ 完成!!
  35. 35. 時計7:物体の位置による時間表現 ‣ 今度は物体の位置で時間を表してみる ‣ 時間、分、秒、ミリ秒をあらわす直線が左から右へスライド ‣ 位置によって時間を知らせる
  36. 36. 時計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());
  37. 37. 時計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); //時
  38. 38. 時計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()); }
  39. 39. 時計7:物体の位置による時間表現 ‣ 完成!!
  40. 40. 自分独自の時間表現を考える ‣ 自分独自の時間を表現するアプリを考えてみる ‣ 位置、色、角度、濃度...etc
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×