Skip to main content

Watcher & Node-RED To p5.js クイックスタート

p5.jsとは​

p5.jsは、アーティストやデザイナーにとってコーディングをアクセシブルにするJavaScriptライブラリです。シンプルな構文を使用して、グラフィックス、アニメーション、インタラクティブなアプリケーションを簡単に作成する方法を提供します。キャンバスへの描画、ユーザー入力の処理、マルチメディアのサポートなどの機能により、p5.jsはクリエイティブコーディングプロジェクト、教育目的、デジタルアートに最適です。活発なコミュニティと豊富なリソースにより、あらゆるスキルレベルのユーザーが始めることができます。

Node-REDの設定​

ステップ1. WatcherでタスクをRun​

まず最初に、以下のビデオに従って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.デプロイメント​

設定が完了したら、Deployすることを忘れないでください。

サーバーの構築​

ステップ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...