p5.jsで外部ファイルを扱う方法をGoogle Fontsを例に説明する
p5.jsで外部ファイルを読み込んで利用する手順を，フォントを読み込む例としてまとめておく．フォント以外にも音声ファイルや画像ファイル，映像ファイルを読み込めるようだ．アップロードできる容量は制限があるものの，Webでのグラフィックス表現としては必要十分な印象．また外部ファイルを利用する場合はプリロードで事前読み込みの処理が必要になる．
概要
p5.jsでは.otfファイルと.ttfファイルを読み込んで利用できる．
ここでのおおまなか方針としては
- Google Fontsからファイルをダウンロード
- p5.js Editor またはopenProcessingでフォントをアップロード
- p5.jsで読み込む
という手順になる．
1. Google Fontsからファイルをダウンロード
- Google Fontsで使いたいフォントを探す．Google Fontsはフリーでオープンソースのフォントのリスト，公開されているものは誰でも自由に使うことができる（via aboutページ）． Webなのであんまり色んな種類のフォントを読み込むと重くなりそうなので1~2書体くらいから始めるのが良さげ．最初は英字フォントから始めるのが良さげ．段落っぽい文章や，カスタムのテキストでフォントのルックを確認できて良い．右サイドバーのカテゴリーでフォントの種類を絞り込みができる．
- フォントリストの右上「＋」のアイコンで使用したいフォントをリストに追加できる．「1 Family Selected」という表示が画面下にでるので，そのタブをクリックすると，HTML/CSSでのフォントの埋め込みや指定の方法がガイドされている．ここではフォントファイルをダウンロードしたいので，画面右上のダウンロードアイコン（下向き矢印）をクリックしてダウンロードする．
- ダウンロードしたZipファイルを解凍するとフォルダ内に複数フォントが入っている場合がある．プレビューするなどして使用したい該当のフォントを確認しておく．
2-1. p5.js Web Editorでのフォント読み込みの手順
- p5.js Web Editorの画面でログイン（アカウント登録が済んでない場合は登録）して，エディア画面左上にある「＞」アイコンをクリックするとファイルリストが表示される．本来p5.jsではjsファイルだけではなくてHTMLやCSSもセットなのだけど，それが最初の段階では意識しなくて良い設計になっているのがこのWeb Editorの良いところ．
- ファイルリストを開いた画面で「project-folder」の右にある「V」のアイコンをクリックすると「Add File」が表示されるのでこれをクリックする．ファイルを選択する．アップロードされて完了したら閉じてOK．
2-2. OpenProcessingでのフォント読み込みの手順
- OpenProcessingのファイル読み込みはひと手間ある．ログインして「Create a Sketch」から新規スケッチを作成する．作成したスケッチファイルを一度保存しないと外部ファイルをアップロードできないので，一旦保存する．再度開いて以下のような手順（点が3つ縦に並んだアイコンをクリックしてメニューを表示して，Files > Upload Filesでファイルをアップロードする．アップロード後，一度保存しないと後述のpreloadなどが効かないので，テストコードを書いたりする作業はp5.js Web EditorでやってからOpenProcessingに移植するほうが安全な印象．
3. p5.jsでフォントファイルを読み込む
詳細はコメントで．
// フォントの変数 let font; // 事前読み込み処理:外部ファイルは基本ここでロードする． function preload() { // setupより先に実行 font = loadFont("Lato-BlackItalic.ttf"); } function setup() { createCanvas(400, 400); textFont(font); // フォントをtextに設定． } function draw() { background(128); //文字に対して塗り，線の設定ができるのは便利 fill(0); stroke(255); strokeWeight(10); textSize(120); //フォントサイズを200px textAlign(CENTER, CENTER); //左右上下中央揃え textLeading(110); //行間の設定 text("Hello\nWorld", width / 2, height / 2); // "\n"で改行 }
