My initial approach to this assignment was to have a physical input from analog sensors to digital output on 3D Studio Max, to control parameters of a 3D modeled object (probably a furniture piece) displayed in the program. However, I was still not familiar with how to set up a WebSerial connection in general, so I decided to take a step back and try to figure out how WebSerial connection can be done with p5.js instead.
The initial idea I had for the Arduino x p5.js was to control the colors and transparency for a graphical circle on a sketch, but I decided to create a more fun concept behind it. I, instead, created a digital lighting system for a living room scene, visualizing what it could possibly look like on a larger scale.
I decided to have 3 parameters to alter for the lighting system, and chose digital/analog sensors based on how I wanted to alter them. The parameters were:
1) Switching lights on or off - done using a pushbutton;
2) Changing the lights' colors - done using a potentiometer;
3) Changing the lights' intensity - done using a second potentiometer
Circuit Layout
Schematic Diagram
I created the above circuit layout, having the potentiometers connect to analog pins A0 and A1, and the pushbutton connected to digital pin D2 to on the Arduino Nano 33 IoT. The pushbutton was also connected to 10K ohm resistor (a pull-down resistor), which was connected to ground. Both potentiometers were also connected to ground.
I set up the Arduino sketch for it to read the values from the sensors, but only serially send it when it is told to do so from p5.js (call & response method - handshaking).
I also set up the index.html file of p5.js sketch to include WebSerial library.
I started the sketch by uploading an interior scene I photoshopped, and started adding the light shapes and parameters. However, I discovered that I needed to make an array of colors for the fill() function if I wanted it to change colors instead of having it greyscale. This involved me also creating a function that can consider color string names and color alpha (light intensity - with values from 0 to 1) at the same time so I could use one color variable from the potentiometer for fill().
I set up the incoming serial data to split the sensor readings to the following:
a) 1st potentiometer reading mapped to integers of 0 to 13 to become the index value for the color array
2) 2nd potentiometer reading mapped to values from 0 to 0.4 to become the alpha (light intensity) value of the colors - limited to 0.4 so I could reduce its maximum opacity
3) Pushbutton reading mapped to integers of 0 to 1 (0 or 1) to become the light switch
I, however, faced trouble with the toggling of the switch. It seems that when pressing the pushbutton, it registers multiple toggles in a single press, causing the sketch to switch between on and off modes several times in one press. I tried to add a delay function that I came across through the p5.js reference, but I could not generally arrive to a solution that worked. This is an issue I would be interested to figure out how to solve.
To add some more fun to the sketch, I decided to add day and night landscapes to the window of the interior scene by uploading two more images, and placing it behind the main interior scene.
And here is the current final iteration of how it works:
