Author: Khaleeqa Garrett

Concept: “AeroMaestro”

My friend and I visited the Louvre Museum in Abu Dhabi on Sunday. Every night for the entire month, I would see objects lighting up the sky in patterns when I went out late. Upon closer inspection, I quickly discovered that these were drones operating a drone show at the Louvre. But on this specific day, we were positioned on the Louvre terrace, which provided us with the ideal height from which to watch the drone show. After giving it some thought, I’ve decided that this is the theme I want to explore for my final project because we were so close that we could even hear the drones whirring. I’m not sure how I’m going to do it, but I’d like to incorporate this into P5 and have a physical component on Arduino.

Setup:

Your touches on the joystick will translate into a language that the drones can understand thanks to an Arduino Uno and a joystick module. Your motion serves as a cue to them, influencing their formations and flight patterns. The drones will use P5.js as their gateway. The drones would receive commands from Arduino that would essentially give them life and allow their movements to be seen on screen. As the drones fly, every tilt and every movement of the joystick will be reflected in real time.

Interaction:

The user will be interacting with the drones by taking on the role of the conductor and essentially controlling their rhythm, motion, patterns, and position. I want it to feel more like an interactive art experience where you can use P5.js as a canvas and your gestures as the brush, rather than like operating a remote-control car.

EXERCISE 01: ARDUINO TO P5 COMMUNICATION

Make something that uses only one sensor on Arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on Arduino is controlled by p5.

SCHEMATIC AND MODELLING:

P5 CODE:

let circleX = 0;
function setup() {
  createCanvas(640, 480);
  textSize(18);
}

function draw() {
  background(255);
  stroke(0);
  
  fill("pink");
  circle(map(circleX,0, 1023, 0, width), height/2, 50);
  
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
  
}

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    circleX = int(trim(data));
    
  }
  print(circleX);
}

ARDUINO CODE: 

void setup() {
  // Start serial communication so we can send data
  // over the USB connection to our p5js sketch
  Serial.begin(9600);

  // We'll use the builtin LED as a status output.
  // We can't use the serial monitor since the serial connection is
  // used to communicate to p5js and only one application on the computer
  // can use a serial port at once.
  pinMode(LED_BUILTIN, OUTPUT);

}

void loop() {

  int sensor = analogRead(A0);
  delay(5);
  digitalWrite(LED_BUILTIN, HIGH);
  Serial.println(sensor);
    
  digitalWrite(LED_BUILTIN,LOW);
}

PROTOTYPE:

IMG_4402

EXERCISE 02: P5 TO ARDUINO COMMUNICATION

Make something that controls the LED brightness from p5.

SCHEMATIC AND MODELLING: 

P5 CODE:

let value = 0;

function setup() {
  createCanvas(640, 480);
  textSize(18);
}

function draw() {
  background(0);
  stroke(255);
  fill(255);
  
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
}

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  if (data != null) {
    //////////////////////////////////
  //SEND TO ARDUINO HERE (handshake)
  //////////////////////////////////
    value = int(map(mouseX, 0, width, 0, 255));
  let sendToArduino = value + "\n";
  writeSerial(sendToArduino);
  print(value);
    
    
  }

  
}

ARDUINO CODE: 

int ledPin = 5;

void setup() {
  // Start serial communication so we can send data
  // over the USB connection to our p5js sketch
  Serial.begin(9600);

  // We'll use the builtin LED as a status output.
  // We can't use the serial monitor since the serial connection is
  // used to communicate to p5js and only one application on the computer
  // can use a serial port at once.
  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(ledPin, OUTPUT);

  digitalWrite(ledPin, HIGH);
  delay(1000);
  digitalWrite(ledPin, LOW);

  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
    Serial.println("0,0"); // send a starting message
    delay(300);            // wait 1/3 second
    digitalWrite(LED_BUILTIN, LOW);
    delay(50);
  }

}

void loop() {


  // wait for data from p5 before doing something
  while (Serial.available()) {
    Serial.println("0,0");
    digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data

    int value = Serial.parseInt();

    if (Serial.read() == '\n') {
      analogWrite(ledPin, value);
    }
  }
  digitalWrite(LED_BUILTIN, LOW);
  

}

PROTOTYPE:

IMG_4403

EXERCISE 03: BI-DIRECTIONAL COMMUNICATION

Take the gravity wind example and make it so: every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor.

SCHEMATIC AND MODELLING: 

