First, I finished all of the coding for the website on Replit. I was intended to host Node-Red on Replit and use UDP to transmit the data, however, due to some firewall issues (maybe?), I was only able to use web-socket. But I haven’t figured out how to use web-socket in Arduino. So instead, I hosted the website as well as Node-Red locally.
For the circuit connection, I used an Arduino and two buttons, one for changing the colors, and one for spreading the sand.
In Arduino, I used UDP to send the data, which includes the x and y data from the gyroscope and two buttons’ states.
In Node-Red, I restructured the data using a function and sent it to the website as a dictionary?
To avoid sudden changes in the rotation data, I did some calculation to smooth out the data. But somehow, there could still be some particles falling from the cracks of the bottle when rotating too fast. Also, the rotation calculation of the bodies in matter.js was quite different from directly rotating an image, which I need to use the difference of the rotation degrees instead of using the actual rotation degrees.
I set up some functions for buttons to control the webpage elements (changing the colors and spreading the sand)
On the website, active color will be scaled up as an indication.
For fabrication, I built a model based on my sketch of the bottle in Fusion 360, and 3D printed it out.
