How to Make a Virtual Button with the Arduino - dummies

How to Make a Virtual Button with the Arduino

By John Nussey

You will learn how to make an onscreen button in Processing that affects a physical LED on your Arduino. This is a great sketch to get started with interactions between computers and the real world, and between an Arduino and Processing.

You need:

  • An Arduino Uno

  • An LED

The setup is simple for this introduction to Arduino and Processing, requiring only a single LED.


Insert the long leg of the LED into pin 13 and the short leg into GND. If you don’t have an LED, you can simply monitor the onboard LED marked L.


How to set up the Arduino code

After your circuit is assembled, you need the appropriate software to use it. From the Arduino menu, choose File→Examples→04.Communication→PhysicalPixel to find the sketch.

This sketch contains both Arduino code and the relevant Processing code for the sketch to work (it also has a variation in Max 5). The code beneath the Arduino code is commented out to avoid interfering with the Arduino code.

In older versions of Arduino, the sketch files ended with .pde, which is the Processing suffix. This caused confusion, so now the Arduino suffix is .ino. Different suffixes make it possible to have the Arduino sketch and the Processing sketch in the same place.

 Physical Pixel
 An example of using the Arduino board to receive data from the
 computer. In this case, the Arduino boards turns on an LED when
 it receives the character 'H', and turns off the LED when it
 receives the character 'L'.
 The data can be sent from the Arduino serial monitor, or another
 program like Processing (see code below), Flash (via a serial-net
 proxy), PD, or Max/MSP.
 The circuit:
 * LED connected from digital pin 13 to ground
 created 2006
 by David A. Mellis
 modified 30 Aug 2011
 by Tom Igoe and Scott Fitzgerald
 This example code is in the public domain.
const int ledPin = 13; // the pin that the LED is attached to
int incomingByte;  // a variable to read incoming serial data into
void setup() {
 // initialize serial communication:
 // initialize the LED pin as an output:
 pinMode(ledPin, OUTPUT);
void loop() {
 // see if there's incoming serial data:
 if (Serial.available() > 0) {
 // read the oldest byte in the serial buffer:
 incomingByte =;
 // if it's a capital H (ASCII 72), turn on the LED:
 if (incomingByte == 'H') {
  digitalWrite(ledPin, HIGH);
 // if it's an L (ASCII 76) turn off the LED:
 if (incomingByte == 'L') {
  digitalWrite(ledPin, LOW);

Now go through the steps to upload your sketch.

With the Arduino set up to receive a message from Processing, you need to set up the Processing sketch to send a signal message over the same serial port to your Arduino.

How to set up the Processing code

This code is available within multiline comment markers (/* */) at the bottom of the Arduino PhysicalPixel sketch. Copy the code within the comment markers, paste it into a new Processing sketch, and save it with an appropriate name, such as PhysicalPixel.

 // mouseover serial
 // Demonstrates how to send data to the Arduino I/O board, in order to
 // turn ON a light if the mouse is over a square and turn it off
 // if the mouse is not.
 // created 2003-4
 // based on examples by Casey Reas and Hernando Barragan
 // modified 30 Aug 2011
 // by Tom Igoe
 // This example code is in the public domain.
 import processing.serial.*;
 float boxX;
 float boxY;
 int boxSize = 20;
 boolean mouseOverBox = false;
 Serial port;
 void setup() {
 size(200, 200);
 boxX = width/2.0;
 boxY = height/2.0;
 // List all the available serial ports in the output pane.
 // You will need to choose the port that the Arduino board is
 // connected to from this list. The first port in the list is
 // port #0 and the third port in the list is port #2.
 // Open the port that the Arduino board is connected to (in this case #0)
 // Make sure to open the port at the same speed Arduino is using (9600bps)
 port = new Serial(this, Serial.list()[0], 9600);
 void draw()
 // Test if the cursor is over the box
 if (mouseX > boxX-boxSize && mouseX < boxX+boxSize &&
 mouseY > boxY-boxSize && mouseY < boxY+boxSize) {
 mouseOverBox = true;
 // draw a line around the box and change its color:
 // send an 'H' to indicate mouse is over square:
 else {
 // return the box to it's inactive state:
 // send an 'L' to turn the LED off:
 mouseOverBox = false;
 // Draw the box
 rect(boxX, boxY, boxSize, boxSize);

Click the Run button to execute the Processing sketch, and an applet appears. The applet shows a black background with a gray square in the middle, representing your virtual button. If you move your mouse over the gray square (or pixel), you can see that its edges turn white.

If you then look at your Arduino, you see that whenever your mouse hovers over the gray square, the LED on your board illuminates, giving you a physical representation of your pixel.


If your LED doesn’t light, double-check your wiring:

  • Make sure that you’re using the correct pin number.

  • Make sure that the LED legs are the correct way around.

  • Check that your Arduino code uploaded correctly and that your Processing code has no errors. Note that you cannot upload while the Processing sketch is communicating with your Arduino, so you need to stop the sketch before uploading.