蝶のグラフィックを絵文字🦋から拝借する ― p5.jsで絵文字を再描画

はじめに

蝶をモチーフにしたグラフィックを作ってみようと思案していましたが、具象的な形状を座標制御のみで表現するのはなかなか難しいものです。そこで、絵や写真を読み込んで再描画することにしました。...では、蝶の画像や写真はどこから？

というわけで、絵文字を使うことにしました。p5.jsは'text()'関数で絵文字をそのまま使用できるので、とても便利です。

作り方

早速、🦋をキャンバスに大きく表示してみましょう。本当にただテキストの描画位置を決めて入力するだけですね。

function setup() {
createCanvas(600, 600);
background(240);
textAlign(CENTER, CENTER);
textSize(width * 0.8);
text('🦋',width/2,height/2)
}

大きな蝶が遊びに来てくれました

さて、ここまでは'text()'関数の確認のようなものです。このグラフィックから再描画するために少し工夫します。

1. 絵文字をオフスクリーンキャンバスに描画（表示はされない）
   'createGraphics()'関数で仮想のキャンバスみたいなものを作り、こちらに'text()'関数で絵文字を描画します。今回、同じキャンバスサイズに設定したので、アスペクト比は考慮しなくていいはず…。

2. オフスクリーンの絵文字から色情報を取得
   仮想キャンバスにアクセスし、'get()'関数で色に関する情報を取得します。得られる値は[R, G, B, A]のような配列で、4つ目の値'A'、つまり透過度が0ではない座標に絵文字が描かれていることになります。もちろんRGBの各値も使えます。後述のコードではRGB値の総計で描画対象となる座標を判断しています。

3. 座標データをもとにキャンバスに再描画
   色情報として有効な座標が分かったら、それを描画に利用するだけです。

文章にすると方法自体は分かりやすいですが、実際にコーディングする過程でいろいろと躓きました。あれやこれや調べたり手を借りたりして、無事に新種の蝶がキャンバスにやってきてくれました。このコードでは取得した座標に基づいて、同じ色の矩形を配置しています。また、配置したオブジェクトの形状を強調するために、それぞれにランダムな透過度に設定しました。

function setup() {
createCanvas(600, 600);
background(250,250,240)
pg = createGraphics(600, 600);
pg.textAlign(CENTER, CENTER);
rectMode(CENTER);
pg.textSize(pg.width * 0.8);
pg.text('🦋', pg.width / 2, pg.height / 2);

noStroke();
for (let i = 0; i < width; i +=20) {
for (let j = 0; j < height; j += 20) {
let c = pg.get(i, j);
if(c[0]+c[1]+c[2]>100){
fill(c[0],c[1],c[2],random(150,200));
rect(i,j,random(30));
}
}
}
}

形は同じ

アレンジ

いくつかアレンジを試しました。

🐙：2グループに分けて明滅させる

🌵：各円を別の大きい円周上に動かす

🦋：浮動する頂点と線分で結ぶ

おわりに

コードのパフォーマンスとしては無駄が多いと思いますが、いろいろと遊べました。Emojipedia（めっちゃいいサイト。眺めるだけでも面白い）によると、利用した絵文字はWindows 10 Anniversary Updateで2016年に実装されたものです。Microsoft Typography documentationではSegoe UI Emoji font familyとして記載されていました。

今回、生成AIではなく絵文字を使った理由は、冒頭の通りp5.jsで直接絵文字を扱えるからです。プロンプトをいろいろ試すよりも初動が早いと思います。また、絵文字は小さい画面でもある程度は認識できるように設計されており、ほどよいデフォルメが施されていて、そもそもグラフィックデザインとしての完成度が高いと思います。利用規約に抵触しない用途で、ベンダーやデザイナーに敬意をもって活用したいですね。