スペシウム133を発射したいですよね？　『スペシウム133を発射せよ！』アプリ作りました。 #p5.js

スペシウム133とは

映画『シン・ウルトラマン』でウルトラマンが放つスペシウム光線の素の物質です。
うちは娘なので映画館に行く理由が見つからず、DVDの発売を待っていたら何と配信が始まってしまいました。DVDは無くなっていくのかもしれませんね。

『スペシウム133を発射せよ！』アプリのご紹介

容易に想像がつくとは思いますが、こんな感じです。

Teachable Machine にポーズを学習させたモデルを ml5.js に組み込んで、正しいポーズをとったらアプリ画面上で光線が発射されます。

☆使い方☆

1. 画面の向かって右半分側に直立、左足を少し引いて体は斜め45度ぐらいに。
2. 画面中央の十字のガイドラインが出ますので、これにあわせて例のポーズをとってください。
3. スペシウム光線発射！

【使ったもの】
・HTML、CSS、JavaScript
・CodePen、jQuery、Netlify
・Teachable Machine、ml5.js
・p5.js

Netlifyで公開中

解説

ソースコード

See the Pen スペシウム133を発射せよ！ by Xedge748hagi (@Xedge748hagi) on CodePen.

学習モデル

当初は「直立」「スペシウム」以外に「片手」というクラスがありました。右腕だけ前に垂直に上げた姿勢で、この時は右手にスペシウム133が充填されて（水色のグラデーションの楕円が大きくなっていく）、左手が前でクロスしたら「スペシウム」クラスで光線発射、となっていました。いい感じの画像だったのですが、困ったことに「片手」の判定が難しく、左手を下げているのに「スペシウム」の誤認が多発し、泣く泣く断念しました。本来はポーズプロジェクトで両腕の位置判定を行えばよいのかもしれませんが、ml5.js との連携がうまくいきませんでした。

画面の重ね合わせ

今回の最大の難関は、カメラで撮った動画とガイドラインの十字やスペシウム光線の画像を重ね合わせることでした。ネットで検索したやり方を順次試しましたが、両者が縦に並ぶか画像（canvas）が表示されないかで、全滅でした。私の書き方は試行錯誤の結果偶然できたもので、正しいのかはよくわかりません。

HTML

<html>
  <body>
    <h1>スペシウム133を発射せよ！</h1>
    <button onclick="start()">開始</button><br>
    <video id="webcam" width="640" height="480" muted autoplay playsinline></video>
    <canvas id="canvas" width="640" height="480"></canvas>
  </body>
</html>

CSS

body {
      background-color: red;
}

h1 {
    font-size: 3em;
    margin: 3px auto;
    color: white;  
}

#webcam {
         position: absolute;
         z-index: -1;
         transform: scaleX(1);
}

canvas {
        position: absolute;
}

使ってみて思ったこと

☆思ったより誤動作します。画像プロジェクトで両腕の位置・形を見極めるのは難しいかもしれません。Teachable Machine のポーズプロジェクトと ml5.js の連携について良い見本が見当たらなかったのが残念です。
☆ p5.js は使ってよかったです。調べれば日本語の解説もありますし、簡単に使えて表現が豊かになります。

スペシウム133を発射したいですよね？ 『スペシウム133を発射せよ！』アプリ作りました。