Watcher & Node-RED to P5JS
この文書は AI によって翻訳されています。内容に不正確な点や改善すべき点がございましたら、文書下部のコメント欄または以下の Issue ページにてご報告ください。
https://github.com/Seeed-Studio/wiki-documents/issues
Watcher & Node-RED から p5.js へのクイックスタート
p5.js とは
p5.js は、アーティストやデザイナーがコーディングを簡単に行えるようにする JavaScript ライブラリです。シンプルな構文を使用して、グラフィックス、アニメーション、インタラクティブなアプリケーションを作成するための簡単な方法を提供します。キャンバス上での描画、ユーザー入力の処理、マルチメディアのサポートなどの機能を備えた p5.js は、クリエイティブなコーディングプロジェクト、教育目的、デジタルアートに最適です。その活発なコミュニティと豊富なリソースにより、あらゆるスキルレベルのユーザーが簡単に始められます。
Node-RED の設定
ステップ 1. Watcher でタスクを実行
まず、以下のビデオに従って Watcher でタスクを実行する必要があります。詳細については、こちらをクリックしてください。
ステップ 2. 設定
以下の 4 つのモジュールを設定する必要があります:

OpenStream: Watcher から Node-RED にデータを取得します。詳細はこちらをクリックしてください。
function: Watcher からのデータを処理します。function モジュールをダブルクリックし、以下のコードを貼り付けてください。

msg.payload = {
content: msg.payload.value[0].content,
image_url: msg.payload.value[0].image_url
};
return msg;
- http request: サーバーに POST リクエスト を送信し、その後 p5.js に送信します。

- debug: 出力情報を確認し、デバッグします。

ステップ 3. デプロイ
設定が完了したら、デプロイするのを忘れないでください。

サーバーを構築する
ステップ 4. サーバーコードをダウンロードする
こちらのリンクをクリックしてください して、プロジェクトコード全体をダウンロードしてください。

ステップ 5. サーバーを実行する
サーバーを実行する前に、いくつかのパッケージをインストールする必要があります。
npm install express body-parser cors ws

パッケージを解凍してその中に移動し、次に node server.js
を実行してサーバーを起動します。

現在、サーバーはポート 3000 をリッスンしています。そのため、Node-RED からのメッセージはこのサーバーに送信され、その後 p5.js に送られます。
VScode の設定
ステップ 6. 拡張機能をインストールする
2 つの拡張機能をインストールする必要があります。それは Live Server と p5.vscode です。

ステップ 7. プロジェクトを開く
先ほどダウンロードしたプロジェクトを開きます。

プロジェクトを開くと、以下の画像のような構造になります。

ステップ 7. プロジェクトを実行する
sketch.js を開き、Go Live ボタンをクリックします。これにより、プロジェクトがデフォルトのブラウザでローカルで実行されます。

以下の画像のような効果が得られます。このサービスはポート 5500 で実行されています。

人を検知すると、以下のように表示されます。
Node-RED と server.js を実行し続ける必要があります。

Watcher から p5.js への旅を無事に完了したことをおめでとうございます!貴重なスキルを習得し、さらに多くのエキサイティングな機能があなたを待っています。引き続き実験を続け、創造的な可能性を楽しんでください!
技術サポートと製品に関するディスカッション
私たちの製品を選んでいただきありがとうございます!製品の使用体験がスムーズになるよう、さまざまなサポートを提供しています。異なる好みやニーズに対応するため、いくつかのコミュニケーションチャネルを用意しています。