ポール・モーリア ジェネレーターをつくった

投稿日:

先日このようなツイートをしました。

はぁ、尊い。ナイスアイディア。

これも一種のエンジニアリングなのでは？自分もこういったものを作ってみたい！！
と思い悩んだ末に思い出したのです、、こういった顔認識を使ったものを作っていたことを、、

※ 顔認識は auduno/clmtrackr: Javascript library for precise tracking of facial features via Constrained Local Models に依存しています

そして、これらを組み合わせたら、ポール・モーリアっぽいのイケるのでは？と閃いたのであります。
これぞまさに、「点」と「点」がつながって「線」になる瞬間。

というわけで作ってみました。

https://github.com/shimabox/PaulMauriat-generator

遊び方

まずは https://shimabox.github.io/PaulMauriat-generator/ にアクセスします。

  1. ボーダーで囲まれたエリアをクリックして画像を選択するか、画像をドロップします
  2. カメラへのアクセスを許可します
  3. 顔認識が行われるので顔が捉えられたら画面右上にワイプのように顔が映し出されます
    ※ 顔の認識がうまくいかない場合は少し顔を離したり調節してみてください
    ※ メガネもけっこう顔認識には辛いかも
    ※ 後述しますが顔の位置は、右上, 左上, 右下, 左下 と選択できます
  4. あとはポール・モーリアのようになりきったりして遊びます
    ※ 画像のダウンロードも可能です
    ※ iOSの場合別タブで画像が開くのでそれを長押しして保存してください

UIについて

  1. 画像の再選択が可能です
  2. 顔認識を開始します
  3. 顔認識を停止します
    ※ コツとして、ここだ！！という場面で停止してからダウンロードするといいです
  4. 画像(png) としてダウンロードします
  5. フロント(前面)カメラと、リア(背面)カメラを切り替えます
  6. 顔の位置を 右上(Top, Right), 左上(Top, Left), 右下(Bottom, Right), 左下(Bottom, Left) と選択できます
  7. 顔の透明度を調整できます

からくり

当アプリがどういった仕組みになっているか、画面構成について軽く解説してみます。

4つのレイヤー

当アプリではざっくりと4つのレイヤーを用いています。

1. videoレイヤー(Webカメラからの映像)

2. videoの映像を映すcanvasレイヤー

3. 選択した画像をcanvas化したレイヤー

4. 2.で映し出したcanvasから顔部分を描画したcanvasレイヤー

これら4つのレイヤーを以下の通りに重ねて表現をしています。

これらの部分に一番上であげたライブラリーが活用されています。
UIに関しては、display:flex系のflexレイアウトを活用しています。便利ですねー。
キャプチャの部分に関しては、3.と4.のレイヤーを出力させています。

というわけでなにも考えずに愚直にゴリゴリと描画を行っているので、負荷は半端ないです。
clmtrackrでの顔認識がどうしても負荷がかかるので致し方ないのかなとは思いますが、その他の部分でどうにかならんかなぁと考えてはいます。

課題

今一番の課題は描画時のジャギーが、ひどいというものです。
もっとクリアに画像を表示したり、ポール・モーリアを出現させたい。
※ 自分の、Pixel3/chrome は結構ジャギーがひどい

drawimage アンチエイリアスでググった結果になにか解決策があるのでは？と踏んではいるのですが、まずは公開が先だということで手付かずです。
(このへんちょっと試してみたりしたのですけども、わけわからんし時間がかかりそうなのでいったん止めました)

あとは、ポール・モーリア部分の透け感をもっとうまく表現したいところです。
中心はあまり透けさせずに周りだけを透けさせると先に挙げた記事に近づくのではないかと思うのですが、どうしたらいいんかなと。
現状の実装だと全体を透けさせて周囲をボカしてそれっぽくしているだけなのでちょっと無理矢理感がありますね。
なので、スライダーを用意して調整(ごまかし)できるようにしたりしています。

強い人、いいアイデア、PRください。お願いします。

このアプリを作る上で参考にさせていただいた記事

おわりに

普段の業務に全く関係のないものを作るのは最高に楽しいですね。
(普段はみんなが愛してやまないPHPをひたすら書いています)

クオリティは低いかもしれませんが、もしよかったら遊んでみてください。
リア(背面)カメラが使えれば他人でも顔の写った画像でもポール・モーリアできます。

というわけで、最高のポール・モーリアを作ってくれ！！
(作った画像を#ポールモーリアジェネレーター,#paulmauriat-generatorで共有してくれるとうれしいです)

なお、「恋はみずいろ」 をまだ聴いていないので聴いてみます。

おまけ (こんな画像がつくれます)

※ 目線は入れさせていただいています

子供を愛でる

ブチャ○ティ


髪型が尊い。

きれいなエッフェル塔に感心


©Pete LinforthによるPixabayからの画像

ぬこ


©maturikaによるPixabayからの画像

スポンサーリンク

作成者: shimabox

Web系のプログラマをやっています。 なるべく楽しく生きていきたい。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。