Interface and Application Programming

This week, I will be using Processing for interactive features. I've previously used it briefly to generate some interesting images but have never tried interactions, so I'm excited!

1.1 Assignments of the Week

• Group assignment:

1.Compare as many tool options as possible

2.Document your work on the group work page and reflect on your individual page what you learned.

• Individual assignment:

Write an application that interfaces a user with an input and/or output device(s) on a board that you made.

1.2 Group assignment

link

1.3 Individual assignment

I downloaded Processing from the official website and installed it. You'll get a page where you can write code. The triangle in the upper left corner is for running the code, the stop button is next to it, and the bottom section shows the serial port and error alerts.

Let's get started! I'll try to use the computer's spacebar to light up the LED!

1.3.1 Spacebar lights up the light

To use the computer's spacebar to control an LED on one of XIAO RP2040's pins, we can achieve this through serial communication.

Here's the basic workflow:

1.Use Processing to read the state of the computer's keyboard.

2.Send the key state via serial to the XIAO RP2040.

3.In the XIAO RP2040 code, read the serial data and control the LED on pin 28 based on that data.

In the XIAO RP2040's Arduino code, serial data is read, and the state of pin 28 is adjusted based on this data.

Be sure to pay attention! Don't make a mistake in the serial port.

arduino code(XIAO RP2040)

#define LED_PIN 28 void setup() { Serial.begin(9600); pinMode(LED_PIN, OUTPUT); } void loop() { if (Serial.available() > 0) { char command = Serial.read(); if (command == '1') { digitalWrite(LED_PIN, HIGH); } else if (command == '0') { digitalWrite(LED_PIN, LOW); } } }

Processing listens for the computer's spacebar input and then sends a corresponding command (1 to turn on the light, 0 to turn it off) through the serial port.

processing code

import processing.serial.*; Serial port; void setup() { port = new Serial(this, "COM13", 9600); } void draw() { if (keyPressed && key == ' ') { port.write('1'); } else { port.write('0'); } }

video

1.3.2 Button randomly triggers the ball

The inspiration for this came from a lab training session where an instructor shared a Processing project. In it, clicking the mouse generated bouncing balls on the screen, which reloaded when the screen was filled. It was really fun! So, I decided to use my circuit board and add a button to make random-sized and random-colored balls appear when pressed.

Here's the basic workflow:

1.XIAO RP2040 reads the button's state.

2.When the button is pressed, XIAO RP2040 sends a signal via serial to Processing.

3.Processing creates a new ball in response to the signal.

First upload, the interface didn't respond, and unexpectedly, the LED on my board lit up.

After checking, I found I had used pin 28, so I switched to pin 26. Success!

Wiring Diagram

video

Processing Code

#define BUTTON_PIN 26 bool lastButtonState = LOW; void setup() { Serial.begin(9600); pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { bool buttonState = digitalRead(BUTTON_PIN); if (buttonState == LOW && lastButtonState == HIGH) { Serial.write('1'); delay(200); } lastButtonState = buttonState; }

Arduino Code (XIAO RP2040)

import processing.serial.*; Serial port; ArrayList<Ball> balls = new ArrayList<Ball>(); int maxBalls = 100; void setup() { size(600, 400); port = new Serial(this, "COM13", 9600); background(255); } void draw() { background(255); for (Ball b : balls) { b.display(); } if (port.available() > 0) { char inByte = port.readChar(); if (inByte == '1') { if (balls.size() >= maxBalls) { balls.clear(); } balls.add(new Ball(random(width), random(height), random(10, 50))); } } } class Ball { float x, y, diameter; color col; Ball(float x, float y, float diameter) { this.x = x; this.y = y; this.diameter = diameter; col = color(random(255), random(255), random(255)); } void display() { fill(col); noStroke(); ellipse(x, y, diameter, diameter); } }