P5 CODE:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let value = 0;
let drag = 1;
let mass = 50;

function setup() {
  createCanvas(640, 360);
  noFill();
  position = createVector(width/2, 0);
  velocity = createVector(0,0);
  acceleration = createVector(0,0);
  gravity = createVector(0, 0.5*mass);
  wind = createVector(0,0);
}

function draw() {
  background(255);
  stroke(0);
  fill(0);
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    
    applyForce(wind);
    applyForce(gravity);
    velocity.add(acceleration);
    velocity.mult(drag);
    position.add(velocity);
    acceleration.mult(0);
    ellipse(position.x,position.y,mass,mass);
    
    if (position.y > height-mass/2) {
        velocity.y *= -0.9;  // A little dampening when hitting the bottom
        position.y = height-mass/2;
        value = 1;
      }
    else {
      value = 0;
    }
    
  }
  
  
}

function applyForce(force){
  // Newton's 2nd law: F = M * A
  // or A = F / M
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

function keyPressed(){

  if (key==UP_ARROW){
    mass=random(15,80);
    position.y=-mass;
    velocity.mult(0);
  }
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}


// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    
    if (int(trim(data)) >= 511) {
      wind.x = 3;
    }
    else {
      wind.x = -3;
    }

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = value + "\n";
    writeSerial(sendToArduino);
  }
}

ARDUINO CODE: 

int ledPin = 5;

void setup() {
  // Start serial communication so we can send data
  // over the USB connection to our p5js sketch
  Serial.begin(9600);

  // We'll use the builtin LED as a status output.
  // We can't use the serial monitor since the serial connection is
  // used to communicate to p5js and only one application on the computer
  // can use a serial port at once.
  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(ledPin, OUTPUT);

  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
    Serial.println("0"); // send a starting message
    delay(300);            // wait 1/3 second
    digitalWrite(LED_BUILTIN, LOW);
    delay(50);
  }

}

void loop() {

  
    
  digitalWrite(LED_BUILTIN, LOW);

  // wait for data from p5 before doing something
  while (Serial.available()) {
    digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data

    int value = Serial.parseInt();

    if (Serial.read() == '\n') {
      if (value == 1) {
        digitalWrite(ledPin, HIGH);
      }
      else {
        digitalWrite(ledPin, LOW);
      }
      
      int sensor = analogRead(A0);
      delay(5);
      Serial.println(sensor);
    }
  }
  digitalWrite(LED_BUILTIN, LOW);
  

}

PROTOTYPE:

IMG_4406

Pullin’s “Design Meets Disability” represents a good cross-section between, disability, fashion and design. In my opinion, he presents a story that goes beyond basic usability to embrace the core ideas of inclusion and empowerment, particularly when viewed through the lens of inclusivity and disability. In his book Pullin deftly demonstrates how assistive technology—like glasses, hear wear, and prosthetic limbs (leg wear)—has transformed into fashion statements. It’s amazing to see how design innovation has transformed these items from basic needs to unique expressions of identity and personal style to the point where today, spectacles are a fashion statement, unlike when they were only meant for individuals with disabilities like bad eyesight. Pullin discusses the significance of designs being both functional and aesthetically pleasing. He demonstrates how important it is to make things both visually appealing and accessible to those with disabilities. It’s similar to saying, “Hey, these things can look great AND they can help you!” Pullin emphasizes how a combination of good design and utility may change public perceptions of disability aids, increasing their social acceptance and appreciation.

Pullin discusses how keeping functionality without sacrificing simplicity can benefit those with disabilities. He illustrates how many people, regardless of ability, can profit from this type of design. He provides illustrations of universally usable, basic designs that improve the quality of life for those with impairments. It also emphasizes how crucial it is to pay attention to individuals with disabilities when creating these designs, as frequently we assume we know what is best for them based on presumptions and the stigmas society has attached to them. Therefore, I believe it is crucial to draw attention to these minute details that, not only benefit us but also those who are the primary beneficiaries of these designs.

This reading challenged me to consider creating not just an “interactive” design, but a GOOD interactive design that can improve everyone’s quality of life, particularly for those who are disabled. It’s not only about making things function; it’s also about making them user-friendly, simple and fashionable.  I learned that good design considers everyone’s needs and can change how we see and accept things like disability aids. It’s about making the world more inclusive and thoughtful for everyone.

Concept:

