【Processing】だんだん消えるアニメーションの作成

Processing

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回だんだんと消えていくアニメーションを作成していきます。

どう表現するか

ある物体がだんだんと消えていくのを表現するのにはどうしたらよいでしょうか。それを簡単に表現する方法の一つに、透明のフィルムを何度も重ねるという考え方が挙げられます。それをプログラムで表現してみたいと思います。

実際に作る

だんだんと軌跡が消えていく円を描いていきたいと思います。まずは、円が消えていく効果のないプログラムです。

float x = random(0, width);
float y = random(0, height);

float speedX = 5;
float speedY = 4;

void setup() {
  size(500, 500);

  background(0);
}

void draw() {

  ball(40, 60);
  fill(0, 0);
  rect(0, 0, width, height);
}

void ball(int r, float c) {


  smooth();
  colorMode(HSB, 360, 100, 100);
  noStroke();
  fill(c, 99, 99);
  ellipse(x, y, r, r);
  x += speedX;
  y += speedY;

  if (x < 0 || x > width) {
    speedX *= -1;
  }
  if (y < 0 || y > height) {
    speedY *= -1;
  }
}

このようにキャンバスの外枠に当たると跳ね返る円を描きました。しかし、このままですと毎フレーム描画される円が描かれっぱなしで軌跡が消えていきません。
そこでdraw関数内のfill(0,0)を変えて見ましょう。この一つ目のパラメータは、色相を0〜255で黒から白まで変え、二つ目のパラメータは透明度を表し、値が小さいほど透明になります。つまり、今の状態ですと、背景と同じサイズの黒い無色透明の四角が、黄色い円が描かれた直後に描かれていることになります。
これをfill(0,10)に書き換えると、黒の有色透明となります。これが、冒頭で話したフィルムのような役割を果たし、何度も重ねていくことでだんだんと消えるアニメーションを表現することができます。以下のようになりましたでしょうか。

今回の例では、透明度を変更することで軌跡の長さが変わります。このような表現方法は色々と応用できると思うので、試してみてください。

今回は以上になります。

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

コメント

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