10.10.2025

In Class

Train Teachable machines to recognize the words Red, Blue, and Yellow. Connect to Arduino to light up the corresponding LED color.

Arduino Set up

Red LED: A3

Blue LED: A4

Yellow LED: A5

Arduino code

#include <Servo.h> 

Servo myservo;
int servoPin = 9;
int redPin = A3;
int bluePin = A4;
int yellowPin = A5;

void setup() {
  pinMode(redPin, OUTPUT);
  pinMode(bluePin, OUTPUT);
  pinMode(yellowPin, OUTPUT);
  
  myservo.attach(servoPin);
  myservo.write(0);  // set servo to mid-point

  // start serial port at 9600 bps:
  Serial.begin(9600);
} 

void loop() {
  if (Serial.available() > 0) { // if there's serial data available
    int inByte = Serial.read(); // read it
    Serial.println(inByte);
    if (inByte == 1) {
      myservo.write(0);
      // Light red LED
      digitalWrite(redPin, HIGH);
      digitalWrite(bluePin, LOW);
      digitalWrite(yellowPin, LOW);
    } else if (inByte == 2) {
      myservo.write(90);
      // Light blue LED
      digitalWrite(redPin, LOW);
      digitalWrite(bluePin, HIGH);
      digitalWrite(yellowPin, LOW);
    } else if (inByte == 3) {
      myservo.write(180);
      // Light yellow LED
      digitalWrite(redPin, LOW);
      digitalWrite(bluePin, LOW);
      digitalWrite(yellowPin, HIGH);
    } else {
      myservo.write(0);
      digitalWrite(redPin, HIGH);
      digitalWrite(bluePin, HIGH);
      digitalWrite(yellowPin, HIGH);
    }
    // Wait for 1 second
    delay(1000);
  }
}

p5.js Code

https://editor.p5js.org/Janeliu13/sketches/NyvGq_qua

*first upload the arduino code, then open p5.serial control, then upload p5.js sketch

Homework

Build an interactive browser experiment related to sound data, with an Arduino component(optional). Document your p5.js sketch in a blog post. Add a link to the post and your p5.js sketch on the Assignment 5 Wiki page. In your blog post, include visual documentation such as a recorded screen capture / video / GIFs of your sketch.

For this week’s assignment, I wanted to create an interactive weather system that helps users quickly see temperature ranges for different cities around the world. The flow of the system would require users to ask about the weather in a specific city, and the system would not only display the temperature but also provide a visual representation through an animated circular pattern on the screen as well as through the Arduino LED lights. The inspiration behind this is to make a useful system that can help you decide what to wear based on the temperature range. When you know a city is in the 0-10°C range, you immediately know you need a puffer jacket, scarf, and thick layers. For 10-20°C, a jacket with layers underneath. And for 20-30°C, maybe just a shirt is fine.