Skip to main content
note

この文書は 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 つのモジュールを設定する必要があります：

  1. OpenStream: Watcher から Node-RED にデータを取得します。詳細はこちらをクリックしてください。

  2. function: Watcher からのデータを処理します。function モジュールをダブルクリックし、以下のコードを貼り付けてください。

msg.payload = {
    content: msg.payload.value[0].content,
    image_url: msg.payload.value[0].image_url
};
return msg;
  1. http request: サーバーに POST リクエスト を送信し、その後 p5.js に送信します。
  1. 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 で実行されています。

人を検知すると、以下のように表示されます。

tip

Node-RED と server.js を実行し続ける必要があります。

Watcher から p5.js への旅を無事に完了したことをおめでとうございます！貴重なスキルを習得し、さらに多くのエキサイティングな機能があなたを待っています。引き続き実験を続け、創造的な可能性を楽しんでください！

技術サポートと製品に関するディスカッション​

私たちの製品を選んでいただきありがとうございます！製品の使用体験がスムーズになるよう、さまざまなサポートを提供しています。異なる好みやニーズに対応するため、いくつかのコミュニケーションチャネルを用意しています。

Loading Comments...