Devs3 – Group 1

Group members: Victoria Gottardi, Siyu Sun, Maryam Dehghani, Yueming Gao

What we are investigating

For this assignment, we are investigating what kind of code we can create with p5.js, and how that code responds to the robot’s movements connected through the websocket. We decided to pick p5.js because we are the most comfortable with that software, and we wanted to see what the robot to code connection on a web browser software would look like. We do not currently have a finalized project #2 concept, so we took this opportunity to get comfortable with getting data from the robot with a program like p5.js, and we are hoping that this experiment will potentially grant us some new skills, to which we can apply to project #2 if needed. Lastly, conducting this experiment might give us inspiration as we begin to solidify our project #2 concept.


How did it go

In Devs3, we try to use P5 to test the function of connecting the laptop to the robotic arm through Web Socket.

First of all, we set up Real time data for Robot on the computer. This application allows us to see the data when the robot moves, such as coordinate position, rotation angle and speed, etc.

Then we open the previously prepared sketch of P5 to test. As you can see, when the arm moves, the red dot moves with the arm. And the white particles will chase the red dot. This is because we make the x coordinate of the red point equal to the x value of the machine, and the y coordinate of the red point equal to the y value.

In addition, P5 has an advantage as a webpage editor. As long as the audience clicks on the URL we share, they can see the interactive process on different devices.


What we learned

In this process, we learned how to connect the robotic arm through Web Socket. We also try to use the data of the robotic arm to establish some interactions in different devices. There are many forms of interaction, but these are all based on changes in data. And we can directly see how the change in the data of the robotic arm affects the sketch of the P5 through coding. This makes us intuitively feel that there is actually a very close connection between data and our lives. How to use data to make changes is very important for our future projects.


The code link:

  1. Robot Script:
  2. P5 sketch:

Leave a Reply

Your email address will not be published. Required fields are marked *