August 2, 2007.

空を描く

何度か話に出ているアニメーションアプリはモノトーンで作成していました。そういう演出もありかなという狙いと容量削減が理由です。しかし、Badminton Scorerなどと行き来して見ていると訴えかけるインパクトが弱いように感じました。で、可愛さが売りのソフトの予定だったため、女性の意見を聞いた結果、カラー化と絵の拡大を行なうこととしました。すなわち絵は全部書き直しとなるわけです。

空はプログラムでグラデーションを書いていたため、灰色を空色に変えるだけで済むはずと最初に変更を加えました。空の色は夕方から夜にかけてだんだん暗くしていたため、以下のようなプログラムを書いていました。(以下全てのコードサンプルは多少省略しています。そのままではコンパイルできないものもあります。)

int startColor = 128;

if (hour == 18) {

　　startColor += minute;

}

for (int i = 0; i < SKY_HEIGHT; i++) {

　　int color = startColor + i;

　　g.setColor(color, color, color);

　　g.fillRect(i, 0, 240, 1);

}

水色に変えるわけだから、これを以下のように3色に分割して、赤と緑をインクリメントすれば水色のグラデーションが完成なわけです。

int startRed = 128;

int startGreen = 128;

int startBlue = 255;

　(略)

g.setColor(red, green, blue);

ところが、これに時間による変化を加えようとmituteにあわせて初期値を暗くしても、本物の空の色にはならない事に気がつきました。水色⇒白だったグラデーションが、紺⇒水色になるだけです。自然な空の変化を表現しようとすると、こんな変化をして欲しいのです。

17時の空　水色⇒白色へのグラデーション

18時の空　紺色⇒赤色へのグラデーション

19時の空　黒色⇒紺色へのグラデーション。

で、適当にパラメータを変えたのですがなかなかうまくいきません。よくよく考えたら上下の変化に時間の変化が加わるため、線形ではなく平面の変化を関数表現しなければいけない。で、それをプログラムに直さないといけない。いろいろ試行錯誤した結果、切片と傾きをminuteで変化させれば良いという事がわかりました。発想としては以下の通り。

1. 17時⇒18時と18時⇒19時を別ロジックに。

2. 各色要素の初期値を切片とし、時間ごとの変化を線形回帰

3. 各色要素の上下の変化をSKY_HEIGHTで割ったものを傾きとし、変化を線形回帰

ごちゃごちゃ書いてますが、ようは以下のようなコードを書きました。

int startRed = (int) (切片初期値 + (切片のデルタ * minute));

int startGreen = .... ;

for (int i = 0; i < SKY_HEIGHT; i++) {

　　red = startRed + (int) ((傾きの初期値 + (傾きのデルタ * minute / 60)) * i);

　　green = ....;

　　(略)

　　g.setColor(red, green, blue);

　　g.fillRect(i, 0, 240, 1);

}

あぁ、しまった今書いてて思ったけど、切片と傾きはfloatで扱って、足し合わせた結果をintにキャストしないと、誤差が大きくなりますね。後で直そうかな。取り合えず、こんなコードで空の色の変化が実現できました。情報系の出の人や数学のできる人なら10分ぐらいでできることなんでしょうけど、どちらでもないbaristaはここにたどり着くまでに１時間ぐらいかかってしまいました。頭悪いなぁ...。でも、完成品を1秒を1分にして60倍速で見ると色の変化が非常に自然で、見ていて美しく気持ちが良いです。苦労した甲斐はありました。

本当は上下の開始時間と終了時間の色を指定するとこの式が自動で導かれる関数を作るべきですね。今はexcel上で計算した即値が書いてあるため、精度が低いし空の色の調整をするたびに計算し直しなので....。

Badminton Scorerの実機試験を開始しました。mixiでモニタ募集をかけましたが反響は今のところ0です(笑)。取り合えず10日ぐらいまでをモニタ期間として、アプリ★ゲットさんに申請を出しましょう。このページにアプリの詳細を掲載するのはそのタイミングになります。

Copyright 2007 barista. All rights reserved.