Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://tadpolizemedia.blog118.fc2.com/tb.php/159-b2f44ff4

-件のトラックバック

-件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

スピードメーター風画面を作ってみた。(speedometer : Processing1.5.1)

テーマを決めて、それを実現する形を採りながら
Processingの勉強をしています。
第1弾としてスピードメーターのような画面を作ってみました。
これを作ることによって以下の技術が身に付きました。

(1)弧(arc)上に目盛をつける。
(2)忘れていた三角関数を思い出す。(笑)

角度(ラジアン)のコーディングはもっと洗練された形で
書けたはず。面倒なのでそのままアップしてしまいました。
将来的には、これをマイコンの出力と連動させてみたいです。


画面イメージ:

speedometer



動作イメージ: 
(Firefox,Opera, Chromeの最新版では動作します。IEでは動きません。)




ソース:


// スピードメーターを描写する
// (時速120km~125kmのあたりでブルブル震えるメーターを模す)
// (このプログラムでの角度は3時の位置を0度として反時計回りで数えている)

void setup(){
size(300, 200);
smooth();
frameRate(30);
}

void draw(){
background(204);

// メーター軸
noStroke();
fill(0);
ellipse(width/2, height-40, 16, 16);

stroke(0);
strokeWeight(1);
//line(30, height-40, 270, height-40);

// 時速 0km/h, 80km/h, 160km/h の線
for(int i = 170; i >= 10; i -= 80){
line(width/2, height-40, 110*cos(radians(i))+width/2, 110*sin(-radians(i))+height-40);
}

// 目盛(20km/h毎)
for(int i = 150; i >= 30; i -= 20){
line(90*cos(radians(i))+width/2, 90*sin(-radians(i))+height-40, 100*cos(radians(i))+width/2, 100*sin(-radians(i))+height-40);
}

// arc 半径は100
noFill();
arc(width/2, height-40, 100*2, 100*2, PI+radians(10), PI+HALF_PI+radians(80));

// meter
stroke(0, 0, 255, 80);
strokeWeight(10);
// 時速0kmから160km を 170度から10度に対応させる
float val = 170-random(120, 125); // random()のパラメタをいじると色んな動きを試せます。0から160の値で指定。
line(width/2, height-40, 120*cos(radians(val))+width/2, 120*sin(-radians(val))+height-40);
}

スポンサーサイト
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://tadpolizemedia.blog118.fc2.com/tb.php/159-b2f44ff4

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

Appendix

プロフィール

 二代目松四郎

Author: 二代目松四郎


「カメラと動画(+スチル写真)」
「音響と音楽」
「プログラミング」
を主なテーマに活動しています。
映画館と美術館と音楽ホールと
古い街並みが私の学校。

宮城県仙台市在住。

カテゴリー

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Counter

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。