Module 0.5 · Visual front-end

Processing is the dashboard.

Arduino cannot draw a radar. Processing cannot sense soil. Together they become the pattern behind every Digital Challenge project.

2 × 45 minProcessing 4.xSerial 9600No hardware for sketch 1

Two IDEs, one cable

Processing is Java-based creative coding from the MIT Media Lab. In this course it is the visual frontend: it receives Serial.println and turns numbers into bars, color, and motion.

	Arduino IDE	Processing
Job	Control hardware	Draw on screen
Runs on	The Uno	The laptop
Loop	setup + loop	setup + draw
Language	C / C++	Java-like
Data	Serial.println	serialEvent

PDE in two minutes

Skip the full menu tour. Students need Run, Stop, the console, andprintArray(Serial.list()).

Editor + Run

▶ compiles and opens a window. Ctrl+R / Cmd+R. Stop with Ctrl+.

Console

println and Serial.list live here. If the port index is wrong, they will see it.

Sketchbook

One folder per sketch. Add images via Sketch → Add File… into data/.

Exercise 1 · First sketch, no hardware

first_sketch.pde

int frames = 0;

void setup() {
  size(500, 300);
  textAlign(CENTER, CENTER);
}

void draw() {
  background(30);
  frames++;
  float r = 127 + 127 * sin(frames * 0.05);
  float g = 127 + 127 * sin(frames * 0.03);
  fill(r, g, 100);
  rect(50, 80, 400, 60, 10);
  fill(255);
  textSize(22);
  text("Processing + Arduino = Power!", 250, 110);
  fill(r, 50, 200);
  ellipse(250, 220, 60, 60);
}

Exercise 2 · Receive a number

Upload Arduino first. Close Serial Monitor. Then run Processing. Check Serial.list()[0].

counter.ino

int counter = 0;

void setup() {
  Serial.begin(9600);
}

void loop() {
  Serial.println(counter);
  counter++;
  if (counter > 100) counter = 0;
  delay(500);
}

receive_bar.pde

import processing.serial.*;

Serial myPort;
String incomingData = "";
int receivedValue = 0;

void setup() {
  size(400, 250);
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[0], 9600);
}

void draw() {
  background(240);
  fill(50);
  textSize(20);
  text("Received from Arduino: " + receivedValue, 50, 80);
  fill(100, 150, 255);
  float barW = map(receivedValue, 0, 100, 0, 300);
  rect(50, 120, barW, 40);
  fill(0);
  textSize(16);
  text(receivedValue + " / 100", 50 + barW / 2, 140);
}

void serialEvent(Serial p) {
  incomingData = p.readStringUntil('\n');
  if (incomingData != null) {
    incomingData = trim(incomingData);
    if (incomingData.matches("\\d+")) {
      receivedValue = int(incomingData);
    }
  }
}

Exercise 3 · CSV of two values

This exact parse is Projects 1, 3, and 5. Master it here.

Step	Code
Read a line	`readStringUntil('\\n')`
Guard	`if (data != null && data.contains(","))`
Split	`split(trim(data), ",")`
Convert	`float(values[0])`

csv_dummy.ino

void setup() {
  Serial.begin(9600);
}

void loop() {
  float temperature = 23.5;
  float humidity = 61.0;
  Serial.print(temperature);
  Serial.print(",");
  Serial.println(humidity);
  delay(1000);
}

csv_bars.pde

import processing.serial.*;

Serial myPort;
float temperature = 0;
float humidity = 0;

void setup() {
  size(500, 300);
  myPort = new Serial(this, Serial.list()[0], 9600);
}

void draw() {
  background(255);
  fill(0);
  textSize(22);
  text("Temperature: " + nf(temperature, 1, 1) + " C", 50, 100);
  text("Humidity: " + nf(humidity, 1, 1) + " %", 50, 150);
  fill(220, 50, 50);
  rect(50, 170, map(temperature, 0, 50, 0, 380), 25);
  fill(50, 100, 220);
  rect(50, 210, map(humidity, 0, 100, 0, 380), 25);
}

void serialEvent(Serial p) {
  String data = p.readStringUntil('\n');
  if (data != null && data.contains(",")) {
    String[] values = split(trim(data), ",");
    if (values.length == 2) {
      temperature = float(values[0]);
      humidity = float(values[1]);
    }
  }
}

Exercise 4 · Send commands back

Needed later for servo START/STOP and the irrigation pump.

led_commands.ino

void setup() {
  Serial.begin(9600);
  pinMode(13, OUTPUT);
}

void loop() {
  if (Serial.available() > 0) {
    char cmd = Serial.read();
    if (cmd == '1') digitalWrite(13, HIGH);
    else if (cmd == '0') digitalWrite(13, LOW);
  }
}

Open the five projects