【完走賞ゲット-1】p5.js  Web Editor で Google Fonts の絵文字の Webフォントを利用する

## はじめに

こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 1日目の記事です。
~~以下の ∞名へのプレゼントをゲットするため~~ アドベントカレンダー投稿駆動開発でスキルアップを図るために作成したものです。

https://twitter.com/youtoy/status/1587393773826633731

ちなみに、この完走賞ゲットを狙うカレンダーを作る前に、既に他の多数のカレンダーへも登録も行っています（それと、よく 12月の途中でカレンダーへの登録を増やす、ということもよくやります）。
そういった状況があるため、このカレンダーの記事では、毎回小ネタを書いていくつもりです。

12/1 スタート時点で、40記事以上を書く感じになっている...

### 【余談】 1日目に登録をしている別のカレンダー
ちなみに、1日目に書いたもう1つの記事があり、それは [Adventar](https://adventar.org/) で立ち上げられている「[Processing Advent Calendar 2022](https://adventar.org/calendars/7370) の 1日目の記事にしています。
その記事で扱っている話は、本記事でも扱っている「p5.js」に関する内容です（具体的には以下の記事です）。

[■ 【Processing 2022】@yuruyurau さんの #つぶやきProcessing のプログラムを短縮されてない #p5js のプログラムにした結果と過程の話 - Qiita](https://qiita.com/youtoy/private/263f407021c4b3003365)

## 本編
### 今回の概要
今回の内容は、Web上で p5.js を使った開発・動作確認などが行える環境の「[p5.js  Web Editor](https://editor.p5js.org/)」 で、Google Fonts の絵文字の Webフォントを利用する方法です。
なお、今回の記事では「p5.js Web Editor とは？」という内容や、使い方の詳細説明は扱いません。

### 補足
p5.js はブラウザ上での描画処理のためのライブラリです。
自分は、この [p5.js](https://p5js.org/) を好んでよく使っています。Qiita でも、よく p5.js の記事を書いていたりします。

[⇒ Qiita で「p5.js user:youtoy」で検索した結果](https://qiita.com/search?q=p5.js+user%3Ayoutoy)

#### 余談： p5.js を普段利用している話
また、他のライブラリ・仕組みなどを組み合わせた試作もよくやっています。

少し余談になりますが、「入力を機械学習ベースの画像認識、出力を p5.js の描画」という組み合わせを試したり、「2台あるデバイスのそれぞれのブラウザの描画領域を、リアルタイム通信（IoT でよく出てくる MQTT）でつなぐ」ということをやってみたり、その他にもいろいろです（以下は、その一例です）。
わりと思いつきで何か作ってみる、というのをよくやっています。

https://twitter.com/youtoy/status/1558731638783492099

https://twitter.com/youtoy/status/1436663697435291648

### 本題
それでは今回の本題です。
今回やりたいことは、Google Fonts の Webフォントを p5.js での描画に利用することです。

#### 試してみる絵文字フォント
これをやった背景は、Google Fonts で見かけた以下の絵文字を、p5.js の描画で活用できそうかどうか試したかったためです。

●Noto Emoji - Google Fonts
　https://fonts.google.com/noto/specimen/Noto+Emoji
![Noto Emoji](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ab9d28a1-faec-8afb-56d5-e10d2bcb8ea4.png)

●Noto Color Emoji - Google Fonts
　https://fonts.google.com/noto/specimen/Noto+Color+Emoji/
![Noto Color Emoji](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cad5e278-3476-4f60-f793-f1e5887906a0.png)

#### 普通の絵文字を使う場合の話
Webフォントの絵文字ではなく、単に絵文字をだしたいだけなら、Webフォントは不要です。

ミニマムな例で示してみます。
以下はプログラムと実行結果で、絵文字がキャンバス上に表示されているのが分かります。

```javascript:sketch.js
const emoji = "🎁🦌🎅🏻🔔🎄🌟";

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(0);
  textSize(30);
  text(emoji, width*0.25, height / 2);
}
```

![通常の絵文字の表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e2c0c166-9faa-ca73-8529-388771978b69.png)

#### Webフォントの絵文字を使う（Noto Color Emoji）
それでは、上で使っていた絵文字の表示を、Webフォントを使ったものにしてみます。

sketch.js ではなく index.html を開き、以下の画像のように絵文字の Webフォントを読み込むための行を追加します。
![index.html](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0e8f6747-6997-5141-d339-6c38e93debad.png)

追加した部分を以下で示します。2つのフォントのうち、Noto Color Emoji のほうです。

```html
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
```

また、sketch.js　のほうは、この Webフォントを指定する行を追加します（ `textFont("Noto Color emoji");` という行を追加 ）。
以下がプログラムと出力結果です。

```javascript:sketch.js
const emoji = "🎁🦌🎅🏻🔔🎄🌟";

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(0);
  textSize(30);
  textFont("Noto Color emoji");
  text(emoji, width*0.25, height / 2);
}
```

![Webフォントのカラー絵文字](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fbe74099-ba5a-cb07-8deb-a4cd7b85eca1.png)

先ほどと比べると、絵文字の見た目が異なっているのが分かります。

#### Webフォントの絵文字を使う（Noto Emoji）
上記の「Noto Color Emoji」を「Noto Emoji」に置きかえて、表示結果を確認してみます。

単純に絵文字の種類を置きかえるだけだと、こちらの場合は黒文字で背景が黒になるため、絵文字が見えなくなります。そのため、 `fill(255);` を加えて白文字にしました。

```javascript:sketch.js
const emoji = "🎁🦌🎅🏻🔔🎄🌟";

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(0);
  textSize(30);
  fill(255);
  textFont("Noto emoji");
  text(emoji, width * 0.25, height / 2);
}
```

表示結果は以下の通りです。無事に Noto Emoji が表示されています。

![Noto Emoji](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0299c161-8beb-0ffa-40b7-3d29b0a0576a.png)

## おわりに
これで無事、p5.js  Web Editor で Google Fonts の絵文字の Webフォントを利用することができました。

### アニメーションを加える
ちなみに、Webフォントの絵文字利用とアニメーションを組み合わせると、以下のようなものなどを p5.js で作ることができます。

https://twitter.com/youtoy/status/1586320627463770113