ml5.jsのモデルをLoopコンポーネント以前にプレロードし,グローバル変数として保存して再利用するようにします。この方法で,学習済みモデルを読み込む時間を初回の1回のみにします。

0. 準備

前回のプログラムをダウンロードして開いてください。

完成版の「study.json」ファイル

以下のファイルを右クリックでダウンロードしてください。このファイルをBuilderで読み込めば,完成した状態の実験プログラムを確認することが出来ます。

左側のメニューのフロッピーアイコンの▼をクリック→ Open で以下のファイルを指定

ml5js-facemesh-demo.json.zip

1.プレロード用のコンポーネントを作る

まずは,以下のようにファイルをlab.js Builderで開いてください。

image.png

1.1. プレロード用のコンポーネントの作成

「Loop」コンポーネントの前に,プレロード用のコンポーネントを作成します。

左側のコラムの「+」をクリックし,以下のメニューを表示します。「p5.js」を使用するには,「HTML」メニューの「Screen show content using HTML」をクリックします。

以下のようにコードを直接書き込む「Content」が表示されます。しかし,基本的に「content」には何も書き込みません。