LoginSignup
3

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-11-30

はじめに

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

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

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

【余談】 1日目に登録をしている別のカレンダー

ちなみに、1日目に書いたもう1つの記事があり、それは Adventar で立ち上げられている「Processing Advent Calendar 2022 の 1日目の記事にしています。
その記事で扱っている話は、本記事でも扱っている「p5.js」に関する内容です(具体的には以下の記事です)。

■ 【Processing 2022】@yuruyurau さんの #つぶやきProcessing のプログラムを短縮されてない #p5js のプログラムにした結果と過程の話 - Qiita

本編

今回の概要

今回の内容は、Web上で p5.js を使った開発・動作確認などが行える環境の「p5.js Web Editor」 で、Google Fonts の絵文字の Webフォントを利用する方法です。
なお、今回の記事では「p5.js Web Editor とは?」という内容や、使い方の詳細説明は扱いません。

補足

p5.js はブラウザ上での描画処理のためのライブラリです。
自分は、この p5.js を好んでよく使っています。Qiita でも、よく p5.js の記事を書いていたりします。

⇒ Qiita で「p5.js user:youtoy」で検索した結果

余談: p5.js を普段利用している話

また、他のライブラリ・仕組みなどを組み合わせた試作もよくやっています。

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

本題

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

試してみる絵文字フォント

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

●Noto Emoji - Google Fonts
 https://fonts.google.com/noto/specimen/Noto+Emoji
Noto Emoji

●Noto Color Emoji - Google Fonts
 https://fonts.google.com/noto/specimen/Noto+Color+Emoji/
Noto Color Emoji

普通の絵文字を使う場合の話

Webフォントの絵文字ではなく、単に絵文字をだしたいだけなら、Webフォントは不要です。

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

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

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

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

通常の絵文字の表示

Webフォントの絵文字を使う(Noto Color Emoji)

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

sketch.js ではなく index.html を開き、以下の画像のように絵文字の Webフォントを読み込むための行を追加します。
index.html

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

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

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

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フォントのカラー絵文字

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

Webフォントの絵文字を使う(Noto Emoji)

上記の「Noto Color Emoji」を「Noto Emoji」に置きかえて、表示結果を確認してみます。

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

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

おわりに

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

アニメーションを加える

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3