\n \/\/ wait until you have two bytes:\n if (serial.available() >= 2) {\n \/\/ read the first byte:\n var highByte = serial.read();\n \/\/ read the second byte:\n var lowByte = serial.read();\n \/\/ combine them into a single value:\n var result = (highByte * 256) + lowByte;\n \/\/ put the result in the text div:\n console.log("high byte: " + highByte +\n " low byte: " + lowByte +\n " result: " + result);\n }\n<\/pre><\/div>\n\n\nHere are the two full sketches for both Arduino and p5.js:<\/p>\n\n\n\n
Arduino:<\/p>\n\n\n
\nvoid setup() {\n Serial.begin(9600);\n}\n\nvoid loop() {\n \/\/ get a 10-bit ADC value:\n int sensor = analogRead(A0);\n \/\/ divide by 256 to get the first byte:\n \/\/ (result is an integer):\n byte firstByte = sensor \/ 256;\n \/\/ modulo by 256 to get the second byte:\n byte secondByte = sensor % 256;\n \/\/ send the first of the two bytes:\n Serial.write(firstByte);\n \/\/ send the second of the two bytes:\n Serial.write(secondByte);\n}\n<\/pre><\/div>\n\n\nThe p5.js sketch:<\/p>\n\n\n
\n\/\/ variable to hold an instance of the serialport library:\nlet serial;\n\/\/ HTML Select option object:\nlet portSelector;\n\n\nfunction setup() {\n \/\/ new instance of the serialport library\n serial = new p5.SerialPort();\n \/\/ callback function for serialport list event\n serial.on('list', printList);\n \/\/ callback function for serialport data event\n serial.on('data', serialEvent);\n \/\/ list the serial ports\n serial.list();\n textDiv = createDiv('result will go here.')\n}\n\n\/\/ make a serial port selector object:\nfunction printList(portList) {\n \/\/ create a select object:\n portSelector = createSelect();\n portSelector.position(10, 10);\n \/\/ portList is an array of serial port names\n for (var i = 0; i < portList.length; i++) {\n \/\/ add this port name to the select object:\n portSelector.option(portList[i]);\n }\n \/\/ set an event listener for when the port is changed:\n portSelector.changed(mySelectEvent);\n}\n\n\nfunction mySelectEvent() {\n let item = portSelector.value();\n \/\/ give it an extra property for hiding later:\n portSelector.visible = true;\n \/\/ if there's a port open, close it:\n if (serial.serialport != null) {\n serial.close();\n }\n \/\/ open the new port:\n serial.open(item);\n}\n\n\nfunction serialEvent() {\n \/\/ if you have received two or more bytes:\n if (serial.available() >= 2) {\n \/\/ read the first byte:\n var highByte = serial.read();\n \/\/ read the second byte:\n var lowByte = serial.read();\n \/\/ combine them into a single value:\n var result = (highByte * 256) + lowByte;\n \/\/ put the result in the text div:\n console.log("high byte: " + highByte +\n " low byte: " + lowByte +\n " result: " + result);\n }\n}\n<\/pre><\/div>\n\n\nHere’s the index.html page:<\/p>\n\n\n