Más contenido relacionado Más de Atsushi Tadokoro (20) iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる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
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);
}
//--------------------- 後略 ---------------------
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. 時計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();
}
//--------------------- 後略 ---------------------
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. 時計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);
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. 時計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. 時計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);
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. 時計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);
}
//--------------------------- 後略 ---------------------------
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. 時計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);
}
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. 時計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);
//時