再生速度を半分にしGenArtをキャプチャする

QuickTime等でブラウザを画面キャプチャすることがある。 fpsは安定しないが使わざるを得ないときもあり、 その際、「再生速度を1/n倍にし、後で映像ソフトやffmpegでn倍速にする」と、等速より安定する。

ただ、フレームベースの処理と、時間ベースの処理が混じってることも多い。 フレーム系と時間系で頭が混乱したので、以下にまとめる。再生速度を半分にし録画したい場合。

フレーム系

• frameScale = 0.5
• p5jsのframeRateを半分にする（例30→15
• 各種update関数のframeRateも半分にする

時間系

• timeScale = 2
• setTimeoutを２倍にする（1000msec待つ → 2000msec待つ
• gsap等のtweenerのdurationを２倍にする（duration: 1sec → 2sec

gsapのラッパー

import { Params } from './Params';
import gsap from 'gsap';

export class MyTween {

    public static to(target:any, vars:any):void{

        if(vars.duration!=undefined){
            vars.duration = vars.duration * Params.timeScale;
        }
        if(vars.delay!=undefined){
            vars.delay = vars.delay * Params.timeScale;
        }

        gsap.to(target, vars);

    }

    public static delayedCall(delay:number, callback:any):void{

        gsap.delayedCall(delay * Params.timeScale, callback);

    };

}