Digital Etch-A-Sketch by Mattias Green

A simple but effective project to demonstrate physical control over a computer screen.

1. Connect two potentiometers to Arduino analog inputs A0 and A1
2. Use serial-communications to get pot values from Arduino to Processing
3. Make a Processing sketch that accepts the serial data and draws lines

 Arduino Code

void setup() {
  // Start serial-communications with computer:
  Serial.begin(9600); 
}

void loop() {
  delay(1);
  int sensorValueA = analogRead(A0); // Read pot at pin A0
  delay(1); // Wait between AD-conversions
  int sensorValueB = analogRead(A1); // Read pot at pin A1
  
  // Send variable contents over serial:
  Serial.print(sensorValueA);
  Serial.print(",");
  Serial.println(sensorValueB);
  // The formatting above is important when using more 
  // than one variable
}

Please take a moment to think about how the variable values will be presented to Processing. You cannot just Serial.println(var1); Serial.println(var2); If you’d do that, there would be no way for processing to know which value comes from which variable. To help parsing the data in Processing, print the values on the same line, separated by a comma.

Now, processing will se your two values like this: 233,856 and they will be considered a text String, not numeric values. (233 would be the value at Arduino pin A0 and 856 at A1.) You can easily convert such a string of words delimited by commas into an array of words.  Use split(str,delimiter) in Processing. “233,856” will be converted to [“233”, “856”] and each item can be accessed individually, and treated as a numeric value.

Processing Code

Serial myPort; // Use the serial port:
 
float prevX = -1; // Store pot values here
float prevY = -1;

void setup() {
  size(1024, 800); // Set screen size
 
  println(Serial.list()); // Print all available serial ports. Figure out which one the arduino uses.
  myPort = new Serial(this, Serial.list()[5], 9600); // The [5] refers to the 6th serial port in the list
  myPort.bufferUntil('\n');

  strokeWeight(5);
  stroke(50); // Color
}

void draw() {
	// Nothing
}

void serialEvent(Serial myPort) {
  // This could probably be optimized a bit, 
  // but I don't have Processing at hand right now..
  String inString = myPort.readString();   // Read a string from the serial port
  String[] inValues = split(inString, ','); // Split comma separated string to array of strings
  float inX = float(inValues[0]); // Convert array item at index 0 to a float number 
  float inY = float(inValues[1]); // Convert array item at index 1 
  
  if((inX != prevX) || (inY != prevY)) { // Not necessary, this is to avoid drawing if pots haven't changed
    if((prevX > -1) && (prevY > -1)) {
      line(prevX, prevY, inX, inY); // Draw a line from the last recorded pot values to the current ones
    }
    prevX = inX; // Store the new pot values for next draw cycle
    prevY = inY;
  }
}

 

Proof of Concept ;)

(Does not work in Firefox for some WordPress-related reason)