森の洋館の絵画

https://scrapbox.io/files/624310f6aac80e001d8d326b.png

code:credits

作品名：森の洋館の絵画

使用言語：vue.js, tensorflow.js

制作人数：1人

制作時期：2021/10/31

ハロウィンということで、

2006年に発売されたポケットモンスターダイヤモンド・パールに出てくる絵画をプログラミングを用いて実装しました。私自身幼い頃にプレイしていたゲームなので非常に思い入れのあるゲームです。

この絵画は「もりのようかん（森の洋館）」というエリアに置かれている絵画です。

森の洋館はポケモンファンの間では有名な心霊系のエリアであり、様々な心霊現象が起こります。その心霊現象の一つにこの絵画があります。

この絵画は、ユーザーが絵画の方を見ているときは何も起こらないのですが、ユーザーが絵画から目を離すと絵画の目が赤く光るというギミックを持っています。

今回はこの「ユーザーの姿を捉えていない間に目が赤く光る」というギミックを搭載した絵画を、プログラミングを用いて実装しました。

ぜひデモの方体験してみてください

デモ体験では、まずカメラに自身の顔を写してみてください。

その状態では絵画は普通の状態です。その後に、カメラに顔が映らないようにしてみてください。

そうすると、、、、！？

技術的な話では、カメラを通して顔認識を行っています。

人の顔が検知された場合には絵画は通常状態のままであり、顔が検知されなかった場合には絵画の目を赤く光らせています。

今回はwebでの実装ということもあり、Tensorflow.jsを用いて顔認識を行っています。

初めて使うライブラリでしたが、サンプルコードが充実していて簡単に制作することができました。