Rujul and I collaborated on our Week 10 assignment, centered on crafting a musical instrument. Our initial concept revolved around utilizing the ultrasonic sensor and piezo speaker to create a responsive system, triggering sounds based on proximity. However, we expanded the idea by incorporating a servo motor to introduce a physical dimension to our instrument. The final concept evolved into a dynamic music box that not only moved but also emitted sound. The servo motor controlled the music box’s rotation, while the ultrasonic sensor detected proximity, prompting different tunes to play. To reset the music box, we integrated a button to return the servo motor to its initial position.

Modelling and Schematic:

 

 

 

 

Prototype:

IMG_4312

Code:

Our prototype took shape seamlessly, and the coding aspect proved relatively straightforward. One particularly intriguing segment involved establishing thresholds for distinct melodies based on the object’s position within the carousel.

void checkDistanceAndSound() {
  int duration, distance;

  digitalWrite(TRIG_PIN, LOW);
  delayMicroseconds(2);
  digitalWrite(TRIG_PIN, HIGH);
  delayMicroseconds(10);
  digitalWrite(TRIG_PIN, LOW);

  duration = pulseIn(ECHO_PIN, HIGH);
  distance = (duration * 0.0343) / 2;

  // Play different melodies for different distance ranges
  if (distance > 0 && distance <= 5 && !soundProduced) {
    playMelody1();
    soundProduced = true;
    delay(2000); // Adjust delay as needed to prevent continuous sound
  } else if (distance > 5 && distance <= 10 && !soundProduced) {
    playMelody2();
    soundProduced = true;
    delay(2000); // Adjust delay as needed to prevent continuous sound
  } else if (distance > 10 && distance <= 20 && !soundProduced) {
    playMelody3();
    soundProduced = true;
    delay(2000); // Adjust delay as needed to prevent continuous sound
  } else {
    noTone(SPEAKER_PIN);
    soundProduced = false;
  }
}

void playMelody1() {
  int melody[] = {262, 294, 330, 349, 392, 440, 494, 523}; // First melody
  int noteDurations[] = {250, 250, 250, 250, 250, 250, 250, 250};

  for (int i = 0; i < 8; i++) {
    tone(SPEAKER_PIN, melody[i], noteDurations[i]);
    delay(noteDurations[i]);
  }
}

void playMelody2() {
  int melody[] = {392, 440, 494, 523, 587, 659, 698, 784}; // Second melody
  int noteDurations[] = {200, 200, 200, 200, 200, 200, 200, 200};

  for (int i = 0; i < 8; i++) {
    tone(SPEAKER_PIN, melody[i], noteDurations[i]);
    delay(noteDurations[i]);
  }
}

void playMelody3() {
  int melody[] = {330, 330, 392, 392, 440, 440, 330, 330}; // Third melody
  int noteDurations[] = {500, 500, 500, 500, 500, 500, 1000, 500};

  for (int i = 0; i < 8; i++) {
    tone(SPEAKER_PIN, melody[i], noteDurations[i]);
    delay(noteDurations[i]);
  }
}

Reflection:

Reflecting on our project, I believe enhancing it with LEDs synchronized to specific sounds could offer a more comprehensive understanding of the ultrasonic sensor’s functionality. Each LED would correspond to a particular sound, demonstrating the sensor’s operations more visibly. Additionally, considering a larger-scale implementation for increased interactivity might further elevate the project’s engagement potential.

This week’s reading about the future of interaction design made me stop and think. It talked about how designs confined under glass aren’t great for the future of how we interact with stuff. The author had some strong thoughts about a video showcasing future interactions. They were skeptical about the interactions presented in the video because they had experience working with real prototypes, not just computer-generated animations. But surprisingly, that wasn’t the main issue for them. What bothered them the most was that the video didn’t offer anything truly groundbreaking from an interaction standpoint. They felt it was just a small step forward from what’s already there, which, according to them, isn’t that great to begin with. They stress how crucial it is to have visionary ideas that truly revolutionize how we interact with technology and the world around us. It got me pondering, but honestly, I don’t fully buy into that idea.

Sure, our bodies have a ton of complex ways we handle things, how we touch, hold, and interact with everything around us. But saying that designs restricted to “pictures under glass” are all bad? I’m not on board with that. Take something as simple as a PDF file versus printing out a reading. That PDF might be called “numb” in terms of design, but let’s be real, it’s way easier to handle and interact with than dealing with a printed paper. It’s about usability and convenience, isn’t it? If it’s not convenient or easy to use, is it even really interaction?

