Recitation 8 Documentation

Recitation 8: Serial Communication

Freddie

Task 1

      The first task is to use two values in Arduino and send to the processing to draw a string sketch. First, I connected a circuit with two potentiometers that controls two different values from 1 to 1023. Then, I opened the SendMuitipleValues in Arduino examples and changed the writer input into 0 and 1 which stands for Analog input 0 and 1. Then I went to the Github and find a similar Processing code that draws rectangle based on two different values, I modified the rect(); into line(); which satisfied the requirement. I put x, y in but there seemed to be some problem. line(x, y, x, y); is always a dot instead of a line because I didn’t thought of the difference between the start point and the end point. I asked Sylvia for help and she figured out two new variables called px and py which stood for the previous point every time the values changed. She also added px = x; and py = y; to update the current location of the point. In this way I successfully created a sketch that drew a line according to the two potentiometers.

      This little task allow uses to draw any kinds line sketch by using the two potentiometers to change x and y values at the same time, thus gives the sketch endless possibilities. Also the two potentiometers are hard to control, which adds certain complexity to this interaction.

Here is the Arduino code:

Here is the processing code:

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

Serial serialPort;
SerialRecord serialRecord;

int rad = 60;        // Width of the shape
float xpos;    // Starting position of shape    
float xspeed =  15;  // Speed of the shape
int xdirection = 1;  // Left or Right 
int runChecker = 1;

void setup() {
    fullScreen();
  //background(0);
  noStroke();
  //background(102);
  
  //size(1280, 720);
  noStroke();
  frameRate(60);
  ellipseMode(RADIUS);
  // Set the starting position of the shape
  xpos = width/2;
  
  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 2);

}

void draw() {
  //fullScreen();
  background(0);
  noStroke();
  
  // Update the position of the shape
  xpos = xpos + ( xspeed * xdirection );
  
  // Test to see if the shape exceeds the boundaries of the screen
  // If it does, reverse its direction by multiplying by -1
  if (xpos > width-rad || xpos < rad) {
    xdirection *= -1; 
  }
  // Draw the shape
  ellipse(xpos, height/2, rad, rad);
  
  
  if (xpos <= 100 && runChecker==0) {
    serialRecord.values[0] = 1;
    serialRecord.values[1] = 0;
    serialRecord.send();
    runChecker = 1;
    
  } 
  if (xpos >= width - 100 && runChecker==1) {
    serialRecord.values[0] = 0;
    serialRecord.values[1] = 1;
    serialRecord.send();
    runChecker = 0;
  }
}

Task 2

      Task 2 is about making a bouncing ball moving left and right and on two sides of the computer, two servos controls two hands that make the ball bounce back every time the ball reaches the edge on the screen. I replaced two potentiometers with two servo motors, input the servo to digital input 9 and 10, replaced writer into reader and my-servo, which let the Processing to send values to the Arduino and make the servo move. I use two values and use an if judgement with 0 and 1 to indicate true and false that moves and stops the servos. Then it comes to the Processing code. I found a reference on the Processing official website and delete all y-position and maintain x-position to allow the ball only bounce left and right. I added the serialRecord.values and serialRecord.send to connect Arduino and Processing together. The processing code is from the link below:

https://processing.org/examples/bounce.html

      In my point of view, this project lack interaction because it doesn’t involve any user in interacting with it. Also the servos move and stop according to the x-position in the Processing sketch. For me this is more like  display rather than an interactive experience.

Here is the Arduino code:

 Here is the processing code:

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

//here I imported the code from SineWave example from Sound Library

Serial serialPort;
SerialRecord serialRecord;

float px;
float py;

void setup() {
  size(1024, 512);
  background(0);
  //colorMode(RGB, 300, 100, 200);

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

  // If the Arduino sketch sends a different number of values, modify the number
  // `2` on the next line to match the number of values that it sends.
  serialRecord = new SerialRecord(this, serialPort, 2);
  //here I copied the lines from SineWave example
}

void draw() {
  
  serialRecord.read();
  int value1 = serialRecord.values[0];
  int value2 = serialRecord.values[1];

  float x = map(value1, 0, 1024, 0, width);
  float y = map(value2, 0, 1024, 0, height);
  
  fill(0, x, x);
  line(px, py, x, y);
  
  px = x;
  py = y;  
}