Virtual High-five!

The past week, we learned about serial communication, how to connect our Arduinos to computers. Somehow, I knew that it was possible to connect the microcontroller to computer. But I didn’t know there were differences of how it was interpreting the data. Turned out, interpreting the data using raw binary values or ASCII could make big differences.

These were kind of new to me. The serial communication using ports, data interpretation using binary or ASCII, what’s protocols, etc. The most frustrating one was about data interpretation using binary values or ASCII. It was very tricky. How a word in codes could totally screw all the data. For example, when we use Serial.write(), it uses byte to communicate. However, when we use Serial.print(), ASCII is being used instead. Also, we need to know what type of data we should use (int, long, char, etc). I need to work on that harder.

For this lab exploration, I tried to use IR-distance sensor as an analog input. Then connect it to p5.js, so the output would be on the p5.js canvas. Here’s how I connected the circuit.

High-five Sketch

And here’s what it looks like IRL.

High-five Circuit

This is the code I used to read an input from IR-distance sensor. Then the value was mapped into a range of 0-255. To make sure, I printed the value using ASCII characters.

void setup() {
   // start serial port at 9600 bps:
void loop() {
   int analogValue = analogRead(A0);
   int mappedValue = map(analogValue, 0, 1023, 0, 255);
   // print decimal value

Now it’s time to connect it to p5.js on web browser. Thank God there’s a library to connect microcontroller to p5.js, it’s called p5.serialport.js. So that the p5.js sketch can connect to the serial ports.

I wanted to make a virtual high fives. So we can do high-fives with our computers using gestures. Here, I connected the IR-distance sensor, microcontroller, and p5.js sketch. The IR-distance sensor would track how far is the hand from the sensor, and it would control the animation in p5.js.

Look at the virtual high-fives below! Also, check out the p5.js code here.

High Five from Vidia Anindhita on Vimeo.

Leave a Reply

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