Domain: Font
https://gyazo.com/05966dccb71cb830625df3387aab9e6d
プレビュー
https://gyazo.com/32877eddd80b3fdf048944dc099bce03
要件
できればかっこいいフォントが良い
FUI（Futuristic UI）っぽい雰囲気を演出したい 当然footprintは小さく
64KB Introなので
できれば1-2KBで済むと良いな
モチーフ
https://gyazo.com/ba2b9599476d47c0d0493813dd29ef28
いかにもおたくが好きそうなフォントですね
課題
フォントファイルをそのまま収録する訳にはいかない
otfをそのまま収録しようとすると、各ファミリーごとに46KBくらい・LZMAで圧縮しても14KBくらい 64KBに納めることを考えると、ブラウザはotfファイルを簡単にパースできる能力はあれど、それにしても高くつきすぎ
方針
2D CanvasにStrokeを用いて文字を描画し、CanvasをTextureとして利用し描画する方針とした
他の択
2D Canvasでスプライトシートを作ってWebGLで1文字ずつレンダリングする
👍 1文字ごとに3D空間を動かしたりシェーダを当てたりできる
👎 文字幅のことを考えるのが面倒
👎 スプライトの実装が面倒
頂点をVertex Bufferに送ってWebGLでストロークを描画する
👍 Vertex Shaderあそびができる
👍 頂点にポイントスプライト置くみたいな遊びもできる
👎 WebGLのライン描画（gl.LINES）は線幅が制御できず貧弱
仕組み
頂点の位置データ
頂点の位置データについて、圧縮効率を上げる工夫をした
https://gyazo.com/7f8a96738d91029d29a37b0a8f55ece2
7x7のグリッドに頂点を撒き、線で結ぶ
グリッドはちょっと不均一にしてスタイライズ
頂点位置の収録は以下のように charArray に対してcharcodeと一対一で行う:
code:ts
[
'16 12,11 10', // !
'16 15,36 35', // "
'05 65,01 61,16 10,56 50', // #
'65 56 16 05 04 13 53 62 61 50 10 01,36 30', // $
'06 26 24 04 06,42 62 60 40 42,66 65 01 00', // %
// ...
0 から 6 までの数字の2個ペアが頂点位置
（スペース）が "lineTo"
, が "moveTo" を表す
文字幅
文字幅 widthArray に対してcharcodeと一対一で収録する
基本全部同じ幅だが、 Ii なり ()[]{} なりに対して小さめの文字幅を付与
Canvasへの描画
これまでの定義に基づいて、canvasに moveTo ・ lineTo とかで線を描画していくだけ
ついでにVHSフォントも
一部文字の頂点位置・グリッドの間隔・文字幅をいじってやったら、ついでにVHS風フォントも作れたのでラッキー
https://gyazo.com/d489eac5b6b6ea309246524d066a3a8e
https://gyazo.com/78093538b70de46d9cc793f123b7a3fd
実装
圧縮効率
https://gyazo.com/f51fe91e62552f8af0e83c4d83feceb4
反省点
文字ごとに丁寧に配列の各要素にするよりも、; 区切りとかにしたほうが圧縮効率良かったかもね
（スペース）区切り、実は圧縮効率そんなに良くなかったかも。 . のほうがファイル全体で出現頻度大きいか
base49で頂点位置のxyを表現するのも試してみて良かったかもね。編集とパースが面倒にはなるが