【Processing】関数millis()を使って時間遷移による色の変化を表現する

こんにちは。Evening Music Recordsの鶴留です。

本記事では、音楽情報バイラルメディア「EVENING」の運営スタッフにより、テック関連情報をブログ形式でお届けさせていただきます。

関数millis()

関数millis()は、プログラムがスタートしてからの経過時間をカウントする関数です。単位は1/1000秒です。1秒は1000で表せます。

実際に作る

今回は、以前テックブログ内で作ったプログラムを使いました。

float x = random(0, width); 
float y = random(0, height); 
float speedX = 5; 
float speedY = 4; 

int time1 = 2500;
int time2 = 5000;
int time3 = 7500;
int time4 = 10000;
int time5 = 12500;
int time6 = 15000;
int time7 = 17500;

int h = 0 ;
int s = 100;
int b = 100;

void setup() { 
 size(500, 500); 
 background(0);
} 

void draw() {
 int time = millis();

 fill(0, 20); 
 rect(0, 0, width, height);
 smooth(); 
 colorMode(HSB, 360, s, b); 
 noStroke(); 
 fill(h, 99, 99); 
 ellipse(x, y, 30, 30); 
 x += speedX; 
 y += speedY; 
 if (x < 0 || x > width) { 
   speedX *= -1;
 } 
 if (y < 0 || y > height) { 
   speedY *= -1;
 }

 if (time > time1) {
   h = 30;
 }
 if (time > time2) {
   h = 60;
 }
 if (time > time3) {
   h = 120;
 }
 if (time > time4) {
   h = 180;
 }
 if (time > time5) {
   h = 240;
 }
 if (time > time6) {
   h = 270;
 }
 if (time > time7) {
   h = 0;
 }
} 

時間が経過すると、動いている球が赤から紫へと変わっていくことが確認できましたでしょうか。

最後は赤のままですが… 2500ミリ秒（＝2.5秒）ごとに色が変わっていくように設定しました。それぞれの色が変わるタイミングは、millis()でカウントしている値が、最初に設定したtime1～time7より大きくなった時に反映されるように作っています。

赤で終わらず、繰り返し作りたかったのですが、思ったように作れませんでした。

そうなるといちいちif文で作っている場合ではなくなってしまいそうです…

今回は以上になります。

音楽情報バイラルメディアEVENING： https://evening-mashup.com/
※ インターンシップの詳細はこちらから： https://evening-mashup.com/home/music-intern
※ 就職活動に関する情報はこちらから： https://evening-mashup.com/evening-job

本気で遊ぼう。音楽で。- EVENING -

音楽情報バイラルメディア「EVENING」は、音楽業界に関連するニュースやエンターテイメント情報を提供するWebメディアです。