{"id":1200,"date":"2014-08-19T10:30:11","date_gmt":"2014-08-19T14:30:11","guid":{"rendered":"https:\/\/itp.nyu.edu\/physicalcomputing\/?page_id=1200"},"modified":"2024-09-16T14:18:36","modified_gmt":"2024-09-16T18:18:36","slug":"serial-output-from-an-arduino","status":"publish","type":"page","link":"https:\/\/itp.nyu.edu\/physcomp\/labs\/serial-output-from-an-arduino\/","title":{"rendered":"Lab:  Serial Output from an Arduino to Processing"},"content":{"rendered":"\n<p>In this lab, you&#8217;ll send data using asynchronous serial communication from a single sensor to a Processing sketch on a personal computer that will then graph the sensor&#8217;s value onscreen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Asynchronous serial communication, which you&#8217;ll see demonstrated in this lab, is one of the most common means of communication between a microcontroller and another computer. You&#8217;ll use it in nearly every project, for debugging purposes if nothing else.<\/p>\n\n\n\n<p>The Processing sketch in this exercise graphs the incoming bytes. Graphing a sensor&#8217;s value like this is a useful way to get a sense of its behavior.<\/p>\n\n\n\n<p>These videos will help to understand this lab:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Video: <a rel=\"noopener noreferrer\" href=\"https:\/\/vimeo.com\/380355568\" target=\"_blank\">Introduction to Serial Communication<\/a><\/li><li>Video:&nbsp;<a rel=\"noopener noreferrer\" href=\"https:\/\/vimeo.com\/380355716\" target=\"_blank\">Serial Under the Hood: Interpreting Serial Data<\/a><\/li><li>Video: <a rel=\"noopener noreferrer\" href=\"https:\/\/vimeo.com\/380356227\" target=\"_blank\">Reading Serial Input in Arduino<\/a><\/li><li>Video: <a rel=\"noopener noreferrer\" href=\"https:\/\/vimeo.com\/380356541\" target=\"_blank\">Serial From Arduino to Processing<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Youll_Need_to_Know\"><\/span>What You\u2019ll Need to Know<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To get the most out of this Lab, you should be familiar with the basics of programming an Arduino microcontroller. If you\u2019re not, review the <a rel=\"noopener noreferrer\" href=\"https:\/\/itp.nyu.edu\/physcomp\/labs\/digital-input-and-output-with-an-arduino\/\" target=\"_blank\">Digital Input and Output Lab<\/a>, and perhaps the <a rel=\"noopener noreferrer\" href=\"http:\/\/arduino.cc\/en\/Guide\/HomePage\" target=\"_blank\">Getting Started with Arduino guide<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Things_Youll_Need\"><\/span>Things You\u2019ll Need<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Figure 1-3 are basically what you need for this lab.<\/p>\n\n\n\n<div class=\"wp-block-image size-thumbnail wp-image-5921\"><figure class=\"alignleft\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/pcomp-kit-f2019-arduino-nano-33-iot-150x150.jpg\" alt=\"Photo of an Arduino Nano 33 IoT module. The USB connector is at the top of the image, and the physical pins are numbered in a U-shape from top left to bottom left, then from bottom right to top right.\" class=\"wp-image-5921\"\/><figcaption>Figure 1: Arduino Nano 33 IoT<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft\"><a href=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/hookup_wire1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/hookup_wire1-150x150.jpg\" alt=\"Three short pieces of hookup wire: one is clad in red insulation, one in blue, and one in black. All three have exposed ends approximately 5mm long.\" class=\"wp-image-968\"\/><\/a><figcaption>Figure 2: 22AWG hookup wire<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft\"><a href=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer3.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer3-150x150.jpg\" alt=\"Potentiometer. The one shown here has three legs spaced 0.1 inches apart and can be therefore mounted on a solderless breadboard.\" class=\"wp-image-1029\"\/><\/a><figcaption>Figure 3: Potentiometer<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Connect_the_sensor\"><\/span>Connect the sensor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Connect your analog sensor to analog pin 0 like you did in the <a title=\"Analog In with an Arduino\" rel=\"noopener noreferrer\" href=\"https:\/\/itp.nyu.edu\/physcomp\/labs\/analog-in-with-an-arduino\/\" target=\"_blank\">analog lab.<\/a> A potentiometer is shown here (Figure 4-6) because it&#8217;s easy, but you might want to pick a sensor that&#8217;s more interesting. IR distance rangers are fun for this exercise, for example. Force-sensing resistors are good as well.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer_schem1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"261\" height=\"300\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer_schem1-261x300.png\" alt=\"Schematic view of a potentiometer. First leg of the potentiometer is connected to +5 volts. The second leg connected to analog in 0 of the Arduino. The third leg is connected to ground.\" class=\"wp-image-3781\" srcset=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer_schem1-261x300.png 261w, https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer_schem1.png 481w\" sizes=\"(max-width: 261px) 85vw, 261px\" \/><\/a><figcaption>Figure 4: Schematic view of a potentiometer connected to analog in 0 of the Arduino<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer_bb.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"189\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer_bb-300x189.png\" alt=\"Breadboard view of a potentiometer. First leg of the potentiometer is connected to +5 volts. The second leg connected to analog in 0 of the Arduino. The third leg is connected to ground.\" class=\"wp-image-3780\" srcset=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer_bb-300x189.png 300w, https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/potentiometer_bb.png 372w\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/a><figcaption>Figure 5: Breadboard view of a potentiometer connected to analog in 0 of an Arduino<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image wp-image-6031\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/LabPotentiometerInNano_bb.png\" alt=\"Breadboard view of an Arduino Nano connected to a potentiometer. The +3.3 volts and ground pins of the Arduino are connected by red and black wires, respectively, to the left side rows of the breadboard. +3.3 volts is connected to the left outer side row (the voltage bus) and ground is connected to the left inner side row (the ground bus). The side rows on the left are connected to the side rows on the right using red and black wires, respectively, creating a voltage bus and a ground bus on both sides of the board. The potentiometer is mounted in the left center section of the solderless breadboard. Its outside pins are connected to the voltage and ground buses, respectively There is a wire connecting to analog in 0 of the nano (physical pin 4) to the the center pin of the potentiometer. \" class=\"wp-image-6031\" width=\"228\" height=\"360\"\/><figcaption>Figure 6: Breadboard view of an Arduino Nano connected to analog in 0 of the nano (physical pin 4).<\/figcaption><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Read_the_Sensor_Value_and_Send_the_Data_Serially\"><\/span>Read the Sensor Value and Send the Data Serially<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Program the Arduino module to read the analog sensor and print the results to the Serial monitor. &nbsp;To do this, you&#8217;ll use the <a rel=\"noopener noreferrer\" href=\"http:\/\/arduino.cc\/en\/Reference\/Serial\" target=\"_blank\">Arduino serial commands<\/a>. You&#8217;ve been using these in <a rel=\"noopener noreferrer\" href=\"https:\/\/itp.nyu.edu\/physcomp\/labs\/labs-arduino-digital-and-analog\/\" target=\"_blank\">the digital and analog labs<\/a> to send data to the Serial Monitor. Instead of using the <code>Serial.println()<\/code> command as you did in those labs, however, use <code>Serial.write()<\/code>. This will send the sensor value as a raw binary value rather than as a string:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: arduino; title: ; notranslate\" title=\"\">\nvoid setup() {\n  Serial.begin(9600);\n}\n\nvoid loop() {\n  int analogValue = analogRead(A0)\/4; \/\/ read the sensor value\n  Serial.write(analogValue);          \/\/ send the value serially as a binary value\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Note_Why_divide_the_sensor_value_by_4\"><\/span>Note: Why divide the sensor value by 4?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dividing the sensor value by 4 reduces the range to 0 to 255, the range that can fit in a single byte.<\/p>\n\n\n\n<p>When you open the Serial Monitor, you will see garbage characters(Figure 7). What&#8217;s going on? The <code>Serial.write()<\/code> command doesn&#8217;t format the bytes as ASCII characters. It sends out the binary value of the sensor reading. Each sensor reading can range from 0 to 1023; in other words, it has a 10-bit range, since 2<sup>10<\/sup>&nbsp;= 1024 possible values. Since that&#8217;s more than the eight bits that can fit in a byte, you&#8217;re dividing the value by 4 in the code above, to get a range from 0 to 255, or 2<sup>8<\/sup>&nbsp;bits. For more background on this, see the notes on <a title=\"Variables\" rel=\"noopener noreferrer\" href=\"https:\/\/itp.nyu.edu\/physcomp\/lessons\/variables\/\" target=\"_blank\">variables<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/serial_monitor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"215\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/serial_monitor-300x215.png\" alt=\"The Arduino IDE with the serial monitor open. There is a string of random characters in the serial monitor\" class=\"wp-image-1218\" srcset=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/serial_monitor-300x215.png 300w, https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/serial_monitor.png 865w\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/a><figcaption>Figure 7: The Arduino IDE with the serial monitor open. The serial monitor screen is showing arbitrary characters. What is happening?<\/figcaption><\/figure><\/div>\n\n\n\n<p>So, for example, if the sensor reading&#8217;s value is 234, then the <code>Serial.write()<\/code> command sends the binary value 11101010. If the reading is 255, then <code>Serial.write()<\/code> sends 11111111. If it&#8217;s 157, then the command sends 10011101. For more decimal-to-binary conversions, open your computer&#8217;s calculator and choose the Programmer view (press apple-3 on a mac, and Alt-3 on Windows).<\/p>\n\n\n\n<p>When the Serial Monitor receives a byte, it and assumes it should show you the&nbsp;<a rel=\"noopener noreferrer\" href=\"http:\/\/www.asciitable.com\/\" target=\"_blank\">ASCII character<\/a>&nbsp;corresponding to that byte&#8217;s value. The garbage characters are characters corresponding to the ASCII values the Monitor is receiving. You&#8217;ll learn more about that in the <a title=\"Two-way (Duplex) Serial Communication using an Arduino\" rel=\"noopener noreferrer\" href=\"https:\/\/itp.nyu.edu\/physcomp\/labs\/serial-output-from-an-arduino\/two-way-duplex-serial-communication-using-an-arduino\/\" target=\"_blank\">two-way serial lab<\/a>.<\/p>\n\n\n\n<p>Sending data using <code>Serial.write()<\/code> is efficient for the computer, but it&#8217;s difficult to read. However, there are other ways to see the serial data.&nbsp;The serial terminal program <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/freeware.the-meiers.org\/\" target=\"_blank\">CoolTerm<\/a> is available for Mac, Windows, and Linux. It gives you both an ASCII view of incoming bytes and a hexadecimal view (Figure 8). Download it and install it, and open the Options tab. From there, pick your serial port in the menu, then close the Options tab. Then click the Connect button to open the serial port. <a rel=\"noopener noreferrer\" href=\"https:\/\/vimeo.com\/380356878#t=4m24s\" target=\"_blank\">Related Video:&nbsp;Using CoolTerm<\/a><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/CoolTerm-screenshot-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"251\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/CoolTerm-screenshot-1-300x251.png\" alt=\"The CoolTerm serial terminal application showing the hexadecimal view. The screen is filled with hexadecimal values in the center, along with the ASCII characters corresponding to those values running down the side.\" class=\"wp-image-3846\" srcset=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/CoolTerm-screenshot-1-300x251.png 300w, https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/CoolTerm-screenshot-1.png 800w\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/a><figcaption>Figure 8:&nbsp; The CoolTerm serial terminal application showing the hexadecimal view.<\/figcaption><\/figure><\/div>\n\n\n\n<p><strong>NOTE: <a rel=\"noopener noreferrer\" href=\"https:\/\/vimeo.com\/380356878#t=6m45s\" target=\"_blank\">only one program can control a serial port at a time.<\/a> When you&#8217;re not using a given program, remember to close the serial port.<\/strong>&nbsp;You won&#8217;t be able to re-program the Arduino module if you don&#8217;t, because the serial terminal program will have control of the serial port.<\/p>\n\n\n\n<p>Once you have data coming into CoolTerm, click the Hex button. Instead of seeing the ASCII representation of the byte, you&#8217;ll see its hexadecimal value, with the ASCII characters down the side. As you change the sensor&#8217;s value, you&#8217;ll see the values change.<\/p>\n\n\n\n<p>Remember, the microcontroller is just sending a series of electrical pulses. How those pulses are interpreted is up to the program that reads them. In CoolTerm, you see two different interpretations, the hexadecimal value and the ASCII character corresponding to the value.<\/p>\n\n\n\n<p>For most projects, you\u2019ll set the port settings to 9600 bits per second, 8 data bits, no parity, one stop bit, and no hardware flow control. This will be set in the Preferences or Settings or Connection Options of whatever program you&#8217;re using. Once you\u2019ve applied those settings, open the serial port by clicking. Any bytes you type in the window will be sent out the serial port you opened. They won&#8217;t show up on the screen, however. Any bytes received in the serial port will be displayed in the window. Click the Disconnect button to close the serial port.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Read_the_Data_in_Processing\"><\/span>Read the Data in Processing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a rel=\"noopener noreferrer\" href=\"https:\/\/vimeo.com\/380356541\" target=\"_blank\">Related video: Basic Processing<\/a><\/p>\n\n\n\n<p>The serial monitor in Arduino and CoolTerm aren&#8217;t the only programs on your computer that can read data in from the microcontroller. Any program that can access the computer&#8217;s serial ports can do it. <a rel=\"noopener noreferrer\" href=\"http:\/\/www.processing.org\" target=\"_blank\">Processing<\/a> is an excellent tool for reading serial data because you can program it to interpret the data any way you want. Write a program to take in serial bytes and graph them.<\/p>\n\n\n\n<p class=\"vspace\">The first thing you need to do is to import the Processing Serial Library. This is a code library that adds functionality to Processing so it can read from and write to the computer&#8217;s serial ports. You can do this by choosing the Sketch menu, then&nbsp;<code>Import Library...--&gt;serial<\/code>, or you can type:<\/p>\n\n\n\n<p><strong>Processing code:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\nimport processing.serial.*;\n<\/div>\n\n\n<p>To use the serial library, create an instance of the library in a global variable as shown below:<\/p>\n\n\n\n<p><strong>Processing code:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\nSerial myPort;\n<\/div>\n\n\n<p><strong>Note: you might get an error message when trying to use the Processing Serial Library for the first time.&nbsp;<\/strong><a rel=\"noopener noreferrer\" href=\"https:\/\/github.com\/processing\/processing\/wiki\/Serial-Issues\" target=\"_blank\">Here are instructions<\/a>&nbsp;on what to do if this happens.<\/p>\n\n\n\n<p>In the <code>setup()<\/code> method, set the window size, and use the serial library to get a list of the serial ports:<\/p>\n\n\n\n<p><strong>Processing code:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\nvoid setup () {\n  size(800, 600);        \/\/ window size\n\n  \/\/ List all the available serial ports\n  println(Serial.list());\n}\n<\/div>\n\n\n<p>If you run what you&#8217;ve typed so far, you should get a list of the serial ports in the monitor pane that looks a bit like this on a mac. On a Windows machine, the port list will have names like COM3, COM4, COM5, and so forth:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/dev\/cu.Bluetooth-Incoming-Port \n\/dev\/cu.Bluetooth-Modem \n\/dev\/cu.usbmodem13 \n\/dev\/cu.usbmodem15 \n\/dev\/cu.usbmodem17 \n\/dev\/cu.usbmodem1421 \n\/dev\/cu.usbmodem14221 \n\/dev\/tty.Bluetooth-Incoming-Port \n\/dev\/tty.Bluetooth-Modem \n\/dev\/tty.usbmodem13 \n\/dev\/tty.usbmodem15 \n\/dev\/tty.usbmodem17 \n\/dev\/tty.usbmodem1421 \n\/dev\/tty.usbmodem14221<\/pre>\n\n\n\n<p>One of these ports is the same as the serial port name you use in the Arduino programming environment. That&#8217;s the one you want. In this case, it&#8217;s&nbsp;\/<code>dev\/tty.usbmodem1421<\/code> or the 13th item in the list. But since arrays start counting at zero, that item is counted as the 12th item. So to open that port, add the following lines at the end of the setup:<\/p>\n\n\n\n<p><span style=\"font-weight: bold;\">Processing code:<\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\n\/\/ change the number below to match your port:\nString portName = Serial.list()[12];\nmyPort = new Serial(this, portName, 9600);\n<\/div>\n\n\n<p>Finally, set the background color. Pick a nice color, don&#8217;t just use primary colors. You&#8217;ll be looking at it a long time, so you might as well like it. If you can&#8217;t think of a nice color combination, try <a rel=\"noopener noreferrer\" href=\"https:\/\/color.adobe.com\/\" target=\"_blank\">color.adobe.com<\/a>. Add this to the end of the setup:<\/p>\n\n\n\n<p><span style=\"font-weight: bold;\">Processing code:<\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\nbackground(#081640);\n<\/div>\n\n\n<p>The serial library has a special method called <code>serialEvent()<\/code>. Every time a new byte arrives in the serial port, <code>serialEvent()<\/code> is called. So you can use it to read bytes coming in the serial port from the microcontroller. Write a serialEvent method that reads the incoming byte and prints it out:<\/p>\n\n\n\n<p><span style=\"font-weight: bold;\">Processing code:<\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\nvoid serialEvent (Serial myPort) {\n  \/\/ get the byte:\n  int inByte = myPort.read();\n  \/\/ print it:\n  println(inByte);\n}\n<\/div>\n\n\n<p><code>myPort.read()<\/code> tells the program to read a byte from the serial port <code>myPort<\/code>. Bytes are read like peas coming out of a peashooter. Every time you read a byte, it&#8217;s removed from the serial buffer. So it&#8217;s good practice to read the byte into a variable as shown above, then never read again until you want another byte. If you want to do something with the byte you read (like graphing it), use the variable in which you saved the incoming byte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Graph_the_Sensor_Value\"><\/span>Graph the Sensor Value<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now it&#8217;s time to draw a graph with the bytes you read. To do this, you&#8217;ll pick a point whose distance from the bottom of the window corresponds to the byte&#8217;s value. In other words, the vertical position (call it <code>yPos<\/code>) equals the height minus the byte&#8217;s value (<code>yPos = height - inByte<\/code>). Add global variables called <code>xPos<\/code> and <code>yPos<\/code> and set them to 0. Then in the <code>draw()<\/code>, set the stroke color to a nice color, and draw a line at xPos, from the bottom of the screen to the vertical position you just calculated.<\/p>\n\n\n\n<p>Add this at the top of the program:<\/p>\n\n\n\n<p><span style=\"font-weight: bold;\">Processing code:<\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\n\/\/ at the top of the program:\nfloat xPos = 0; \/\/ horizontal position of the graph\nfloat yPos = 0; \/\/ vertical position of the graph\n<\/div>\n\n\n<p>Add this to the end of the <code>serialEvent()<\/code> method. it will change <code>yPos<\/code> based on the last byte you read from the serial port:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\nyPos = height &#8211; inByte;\n<\/div>\n\n\n<p>Then add this <code>draw()<\/code> method:<\/p>\n\n\n\n<p><span style=\"font-weight: bold;\">Processing code:<\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\nvoid draw () {\n  \/\/ draw the line in a pretty color:\n  stroke(#A8D9A7);\n  line(xPos, height, xPos, yPos);\n}\n<\/div>\n\n\n<p>Finally you need to increment the horizontal position after you draw the line, so that the next byte&#8217;s line is further along on the graph. If you reach the edge of the screen, set the horizontal position back to 0. Do this at the end of the <code>draw()<\/code>:<\/p>\n\n\n\n<p><span style=\"font-weight: bold;\">Processing code:<\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \">\n\/\/ at the edge of the screen, go back to the beginning:\nif (xPos >= width) {\n  xPos = 0;\n  \/\/ clear the screen by resetting the background:\n  background(#081640);\n} else {\n  \/\/ increment the horizontal position for the next reading:\n  xPos++;\n}\n<\/div>\n\n\n<p>That&#8217;s it! When you run this sketch, you&#8217;ll see the sensor&#8217;s value graphed on the screen like so (Figure 9):<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/processing_graph_screenshot.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"242\" src=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/processing_graph_screenshot-300x242.png\" alt=\"Graphing a sensor in Processing\" class=\"wp-image-1228\" srcset=\"https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/processing_graph_screenshot-300x242.png 300w, https:\/\/itp.nyu.edu\/physcomp\/wp-content\/uploads\/processing_graph_screenshot.png 847w\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/a><figcaption>Figure 9: Graphing a sensor in Processing.&nbsp; The sensor&#8217;s value is represented by rising and falling green lines which create a graph.<\/figcaption><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this lab, you&#8217;ll send data using asynchronous serial communication from a single sensor to a Processing sketch on a personal computer that will then graph the sensor&#8217;s value onscreen.\u00a0<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":11,"menu_order":220,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[15,30,9],"tags":[],"class_list":["post-1200","page","type-page","status-publish","hentry","category-lab","category-processing","category-serial-communication"],"_links":{"self":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/1200"}],"collection":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/comments?post=1200"}],"version-history":[{"count":65,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/1200\/revisions"}],"predecessor-version":[{"id":10708,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/1200\/revisions\/10708"}],"up":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/11"}],"wp:attachment":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/media?parent=1200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/categories?post=1200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/tags?post=1200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}