どーもへたれエンジニアです。
先日結婚式があったんですが、大好きなIPPON GPっぽいことを主役の自分たち主導でやるという一歩間違えればとんでもないことになりかねない事をやってみたのでそのコードを公開します(ややウケくらいで終わったので公開です
作ったものに関して
こんな感じでIPPON GP風の画面にWebカメラの映像が重なります
![スクリーンショット 2018-12-09 17.41.18](https://i0.wp.com/marublo.com/blog/wp-content/uploads/2018/12/スクリーンショット-2018-12-09-17.41.18-546x336.png?resize=546%2C336)
ちゃんとIPPONパラメータが動きます
![スクリーンショット 2018-12-09 17.41.59](https://i0.wp.com/marublo.com/blog/wp-content/uploads/2018/12/スクリーンショット-2018-12-09-17.41.59-546x342.png?resize=546%2C342)
止めたり動かしたりして、最終的に全てのパラメータが超えると IPPONもとい「KEKKON」となります
![スクリーンショット 2018-12-09 17.36.49](https://i0.wp.com/marublo.com/blog/wp-content/uploads/2018/12/スクリーンショット-2018-12-09-17.36.49-546x340.png?resize=546%2C340)
作り方に関して
html5 + js って感じで作りました
IPPON GP風の動画演出部分は AdterEffect で動画編集したものを webm形式に変換して出力してます
図のような感じでcanvasにvideoタグを描画させ、それをcssで重ね合わせて描画しました
![スクリーンショット 2018-12-12 12.03.45](https://i0.wp.com/marublo.com/blog/wp-content/uploads/2018/12/スクリーンショット-2018-12-12-12.03.45-546x318.png?resize=546%2C318)
そんな感じなのでポイント計算機能とかありません、演出のみ作り込んでます
デモ
こちらにアップしてます。 aキーで実行され、sキーで停止、0キーで初期化されます
※こちらローカルではないためカメラ実行が出来ません。その場合はgithubでcloneして実行してください
けっこーんの声、僕の声をいじってます・・・・笑