ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

【Processing】テキストの輪郭を取得して、変形させる。

成果物

www.youtube.com
テキストの輪郭を取得する方法を見つけたので、カーブの制御点を動かして変形してみました。
www.youtube.com
ただし、変形する際は均一に頂点がある方がきれいな結果が得られるので、そちらのコードも作成しました。変形した後も自然な仕上がりです。

仕組み

カーブで取得するときはこちらのサイトが参考になります。
Processingでフォントのアウトラインを読み取って再構築する - wonderful cool something
多角形で取得するときはこちらのサイトが参考になります。
Processingでフォントのアウトラインを取得する - Qiita
ただし、今回は、均等にサンプリングされていてなおかつ、きちんと表示できるコードが必要だったので、1つ目のサイトを基に独自に改良しました。今回は、曲線を1文字ごと分けて管理することで扱いやすく、表示の破綻が起こりにくいようにしました。また、以下のサンプリングのコードを使うと、等間隔のポリゴンに変換できます。
nekodigi.hatenablog.com

コード

github.com
輪郭を取得するコードはGet Text Outline、そのまま変形させるコードはMove Text Outline、サンプリングして変形させるコードはMove Sampled Text Outlineという名前で追加しています。