Patterns - HW 3

Date: Sunday, 07/26/2026

Class: Creative Coding (IMALR-GT 102)

Section: 002 (Carrie)

Name: Janice Vuong

Week: Week 2

A link to your working sketch: https://editor.p5js.org/basicallyjanice/sketches/EtyuPOq3o

Describing your process. What worked? What didn’t work as planned? What issues did you encounter and how did you solve them?

Building off an exercise ↗️ in class that I completed that would rotate (an array) through my classmates names in my class section. I started to think about the LED display sign in the subway train cars that display the station name that the subway is approaching. I had taken pictures of the sign, when I was riding the (Q) train on the way to 370 Jay Street. (also it was hard not to look like a stalker trying to take pictures of LED display sign with the early morning commuters).

(Q) subway train display: The Next Stop Is

At first I copied down all the F train station names from Lower Manhattan to Prospect Heights. I just mostly wanted to get Jay Street-MetroTech covered. However, some of these stations have really long names (ex. 15 St-Prospect Park and Broadway-Lafayette St). Then I realize, this is my assignment!!! I can do whatever I want with the stations displayed!!!!! Still rooted in a realistic, F subway train station stops, I started to pick F station stops that had more meaning to me:

LEX AV-63RD ST = I transfer here a lot
FOREST HILLS = a classmate lives here
W 8 ST = NYC Aquarium 🐟

I wanted to add a for loop at some point in the code, but I had a hard time of thinking about something. I just added an if and else statement instead. When the variable count (which is keeping track of the user’s mouse presses) is greater than 20. Display “OUT OF SERVICE”. I guess this is now, a fantasy F train, that only has the capacity of traveling 20 stops. Sort of like the G train (also very sorry for those relying on the G train).

//if the user presses more than 20 times, the subway display: out of service
  if (count > 20){
  fill('yellow');
  text("OUT OF SERVICE", 660, 221);
  textSize(30);
  }else{
  fill('red');
  text(selectedStation, 660, 221);
  textSize(30);
  }
}

Did any code-related questions come up for you?: N/A, well maybe what would be an interesting way to add a for loop for this code?

my subway display code!

//variable to keep track of mouse presses
var count = 0


// store names in an array
let stations = ["YORK ST", "JAY ST-METROTECH", "BERGEN ST", "CARROLL ST", "FOREST HILLS", "LEX AV-63RD ST", "W 8 ST", "EAST BROADWAY", "DELANCEY-ESSEX ST", "2 AV", "W 4 ST", "34 ST"];
//I started to paste F train stops inbetween Chinatown to a bit past Brooklyn, but now referencing train stops that mean something to me: whether places I spend time, or my classmates are there

// create a selectedName variable and give it an initial value.
let selectedStation = "???"


function setup() {
  createCanvas(1000, 500);
  textAlign(CENTER);
  textSize(60);
}

function draw() {
  // color of subway train car
  background('#B2A89F');
  // outer led panel
  fill('black');
  rect(80, 170, 790, 80);
  // inner led panel
  fill('#3E3F39');
  rect(110, 185, 740, 50);
  textStyle(BOLD);

  // displays the F subway icon
  fill('orange');
  text ("(F) ",160,220)
  textSize(30);
  
  // displays "next stop is" placeholder
  fill('red');
  text("THE NEXT STOP IS:", 330, 221);
  textSize(30);
     
  //if the user presses more than 20 times, the subway display: out of service
  if (count > 20){
  fill('yellow');
  text("OUT OF SERVICE", 660, 221);
  textSize(30);
  }else{
  fill('red');
  text(selectedStation, 660, 221);
  textSize(30);
  }
}

  function mousePressed(){
  count = count +1
  selectedStation  = random(stations);
  print(count);
}