14. Interface & Application programming¶

This week’s group assignment was to compare as many tool options as possible.

Processing¶

1. Display a basic circle¶

First we learnt how to draw a basic circle on Processing. alt text

2. Make the circle change with mouse¶

We then made the circle’s size change with mouse movement

Add a variable for circle diameter; int diam = 0;
Deefine circle diameter as “diam” parameter; circle(200,200,diam);
Make diameter change according to mouse location; diam = mouseX;

alt text

3. Change circle color with input sensor¶

Shoko showed us her distance sensor prototype.
alt text

4. Change circle size with input sensor¶

We tried to use a potentiometer plugged into Xiao ESP32C3 to change the circle size, but for some reason we could not make it work. So we decided to use Shoko’s input sensor above.

Upload Arduino Code to ESP32C3¶

Code for Arduino

#define Potentiometer D0

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);

  pinMode(Potentiometer,INPUT);
}

void loop() {
  // put your main code here, to run repeatedly:
  //Serial.print(0); // Print the lowest value
  // Serial.print(",");
  //Serial.print(4095); // Print the highest value
  //Serial.print(",");
  int val = analogRead(Potentiometer);
  Serial.println(val);
}

Test Potentiometer¶

The potentiometer seemed to be working on the Serial Plotter of ArduinoIDE.
alt text

Execute code on Processing¶

We couldn’t get the Potentiometer to work, so we used Shoko’s distance sensor.

alt text

// Barebones...Processing as Receiver of MCU Serial String Messages
// by Rico Kanthatham, Skylabworkshop, May 2025
// On the Arduino side...only need to open Serial port and println values
//...to the serial monitor
// Remember to close the Arduino IDE after uploading code to the MCU
//...or Processing will see the COM port as BUSY

import processing.serial.*; //1. import Serial library

Serial myPort; //2. create a variable name for your Serial object

String myString = null; //3. create a variable to receive the string from MCU
int nl = 10; //4. create a variable to represent the carriage return (end of message)
float myVal; //5. create a variable to hold a float number

void setup() {
  size(500,500);

  String portName = "COM7"; //6. specify the COM port number where the MCU is connected
  myPort = new Serial(this,portName,9600); //7. initialize the Serial object
}

void draw() {
  background(20);

  while(myPort.available() > 0) { //7. check if the Serial port is open
    myString = myPort.readStringUntil(nl); //8. read the string from the serial port until carriage return character is found
     if (myString != null) { //9. Confirm that there is a string message
      myVal = float(myString)/10; //10. Convert the string message into a float number, divided by 10
      println(myVal);
      // ...now perform some action, like draw a shape...using myVal variable's value
      // here is an example...
      circle(250,250,myVal); //draw a circle at the center of the canvas where the diameter of the circle depends on the value received from the MCU
    }
  }
}

5. Updating Database¶

Nagano san showed us how Processing can be used for linking visual data and csv database.
alt text

P5.js¶

1. How to use P5.js¶

Download P5.serialcontrol app from the official P5js githb Unzip and move the folder

Open the exe file

On the app page, we can get Right: ‘Starter Code’ section Left: the available COM port

Do not open Arduino when you connect the port. An JavaScript Error occurred when the Arduino is open.

2. Try test code¶

We tried test code. It seems simmiler to Processing. Then, modify it to draw circle and change the size with the size of signal

Change circle size with input potentiometer¶

Code for Arduino:

#define sensorPin A0

void setup() {
  Serial.begin(9600);
  pinMode(sensorPin,INPUT);
}

void loop() {
  int val = analogRead(sensorPin);
  Serial.println(val);
}

Code for P5:

let serial;
let latestData = "waiting for data";

function setup() {
 createCanvas(400,400);

 serial = new p5.SerialPort();

 serial.list();
 serial.open('COM5');
 serial.on('connected', serverConnected);
 serial.on('list', gotList);
 serial.on('data', gotData);
 serial.on('error', gotError);
 serial.on('open', gotOpen);
 serial.on('close', gotClose);
}

function serverConnected() {
 print("Connected to Server");
}

function gotList(thelist) {
 print("List of Serial Ports:");

 for (let i = 0; i < thelist.length; i++) {
  print(i + " " + thelist[i]);
 }
}

function gotOpen() {
 print("Serial Port is Open");
}

function gotClose(){
 print("Serial Port is Closed");
 latestData = "Serial Port is Closed";
}

function gotError(theerror) {
 print(theerror);
}

function gotData() {
 let currentString = serial.readLine();
  trim(currentString);
 if (!currentString) return;
 console.log(currentString);
 latestData = currentString;
}

function draw() {
 // draw(latestData, 10, 10);
 // Polling method

 if (serial.available() > 0) {
  let data = serial.read();
 background(255,255,255);
 fill(20,30,40);
  ellipse(width/2, height/2, map(latestData, 0, 1023, 10,200));
  // ellipse(50,50,latestData,latestData);
 }

}

Change circle size with input sensor¶

*Tried with ESP32S3, and the response was quite slow…

Code for Arduino:

// ESP32 Touch Test
// Just test touch pin - Touch0 is T0 which is on GPIO 4.

void setup() {
  Serial.begin(9600);
  delay(1000);  // give me time to bring up serial monitor
}

void loop() {
  int raw1 = touchRead(T1);
  int val1 = map (raw1,26000,32000,0,300);
  Serial.println(val1);
  delay(1000);
}

Code for P5

let serial;
let latestData = "waiting for data";

function setup() {
 createCanvas(400,400);

 serial = new p5.SerialPort();

 serial.list();
 serial.open('COM5');
 serial.on('connected', serverConnected);
 serial.on('list', gotList);
 serial.on('data', gotData);
 serial.on('error', gotError);
 serial.on('open', gotOpen);
 serial.on('close', gotClose);
}

function serverConnected() {
 print("Connected to Server");
}

function gotList(thelist) {
 print("List of Serial Ports:");

 for (let i = 0; i < thelist.length; i++) {
  print(i + " " + thelist[i]);
 }
}

function gotOpen() {
 print("Serial Port is Open");
}

function gotClose(){
 print("Serial Port is Closed");
 latestData = "Serial Port is Closed";
}

function gotError(theerror) {
 print(theerror);
}

function gotData() {
 let currentString = serial.readLine();
  trim(currentString);
 if (!currentString) return;
 console.log(currentString);
 latestData = currentString;
}

function draw() {
 // draw(latestData, 10, 10);
 // Polling method

 if (serial.available() > 0) {
  let data = serial.read();
 background(255,255,255);
 fill(20,30,40);
  ellipse(width/2, height/2, map(latestData, 0, 160, 50,300));
  // ellipse(50,50,latestData,latestData);
 }

}

Research¶

Useful links¶

xxx