I believe interaction goes beyond just physically touching something. It’s about how easy and helpful it is to use. Some things will always need to be tangible. There’s magic in touching, feeling textures, estimating weights, and seeing how things respond to us. Like a couch that adjusts slightly to fit you but still does its job of being a comfy place to sit. That’s something you can’t replicate behind glass.

I think it’s crucial to know what can be behind glass and what can’t. Some folks might prioritize convenience in the future, but there are things you just can’t replicate virtually. I mean, you can’t virtually brush your teeth, right?

For me, I don’t see the connection or agree with that rant about interaction design. Maybe it’s just me, though. Everyone’s got their take on things, and that’s cool.

This week’s assignment drew inspiration from a familiar scenario: those late-night kitchen escapades for sneaky snacks. At home, the kitchen lights, being downlighters, don’t just instantly switch on. Instead, there’s a gradual shift when we turn the knob. This unique characteristic prompted me to recreate this experience in my circuit. The analog representation was brought to life through the potentiometer, mirroring the gradual adjustment of the kitchen lights, while the digital side found expression in the toggle switch.

To bring my circuit to life, I gathered a few key components: a potentiometer, a toggle switch, jumper cables, two 10k ohm resistors, one 330-ohm resistor, and two LEDs. The interplay of these elements resulted in the creation of a circuit, visually captured in the image below.

In the process of setting up the circuit, I encountered challenges associated with ensuring the correct placement of components, whether they operated in the digital or analog realm. Despite these hurdles, I noticed a significant improvement in my ability to assemble the circuit compared to my initial attempts. This project underscored the importance of understanding the specific pins corresponding to digital and analog features on the Arduino Uno board. Aligning the code with the appropriate pin modes became crucial for a seamless execution.

Here’s a snippet of the code that brought my project to life:

void loop() {
  int sensorValue= analogRead(A1);
  int buttonState = digitalRead(A2);
  Serial.println(sensorValue);


 analogWrite(led, sensorValue/4);

 delay(30);

 if (buttonState == LOW) {

digitalWrite(13, LOW);

} else {

digitalWrite(13, HIGH);

}
}

Below is the video representation of my assignment.

IMG_4150

Reflecting on the project, I recognize its conceptual completeness, yet I aspire to enhance its creative aspect. While the current iteration captures the assignment’s essence, I envision experimenting with diverse LED blinking patterns, moving beyond the conventional blink. Additionally, exploring the possibility of using the potentiometer to control multiple LEDs could add a layer of complexity and creativity to the project, elevating it beyond its current simplicity.

This week’s reading from Tigoe was all about Physical Computing and interactive media art, and it was super enlightening. One part that really caught my attention was the reading on Making Interactive Art. It talked about three key things to keep in mind when creating interactive artwork: setting the stage, shutting up, and listening.

The idea that your artwork should speak for itself really stuck with me. Many times, we create art and start questioning ourselves – is it good enough? How do I explain my thoughts behind it? This reading basically said, you don’t have to explain anything. Your artwork can stand on its own.

This got me thinking about the interactive showcase we saw at the beginning of the semester. We were given the freedom to explore, touch, sit, stand, and feel. It was about being alone together. The artist didn’t have to explain anything; the experience spoke for itself. It made me aspire to create art that lets people think what they want.

Connecting this to another reading, Physical Computing hits and misses, I realized that the sense of freedom in interactive art extends to the technical side too. Even if something similar has been done before, you have the liberty to make changes and adjustments. Set the stage, make it your own, and then, shut up and listen. This means letting your work be interpreted by others who might have seen something similar but are experiencing a different variation through your lens.

These readings teach us crucial lessons for dealing with interactive art. Don’t let external opinions affect your work. Do what you need to do and let the art speak for itself. It’s about giving your audience the freedom to perceive and connect with your work on their terms.

This week’s assignment involved creating a unique switch using the Arduino board. To be more specific, we needed to design a switch that could be activated without using our hands and without any additional coding. My idea for this project was to trigger an LED by completing a circuit through indirect user interaction, making it appear as if hands were not involved. Inspired by my love for football, I decided to take on this challenge because playing football doesn’t involve using your hands. I wanted to see how I could bring this concept to life.

