Recitation 6: Serial Communication

Recitation 6: Serial Communication

  • Partner: N/A
  • Date: 9 March 2018
  • Recitation Leader: Antonius


I derived inspiration from what Antonius showed us in class with using processing to light up the Arduino, which can be seen on his GitHub page here, as well as my former Interaction Lab recitation project, which was to recreate Vasily Kandinsky’s work “Several Circles.” You can find my former interpretation of his work and how I did it here. I had an idea to both click a mouse on a certain colored circle and make something happen on the Arduino, like light up an LED, as well as use a pushbutton on the Arduino to create and move circles in processing.

Final Result

In the end, I created two different interactions. First, processing would create an ellipse of a random color in the center of the window, and if one presses the pushbutton (and keeps it held down), the window will generate random ellipses of a single randomly generated color until the pushbutton is released. Once the pushbutton is released, the window will generate the same circle as the first but in a different, randomly generated location. The second interaction created was if the user uses the mouse to press the circles of the first color, an LED would turn on. If one clicks anywhere else, i.e. the circles that were randomly generated when the pushbutton was pressed down, the LED would not light up.


  • Breadboard
  • Arduino Uno
  • USB A to B cable
  • 10K resistor
  • 220 ohm resistor
  • 5 Hook-up wires
  • 5MM LED
  • Mini pushbutton switch


On the breadboard, the pushbutton switch connected across the “river,” one side connecting to a wire, which connected to digital input pin 2 on the Arduino, the other side of the pushbutton connected to a wire, which connected to 5V power on the Arduino. Next to the power wire that connected to the pushbutton is a 10K resistor, the other side connecting to a wire, which connected to ground on the breadboard. On another part of the breadboard was the LED, the groundside connecting to a wire leading to ground on the Arduino, and the power side linking to a 220-ohm resistor. The other side of the 220-ohm resistor connected to a wire, which connected to digital output pin 13 in the Arduino.

Arduino Code

char valueFromProcessing;
const int buttonPin = 2;
int buttonState = 0;

void setup() {
 // put your setup code here, to run once:
 pinMode(13, OUTPUT);

void loop() {
 // put your main code here, to run repeatedly:
 buttonState = digitalRead(buttonPin);
 if (buttonState == HIGH) {
 } else {
 valueFromProcessing =;

if (valueFromProcessing == 'H') {
 } else if (valueFromProcessing == 'L') {
 } else{

Processing Code

import processing.serial.*;
Serial myPort;

int x, y, a, b;
int red, green, blue;

void setup() {
 myPort = new Serial(this, "/dev/cu.usbmodem1411", 9600);

 size(500, 500);

 x = width/2;
 y = height/2;
 a = width/5;
 b = height/5;

 red = floor(random(255));
 green = floor(random(255));
 blue = floor(random(255));


void draw() {
 ellipse(x, y, a, b);

// print where x and y are
 println(x+" "+y);
 println(dist(mouseX, mouseY, x, y));
 // here we can see that the distance between 
 // center of colored circle and edge
 // is never greater than 50 radius or 100 diameter
 // we used the print functions and our mouse to 
 // determine this above
 while (myPort.available()>0) {
 int inByte =;

if (inByte == 1) {

fill(red, green, blue);
 x = floor(random(width));
 y = floor(random(height));
 } else {
 fill(blue, red, green);

if (mousePressed) {
 // we saw x,y coordinates never greater than 
 // 50 radius in colored circle
 // so the mouse pressed only works when inside 
 // the colored circle (correct radius)
 if (dist(mouseX, mouseY, x, y) <= 50) {
 // this else is in line with the moused pressed because
 // we still need the code to function with 
 // the mouse pressed
 // but if the mouse is outside the colored
 // circle, then the LED will not light up 
 } else {

Problems & Solutions

At first, my issue was that I did not know how to get the pushbutton to create the circles. Antonius helped me with this, and especially where I used Serial.write(1) and Serial.write(0) in order to determine the different states of the pushbutton in both Arduino and processing. Next, when I wanted to create a serial communication circuit from processing to Arduino with the LED by clicking the colored circles, he helped me determine that using the radius and diameter of the circle are best because even though they are randomly generated after the start of the window, we know that the x and y coordinates are there when we created the ellipse in the loop. I added some comments in my processing code to explain this. Thanks Antonius for all your help!


Serial communication is clearly very useful for gaming, which is what I was thinking of when creating my project. The ability to create ways of interactivity between humans and computers increases exponentially with the duality of communication in serial processing. Even for this specific project alone, I could completely recreate Kandinsky’s work, which I mentioned above, giving a leeway for non-artists like me to learn and produce art in ways that make it both easier and more enjoyable in some cases. Just like what Zack Lieberman created in his project to facilitate art making for those unable to use traditional methods, what I created can serve a similar purpose, or even target people who are less interested in art and try to help them appreciate it through a more game-like medium. Classical art, and even modern or post-modern art, can seem extremely inaccessible to some people, and being able to understand what goes behind it through computing and processing can enable learning and develop people’s appreciation for something previously difficult to understand or grasp in a meaningful way. Furthermore, using computational media allows for more changeable ways of interacting physically, as I can easily edit my code or change my circuit to make something else. This is invaluable because creating something solely physically, such as traditional forms of art like painting, does not allow for any mistakes or the rethinking of methodology as easily as computational media.

Leave a Reply