Lecture 7. Processing Development Environment (or PDE)

Transcription

1 Lecture 7 Processing Development Environment (or PDE)

2 Processing Class Overview What is Processing? Installation and Intro. Serial Comm. from Arduino to Processing Drawing a dot & controlling position Drawing a circle & controlling grayscale Drawing a square Switching control using buttons Additional Processing material

3 Processing? Processing is a free, open source, crossplatform programming language and environment for people who want to create images, animations, and interactions. Created in 2001 by Casey Reas and Ben Fry at the MIT Media Lab. Downloads, updates, reference, forums, etc. at:

4 Installation For Windows: Double-click the.zip file and drag the folder inside labeled Processing to a location on your hard drive. Double click the Processing icon to start Processing. If you are stuck go to hooting for help.

5 Anatomy of a sketch A sketch is a file or project you create in Processing. When you first open up a new sketch it will be completely blank.

6

7 Setup() This function runs once, at the very beginning of your sketch. You will use setup to set up certain aspects of your sketch, makes sense right? Most importantly for this class you will begin Serial communication in the setup function. The setup function without anything in it looks like this:

8 Draw() This function is where everything happens in your sketch. The draw loop is the portion of code that keeps repeating while the Processing sketch is open. The draw loop looks like this:

9 Basic Graphics we will be using point (x, y); background(color); ellipse (x, y, width, height); fill (red, green, blue, transparency); rect(x, y, width, height);

10 Reference One very convenient way to access Processing s Help Reference is to highlight a function or a word used in your code, right click and select Find in Reference (which brings you to the processing.org reference page):

