Twitter にアップされた無限ループ動画、ついつい見ちゃいますよね。

無限ループ動画といえば GIF 形式の動画が有名ですが、Twitter の場合 GIF ループ動画でなくともループさせることができます。
今回は GIF ループを使わない方法でやってみましょう。

どうやってループさせる？

Twitter の FAQ に『Twitterに投稿された6.5秒以下の動画はすべて自動的にループ再生されます』とあります。

つまり、何も考えずに 6.5秒以下の動画を作ってアップすれば、自動的にループ再生されるわけです。

『6.5秒以下の動画はループされる』は 2018年9月4日時点の情報です。2020年9月20日現在では『60秒以下の動画はループされる』です。

でもこれだと、ブツ切れのアニメーションが繰り返し再生されてるだけですよね？

動きがずっと無限に続くように見せるには初めと終わりを繋げる必要があります。
例えば、上から下、左から右に通り過ぎるようにするとか、

円運動をさせるとか。

でも、これだけじゃちょっと単調？

複雑な動きもループさせられる？

さっきの円運動、これを形作る sin/cos の値って -1..+1 の間をずっと繰り返しループするわけですよね？

これを、アニメーションの動きを制御するパラメータに組み込めば、円周上を動くのと同様にずっと切れ目なくスムーズに繰り返しの動きを続けるアニメーションを簡単に作ることができます。

ちょいとひと工夫すると、こんな複雑な動きもきれいにループさせることができるんです。

具体的には、Processing を例に 15fps x 6秒のアニメーションを作るとして、
   sin(TWO_PI * frameCount / (15 x 6))
の値を使えば、ゼロフレーム目と最終フレームが綺麗につながるわけです。

ただ、sin() の値が動きに直結するような動画だと『行って戻って』の感じが強く出ちゃうことがあるので、ノイズを混ぜるとかの工夫も必要になるでしょう。

作例

// Twitter 無限ループアニメーションの作り方
// @author @deconbatch
// @version 05 作例
// Processing 3.2.1
// 2018.09.02
// 15fps x 6s = 90f

void setup() {
  size(720, 720);
  colorMode(HSB, 360, 100, 100, 100);
  blendMode(SCREEN);
  noStroke();
  smooth();
}

void draw() {
  background(0, 0, 0, 100);
  translate(width / 2, height / 2);

  // このパラメータを変えると動きが変わります。
  float paramWaveX = 0.995;
  float paramWaveY = 1.005;
  float paramBendX = 1.0;
  float paramBendY = 1.0;

  int   spotCntMax = 100;
  int   frameCntMax = 15 * 6;

  for (int spotCnt = 1; spotCnt <= spotCntMax; ++spotCnt) {

    // ここの radian の計算がミソ！
    float radian   = TWO_PI * frameCount / frameCntMax;
    float startPos = map(spotCnt, 1, spotCntMax, TWO_PI * 100.0, 0.0);
    float radius   = sin(map(spotCnt, 1, spotCntMax, 0, PI * 0.5)) * 280 + 50;
    float hueApply = map(spotCnt, 1, spotCntMax, 200.0, 260.0);

    float x = radius * cos((radian + startPos) + sin((radian + startPos) * paramWaveX) * paramBendX);
    float y = radius * sin((radian + startPos) + cos((radian + startPos) * paramWaveY) * paramBendY);

    fill(hueApply, 40.0, 60.0, 100.0);
    ellipse(x, y , 13.0, 13.0);
    ellipse(-x, -y , 13.0, 13.0);

  }

  saveFrame("frames/####.png");
  if (frameCount > frameCntMax) {
    exit();
  }

}


/*
Copyright (C) 2018- deconbatch

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>
*/

ライセンスは GPLv3 にさせていただきました。
ご自由にお使いください。

制限を加えられるとクリエイティビティが増すという話もあります。
6.5秒という制限の下で、あなたのクリエイティビティを輝かせてみませんか？

まとめ

・Twitter では 6.5秒以下の動画は自動的にループ再生される
・初めと終わりをきれいに繫げるには sin() を使うと良いですよ

参考

Processing で動画を作る方法はこちらもご参照いただければ。