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

Processing

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回は、時間が経過するにつれて色が変わっていくプログラムを作成します。

関数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 

コメント

タイトルとURLをコピーしました