Toshi
Omagari

GIFアニメのバリアブルフォント
GIFアニメのバリアブルフォント
GIFアニメのバリアブルフォント
GIFアニメのバリアブルフォント

種類:技術デモ
リリース年:2017
マイクロページのリンク

この記事を書いている2020年の時点ではバリアブルフォントはまだ新技術であり、値段のついた商品よりも技術的実験のような作品の方が多い印象があります。バリアブルフォントの伝道の重要人物であるLawrence Penney(ローレンス・ペニー)はマイブリッジの馬の連続写真をバリアブルフォントに書き起こしたアニメーションのデモを公開していましたが、それに触発されて私も何か作りたくなり、フォーマットの限界を探るべくGIFアニメをバリアブルフォント化する実験に取り組みました。

フォントを補間するには開始値と終了値の2つのマスターデザインが必要ですが、バリアブルフォントではその中間のマスターを何個も追加できます。こうすれば必要なフレームを追加できますが、アニメGIFを再現する場合はフォントと違って動かす対象は物体ではなく、各ピクセルとなります。つまりピクセルを正方形として描き、その大きさで色を再現するのです。各マスターには何千もの正方形が並びます。

ここまではいいですが、カラー作品の場合はどう対処すべきでしょう? カラーフォントといえば複数のフォーマットがあり、バリアブルフォントと組み合わせられるものもありますが、問題は色のRGB値は補間不可能ということです。黄色のパスと黄緑のパスとは補間できません。この問題は液晶パネルのサブピクセルのようにアニメーションをRGBレイヤーに分解し、それを別々の3つのグリフに割り当てることで解決しました。なお色の値を正方形の大きさに落とし込む場合は寸法ではなく面積が比例しなければいけないため、ちょっと工夫が必要です。またTrueTypeではTrueTypeでは点の小数座標が使えないため、正方形を斜めにでもしないと近似値が得られません。RGB版の方ではそもそも縦方向にしかサイズが変わらないようにしています。

色の実装はRGBの各チャンネルをABCの3グリフに振り分け、Aにフルのキャンバス幅、BとCのグリフ幅を0に設定することでオーバーレイさせています。それを使用アプリケーション側で赤青緑に塗っています。カラーのバリアブルフォントも可能なのでそういう実装方法もありましたが。

出来上がったテストフォントは、Retina Displayの精細さも助かってか綺麗に仕上がりました。モバイル機器でも動きますが、パフォーマンス面ではかなり火を拭くようです。効率がおそろしく悪いとはいえ、フォントに動画を放り込めるという事実にはワクワクさせられますし、もうちょっと頑張れば音をアウトラインとして収録し、どうにかして音として再生できるかもしれません。

いちおうフォントですが書体ではないので、フォント以外ということでカテゴライズしています。