Skip to content

14. Interface and application programing

Introduction!

Hello!! Welcome to the week of Interface and application programing in this week I have tried to do

  1. Xiao rp2040 (joystick) to Processing

Seed Xiao RP2040 to Processing

In this project, we connect a joystick to a Seeed Xiao RP2040 microcontroller and visualize its movements in a Processing sketch. This project demonstrates interfacing hardware components with software applications, showcasing real-time data visualization.

Components and Tools**

Hardware:

  • Seeed Xiao RP2040 microcontroller

  • Analog joystick

  • Jumper wires

Software:

  • Arduino IDE for programming the Seeed Xiao RP2040

  • Processing IDE for creating the visualization sketch

  • Serial communication for data transfer

Wiring the Joystick to Seeed Xiao RP2040

Connections:

  • X-axis: Connect the joystick’s X-axis output pin to A0 on the RP2040.

  • Y-axis: Connect the joystick’s Y-axis output pin to A1 on the RP2040.

  • Button: Connect the joystick’s button output pin to D2 on the RP2040.

  • VCC: Connect the VCC pin of the joystick to the 3.3V pin on the RP2040.

  • GND: Connect the GND pin of the joystick to the GND pin on the RP2040.

The Code!

Coming on to the rp2040 code in Arduino IDE 

const int VRx = A0; // Analog pin for X-axis
const int VRy = A1; // Analog pin for Y-axis
const int SW = D2;   // Digital pin for Joystick button

void setup() {
  Serial.begin(9600);
  pinMode(VRx, INPUT);
  pinMode(VRy, INPUT);
  pinMode(SW, INPUT_PULLUP);
}

void loop() {
  int xPosition = analogRead(VRx);
  int yPosition = analogRead(VRy);
  int buttonState = digitalRead(SW);

  // Send the joystick positions and button state via serial
  //Serial.print(" X:");
  Serial.print(xPosition);
  Serial.print(" ");
  Serial.print(yPosition);
  Serial.print(" ");
  Serial.println(buttonState);

  delay(100); // Small delay to avoid flooding the serial communication
}

This is a basic code the rp that assigns the pins and tells the processor what position to give. Lets come on to the code for processing.

 import processing.serial.*;

Serial myPort;
float xpos = 0;
float ypos = 0;
int buttonState = 0;

void setup() {
  size(600, 600);
  String portName = "COM8"; // Adjust to your correct COM port
  int baudRate = 9600;
  myPort = new Serial(this, portName, baudRate);
  myPort.bufferUntil('\n');
  println("Serial port initialized: " + portName + " at " + baudRate + " baud");
}

void draw() {
  background(255);
  fill(0, 100, 250);
  ellipse(xpos, ypos, 150, 150);

  // Debugging information
  fill(0);
  text("X Position: " + xpos, 20, 20);
  text("Y Position: " + ypos, 20, 40);
  text("Button State: " + buttonState, 20, 60);
}

void serialEvent(Serial myPort) {
  String inString = myPort.readStringUntil('\n');
  if (inString != null) {
    inString = trim(inString);
    println("Received data: " + inString); // Debug: Print received data

    String[] splitString = split(inString, ' ');
    if (splitString.length >= 3) { // Ensure at least 3 values are present
      float xValue = float(splitString[0]);
      float yValue = float(splitString[1]);
      int buttonStateValue = int(splitString[2]);

      // Check for NaN values and map only valid numbers
      if (!Float.isNaN(xValue) && !Float.isNaN(yValue)) {
        xpos = map(xValue, 0, 1023, 0, width);
        ypos = map(yValue, 0, 1023, 0, height);
      } else {
        println("Invalid values received or NaN detected.");
        // Optionally handle NaN values (set default or previous values)
        xpos = 0; // Example: Set to default or previous value
        ypos = 0; // Example: Set to default or previous value
      }

      buttonState = buttonStateValue; // Assign button state
    }
  }
}

In this code I have included debuging as well (serial.prt) so that we get to know if the values are getting read or not, This helped me to figure out one problem which I then solved, Will get to it below in my steps performed.

Steps Involved

1. Hardware Setup:

  • Connect the joystick to the Seeed Xiao RP2040 as described in the wiring section.

  • Ensure all connections are secure and correct.

2. Programming the RP2040:

  • Write the Arduino code to read joystick values and send them over serial.

  • Upload the code to the Seeed Xiao RP2040 using the Arduino IDE.

Creating the Processing Sketch:

  • Write the Processing code to read serial data from the RP2040.

  • Visualize the joystick movements by mapping the received data to the position of a circle on the screen.

Running the Application:

Open the Arduino IDE’s Serial Monitor to ensure the RP2040 is sending data correctly. Run the Processing sketch to visualize the joystick’s movements in real-time. Debugging:

Use println() statements in both the Arduino and Processing codes to print debugging information and ensure proper data flow and visualization.

after we run the processing code a frame comes up with our elipse that we have drawn in our processing code just like this

And now this we can move with our joystick anywhere in the frame.

Errors solved!

  1. So in the Rp 2040 code that has the joystick one very silly mistake that I had made is that earlier I had put varibales in the message that need to be sent to the processing. Below I have compared my previous code which was wrong and the revised correct version.

Previous Code

// Send the joystick positions and button state via serial
  //Serial.print(" X:");
  Serial.print(xPosition);
  Serial.print(" Y:"); // Here the variable dont work instead there should be just spaces between them as done in the revised code.
  Serial.print(yPosition);
  Serial.print(" Z:");
  Serial.println(buttonState);

  delay(100); // Small delay to avoid flooding the serial communication
}

Current revised Code

// Send the joystick positions and button state via serial
  //Serial.print(" X:");
  Serial.print(xPosition);
  Serial.print(" ");  // Here Insted of the Variable just leave space.
  Serial.print(yPosition);
  Serial.print(" ");
  Serial.println(buttonState);

  delay(100); // Small delay to avoid flooding the serial communication
}
  1. The next error that I got was that the Port that I had selected is busy this was because the serial monitor on my Arduino IDE was open and was printing the values for my joystick. If you dont want this to happen then just close your Serial monitor on the IDE.

Hero Shots

Group Assignment

The Group assignment is been linked to siddharth Agarwal’s page - Siddharth Agarwal Webpage

My reflection

Processing and p5.js are both powerful tools for creative coding, but they differ in their environments and use cases. Processing, based on Java, is a desktop application ideal for computation-heavy tasks, standalone installations, and educational purposes, offering strong performance and a robust library ecosystem. It requires downloading and installation but provides extensive community support. In contrast, p5.js, built on JavaScript, operates in the web environment, making it highly accessible and easy to share and deploy online. It excels in web-based interactive art and visualizations, leveraging the broader JavaScript ecosystem and integrating seamlessly with web technologies like HTML, CSS, and WebGL. While Processing is better suited for desktop-based projects and physical computing, p5.js is perfect for creating and sharing interactive content on the web.

Code Files

Joystick code for Arduino IDE

Code for processing