14. Interface and Application Programming¶

group assignment:
compare as many tool options as possible.

Processing¶

An open-source programming language specifically designed for visual arts and interactive design. It enables seamless integration with Arduino via serial communication/networking and allows developers to achieve stunning visual effects with just dozens of lines of code.Click here to download Processing

1.Getting started with processing¶

1.1 Program Structure¶

setup() Function,Runs only once when the program starts,Used for initialization settings (window size, resource loading, etc.)
Draw() function,Continuously looping at a frequency of approximately 60 frames per second for creating animations and interactive effects. runs repeatedly until stopped.

void setup(){
  (insert some code here...);
  }
void draw(){
   (insert some code here...);
  }

Common Usage Examples: Create a 400px by 400px square white canvas>>Size (width, height), background (255).

void setup(){
size(400, 400);  // Set window size 400px*400px
}
void draw(){
background(255); // Set white background;
}

1.2 ** Basic Shape Drawing in Processing （Refer to Deepseek’s answer）¶

Coordinate System Note:Origin (0,0) at top-left corner,X increases to the right,Y increases downward.

Rectangle

// Syntax: rect(x, y, width, height)
rect(50, 50, 100, 80); // Draws rectangle at (50,50) with 100px width and 80px height**

Ellipse/Circle

// Syntax: ellipse(x, y, width, height)
ellipse(200, 200, 120, 120); // Perfect circle (equal width/height)
ellipse(300, 150, 80, 40);   // Oval

Line

// Syntax: line(x1, y1, x2, y2)
line(10, 10, 400, 400); // Diagonal line from top-left to bottom-right

Triangle

// Syntax: triangle(x1, y1, x2, y2, x3, y3)
triangle(50, 300, 150, 200, 250, 300); // Three vertex points

1.3 Style Modifiers (use before drawing shapes):¶

fill(255, 0, 0);    // Red fill color
stroke(0, 0, 255);  // Blue outline
strokeWeight(3);     // 3px thick outline
noFill();            // Transparent fill
noStroke();          // No outline

框

void setup() {
  // Set canvas size to 1000x400 pixels
  size(1000, 400);
 }

void draw() {
  // Set white background
  background(255);

  // Set fill color to yellow (RGB: 255,255,0)
  fill(255, 255, 0);

  // Set stroke color to blue (RGB: 0,0,255)
  stroke(0, 0, 255);

  // Set stroke weight to 2 pixels
  strokeWeight(2);

  // Draw rectangle at position (200,150) with 100px width/height
  rect(200, 150, 100, 100);
 }

Write Button1 inside the block

void setup() {
  // Set canvas size to 1000x400 pixels
  size(1000, 400);
}

void draw() {
  // Set white background
  background(255);

  // Set fill color to yellow (RGB: 255,255,0)
  fill(255, 255, 0);

  // Set stroke color to blue (RGB: 0,0,255)
  stroke(0, 0, 255);

  // Set stroke weight to 2 pixels
  strokeWeight(2);

  // Draw rectangle at position (200,150) with 100px width/height
  rect(200, 150, 100, 100);

  // Add centered text
  textAlign(CENTER, CENTER);  // Set text alignment
  textSize(25);               // Set font size
  fill(0, 0, 255);           // Set text color to bule
  text("Button1", 250, 200); // Draw text at rectangle center
}

1.4 Mouse-Following Circle Program¶

void setup() {
  // Set canvas size to 1000x400 pixels
  size(1000, 400);
}

void draw() {
  // Clear canvas with white background
  background(255);

  // ------ Button Drawing ------
  // Set button styles
  fill(255, 255, 0);  // Yellow fill
  stroke(0, 0, 255);   // Blue border
  strokeWeight(2);     // 2px border

  // Draw button rectangle
  rect(200, 150, 100, 100);

  // Draw button text
  textAlign(CENTER, CENTER);
  textSize(25);
  fill(0, 0, 255);     // Blue text color
  text("Button1", 250, 200);

  // ------ Mouse Follower ------
  noStroke();          // Remove border for circle
  fill(0, 0, 255);     // Blue fill color
  ellipse(mouseX, mouseY, 30, 30); // Draw following circle
}

The processing program has the following effects:

indiviual assignment¶

write an application that interfaces a user with an input &/or output device that you made.

In this week’s assignment, I plan to use Processing to create buttons to control the LED lights on D1-D3 of my Xiao-ESP32-C3. When the mouse clicks on buttons 1/2/3, the button status changes to on, and at the same time, the LED of D1/2/3 lights up. Click the button again, the button will turn off, and the LEDs of D1/2/3 will turn off. I plan to start with the simplest function, designing a button to control an LED light.This is the Processing code(This program referenced Deepseek’s help):

Processing program code (GUI control terminal)

import processing.serial.*;

Serial xiaoPort;  
boolean ledState = false;
int buttonX = 200, buttonY = 150;
int buttonW = 100, buttonH = 100;

void setup() {
  size(1000, 400);
  surface.setTitle("XIAO LED Controller - Classic Style");

  // Print available serial ports list
  printArray(Serial.list());
  xiaoPort = new Serial(this, "COM12", 9600); // Modify to actual port

  textAlign(CENTER, CENTER);
  textSize(25);
  cursor(CROSS); // Set cross cursor
}

void draw() {
  // Classic white-blue style background
  background(255);

  // ===== Button Drawing =====
  // Button style
  if (ledState) {
    fill(100, 255, 100); // Active state light green
  } else {
    fill(255, 255, 0);   // Classic yellow fill
  }
  stroke(0, 0, 255);     // Blue border
  strokeWeight(2);
  rect(buttonX, buttonY, buttonW, buttonH, 5); // Slight rounded corners

  // Button text
  fill(0, 0, 255);       // Blue text
  text("Button1\n" + (ledState ? "ON" : "OFF"), 
       buttonX + buttonW/2, 
       buttonY + buttonH/2);

  // ===== Mouse Follower Effect =====
  noStroke();
  fill(0, 0, 255, 150);  // Semi-transparent blue
  ellipse(mouseX, mouseY, 30, 30);
}

void mousePressed() {
  // Detect button click area
  if (mouseX > buttonX && mouseX < buttonX + buttonW &&
      mouseY > buttonY && mouseY < buttonY + buttonH) {

    ledState = !ledState;
    xiaoPort.write(ledState ? '1' : '0');

    // Add click animation
    fill(255, 0, 0, 100);
    rect(buttonX, buttonY, buttonW, buttonH);
  }
}

At the same time, in the Arduino IDE, it is necessary to upload the following program code to the XIAO-ESP32-C3 program:

#include <HardwareSerial.h>
#define LED_PIN D1 // Use D1 pin of XIAO

void setup() {
  Serial.begin(9600);
  pinMode(LED_PIN, OUTPUT);
  digitalWrite(LED_PIN, LOW); // Initial state: LED off
}

void loop() {
  if(Serial.available() > 0){
    char cmd = Serial.read();

    if(cmd == '1'){
      digitalWrite(LED_PIN, HIGH);
      Serial.println("LED is turned on"); // Optional feedback
    }
    else if(cmd == '0'){
      digitalWrite(LED_PIN, LOW);
      Serial.println("LED is turned off"); // Optional feedback
    }

    Serial.flush(); // Clear serial buffer
  }
}

Reminder: When I saw an error message in Processing, I closed Arduino and restarted the Processing program, and it worked fine. It’s strange, later on during testing, they were able to run both programs simultaneously.