11 Arduino Basics: Reading Digital values are 8 bit resolution: Analog values are 10 bit resolution: Commands for reading sensors: digitalread(pin#); & analogread(pin#);

12 Arduino Basics: Writing All output is 8 bit resolution. Commands for writing to actuators: digitalwrite(pin#, value); & analogwrite(pin#, value);

13 Hooking into Processing We can send values to Processing from an Arduino and use these values to control things in Processing Like Processing, we have a setup() function. In that function, we need to open Serial communication with this line of code: Serial.begin(9600);

14 Hooking into Processing Our potentiometer is connected to analog pin 0. Our buttons are connected to digital pins 2 and 3. The three characters are used for Serial communication.

15 Hooking into Processing We now have to set all pins to the right pinmode, in our setup function as well as pulling internal pull up resistors HIGH and establishing Serial communication. The establishcontact() function keeps the Arduino sketch from exiting the setup function until it hears from Processing and establishes contact.

16 Hooking into Processing Here s the establishcontact() function. It continually sends Hello out on the transmit serial pin. This travels to the computer. While the computer has not responded there is no data in the Serial buffer so Arduino just keeps sending Hello. Once the Arduino hears anything from the computer it exits establishcontact() as well as the setup function and enters the Arduino loop function.

17 Hooking into Processing In our loop() function, we need to read from all the sensors and send the values out the serial port by calling Serial.write and Serial.print

18 Hooking into Processing The difference between Serial.write and Serial.print is that write is used to transmit byte type variables and print is used to transmit all other variable types.

19 Hooking into Processing Here are the rest of the loop() statements. Basically we are just sending more data about the other sensors plugged into the Arduino. Then we send an end byte with Serial.write. Finally we send an empty println() command so Processing receives a \n and knows we have sent all the sensors values and will be starting over from the beginning.

20 Receiving Data in Processing We re sending data from the Arduino but we need a way to receive it in Processing. First, import the serial library. We ll also need a Serial object to define which serial port we ll be using, as well as an integer array for our sensor data. We also have a boolean variable to keep track of if we ve heard from Arduino or not. In your setup function, you need to initialize your Serial object, passing it the parent object (don t worry about this) which port you want to use, and the baud rate. Make sure you pick the same baud rate that you defined in the Arduino sketch. The bufferuntil function just stores our incoming data in a buffer until we re ready to do something with it. import processing.serial.*; Serial usbport; int [ ] sensors = null; boolean firstcontact = false; void setup() { usbport = new Serial (this, Serial.list( ) [0], 9600); usbport.bufferuntil ( \n ); }

21 Receiving Data in Processing Our next step is to define a SerialEvent function this function automatically gets called every time a character in our bufferuntil() statement is read from the serial port. We then read a chunk of data into a String, trim whitespace, and split it using our delimiter character into our sensors[ ] integer array. This puts each sensor value into its own addressable place in the array. There is a println that should be printing out the sensors values it sees try running the sketch to make sure you re getting values.

22 Receiving Data in Processing

23 Receiving Data in Processing Basically, we check for Serial Communication from Arduino. Once it reads a carriage return it checks to make sure the data string is not empty. Then we print out the string to the console in Processing so we can see what data we are receiving.

24 Receiving Data in Processing Next there is some code to deal with the eventuality that we have not made contact with the Arduino yet. If we haven t made contact it listens for a Hello. When it receives this it clears the Serial Buffer with usbport.clear(), sets the variable firstcontact true and sends an A to the Arduino. This causes the Arduino to exit the establishcontact() function and start sending data. After all that we print contact to the Processing console so that we can follow what is going on and we know we ve made contact with the Arduino.

25 Receiving Data in Processing If firstcontact is true we do the following code which splits the string up by our delimiter character into an array. This lets us put each sensor value into its own variable. Then there is a for loop that prints out the sensor values so we can see them. Then we assign the various values from the sensors array to individual variables. If you don t put the array values into their own variables you will get a null pointer exception when you try to use them in your code.

26 Using Received Data in Processing So we ve got all of the data we want placed in variables. Now we need to use them. In the draw loop we are calling the dotdrawer function and sending it the value of the potentiometer or sensor1.

27 Using Received Data in Processing Inside the dotdrawer function we have to use map to calibrate the potentiometer value (which goes up to 1023) so they correspond to an X value in the window created by Processing. Then we can use that value to draw a point in the window.

28 Using Received Data in Processing But wait! Why does the point draw itself over and over again? How can we fix this?

29 Using Received Data in Processing In order to fix this we will need to re-draw the background of the window over and over again before we draw the point. Here s what that code looks like:

30 Using Received Data in Processing Ok, that s fixed but one pixel is kind of hard to see. Let s put an ellipse in place of the pixel.

31 What Else? We ve still got two buttons we haven t used. Next we will use them to switch the circle between a circle and a square.

32 Making a New Tab and Function First thing we have to do is create a function that creates a square. To do this click on the arrow in the upper right corner of the Processing environment and select New Tab. Name the tab squaredrawer.

33 Making a New Tab and Function Here s what we need to type to make our empty function named squaredrawer.

34 Making a New Tab and Function Let s pass it the same variable that we sent to dotdrawer. (Copy and Paste is your friend.)

35 Making a Square Similar to the Circle Now copy the following code from dotdrawer and paste it into your new function.

36 Making a Square Similar to the Circle Now add the following code to actually display the square when the function is called.

37 Making a Square Similar to the Circle Add these last two lines of code so you can move the square by turning the potentiometer.

38 Switching between the sphere and the circle At the beginning of your draw function add two if statements that check the first and second button and change the variable you just created to keep track of the last button that was pushed. (Make sure you don t mix up the == and the =.)

39 Switching between the sphere and the circle Now simply add two more if statements that check the buttonpresse d variable to decide which of your two functions should be called.

40 We Controlled X, What About Y? Add another analog sensor, such as the soft potentiometer, and see if you can control the Y position of your circle and square with it. Remember, you will need to change code on the Arduino side as well as in Processing.

41 Sending Data from Processing to Arduino We ve received data in Processing from Arduino, but what if we want to go the other direction? In order to send data back to Arduino the first thing we need to do is add a command that spits information back over the Serial line from Processing to Arduino. (In this case we added two commands.) Don t forget the single quotation marks!

42 Sending Data from Processing to Arduino Now we need to add some code to the Arduino side so Arduino does something depending on what data it receives. The first thing we need to add is code that listens to see if there is data available on the RX Serial line. Add this code at the beginning of your loop function. Now we have a variable named signal that contains the data Arduino sees in the Serial buffer.

43 Sending Data from Processing to Arduino Next we need a simple switch case statement that tells us what to do if we receive certain information. You can use communication that is larger than one character, similar to the TX data Arduino is already sending. In this case we are using a single character to communicate.

44 Where To Go From Here? Here are this workshop s materials: Here are some links to help you with Processing: