Putting It All Together

We now have all the elements in place and just have a few last steps to complete.

Circuit

Exercise 1

If you haven’t done so already, make sure you have

• a button being read into Digital Pin 7 (should read 1 when not pressed, 0 when pressed)
• a potentiometer connected to A0
• a potentiometer connected to A1

Arduino Code

Exercise 2

We are now going to print the values from the button and both potentiometers. We will add labels so we know where each piece of data came from. Alter your Arduino code so that it prints the following:

x: 10; y: 87; button: 1
x: 11; y: 87; button: 1
x: 12; y: 86; button: 1

Processing Code

Exercise 2

We already know how to read in a String and look for a particular character, then split it up into multiple Strings.

The following code will split up a String wherever there is a ; and then each shorter String is processed one by one.

String pairs[] = split( inString, ';' ); // split up string into pairs

// go through each pair of label and value
// and assign it to its variable
for ( int i=0; i<pairs.length; i++) {
    // add code here to split Strings again
}

Add code in the for loop to further split the String where there is a :. Then compare the first item in the array from the split to see if the value is from x, y, or button. Remember you use equals() to compare Strings.

You should now have an Etch A Sketch that is controlled by two knobs and a button. Now you can customise the drawing style!

Full Source Code

Arduino

// variables for pins
int xPin = A0;
int yPin = A1;
int buttonPin = 7;

void setup() {
  // turn on internal pull-up resistor
  pinMode( buttonPin, INPUT_PULLUP );

  // start Serial
  Serial.begin( 9600 );
}

void loop() {
  // read in values
  int xValue = analogRead( xPin );
  int yValue = analogRead( yPin );
  int buttonValue = digitalRead( buttonPin );

  // print out values
  Serial.print( "x:" );
  Serial.print( xValue );
  Serial.print( "; y:" );
  Serial.print( yValue );
  Serial.print( "; button:" );
  Serial.println( buttonValue );

  // wait a little bit
  delay( 30 );
}

Processing

import processing.serial.*;

float penX;
float penY;

color bgColor = color( 0 ); // color of background
color penColor = color( 60, 120, 20 ); // color of our pen

Serial myPort; // our serial port

/* setup
   everything here happens only once when
   the sketch starts
*/
void setup() {
   size( 800, 600 );
   background( bgColor ); // set the background color
   noStroke(); // turn off outline around shapes
   fill( penColor ); // set pen color

   penX = width/2; // starting x position of pen
   penY = height/2; // starting y position of pen

   println(Serial.list()); // print list of all ports
   // you may need to change the number in [ ] to match
   // the correct port for your computer
   myPort = new Serial(this, Serial.list()[10], 9600);

   myPort.bufferUntil('n');
}

/* draw
   everything here happens repeatedly
*/
void draw() {
  ellipse( penX, penY, 30, 30 );
}

/* serialEvent
   this function is called whenever there is data waiting
   on the serial port
*/
void serialEvent(Serial p) {
  String inString = p.readString(); // read in the string
  //println( inString );
  String pairs[] = split( inString, ';' ); // split up string into pairs

  // go through each pair of label and value
  // and assign it to its variable
  for ( int i=0; i<pairs.length; i++) {
    String data[] = split( pairs[i], ':' );
    if ( data.length == 2 ) { // continue only if there are 2 things
      String label = trim( data[0] ); // remove extra whitespace
      String value = trim( data[1] ); // remove extra whitespace
      //print(label);
      //print(value);
      if ( label.equals( "button" ) ) {
        if ( value.equals( "0" ) ) {// if button was pressed
          clearDrawing();
        }
      }
      if ( label.equals( "x") ) {
        int v = int(value);
        penX = map( v, 0, 1023, 0, width);
      }
      if ( label.equals( "y") ) {
        int v = int(value);
        penY = map( v, 0, 1023, 0, height);
      }
    }
  }
}


/* clearDrawing
   this function is called when button on Arduino is pressed
 */
void clearDrawing() {
   background( bgColor );
}