Topic: Data Communication between Arduino and Processing Subject: Computer Controlled System Design Need to do these: -Make a schematic diagram using the software TinkerCAD to match the Lab (under the tab

Diagrams and Pictures) - Create a flow chart to match the lab - Answer the Discussion questions after doing this need to add these in lab report provided (you don't need to do lab report it's already been done you just need to add)/n Lab 4: Data Communication between Arduino and Processing Objectives 1. Become familiar with the Processing graphical environment, Java language, and reference site. 2. Understand the basics of data communication between Arduino and Processing. 3. Create a simple interactive system using Arduino and Processing. Background Processing is an open source programming language and integrated development environment (IDE) built for the electronic art, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks. The user interface of Arduino IDE is very similar to the Processing IDE user interface. Casey Reas and Benjamin Fry, both formerly of the Aesthetics and Computation Group at the MIT Media Lab, were involved in the creation of Arduino IDE as well as Processing IDE. However, please note some major differences: • Arduino IDE allows you to program Arduino boards by using a simplified version of C/C++ language, and use and control physical objects such as sensors and motors. Whereas, Processing IDE allows you to write PC applications using a simplified version of Java language, and lets you create and control virtual objects such as circles and spheres and many other 2D and 3D graphics and shapes. One of the stated aims of Processing is to act as a tool to get non-programmers started with programming, through the instant gratification of visual feedback. The Processing language builds on the Java language, but uses a simplified syntax and graphics-programming model. Download and install Processing 1. Download Processing, if it is not installed already in your computer. Follow this link: https://www.processing.org/download/ 2. After you follow the instructions in the above webpage and select the platform you are working on (i.e., Windows, Mac, etc.), you would have downloaded a zip file. 3. Unzip the file. Make sure you know the folder location where it is unzipped. 4. There is no need for further installation. Processing runs by clicking on the Processing program or application. 5. Open and run following examples to check that everything is working. Processing IDE > File > Examples > Demos > Graphics Learn Processing The community behind Processing has done an excellent job of putting together good documentation and reference. You can find the language reference by following this link: https://www.processing.org/reference/ The structure of a Processing sketch is similar to the Arduino sketch. However, instead of a void loop() function, Processing uses a void draw() function that loops forever, just like the loop() function of Arduino. Procedure Part A (Analysis): 1. In a new Processing sketch, open the example MouseeCircle.pde code available in Lab-#.zip file. The MouseeCircle.pde code is shown on next page (inside the text box) for reference. 2. Run the code in Processing IDE. You should see a circle drawn inside a graphics window, that will follow the mouse pointer. 3. Go to Processing reference website and look for the following functions used in the code. size (255, 255); strokeWeight (10); frame Rate (16); background (100); fill (0, 121, 184); stroke (255); ellipse (X, Y, radius, radius); 4. For each of the functions shown above, copy the function description from the Reference web site and paste it inside a comment block /* */ before each function. The purpose is to thoroughly understand how the function works. ... 5. Final code for Part A of the lab should include a comment for each function used in the code, indicating what each function does. 6. Save the final modified code in a file and include it in your report. 7. Take a screenshot of the graphics window with the circle, to include in the Measurements section of the lab report. Schematic diagram for Procedure Part B (Design): R2 10k +5V www +5V A0 Arduino TX/1 RX/0 ⇒ USB < to PC /* Processing Example: MouseeCircle.pde /* Global variables ***** float radius = 50.0; int X, Y; ***** int nX, nY; int delay = 16; /* Setup the Processing drawing window *** void setup() { size (255, 255); strokeWeight(10); frameRate (16); width / 2; height / 2; X = Y = nx = X ; *** } nY = Y; /* Main draw loop void draw() { radius = radius + sin( frameCount / 4 ); // Track circle to new destination X+= (nX-X)/delay; Y+= (nY-Y)/delay; // Fill canvas grey background (100); // Set fill-color to blue fill (0, 121, 184); // Set stroke-color white stroke (255); // Draw circle ellipse (X, Y, radius, radius); } /* Set circle's next destination ** void mouseMoved () { nx = mouseX; nY = mouseY; } ** / / Procedure Part B (Design) (Interactive Circle): In the following steps you will create a new version of the previous processing sketch MouseeCircle.pde, where the size of the circle, the radius, is controlled by a potentiometer connected to an Arduino board. The readings of the potentiometer in the Arduino will be sent through serial/USB communication to the Processing sketch running on the PC. 8. To refresh your memory about Arduino, potentiometers, and serial communication, refer to the Arduino IDE example AnalogReadSerial. This example program can be used to complete the Arduino side of this lab exercise. Upload the Arduino example AnalogReadSerial to the Arduino board. 9. For the Processing program, you will need to make use of the Processing serial library. (Serial library reference: https://processing.org/reference/libraries/serial/ ) Add following lines shown inside the text box, to beginning of program before /* Global variables */ section: import processing.serial.*; // create serial port object Serial myPort; 10. Next, you will need to add the following lines shown inside the text box, in the beginning of the setup() function to activate the serial port. IMPORTANT NOTE: You will need to specify the correct USB/COM (serial) port index number in square brackets in Serial.list () [0], where Arduino USB cable is connected. The first USB/COM port on your PC is indicated by Serial. list () [0] The second USB/COM port on your PC is indicated by Serial.list() [1] The third USB/COM port on your PC is indicated by Serial.list() [2] so on and so forth. // List all the available serial ports println (Serial.list() ) ; // Change the serial/USB port index number in square // brackets in Serial.list()[0], // depending on whatever port Arduino is connected to. myPort = new Serial (this, Serial.list() [0], 9600); // Don't generate a serialEvent (), // unless you get a newline character: myPort.bufferUntil('\n'); This is how serial communication works in Processing. When it is setup as above and there is data coming through the serial port, the serial library triggers a serial event that is captured by the function shown below. 11. Add the following serialEvent( ) function shown inside the text box, to the end of your code after all the other functions. /* Get potentiometer values from Arduino via USB/COM port void serialEvent (Serial myPort) { // get the ASCII string: String inString = myPort.readStringUntil('\n'); if (inString != null) { // trim off any whitespace: inString = trim (inString); // convert to an int and map to the screen height: float inByte = float(inString); map (inByte, 0, 1023, 0, height); / inByte = radius = inByte; } } 12. Comment each line of the serialEvent () function to show that you understand how it works. 13. Run the modified Processing sketch on the PC. 14. Rotate potentiometer connected to Arduino analog input to change the size of the circle. 15. (Extra Credit) Change two other attributes of the circle by using the radius variable. For example, vary the shape of the circle to an oval, vary the fill color of the circle, etc. 16. Put a copy of final modified Processing code (sketch) for Part B in your report. 17. Take a screenshot of the graphics window, to include in the Measurements section of the lab report. Dig deeper You can further explore the power of Processing on Android and iOS devices. https://play.google.com/store/apps/details?id=com.calsignlabs.apde&hl=en https://apps.apple.com/us/app/processing-icompiler/id648955851 Critical thinking questions for Discussion section in report? Instead of the usual hardware and software discussion of Input, Data Processing, Data Communication and Output sub-systems; using your own words, submit the answers to the following questions in the Discussion section of your lab report: • What is Processing? What is the relationship between Arduino IDE and Processing IDE? How much different or similar is Java compared to C/C++? How can you use Processing for your course project? What is your opinion about APDE?