IxLab Recitation 8: Serial Communication

Task 1

To finish task one, I paid my efforts to two aspects. Firstly is building the circuits. Since the required work needs two potentiometers, I build a parallel circuit for each potentiometer. In this case, the Arduino board can receive two values separately. After plugging the cable into the analog pins, the building process of the circuits has finished.

Then is the coding. I used the given code in class and did some modifications. Since I need to receive two values from the circuits, I changed the variables of the serial communication to two on both the Arduino code and the Processing code.

  SerialRecord writer(2);

  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 2);

On the Processing side, I mapped the input value to the width and the height of the canvas.

  float x = map(value0, 0, 1023, 0, height);
  float y = map(value1, 0, 1023, 0, width);

Also, since I’ve met the problem that the drawing dots can hardly be connected as a line when the movement is fast before, I set two variables to store the last position of the x and y value and let the drawing process become drawing a line that connects the last point and the current point.

  line(lastX, lastY, x, y);
  lastX = x;
  lastY = y;

Then, I ran the code.

Everything went fluently at the first glimpse. However, I found a small problem is that the value of the input is not that stable which will make it hard to draw a straight line. I try many methods to solve the problem like rebuilding the circuits and using separate GND cables, but they all have nothing to do with the situation. In this case, I decided to ask for help. The professor told me that the problem may be caused by my computer charger. Once I unplugged the charger, the shaking lines immediately become straight and fluent.

Reflection

This project let me learn two important things. Firstly, as for the interaction part, the different input methods can bring the audience a brand new feeling when interacting with a similar procedure. To be more specific, this work has turned the liner drawing procedure into the turning control using the potentiometer. This can let the audience feel a brand new way to draw. The second thing is about debugging. The problem with the charger let me know that all the hardware that we’ve used to build a circuit can cause a problem. In the past, I will never try to find out if a problem is caused by my computer. This work let me know that everything can be the reason for causing a bug or glitch.

Full Code

Arduino

#include "SerialRecord.h"

SerialRecord writer(2);
void setup() {
  Serial.begin(9600);
}

void loop() {
  int voltage0 = analogRead(A0);
  int voltage1 = analogRead(A1);
  writer[0] = value0;
  writer[1] = value1;
  writer.send();
  delay(20);
}

Processing

import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;
float lastX;
float lastY;

void setup() {
  size(500, 500);
  background(0);
  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 2);
  
  serialRecord.read();
  int value0 = serialRecord.get(0);
  int value1 = serialRecord.get(1);
  lastX = value0;
  lastY = value1;
  delay(1000);
  
}

void draw() {

  serialRecord.read();
  int value0 = serialRecord.get(0);
  int value1 = serialRecord.get(1);

  float x = map(value0, 0, 1023, 0, height);
  float y = map(value1, 0, 1023, 0, width);
  stroke(255);
  strokeWeight(10);
  line(lastX, lastY, x, y);

  lastX = x;
  lastY = y;
}

Task 2

I did task 2 with my partner Jason. Firstly we choose to connect the circuits as well. It’s quite like the circuits that we’ve made in task 1. We only need to change the potentiometer to the servo and plug the data cable into the digital port. Then, we met a big problem when writing the code.

We first used the example code from the Arduino and the Processing. We’ve copied the sample Processing code from the slides. We found two sample codes that can transfer serial data from the slides. One is for the NeonLeds while the other is using serial.read(). We’re quite confused and ask Learning Assistant for help. The assistant told us the first one is only for the NeonLEDs and we should use the other one.

The first sample are using the “SerialRecord” library and the latter one hasn’t.

However, we can not receive the given signal from the Processing. Whatever code we’ve used, what kind of data type we’ve transported, we can never receive the data. After a long period of struggling with the codes, we decided to use the codes for the NeonLEDs.

if (Serial.available() > 0) {
    char in = Serial.read();
    if (in == 'L') {
      myservo0.write(120);
      myservo1.write(120);
    }
    if (in == 'R') {
      myservo1.write(60);
      myservo0.write(180);
    }
  }

After using this code, Arduino can receive the data immediately. 

SerialRecord reader(1);

And at this time, we let the Processing send a signal once the ball bounces on the “wall”. When Arduino receives the signal, the servo will change direction. And this is the final work:

Reflection

As for the interaction part, the fusion of virtual and reality can be a way to do the project. It’s fascinating because of the novel feeling of the combination of real things and things on a screen. The debugging procedure let me know that we shouldn’t only use one method to realize the effect or the target that we want. If one way can not work, try another one.

Full Code

Arduino

#include <Servo.h>
Servo myservo1;
Servo myservo0;
int pos = 0;

void setup() {
  Serial.begin(9600);
  myservo0.attach(9);
  myservo1.attach(10);
}

void loop() {
  if (Serial.available() > 0) {
    char in = Serial.read();
    if (in == 'L') {
      myservo0.write(120);
      myservo1.write(120);
    }
    if (in == 'R') {
      myservo1.write(60);
      myservo0.write(180);
    }
  }
}

Processing

import processing.serial.*;
Serial serialPort;

float x = 200;
float speedX = 21;

void setup()
{
  fullScreen();
  serialPort = new Serial(this, "COM8", 9600);
}

void draw() {
  background(0);
  x = x + speedX;
  if (x >= width-100) {
    serialPort.write('L');
    speedX = speedX * -1;
  }
  if (x <= 100) {
    serialPort.write('R');
    speedX = speedX * -1;
  }
  ellipse(x, height/2, 200, 200);
}