Skip to main content

Watcher & Node-RED To p5.js Quick Start

What is p5.js​

p5.js is a JavaScript library that makes coding accessible for artists and designers. It provides an easy way to create graphics, animations, and interactive applications using a simple syntax. With features like drawing on a canvas, handling user input, and supporting multimedia, p5.js is ideal for creative coding projects, educational purposes, and digital art. Its vibrant community and extensive resources help users of all skill levels get started.

Node-RED configuration​

Step 1.Run task in Watcher​

First of all, you need to run a task in Watcher following the video below. If you want to know more please click here.

Step 2.Configuration​

There are 4 modules you need to configure:

  1. OpenStream: Get data from Watcher to Node-RED. Details please click here.

  2. function: To process data from Watcher. Double click the function module and past the following codes into it.

msg.payload = {
    content: msg.payload.value[0].content,
    image_url: msg.payload.value[0].image_url
};
return msg;
  1. http request: Send a POST request to server and then to p5.js.
  1. debug: To see output infomation, to debug it.

Step 3.Deployment​

When finish configuration, don't forget to Deploy it.

Build a server​

Step 4.Download server code​

Please click this link to download the whole project code.

Step 5.Run the server​

Before running the server, you should install some packages first.

npm install express body-parser cors ws

Unzip the package and get into it, and then run node server.js to run the server.

Now the server is listening port 3000, so the message from Node-RED will be sent to this server, and then to p5.js.

VScode configuration​

Step 6.Install extensions​

You need to install 2 extensions, there are Live Server and p5.vscode

Step 7.Open project​

Open the project you just download.

The structure will like below image when open it.

Step 7.Run project​

Open sketch.js and click the Go Live button, which will run the project locally on default browser.

The effect will like below image, this servcie running on port 5500.

When detected people, it will look like this.

tip

You need to keep running Node-RED and server.js

Congratulations on successfully completing your journey from Watcher to p5.js! You’ve gained valuable skills, and there are many more exciting features waiting for you to explore. Keep experimenting and enjoy the creative possibilities ahead!

Tech Support & Product Discussion​

Thank you for choosing our products! We are here to provide you with different support to ensure that your experience with our products is as smooth as possible. We offer several communication channels to cater to different preferences and needs.

Loading Comments...