← home portfolio
HI, I'M UNDER CONSTRUCTION, PLEASE EXCUSE THE ROUGH EXTERIOR—I PROMISE MY CONTENT IS (MOSTLY) GOOD <3

ITP Spring '22 → Connected Devices → Week 1

Our first week assignment was to connect our Arduino via serial, and to use a rotary encoder and a sensor. One of the big pieces of advice I got in PCOMP last semester was to try more sensors, so I decided to use an Ultrasonic Distance Sensor (HC-SR04) to control waves on my laptop screen:

For the distance sensor I followed the corresponding lab on the PCOMP site and learned that the sensor worked by sending intermittent signals and when that signal bounces back, the amount of time it took to bounce back is used to calculate the distance. The signal sending is controlled by the sensor's trigger pin, and the duration is measured via the echo pin.

For the rotary sensor, I also followed the corresponding lab to figure out the wiring.

Arduino hooked up with ultrasonic distance sensor (left), then rotary encoder (right).

I then got the distance sensor logging readings in Arduino IDE's Serial Monitor, then used Arduino_JSON library to print the data in JSON:

After confirming that the data was printing to Serial correctly, I got working on the browser side. Thankfully I had the HTML/Javascript code working from a previous project, so I adapted it to draw a wave to canvas corresponding to the distance my hand was away from the sensor.

Got waves drawing (and moving to the right at ~32fps) but had an interesting looking but where the canvas wasn't clearing at all (left), then the version after it was working correctly (right).

And the final version after the rotary encoder was added in:

I used the rotary encoder to rotate through all 360 degrees of hues to update the wave color, and pushing it as a button clears/resets the canvas.

The most interesting learning from this homework was that the distance sensor did much better turned upside down (right video) since it could get a much more stable reading from the wider slab of my table rather than my hand.

Here is the folder with both my Arduino and HTML code.