babylonjsのease系関数をechartsで可視化してみた

こんにちわ。nap5です。

babylonjsのease系関数をechartsで可視化してみたので紹介したいと思います。

babylonjsのドキュメントはこちらです。
全部で12個ありますが、今回は一部のみ可視化してみました。

Search page | Babylon.js Documentation

echartsのドキュメントはこちらです。

Smoothed Line Chartを使用しました。

Examples - Apache ECharts

babylonjsとechartsの両方をいじってみたかったので、デモではまとめてみました。

デモサイトです。

Hello React!

デモコードです。

Glitch Code Editor ･ﾟ✧

コードも公開しているので、細かいのはそちらを見ていただくことにして、ポイントとなる点を抜粋します。

使い方としては補間値 t に0から1の範囲の値を与えてイージング結果を得るようなイメージです。

import { samples } from "culori";
import babylonjs from "babylonjs";
const { SineEase } = babylonjs;

const easeSine = new SineEase();

const resultList = [];
samples(10).map((t) => {
  resultList.push({ t, easeSine: easeSine.ease(t) });
});

console.table(resultList);

こちらが実行結果です。

$ time node index.js
┌─────────┬────────────────────┬─────────────────────┐
│ (index) │         t          │      easeSine       │
├─────────┼────────────────────┼─────────────────────┤
│    0    │         0          │          0          │
│    1    │ 0.1111111111111111 │ 0.01519224698779198 │
│    2    │ 0.2222222222222222 │ 0.06030737921409168 │
│    3    │ 0.3333333333333333 │ 0.1339745962155613  │
│    4    │ 0.4444444444444444 │  0.233955556881022  │
│    5    │ 0.5555555555555556 │ 0.35721239031346075 │
│    6    │ 0.6666666666666666 │         0.5         │
│    7    │ 0.7777777777777778 │ 0.6579798566743313  │
│    8    │ 0.8888888888888888 │ 0.8263518223330696  │
│    9    │         1          │          1          │
└─────────┴────────────────────┴─────────────────────┘

real    0m0.575s
user    0m0.636s
sys     0m0.077s

イージング関数経由の補間値を適用した座標移動などは以下のサンプル等が参考になるかもしれません。

Easing

Ease-y Breezy: A Primer on Easing Functions | CSS-Tricks

やり方としては入力ドメイン(domain)と出力レンジ(range)を定義したスケール関数を作って、イージング関数経由の補間値をこの関数に適用させるだけです。d3のスケール関数はデフォルトで入力ドメインを0から1の範囲で受け取るので、省略することもできます。

以前に紹介したpopmotionのinterpolate関数やframer-motionのtransform関数（アンドキュメント）のインターフェースと同じイメージです。

const yScaler = d3.scaleLinear().domain([0, 1]).range([0, 800]);
const yScaler2 = d3.scaleLinear().range([0, 800]);

const dy = yScaler(new QuarticEase().ease(progress));

この手のイージング関数はトランジションする振る舞いを定義しているライブラリであれば、用意されてあることがほとんどだと思うので、提供されているものをそのまま使用するのがいいと思います。

イージング関数をカスタムしていく場合などには上記のようなイメージでイージング関数結果をアタッチしていくのがいいと思います。

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

FaunaDBを使用したRSSキュレーションミニシステムの構築

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。