Google Material IconsはGoogle Fonts感覚で使えるアイコン集です。



emojiも楽しいですが、プレーンなアイコンも心ひかれますよね！

p5.jsで利用する時はこんな感じです。


See the Pen https://codepen.io/reona396/pen/bGajyMP">
p5_icon_00 by reona396 (@reona396)
on CodePen.



html側でGoogle Material Iconsを読み込み、p5.jsのコード内でフォントを指定します。
アイコンにはcodepointが設定されているので、それを unhex() を利用して10進数にしたうえで char() でアイコンに変換します。

テキストのように色を変えたり、線の太さを変えたりもできます。


See the Pen https://codepen.io/reona396/pen/oNpMRaq">
p5_icon_01 by reona396 (@reona396)
on CodePen.



emojiは色で特徴を伝えているものが多いですが、
アイコンは単色での使用が多いためか、シルエットで特徴を伝えているのが面白いですよね。
というわけで erase() でシルエットをぶち抜いてあげても面白いです。
ゲーミングどこかへ向かう人です。


See the Pen https://codepen.io/reona396/pen/PoEBvMr">
p5_icon_02 by reona396 (@reona396)
on CodePen.



codepointの一覧からアイコンをランダムに選択する作例です。
クリックするたび、ランダムなアイコンを3つ並べます。


See the Pen https://codepen.io/reona396/pen/XWVBLaE">
p5_icon_03 by reona396 (@reona396)
on CodePen.



codepointの一覧の取得方法をメモしておきます(ほとんどExcelの使い方の話ですが…)。
Google Material IconsのGitHubリポジトリからcodepointの一覧をコピーします。
Rawボタンを押して全選択&コピーです。
https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints

コピーした内容をExcelにペーストします。
このままだとアイコン名とcodepointが同じ行になってしまっているので、
codepointだけ取り出すために データ > 区切り位置 を選択します。
区切り記号付き > スペース > 標準 を選択して完了ボタンを押します。

A列にアイコン名、B列にcodepointが分離しました。

codepointをダブルコーテーションで囲むため、C1に以下のように入力します。
=""""&B1&""""

C1に「ダブルコーテーションで囲まれたB1」が入りました。


C1をコピーしておきます。
A1のセルを選択した状態で(Macでは)Control+Endを押すとC列の一番最後であるC2183まで移動できます。
名前ボックスに「C2183」と表示されているので「C2:C2183」と書き足します。



Enterキーを押して範囲選択したらCommand+Vでペーストします。
これで各行のcodepointをダブルコーテーションで囲んだ状態にできました。



VSCodeを開き、先ほどのEXCELのC列をコピペします。
置換ボックスから正規表現をオンにした状態で置換元「\n」→置換後「,」にします。
カンマ区切りにできたのであとは配列の中身として定義してあげれば完成です。
完成済みのコードはこちらにあります。


See the Pen https://codepen.io/reona396/pen/XWVBLaE">
p5_icon_03 by reona396 (@reona396)
on CodePen.



こんな感じの作品も作ってみました！



アイコンを素材として活用するの楽しいのでぜひやってみてください〜