Button connection from Arduino to Processing


I’m trying to connect a button from Arduino to visuals in Processing. Can’t get it to work. I’m very new to this so any help and explanations are welcome!! (Potmeter works fine)

Here is the Processing code:

import processing.serial.*; 
Serial serial;   
int sensorValue; 
int buttonState;
int LOW;

void setup() { 
  // set the canvas size is 400 x 400
  size(400, 400);  
  // Open the serial port and set the baud rate to 9600
  // This experiment arduino board is connected to COM26, here please
  // adjust according to actual situation.
  serial = new Serial(this, "/dev/cu.usbmodem14201", 9600); 
void draw() { 
  if ( serial.available() > 0) { 
    // Read from serial production sensor value.
    sensorValue = serial.read();  
    buttonState = serial.read();  
    println(buttonState);//Print out the processing received sensor value
    // Draw a circle on canvas
    background(255); // Background to white
    fill(0,0,255);   // Within the circle fill in blue
    ellipse(200, 200, sensorValue, sensorValue); //In point(200,200) as the center circle
 if (buttonState == 1){
       ellipse(200, 200, 20, 20); //In point(200,200) as the center circle
 } else {
}   }

And the Arduino code:

// constants won't change. They're used here to set pin numbers:
const int buttonPin = 2;     // the number of the pushbutton pin
int potPin = 0; // define UNO board A0 pin connect the potentiometer

// variables will change:
int buttonState = 0;         // variable for reading the pushbutton status

void setup() {
  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);

void loop() {

  // read the state of the pushbutton value:
  int buttonState = digitalRead(buttonPin);

  // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
  if (buttonState == HIGH) {

  } else {

  // Read the potentiometer voltage
  int sensorValue = analogRead(potPin);   
  //Because the processing 'serial.read()' only support the value between 0-255, 
  //so you need to put a scale of 0-1023 numerical scale between 0-255
  int Voltage = map(sensorValue,0,1023,0,255); 

Also a picture of the button connection:

Left = S
Middle = +
Right = -

Thanks so much for any help!

You might want two calls to write()… and no calls to print().

Those are there just so I can read the values from my button in Arduino :slight_smile:

But you do two calls to read()! Doesn’t that block the whole program?

Could be yess, how can I receive 2 values from Arduino without blocking the program?

In this link you can receive 3 values

1 Like

Hello @friedadedoncker,

The A/D on an Arduino is 10-bit and returns a 16-bit integer from 0 to 1024.

I modified the code from here to provide more flexibility:

How to Send Multiple Signals from the Arduino to Processing - dummies

Arduino Code
// https://www.dummies.com/article/technology/computers/hardware/arduino/how-to-send-multiple-signals-from-the-arduino-to-processing-164740/

 Serial Call and Response
 Language: Wiring/Arduino
 This program sends an ASCII A (byte of value 65) on startup
 and repeats that until it gets some data in.
 Then it waits for a byte in the serial port, and
 sends three sensor values whenever it gets a byte in.
 Thanks to Greg Shakar and Scott Fitzgerald for the improvements
 The circuit:
 * potentiometers attached to analog inputs 0 and 1
 * pushbutton attached to digital I/O 2
 Created 26 Sept. 2005
 by Tom Igoe
 modified 24 April 2012
 by Tom Igoe and Scott Fitzgerald
 This example code is in the public domain.

int inByte = 0;   // incoming serial byte

void setup()
  // start serial port at 9600 bps:
//  while (!Serial) 
//    {
//    ; // wait for serial port to connect. Needed for Leonardo only
//    }
  establishContact(); // send a byte to establish contact until receiver
      // responds

int count;

void loop()
 // if we get a valid byte, read analog ins:
  if (Serial.available() > 0) 
    // get incoming byte:
    inByte = Serial.read();

    Serial.print(random(-100, 100));
    Serial.print(random(-100, 100));

    if (count>360) count = 0;
void establishContact() 
  while (Serial.available() <= 0) 
    Serial.print('A'); // send a capital A
Processing Code
// This example code is in the public domain.
import processing.serial.*;
int bgcolor;   // Background color
int fgcolor;   // Fill color
Serial myPort;      // The serial port
//int[] serialInArray; // Where we'll put what we receive
int serialCount = 0;     // A count of how many bytes we receive
int xpos, ypos;     // Starting position of the ball
boolean firstContact = false;  // Whether we've heard from the
// microcontroller

int count;
int x, y, hue;

void setup()
  size(250, 250, P3D); // Stage size
  colorMode(HSB, 360, 100, 100);
  //noStroke();  // No border on the next thing drawn
  // Set the starting position of the ball (middle of the stage)
  xpos = width/2;
  ypos = height/2;
  // Print a list of the serial ports, for debugging purposes:


  // I know that the first port in the serial list on my mac
  // is always my FTDI adaptor, so I open Serial.list()[0].
  // On Windows machines, this generally opens COM1.
  // Open whatever port is the one you're using.
  String portName = Serial.list()[4];
  myPort = new Serial(this, portName, 9600);

void draw()
  if (hue == 0)  
  translate(width/2, height/2);
  stroke(hue, 100, 100);
  point(x, y);

void serialEvent(Serial myPort)
  // read a byte from the serial port:
  String inString = myPort.readStringUntil('\n');
  inString = trim(inString);
  println(inString, inString.length());

  if (firstContact == false)
    if (inString.equals("A") == true)
      myPort.clear();   // clear the serial port buffer
      firstContact = true;  // you've had first contact from the microcontroller
      myPort.write('A');  // ask for more
    int[] serialInArray; // Where we'll put what we receive
    serialInArray = int(split(inString, ','));
    hue = serialInArray[0];
    x = serialInArray[1];
    y = serialInArray[2];
    myPort.write('A');  // ask for more



Usually if you are using serial output to talk to an application (e.g. Processing) on the PC you can’t use serial output to see what your Ard sketch is doing. (Yes, you could use text output and the make the application use that, or you could design the protocol so it ignores the information print, but I think you’re not doing any of that.) If you have information prints, they will probably mess up your comms.

You have an Arduno Mega, and one fun thing about that is it has 3 extra serial ports. See labels TX1, RX1 etc. I suggest you buy one (better 3) of TTL to USB adaptor (That’s the right item, not recommending that shop, lots on ebay and elsewhere.) Connect that to Mega with 3 wires RX to TX, TX to RX, Gnd to Gnd, connect to PC and another COM port will appear. In the Mega you can use e.g. Serial1.write. If you connect Processing to that you don’t have to stop the sketch to reload the Mega. The serial port you’re using now can be for reloading and Serial Monitor.

1 Like