/Test_you

電子工作やプログラミングなど、やってみたことのメモ

Processingで、学戦都市アスタリスクのクレジット表示を真似してみた

アニメ「学戦都市アスタリスク」の2期オープニングのクレジット表示をProcessingで真似してみました

このアニメのCGなどによるエフェクトは、結構気に入っています。その中で目をひかれた、2期オープニングのクレジットタイトル(監督、出演者、スタッフ名など)の表現を、Processingで真似してみました。公式の動画は見当たらず直接紹介できませんが、気になる方はYouTubeなどで探してみてください。

環境

  • Processing 3.5.4

ソースコード

プロジェクト一式は、こちら(asterisk_op2_credit.zip)

ポイント

1.アニメーションの作り方

Processingの時計関数 millis() を使って現在時刻を取得。時間経過によって draw() 関数の描画内容を変化させる事で、アニメーションを行います。
6角形Haxagonクラスを例にとって説明すると、下記の通りです。

  • start()関数は、アニメーション開始を指示する関数です。
    この関数では time_start_ 変数にアニメーション開始時間を保存しておきます。
  void start(int delay_ms, int priod_show_ms, int priod_hide_ms ) {
    time_start_ = millis();
 ・・・
  }
  • draw()関数は、各フレーム毎に呼び出す描画関数です。
    1. time = millis() - time_start_ で、アニメーション開始からの時間経過を取得(a)
    2. 時間経過に応じて、表示内容を4通りに変更
      (b)表示なし→(c)6角形表示(塗りつぶしあり)→(d)6角形表示(枠のみ)→(e)消去
    // (a) アニメーション開始指示からの時間経過を取得
    int time = millis() - time_start_;

    // 時間経過に応じた処理
    // (b) 表示なし
    if ( time < time_disp_ ) {
    }
    // (c) 6角形表示(塗りつぶしあり)
    else if (time < time_hide_ ) {
      ・・・
    }
    // (d) 6角形表示(枠のみ)
    else if (time < time_end_ ) {
      ・・・
    }
    // (e) 消去
    else {
    }

以上で、start()関数を呼び出すと、時間経過によってdraw()関数の描画内容が変化し、6角形が表示・消滅するアニメーションになります。
この6角形クラスを複数個まとめたものが HexagonLine クラスで、各6角形の表示位置・アニメーション開始タイミングをずらす事でライン状にスキャンするアニメーションとしてます。

2.サイバーテキストの利用

スローで再生するとわかるのですが、クレジットの名前は一時的に違う文字が表示され、徐々に正しい名前に置き換わっていく表現になっています。

尚→釘→小野敦→小野学

今回は、類似表現を工学ナビさんのサイトにあるWatch Dogs Profilerで見つけたので、これを改造して利用しました。ただ、表示速度を早くした結果、ほとんど効果が分からなくなってしまいました・・・オリジナルは、かなりカッコいいです。

参考にした情報

  1. deconbatch さん - ぼんやり光る効果を出す簡単な方法 その2 : Processing Tips
  2. 工学ナビ さん - BACK YARD
  3. おもちゃラボ さん - はてなブログでソースコードを折りたたむ方法