Lab 4: Pots + Processing

For this lab, I wanted to focus on transferring data from multiple variables and multiple sensors from Arduino into Processing. I was less concerned with what visualization to make than how to give someone more control over it and how to allow it to have multiple input streams. Because the photocell was too sensitive for easy daylight use, I stuck with the FSR for my main sensor. I kept the LED within the circuit so that it could provide me with a backup indication of the pressure on my sensor, and then I added three pots back into the circuit. Each pot controls RGB values, and can be adjusted independently. The FSR I covered with a stress-reliever type foam ball with a slit cut into it. This allowed me to slip it over the FSR and it could act as a diffuser for the squeeze pressure on the ball. This way I can squeeze on the ball in general and still affect the FSR value. The visualization responds quickly to changes in pressure and color. (The nice thing about using RGB values instead of RGB LEDs is that we can actually get additive white onscreen!)

I also ran into some problems in the making of this visualization: Processing was not correctly reading in the final value from the serial input. After troubleshooting to determine that the problem was indeed within Processing, I added in a dummy value as a final value in my Arduino output as a quick solution. I also had an issue where I was getting a “USB device drawing too much power” from my computer. After trying a few solutions, I realized that two of my pots had shifted on the desk and were touching bare wire at one spot. After rearranging and separating them, I was able to get the circuit working again.

Here is a GIF of my animation (I am squeezing with one hand and adjusting the pots with the other hand):

And my circuit:


– Arduino Uno
– breadboard
– 1 LED
– 1 220 ohm resistor
– 1 FSR
– 1 10 ohm resistor
– 3 potentiometers
– jumper wires

Arduino Code:

 Lab04 - Sensing: Photocells and FSR
 Molly Mahar


int FSRcellReading = 0;  // initialize value read from the FSR
int ledPin = 11;
int LEDbrightness = 0;
int rPot = A1;
int rVal = 0;
int gPot = A2;
int gVal = 0;
int bPot = A3;
int bVal = 0;
void setup() {
  // initialize serial communications at 9600 bps:
  // declare the led pin(s) as output:
  pinMode(ledPin, OUTPUT);
void loop() {
  // this will map the LED brightness according to the pressure placed on the FSR:
  FSRcellReading = analogRead(A0);
  //now we have to map 0-1023 to 0-255 since thats the range analogWrite uses.
  LEDbrightness = map(FSRcellReading, 0, 1023, 0, 255);
  // Also want to read in the values from the three pots, and map those to 0-255 RGB values:
  rVal = map(analogRead(rPot), 0, 1023, 0, 255);
  gVal = map(analogRead(gPot), 0, 1023, 0, 255);
  bVal = map(analogRead(bPot), 0, 1023, 0, 255);
  analogWrite(ledPin, LEDbrightness);  // PWM the LED with the pot value (divided by 4 to fit in a byte)
  //construct a message to Processing with multiple values in arduino
  //we can't just send a string from here since it only officially understands 'bytes'
  // Got help in this instance from this post:
  // Not sure why I'm having this problem, but Processing was somehow not reading the last value?
  // I checked in the serial monitor and it was getting sent from Arduino
  // So I'm adding a final value into the serial printout, so that all my rgb values will be read in Processing
  //Serial.println([FSRcellReading, rVal, gVal, bVal]);
  delay(100);  // pause at that level before looping through again

Processing Code:

 * Based on the original ball code by Noura Howell
 * Modified for Lab 4 by Molly Mahar
import processing.serial.*;
String portname = "/dev/cu.usbmodem1421"; // or "COM5"
Serial port;
String buf="";
int cr = 13; // ASCII return == 13
int lf = 10; // ASCII linefeed == 10
//int serialVal = 0;
int ballSize = 0;
int rVal = 0;
int gVal = 0;
int bVal = 0;

void setup() {
 port = new Serial(this, portname, 9600); 

void draw() {
 // erase the screen
 background(40, 40, 40);
 // draw the ball
 fill(rVal, gVal, bVal);

//read the message in Processing
//original version of this code (then edited) from:
void serialEvent(Serial myPort){
 String myString = myPort.readStringUntil(124); //the ascii value of the "|" character
 if(myString != null ){
   myString = trim(myString); //remove whitespace around our values
   int inputs[] = int(split(myString, ','));
   //now assign your values in processing
   if(inputs.length == 5){
     ballSize = inputs[0];
     rVal = inputs[1];
     gVal = inputs[2];
     bVal = inputs[3];

Leave a Reply