Processing to Arduino I

Ardino Code

1. Create a variable to hold the output pin
   
   

   ---

2. Create a variable of type char to hold inByte
   
   

   ---

3. Create a setup() function.
   
   

   ---

4. Inside setup()
   1. Create Serial communication by calling Serial.begin(9600)
      
      

      ---

   2. Set your pin to be an output
      
      

      ---

   3. Call a function named blink()
      
      
   
   
   
5. In loop() function:
   
   1. check if serial is available by using this expression:

       if (Serial.available() > 0) {

      
      
      

      ---

   2. Within the conditional
      1. Set the inByte variable to what is Read in from Serial. Use Serial.read()
         
         

         ---

      2. If the inByte is 'L' turn off the light
         
         

         ---

      3. If the inByte is 'H' turn on the light and print the char in the Serial Monitor
         Use Serial.println()
         
         
      4. Call delay() and pass it 100
         
         
      5. Print the value in the serial monitor
         
         
      
      
   
   

   ---

6. Define the blink() function by making the led turn on and off once.
   
   

Processing

1. In Processing, create a new sketch:

   //import processing serial package
   import processing.serial.*;
   
   
   //create a variable of type Serial named port. Do not set it.
   ____________
   
   
   void setup() { 
   //set the width and height
     size(_____,_____);
     
     noStroke(); 
     
     //set the frameRate to 10
     frameRate(___); 
   
     // List all the available serial ports in the output pane. 
     // You will need to choose the port that the Arduino board is 
     // connected to from this list. The first port in the list is 
     // port #0 and the third port in the list is port #2. 
     println(Serial.list()); 
   
     // Open the port that the Arduino board is connected to (in this case #0) 
     // Make sure to open the port at the same speed Arduino is using (9600bps) 
     port = new Serial(this, Serial.list()[0], 9600); 
   } 
   
    
   
   void draw() {
   //select a background color in hex format 
     background(#_________); 
     // check if mouse is over square
     if(mouseOverRect()) { 
     // change color 
       fill(#________); 
       // send an 'H' to indicate mouse is over square         
       port.write('H');       
     } else { 
       // change color 
       fill(#________); 
        // send an 'L' to indicate mouse is not over square 
        __________________
     } 
     //empties the buffer
     port.clear();
     //create a rectangle
     rect(___,___,___,____);  // draw square 
   }
   
   // function to test if mouse is over square 
   boolean mouseOverRect() { 
     return ((mouseX >= ___)&&(mouseX <= ____)&&(mouseY >= ___)&(mouseY <= ____)); 
   } 
   

Putting it together

1. Open the Serial Monitor in Arduino
   
   

   ---

2. Run the Processing program
   
   

   ---

Pots and Processing

Arduino

// variables for input pin and control LED
int analogInput =__;
int LEDpin =__;

// variable to store the value 
int value = 0;
int value2 = 0;
int old=0;

// a threshold to decide when the LED turns on

void setup(){

  // declaration of pin modes
  pinMode(LEDpin, OUTPUT);

  // begin sending over serial port
  Serial.begin(9600);
}

void loop(){
  // read the value on analog input
  value = analogRead(analogInput);
  delay(10);
 value2 = analogRead(analogInput);
  
  if(value!=old && (value==value2)){
  
    // print out value over the serial port
    Serial.print(value/4);
    
    // and a signal that serves as seperator between two values 
    printByte(10);

    // wait for a bit to not overload the port
    delay(10);
    
    old=value;	
  }
}
void blink(){
digitalWrite(LEDpin, HIGH); 
   delay(500);
  digitalWrite(LEDpin, LOW); 
}

Processing

// importing the processing serial class
import processing.serial.*;

// variables for serial connection, portname and baudrate have to be set 
  Serial port;
  
 
// definition of window size and framerate
  int xWidth = 267;
  int yHeight = 400;
  int fr = 24;
  

  int value = 0; 
  String buf=""; 
  int value1=0;  

// variables to draw graphics
  int xpos; 



void setup(){
port = new Serial(this, Serial.list()[0], 9600);  

  // set size and framerate
  size(xWidth, yHeight); 

 frameRate(fr);
 
}

void drawPotState(){
   noStroke();
   fill(0, 255-xpos, xpos);
   // draw rectangfle at xpos 
    rect(xpos, 0, width/32, height);
   fill(255-xpos, 0, 0);
   // draw rectangfle at xpos 
    rect(0, 0, xpos, height);

   
   
}

void serialEvent(int serial){
  // if serial event is not a line break 
  if(serial!=10) {        
    // add event to buffer
    buf += char(serial);          
    } else {
    // if serial is line break set value1 to buff and clear it
    value1 = int(buf);
    buf="";
    
    }
    // convert value1 to xpos
    
    if (value1>0 && value1<256){
        xpos=value1;   
    }
}

// draw listens to serial port, draw 
void draw(){
    background(0);
// listen to serial port and trigger serial event  
 while (port.available() > 0) {
    serialEvent(port.read());
  }
  
drawPotState();  
}

Sending Multiple values

1. Wire up a board with 3 potentiometers. One will control the red level, another the green level and the last, the blue level.
   
   

   ---

2. In Arduino set up your program
   1. Set up your red, green and blue variables
      
      

      ---

   2. In setup() start serial communication
      
      

      ---

   3. In loop() use

      Serial.print("R");
        Serial.println(analogRead(redPin));

      for each color
      
      

      ---

   4. Call delay and pass it 100
      
      

      ---

   
   
   

   ---

3. Open Processing and create a new sketch
   
   

   ---

4. Copy, paste and modify:

   //import the serial package
   _________________
   
   //create a variable of type String named buff and set to an empty string
   ___________
   
   //create 3 variables of type int to hold the rval, gval and bval values
   _______________
   
   //create a variable of type int named NEWLINE and set it to 10
   _________________
   
   //create a variable of type Serial named port. Do not set it
   ________
   
   
   void setup(){
   
   //set the size of the sketch
   _______________
   
     // Print a list in case COM1 doesn't work out
     println("Available serial ports:");
     println(Serial.list());
   
     //port = new Serial(this, "COM1", 9600);
     // Uses the first available port
     port = new Serial(this, Serial.list()[0], 9600);
   }
   
   void draw(){
     while (port.available() > 0) {
       serialEvent(port.read());
     }
     //set background to the red, green and blue values
    ________________
   }
   
   void serialEvent(int serial) { 
     // If the variable "serial" is not equal to the value for 
     // a new line, add the value to the variable "buff". If the 
     // value "serial" is equal to the value for a new line,
     //  save the value of the buffer into the variable "val".
     
     //test if serial does not equal NEWLINE
    __________________
    
    //if condition is met set buff to itself plus the char passed in through serial
    //use char(serial)
      ____________
     } else {
       // The first character tells us which color this value is for
       char c = buff.charAt(0);
       // Remove it from the string
       buff = buff.substring(1);
       // Discard the carriage return at the end of the buffer
       buff = buff.substring(0, buff.length()-1);
       // Parse the String into an integer
       if (c == 'R')
         rval = Integer.parseInt(buff);
       else if (c == 'G')
       //continue for green and blue
        
        
        
       // Clear the  "buff"
       __________
     }
   }

   
   Modify the code so that the user changes the color of a rectangle instead of the background.
   

   ---