こんにちは、昼休みプレインのよっCーです。
昼休みプレインとして活動を始めてからもう１年が経ちます。早いですねぇ…

昼休みプレインは、普段は自作曲を中心に楽曲制作をしている2人組のグループです。
私よっCーとYasuで活動しています。

◆昼休みプレイン3rdシングル『Star Memory』現在公開中！

note記事

リリックビデオ

Apple Music

Spotify

普段音楽活動をしている昼休みプレインですが、私よっCーはプログラマーとしても活動しています。

実は、上で紹介した『Star Memory』のリリックビデオにはプログラムが使われています。

雪の結晶の動き、歌詞のテキストやアニメーションは全てプログラムで制御されています。

『Star Memory』のリリックビデオはAdobe After Effectsで制作しました。

ご存じの方もおられるとは思いますが、Adobe After Effectsでは「エクスプレッション」という動画の動きをプログラムで制御する機能があります。

使用する言語は、JavaScriptの拡張版でAdobe社が開発したActionScriptという言語です。
JavaScriptと互換性があるため、JavaScriptの知識があればコードを記述することができます。

大変お待たせしました。
今回はAdobe After Effectsのエクスプレッションの記述を効率化するコードをご紹介したいと思います。
今回ご紹介するコードは『Star Memory』のリリックビデオでも使用されています。
解説等細かいところで間違っていることもあるかもしれませんが、ご了承ください…

◆現在のフレーム数を取得する関数

const getFrameCount = function()
{
    return parseInt(Math.round(time / thisComp.frameDuration));
}

◆1秒あたりのフレーム数を取得する関数

const getFrame1Sec = function()
{
    return parseInt(1 / thisComp.frameDuration);
}

◆最大フレーム数を取得する関数

const getMaxDuration = function()
{
    return thisComp.duration * getFrame1Sec();
}

◆中心座標・距離・角度を指定して座標を求める関数など

class Position
{
   constructor(numX, numY)
   {
       this.X = numX;
       this.Y = numY;
   }
}
const numRad1 = Math.PI / 180.0;
const calcRadian = (rotation) => rotation * numRad1;

const getCirclePosition = function(position, distance, rotation)
{
    return new Position(position.X + Math.cos(calcRadian(rotation)) * distance, position.Y + Math.sin(calcRadian(rotation)) * distance);
}

◆まとめ（コピペ用）

class Position
{
   constructor(numX, numY)
   {
       this.X = numX;
       this.Y = numY;
   }
}
const numRad1 = Math.PI / 180.0;
const calcRadian = (rotation) => rotation * numRad1;

const getCirclePosition = function(position, distance, rotation)
{
    return new Position(position.X + Math.cos(calcRadian(rotation)) * distance, position.Y + Math.sin(calcRadian(rotation)) * distance);
}

const getFrameCount = function()
{
    return parseInt(Math.round(time / thisComp.frameDuration));
}

const getFrame1Sec = function()
{
    return parseInt(1 / thisComp.frameDuration);
}

const getMaxDuration = function()
{
    return thisComp.duration * getFrame1Sec();
}

◆解説

現在のフレーム数を求める関数

const getFrameCount = function()
{
    return parseInt(Math.round(time / thisComp.frameDuration));
}

timeは秒を表します。1秒の場合は1、1分の場合は60です。500ミリ秒の場合は0.5になります。

thisComp.frameDurationは1フレーム当たりの秒を表します。
この数値はコンポジションの設定で変わります。
1秒を30フレームで設定されていれば30分の1、60フレームで設定されていれば60分の1になります。

つまり、秒数÷１フレーム当たりの秒で何フレームか求めていることになります。

『Star Memory』のリリックビデオでは、歌詞のテキストやアニメーションのタイミング調整で使用しています。

1秒あたりのフレーム数を取得する関数

const getFrame1Sec = function()
{
    return parseInt(1 / thisComp.frameDuration);
}

先述のとおり、thisComp.frameDurationは1フレーム当たりの秒を表します。
この数値はコンポジションの設定で変わります。
1秒を30フレームで設定されていれば30分の1、60フレームで設定されていれば60分の1になります。

つまり、1秒÷1フレーム当たりの秒で1秒当たりのフレーム数を求めていることになります。

『Star Memory』のリリックビデオでは、こちらも歌詞のテキストやアニメーションのタイミング調整で使用しています。

最大フレーム数を取得する関数

const getMaxDuration = function()
{
    return thisComp.duration * getFrame1Sec();
}

thisComp.durationは秒数を表します。
1分間の動画なら60、1時間の動画なら3600になります。

getFrame1Sec関数は1秒あたりのフレーム数を取得するオリジナルの関数です。
詳しくは１つ上の解説をご覧ください。

つまり、1秒あたりのフレーム数×秒数で最大フレーム数を求めていることになります。

『Star Memory』のリリックビデオでは、こちらも歌詞のテキストやアニメーションのタイミング調整で使用しています。

中心座標・距離・角度を指定して座標を求める関数など

class Position
{
   constructor(numX, numY)
   {
       this.X = numX;
       this.Y = numY;
   }
}
const numRad1 = Math.PI / 180.0;
const calcRadian = (rotation) => rotation * numRad1;

const getCirclePosition = function(position, distance, rotation)
{
    return new Position(position.X + Math.cos(calcRadian(rotation)) * distance, position.Y + Math.sin(calcRadian(rotation)) * distance);
}

クラスや定数などがいくつかありますが、getCirclePosition関数を呼びます。

const getCirclePosition = function(position, distance, rotation)
{
    return new Position(position.X + Math.cos(calcRadian(rotation)) * distance, position.Y + Math.sin(calcRadian(rotation)) * distance);
}

下の図の中心座標（position）、距離（distance）、角度（rotation）を指定します。

getCirclePosition関数の呼び方は次のようになります。

pos = getCirclePosition(new Position(中心X座標, 中心Y座標), 距離, 角度)

positionはコード上部にあるオリジナルのクラスのPositionクラスを使用します。そのため、getCirclePosition関数の第１引数はnewを使用しています。

class Position
{
   constructor(numX, numY)
   {
       this.X = numX;
       this.Y = numY;
   }
}

『Star Memory』のリリックビデオでは、雪の結晶を動かすために使用しています。

雪の結晶をよく見てみると、いろいろな角度に動いていることがわかります。
ちなみに、角度や最初の座標はランダムになっています。

ランダムにうまく動かすためには、最初に次の関数を呼びます。

seedRandom(0, true);

その後ランダムな数値を取得するには、次の関数を呼びます。

random(最小値, 最大値);

◆年末に東京旅行に行きました！

◆昼休みプレイン1stアルバム『夜明けプレイン』現在公開中！

note記事

Apple Music

Spotify

◆昼休みプレインとは？

2015年、動画投稿サイトにて有名アーティストの楽曲をカバーしていたYasu（やす）とよっCー（よっしー）。
半年で一度解散をするが、4年の月日を経て再度「昼休みプレイン」として新プロジェクトを始動。
昼休みプレインは、よっCーがメロディーのラフを考え、それにYasuが伴奏を付け加えるといった今までにないプロジェクトだ。
データのやり取りや打ち合わせなどをインターネット上で行ったりなど、最新の技術を取り入れてプロジェクトを進行している。