Adding a Second Knob

To add a second potentiometer isn’t much more work than adding the first one. We will use a second special character to separate the first potentiometer value from the second potentiometer value.

Circuit

Exercise 1

Add the second potentiometer to the breadboard. Connect it to Analogue Pin 1.

Arduino Code

Exercise 2

Change your Arduino code so that the data sent to the serial port looks like:

231; 0
230; 1
229; 1

Processing Code

We now have 2 values included each time we read in a String from the serial port. We know that they are separated by a ;, so we can use that to split up the String.

Excercise 3

The following line of code takes a String and looks for the character ;. It then returns an array of String types.

String data[] = split( inString, ';' );

We now can test and make sure there are two items in the array as we would expect. If there are, then we can clean up any whitespace from the String.

Add the below code to serialEvent() and then add in the missing lines of code so that the data from the potentiometers control both the x and y movement of the pen.

if ( data.length == 2 ) { // continue only if there are 2 things
    String xValue = trim( data[0] ); // remove extra whitespace
    String yValue = trim( data[1] ); // remove extra whitespace

// convert from string to int and then resize range to window
}

Full Source Code

Arduino

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

void setup() {
  // start Serial
  Serial.begin( 9600 );
}

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

  // print out values
  Serial.print( xValue );
  Serial.print( "; " );
  Serial.println( yValue );

  // 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 data[] = split( inString, ';' );
   if ( data.length == 2 ) { // continue only if there are 2 things
    String xValue = trim( data[0] ); // remove extra whitespace
    String yValue = trim( data[1] ); // remove extra whitespace

    // convert from string to int and then resize range to window
    int xv = int(xValue);
    penX = map( xv, 0, 1023, 0, width);
    int yv = int(yValue);
    penY = map( yv, 0, 1023, 0, height);
  }
}

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