p5.js・クリエイティブコーディングで絵文字を活用する【My Creative Coding - 私の作品づくり -】 #JavaScript

この記事は、「My Creative Coding - 私の作品づくり - Advent Calendar 2023」の 3日目の記事です。

今回の内容

今回の記事の内容は、例えば以下のような「絵文字の活用」に関するものです。

絵文字を使った事例1

p5.js を使ったクリエイティブコーディングや、その他の p5.js 以外のものを使った作品作りの中で、ある時「絵文字が画像素材的に使える」というのを知りました。

そして絵文字を使う場合、画像を使うよりも手軽です。
少し処理の流れの違いという観点で補足をすると、画像だと「画像ファイルを用意 ⇒ その読み込み処理 ⇒ 呼び出し・配置の処理」という感じですが、絵文字の場合「テキスト表示のための処理で絵文字を出力するのみ」という感じです。

利用事例としては、例えば以下を作ったことがあります。
この時は、画像ではなくハロウィンに関連する絵文字を使ってアニメーションを作りました。以下の動画の、城や棺桶、お化けやカボチャ、ドラキュラなどは、全て絵文字（🏰、👻 など）を文字表示の処理で使っています。

その他、上のように小さい画像的な感じで絵文字を使うだけでなく、キャンバスの背景で使っている事例をしりました。これも、自分で試してみました。

手軽な処理で、キャンバス全体を覆うほどの大きさの内容を、画像を使ったかのような表現にできるということができ、良い感じです。

絵文字を使った事例2：Webフォントを使って見た目を変える

また、絵文字もフォントになるので、Webフォントで見た目を変えるということも行えます。

例えば、上で示していたハロウィン仕様の作品の絵文字を、Webフォントを使って以下のように見た目をがらっと変えることもできます。

Webフォントを組み合わせる話は、以下の記事に詳細を書いているので、よろしければご覧ください。

●【完走賞ゲット-1】p5.js Web Editor で Google Fonts の絵文字の Webフォントを利用する #JavaScript - Qiita
　https://qiita.com/youtoy/items/34920d8a49f45653d77a

その他の絵文字を使った処理

絵文字を使った処理は、文字の処理となります。

そのため、例えば以下のように、配列に複数の絵文字を格納しておいて、それを配列を処理する関数やメソッドなどで扱うことができます。

ランダムに絵文字を選ぶ

例えば、「絵文字を配列に格納しておき、p5.js の random() を使って、その配列の要素を一つランダムに選んで使う」ということもできます。

以下に、その実例を示します（※ p5.js Web Editor で動作させている様子をキャプチャしました）。以下では、マウスで画面をクリックするごとに、冒頭で配列に格納するよう指定した絵文字が、ランダムに一つ選択され、その選ばれた絵文字がキャンバス上に描画されます。

ソースコードの部分を、以下に記載します。

const emoji = ["🎁", "🦌", "🎅", "🔔", "🎄", "🌟"];

function setup() {
  createCanvas(300, 250);
  background(0);
}

function mouseClicked() {
  background(0);
  textSize(50);
  text(random(emoji), width * 0.4, height / 2);
}

ユニコードで絵文字を扱う

以下の事例は自分が作ったものではないですが、絵文字をユニコードで扱って表示するという方法を用いたものです。

ここでのポイントは、「以下の JavaScript Primer のページ・MDN のページ」などに書かれている「String.fromCodePoint()」を使うことです。

●文字列とUnicode · JavaScript Primer #jsprimer
　https://jsprimer.net/basic/string-unicode/
●String.fromCodePoint() - JavaScript | MDN
　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint

これにより、ユニコードのコードポイントの数字を使って、絵文字などを含む文字を得ることができます。

上記の事例では、このコードポイントの指定に変数を用いていて、柔軟な処理を実現しています。具体的には、 String.fromCodePoint(127137+i%14+j*16) という形で、文字を指定する数字の部分を変動させ、異なる絵文字の表示をこの 1つの処理で実現しています。

自分も、ユニコードを扱う処理を絵文字や絵文字以外で試したものがあるのですが、それらについては少し情報を整理してから、別で記事にしようと思います。

以下は、その事例から抜粋したもので、この時は絵文字の話ではないですが、「ルーン文字」をユニコードを利用して扱いました。

【追記】絵文字に関する記事

記事の公開後、絵文字に関するノウハウがすごくつまった記事を見かけたので、リンクを記載しました

●絵文字を支える技術について｜nona
　https://note.com/ttuusskk/n/n1bff5d8e638c

p5.js・クリエイティブコーディングで絵文字を活用する【My Creative Coding - 私の作品づくり -】