iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,093 views

iTamabi131007 時計アプリを作る

iTamabi131007 時計アプリを作る

Statistics

Views

Total Views
2,093
Views on SlideShare
1,871
Embed Views
222

Actions

Likes
2
Downloads
17
Comments
0

2 Embeds 222

http://yoppa.org 198
http://cloud.feedly.com 24

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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.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);
  • 時計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.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);
  • 時計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.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); }
  • 時計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