はじめに
Slack や Discord で使える,絵文字を生成するツールを作りました.
こちらから使うことができます.
絵文字ジェネレータは Web 上探せばいくつもありますが,どれも文字の配置が整然としていて,味気なさを感じています. そこで,もっとフリーダムに文字を配置するツールがあっても面白いのではと思い作成しました.
文字列を入力すると,以下のような画像が出力されます.
文字の色や配置,大きさは全て自動で決定されます.
色の決め方
背景色が白(ライトモード)である場合もあれば,黒(ダークモード)である場合もあります. そのため,どちらの場合においてもある程度の視認性を確保する必要があります.
そこで,HSV 色空間で色の決定を行っています.HSV 色空間では,色相 H,彩度 S,明度 V の 3 つのパラメータによって色を決定します.
- H(色相):完全ランダム
- S(彩度):最大値 1
- V(明度):[0.7, 0.9] の範囲からランダムに選択
このように設定することで,背景とのコントラストを保ちつつ,見やすくカラフルな仕上がりになります.
文字の配置
以下のような手順で文字の配置を行っています.
- 初期配置 入力された文字列の長さに応じて,同数の小さな正方形をキャンバス上にランダムに配置します.これらの正方形はは今後文字を描画する候補となる領域です.
- 正方形の拡張 ランダムに選んだ正方形に対して,左上・右上・左下・右下のいずれかの方向に広げる操作を繰り返します. 他の正方形やキャンバスの境界と干渉しない限り,拡張を続けます.
- 文字の割り当て 最終的な正方形の配置に対して,横書きの視認性を考慮して並び順を決定し,それぞれに文字を割り当てます.
加えて,候補となる正方形を並行移動させたり,境界と接する条件を課したりすることでゆかいな配置が完成します.
おわりに
あまりに長い文章を入力とすると,カオスな絵文字が出来上がってしまいます.そのため,短めの入力(4 文字以下)を推奨します.
長めの文章でもうまい配置ができる手法が思いついたらまた再挑戦します.