【復元】今年のやりのこしを消化するp5.simpleAR【Processing Advent Calendar 2023】
※本記事は消滅した自サイトのブログに投稿していた、Processing Advent Calendar 2023 へのエントリー記事の復元になります。
本稿はProcessing Advent Calendar 2023 への参加記事です。
pixel art x p5.js
まずは狙ったわけじゃないけど意図せず綺麗だったギミックをひとつ紹介します。
マウスの軌道に合わせてサッと現れてスーッと消える星空を作りました。
この星たちはランダムに出現するわけではなく、分布が決まっています。
要素1: ドット絵
穴の開いた画像を用意します。
要素2: パーリンノイズ
画像をパーリンノイズで微妙に表示位置をずらしながら表示します。
back_x = 5-noise(noisex/2)*10;
back_y = 5-noise(noisey/2)*10;
image(imgback, back_x-5*scal, back_y-5*scal, imgWidth, imgHeight);// 画像を表示要素3: 着色
この状態で、デフォルトの背景色を画像の夜空と同じ色に設定し、マウスの軌道のみを白で塗りつぶすようにします。
マウスが通ったところが白抜きされて星となって現れたあと、1の星空画像が微妙に動くことで星が川底の石のごとく削られて、次第に消えていくようになります。
※図形がドット絵らしくなるように描画位置を特定の整数に制限しています。ちょっとだけ詳しい話はこちら。
結果
公開先はこちら。動かせます。
以下、やりのこしたこと【p5.simpleAR】
この作品はもともと Shibuya Pixel Art Fan というドット絵のファンイベントに合わせて制作したものでした。8個の発光物を絵の中に仕込んでいます。
8箇所の光源の在り処を答えあわせできるドット絵を置いておきます。
↑スマホで上記を押下後、カメラへのアクセスを許可いただくと使えます。起動したカメラで下のドット絵を見てみてください。
（つまり、スマホともう一つ別媒体でドット絵を開いておく必要があります。お手数かけます。）
ファンイベント開催中に作っても良かったのですが見送りました。アプリのページに飛んでカメラを許可するプロセスが入ると、そこまでして観に来る人は（とくにテック系に関心がないと）ほぼいないと見込んだのもあります。あとは怠慢です。
ちなみにARマーカーは詳しくないのですが、白線で囲うと読み取りの精度が上がりました。
↓これは読み取りが今ひとつでした。
↓次のように色相が違うと白線がなくてもそこそこ行けるようです。
↓これはまるでだめでしたが、
↓白線で囲えば問題なしでした。
カメラを起動したついでに試してみてください。
補足など
Qiita のアドベントカレンダーにも参加しました。
Shibuya Pixel Art Fan について
昨年の(裏)ドット絵アドベントカレンダー記事
この記事が気に入ったらサポートをしてみませんか？