This project presented a bit of a challenge for me since I am more comfortable with the software side of computing than the physical aspects. It felt like I was delving into a completely new subject. Below, you can see the initial sketch of my project, which outlines my concept.

I planned to connect the LED in a way similar to what we learned in class, but with a parallel setup to distribute resistance to both sides of the board. Additionally, I intended to set up a parallel connection for the 5V supply to ensure it reached both sides of the board. In this setup, when an aluminum ball was kicked into the “goal post,” the circuit would be short-circuited or completed, causing the LED to illuminate. A picture of my project is inserted below along with the link to my project video.

Circuit Diagram:

Picture of my project:

IMG_4043

Reflection and Future Improvements:

In terms of future improvements, I would like to focus on making the game more user-friendly by eliminating wires and creating a more efficient gaming space. I might also consider adding another LED to each team’s goal post to differentiate them. Nevertheless, I am proud of what I achieved in this assignment, and I look forward to facing more challenges in the upcoming projects.

This week’s readings from Donald A. Norman, including “Emotions and Attractive” and “Her Code Got Humans on the Moon—And Invented Software Itself,” resonated with me and left me with some valuable insights. On one hand, the story of Margret Hamilton stands out as an inspiring example, not just for me, but for countless young women aspiring to make their mark in a predominantly male-dominated field. Her journey began without a clear goal or ulterior motive, yet it ultimately led to the creation of software that played a pivotal role in the Apollo missions at NASA, laying the foundation for modern computer software. Her story embodies the timeless principle of “just do it.”

Sometimes, self-doubt can creep in when we feel we’re not good enough or lack a full grasp of the subject matter. We might question whether we truly belong in certain spaces, especially when we don’t see others who look like us or have similar backgrounds. However, Hamilton’s remarkable journey serves as a powerful reminder that we can carve our own path and enter spaces we aspire to be in, regardless of the current occupants. You never know who might be watching or following in your footsteps.

Her journey, from starting something with no clear plan to creating an industry worth $400 billion, illustrates the incredible results that can emerge from hard work and dedication. This also connects with Norman’s readings because Hamilton didn’t create something for the sake of it; her work was both functional and aesthetically appealing, leaving an indelible mark on history. It emphasizes that our focus should not solely be on usability or aesthetics but on striking a balance with intention and purpose.

Margret Hamilton didn’t stumble upon the code that we now recognize as software; she crafted it with usability and a form of beauty that only programmers of her time could appreciate. Her deliberate approach propelled her to the position she holds today, serving as a true source of inspiration for me in my own career aspirations. Her story encourages me to follow a path that combines functionality and artistry, much like she did in her groundbreaking work.

The name of my project originated from a saying back home used to describe the sounds of the steelpan being played, or the steel pan being tuned.

My project aimed to introduce users to the steelpan, the national instrument of Trinidad and Tobago, and provide them with an immersive experience of this unique musical creation. The steelpan’s distinct melodic, tonal, and rhythmic qualities have garnered global fascination and serve as a prominent cultural symbol of Trinidad and Tobago. Originally crafted from items like frying pans, dustbin lids, and oil drums in the 1930s, the steelpan has evolved into finely tuned sheet metal instruments.

Listening to the steelpan evokes a childlike sense of wonder, in me, and I think every other Trinbagonian. While it may sound like a cliché description of the emotional connection to music, it holds a profound truth, especially for Trinbagonians. The steelpan’s significance extends beyond its musical charm, intertwining with the cultural heritage and historical resistance against slavery in Trinidad and Tobago.

 

The vibrant chaos witnessed at events like Panorama captures the essence of steelpan music. It’s a beautiful chaos where everyone, regardless of age, is in motion. Steelpan is an integral part of the Trinbagonian identity, and I sought to convey this dynamic energy through the moving background, creating an immersive feeling that aligns with the live performances involving this extraordinary instrument.

The sketch revolves around a steelpan instrument and is divided into an introduction screen, instructions screen and a game screen. The introduction screen offers options to start, end, or view instructions. Transitions between these states are controlled through flags (isIntroduction, isInstructions, isPlaying). In the game screen, there’s a scrolling background, and users can click on different segments of the steelpan to produce sounds. The instrument comprises three rows, and each row, represents the pitch, with the outer row, being the lowest, and the inner row, being the highest as these notes are smaller. The code checks the mouse’s proximity to trigger sound playback, and this is essentially how the user utilizes the sketch.

