Side Quest - Visualizing Analog Values with Processing

 As I started on the next sensor, I realized that displaying analog values as scrolling numbers in a serial console was going to be boring. I started down the path of using Tkinter in Python, but decided that learning a whole new GUI framework was more than I wanted for this project. I may revisit that in the future, because this is something I definitely want to add to my knowledge base for future projects. Instead, I decided to go with something in the Arduino Cinematic Universe and see what Processing could do. Using an example I found online, I made some tweaks to work with my plans better. This program draws a gray circle in the middle of a window with a diameter equal to half the window. It listens on a serial port at 115,200 baud for either a single number on a line or a pair of numbers separated by a comma on a line. If there is just one value, the circle scales up or down by that value. If there are two values, it is drawn as an ellipse with each radius based on the two values. To make it more visually appealing, the color also changes from magenta at the smallest to green at the largest.

import processing.serial.*;

Serial myPort;
static String val;
String[] values;
int xVal = 0;
int yVal = 0;

void setup() {
  size(720, 720);
  noStroke();
  noFill();
  String portName = Serial.list()[2]; // Total hack - should change this, but it works on my machine
  
  myPort = new Serial(this, portName, 115200);
}

void draw(){
  if ( myPort.available() > 0) {
    val = myPort.readStringUntil('\n'); 
    try {
      values = val.split(",");
    
      // First value is the X value
      xVal = Integer.valueOf(values[0].trim());
    
      // If there is a second value, use that as the Y value
      // otherwise copy the  X value to the Yvalue
      if(values.length > 1) {
        yVal = Integer.valueOf(values[1].trim());
      } else {
        yVal = xVal;
      }
    } catch(Exception e) {
      ;
    }
    
    // Print the values for debugging
    print(values);
  }
  
  background(255, 255, 255);
  
  float c = map(xVal + yVal, 0, 2048, 0, 255);
  float d1 = map(xVal, 0, 1024, 5, width);
  float d2 = map(yVal, 0, 1024, 5, height);
  
  fill(255 - c, c, 128);
  ellipse(width/2, height/2, d1, d2); 
}