The part I’m most proud of is the Steelpan class in the p5.js sketch. It plays a vital role in managing and rendering the steelpan instrument, handling data about rows, labels, angles, and radii. The draw method takes care of the visual representation, managing row iteration, position calculation, and segment colour changes upon mouse hover. This class adheres to object-oriented principles, ensuring well-structured and maintainable code for the steelpan instrument.

class SteelPan {
  constructor(outerCount, middleCount, coreCount, outerRadius, middleRadius, coreRadius) {
    this.outerCount = outerCount;
    this.middleCount = middleCount;
    this.coreCount = coreCount;
    this.totalNotes = outerCount + middleCount + coreCount;
    this.outerLabels = ["A", "D", "G", "C", "F", "B♭", "E♭", "G#", "C#", "F#", "B", "E"];
    this.middleLabels = ["Am", "Dm", "Gm", "Cm", "Fm", "B♭m", "E♭m", "G#m", "C#m", "F#m", "Bm", "Em"];
    this.coreLabels = ["e", "d", "c", "e♭", "c#"];
    this.angleIncrementOuter = TWO_PI / outerCount;
    this.angleIncrementMiddle = TWO_PI / middleCount;
    this.angleIncrementCore = TWO_PI / coreCount;
    this.outerRadius = outerRadius;
    this.middleRadius = middleRadius;
    this.coreRadius = coreRadius;
  }

  draw() {
    fill(100, 100, 100);
    stroke(10);
    ellipse(width / 2, height / 2, 400, 400);

    // Draw the outer row
    for (let i = 0; i < this.outerCount; i++) {
      let angleOuter = i * this.angleIncrementOuter;
      let x = width / 2 + cos(angleOuter) * this.outerRadius;
      let y = height / 2 + sin(angleOuter) * this.outerRadius;
      let circleSize = 50;

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {
        fill('grey'); // Change to a darker color when hovering
      } else {
        fill('white'); // Default color
      }

      ellipse(x, y, circleSize, 70);
      fill(255);
      textSize(14);
      textAlign(CENTER, CENTER);
      text(this.outerLabels[i], x, y);
    }

    // Draw the middle row
    for (let i = 0; i < this.middleCount; i++) {
      let angleMiddle = i * this.angleIncrementMiddle;
      let x = width / 2 + cos(angleMiddle) * this.middleRadius;
      let y = height / 2 + sin(angleMiddle) * this.middleRadius;
      let circleSize = 50;

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {
        fill('darkgrey'); // Change to a darker color when hovering
      } else {
        fill('black'); // Default color
      }

      ellipse(x, y, circleSize, 40);
      fill(255);
      textSize(14);
      textAlign(CENTER, CENTER);
      text(this.middleLabels[i], x, y);
    }

    // Draw the core row
    for (let i = 0; i < this.coreCount; i++) {
      let angleCore = i * this.angleIncrementCore;
      let x = width / 2 + cos(angleCore) * this.coreRadius;
      let y = height / 2 + sin(angleCore) * this.coreRadius;
      let circleSize = 30;

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {
        fill('darkred'); // Change to a darker color when hovering
      } else {
        fill(255, 0, 0); // Default color
      }

      ellipse(x, y, circleSize, circleSize);
      fill(255);
      textSize(14);
      textAlign(CENTER, CENTER);
      text(this.coreLabels[i], x, y);
    }
  }
}

Moreover, I take pride in successfully managing the specific sounds assigned to each note in the steelpan. Proper labelling and space allocation were crucial, and the effort put into uploading each note and linking it to the sketch brought the project to life, achieving the desired outcome. This, however, was by far the most tedious process, and the most challenging, because my initial plan to source the notes via an online website failed. So instead, I had a family member play each individual note on the steelpan, record it and send it to me.

To enhance this project, I have several goals in mind. Firstly, I aim to refine the note playing functionality to allow for overlapping sounds, ensuring a seamless musical experience. This will enable me to capture the authentic rhythm and intricacies of the steelpan, encompassing elements like melody, rhythm, and harmony. Additionally, I want to introduce a multiplayer aspect by using the steelpan class to create multiple pans. This would provide users with a glimpse into the dynamics of a real Steelpan band.

Despite the challenges, I take pride in the outcome of this project. It served as a combination of the knowledge I’ve acquired over the past seven week, plus some. It highlights my integration of various concepts and techniques and reflects my dedication to my home, Trinidad, and Tobago. Below is the embedded sketch.