Author: Kwaaku Boamah-Powers

This week’s reading, titled “Design meets disability,” intrigued me with its exploration of the intersection between design and the needs of individuals with disabilities. Prior to this, I hadn’t given much thought to the design aspects of products catering to the disabled community. My initial perspective was primarily focused on functionality, deeming it sufficient. However, the author emphasizes that functionality alone may not be the sole consideration. The incorporation of aesthetic appeal in design plays a crucial role in enhancing the user’s self-image.

The author delves into the analysis of various items such as spectacles (now referred to as eyewear), prosthetics, and other adaptive “equipment” designed for individuals with different abilities. It made me reflect on the challenges of introducing fashion into this realm, especially considering the diversity of needs. Unlike spectacles, which serve users regardless of eyesight effectiveness, prosthetics and hearing aids pose unique challenges. How can someone without amputation use a prosthetic, or how can individuals without hearing impairment benefit from hearing aids?

The transformation of spectacles into trendy “eyewear” appears to have been a successful evolution, but I question whether similar success is feasible for other assistive devices tailored for individuals with special needs. The reading has prompted me to consider the intricacies and complexities involved in merging design and functionality, particularly in the context of products meant to aid those with disabilities.

For my final project, I plan to utilize the ml5.js library and Arduino to create either an “electronic buddy” or an “art-aiding” device. Concerning the electronic buddy, my idea involves employing the ml5 library to execute a face recognition machine learning model through the webcam of a laptop or an attached camera. The objective is to enable the “buddy” to navigate towards the user. This electronic companion would be capable of displaying messages using the display unit in the SparkFun Inventor’s Kit for Arduino Uno. Additionally, it could produce sounds, potentially incorporating recorded messages.

On the other hand, the concept of the art-aiding device shares some similarities with the electronic buddy. This mobile device would be equipped with servo motors, possibly two or three in number. Colored pencils or markers, depending on what works best, would be attached to these servo motors. The servo motors would be allowed to move at specific angles, enabling the attached pencils or markers to make contact with a canvas. The user would have control over the device’s movement direction and the servo motors, along with the attached pencils, using p5 and a machine learning model from ml5.js.

Exercise 1

Concept

The potentiometer is used to control the x-coordinate of the ellipse drawn in p5.

Code

Arduino:

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..
  pinMode(LED_BUILTIN, OUTPUT);

}

void loop() {

  // gets sensor reading
  int sensor = analogRead(A0);
  delay(5);

  // indicates data transfer
  digitalWrite(LED_BUILTIN, HIGH);

  // sends data to p5
  Serial.println(sensor);
  
  // indicates data transfer
  digitalWrite(LED_BUILTIN, LOW);
  

}

p5

// variable to control x-coordinate
let circleX = 0;

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

function draw() {
  // sets background
  background(255);
  stroke(0);

  // draws circle on canvas
  // -- circleX is mapped between 0 and the width
  circle(map(circleX, 0, 1023, 0, width), height / 2, 50);
  
  // checks if serial communication has been established
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
  
}

// sets up serial connection
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));
  }
  
}

Video

 

Exercise 2

Concept

The brightness of an LED is controlled by the mouseX value from p5 mapped between 0 and 255.

 Code

Arduino:

// led pin number
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);

  // checks if led works correctly
  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()) {
    // sends dummy data to p5
    Serial.println("0,0");

    // led on while receiving data
    digitalWrite(LED_BUILTIN, HIGH); 

    // gets value from p5
    int value = Serial.parseInt();

    // changes brightness of the led
    if (Serial.read() == '\n') {
      analogWrite(ledPin, value);
    }
  }
  // led off at end of reading
  digitalWrite(LED_BUILTIN, LOW);
  
}

p5:

// variable to hold led brightness value
let value = 0;

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

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

// sets up serial communication
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)
  //////////////////////////////////
    
    // mouseX is mapped to right value before transmitted
    value = int(map(mouseX, 0, width, 0, 255));
  let sendToArduino = value + "\n";
  writeSerial(sendToArduino);
  }

  
}

Video

 

Exercise 3

Concept

An LED lights up when the ellipse touches the ground. A potentiometer is used to control the wind variable.

Code

Arduino:

// LED pin value
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() {

  // wait for data from p5 before doing something
  while (Serial.available()) {

    // led on while receiving data
    digitalWrite(LED_BUILTIN, HIGH); 

    // gets value from p5
    int value = Serial.parseInt();

    // turns on or off the led depending on value from p5
    if (Serial.read() == '\n') {
      if (value == 1) {
        digitalWrite(ledPin, HIGH);
      }
      else {
        digitalWrite(ledPin, LOW);
      }
      
      // gets sensor value
      int sensor = analogRead(A0);
      delay(5);

      // sends sensor value to p5
      Serial.println(sensor);
    }
  }
  // indicates end of reading
  digitalWrite(LED_BUILTIN, LOW);
  
}

p5:

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;
      
        // sets value to 1 to indicate touching the ground
        value = 1;
      }
    else {
      // sets value to 0 to indicate touching the ground
      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) {
    // divides potentiometer value into 2
    // -- increments wind value if value is equal to or greater 
    // -- than 511
    if (int(trim(data)) >= 511) {
      wind.x = 3;
    }
    // -- decrements otherwise
    else {
      wind.x = -3;
    }

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

Video

 

 

I share Bret Victor’s perspective on the significance of hands and their tactile capabilities when interacting with tools and the world around us. However, I believe that the challenges he identified with the “Picture Under Glass” concept may not be as relevant today with the advancements in augmented reality, virtual reality, and haptic technologies. Researchers are actively developing virtual environments that strive for realism, and personally, I’ve encountered promising experiences in our AIMLab on campus. For instance, I felt a virtual spider crawling up my arm and interacted with a software loop, sensing its weight and texture through a haptic device. In my view, while Victor’s concerns were valid at the time, technological progress has since addressed many of these issues.

Concept

Back home, we usually play the trumpet, but when we came to the UAE, we couldn’t find any trumpets. So, we decided to create our own – an electronic trumpet. It works by using a light sensor for the blowing effect and regular buttons for playing the notes. The sound comes out from a speaker. Simple as that!

The circuit diagram looks a bit messy but it works 🙂

#include "pitches.h"

//set the pins for the button, buzzer, and photoresistor
int firstKeyPin = 13;
int secondKeyPin = 12;
int thirdKeyPin = 11;
int buzzerPin = 9;
int blow = A2;

// variables regulate when value is read
const long interval = 200;  
unsigned long previousMillis = 0;
int blowVal;


void setup() {

  Serial.begin(9600);
  //set the button pins as inputs
  pinMode(firstKeyPin, INPUT_PULLUP);
  pinMode(secondKeyPin, INPUT_PULLUP);
  pinMode(thirdKeyPin, INPUT_PULLUP);

  //set the buzzer pin as an output
  pinMode(buzzerPin, OUTPUT);

  // reads value on setup to avoid later error
  blowVal = analogRead(blow);
}

void loop() {

  // reads current time
  unsigned long currentMillis = millis();

  // checks if specified duration has passed
  if (currentMillis - previousMillis >= interval) {
    // updates time since value was read from sensor
    previousMillis = currentMillis;

    // reads value from sensor
    blowVal = analogRead(blow);
  }

  Serial.println(blowVal);

  // conditions to play specific notes
  if (blowVal <= 350) {
    if ((digitalRead(firstKeyPin) == HIGH) && (digitalRead(secondKeyPin) == HIGH) && (digitalRead(thirdKeyPin) == HIGH)) {
      tone(buzzerPin, NOTE_F3); 
    }

    if ((digitalRead(firstKeyPin) == LOW) && (digitalRead(secondKeyPin) == HIGH) && (digitalRead(thirdKeyPin) == LOW)) {
      tone(buzzerPin, NOTE_G3); 
    }

    if ((digitalRead(firstKeyPin) == LOW) && (digitalRead(secondKeyPin) == LOW) && (digitalRead(thirdKeyPin) == HIGH)) {
      tone(buzzerPin, NOTE_A3); 
    }

    if ((digitalRead(firstKeyPin) == LOW) && (digitalRead(secondKeyPin) == HIGH) && (digitalRead(thirdKeyPin) == HIGH)) {
      tone(buzzerPin, NOTE_AS3); 
    }

  }
  
  if (blowVal > 350) {
    if ((digitalRead(firstKeyPin) == HIGH) && (digitalRead(secondKeyPin) == HIGH) && (digitalRead(thirdKeyPin) == HIGH)) {
      tone(buzzerPin, NOTE_C4); 
    }

    if ((digitalRead(firstKeyPin) == LOW) && (digitalRead(secondKeyPin) == LOW) && (digitalRead(thirdKeyPin) == HIGH)) {
      tone(buzzerPin, NOTE_D4); 
    }

    if ((digitalRead(firstKeyPin) == HIGH) && (digitalRead(secondKeyPin) == LOW) && (digitalRead(thirdKeyPin) == HIGH)) {
      tone(buzzerPin, NOTE_E4); 
    }

    if ((digitalRead(firstKeyPin) == LOW) && (digitalRead(secondKeyPin) == HIGH) && (digitalRead(thirdKeyPin) == HIGH)) {
      tone(buzzerPin, NOTE_AS3); 
    }

    if ((digitalRead(firstKeyPin) == HIGH) && (digitalRead(secondKeyPin) == HIGH) && (digitalRead(thirdKeyPin) == LOW)) {
      tone(buzzerPin, NOTE_F4); 
    }

  }
}

Concept

For this particular assignment, I didn’t particularly aim for anything. I have been having issues with connecting some of the components of the arduino kit and getting them to work so I decided to strictly get stuff to work. I utilized three buttons, jumper wires, three LEDs, a potentiometer, and the arduino UNO board. Using the value read from the potentiometer as a delay time, the LEDs are blinked using different buttons. That’s basically what the setup does.

I’ve included the sketch below.

//set the pins for the button and leds
int firstKeyPin = 2;
int secondKeyPin = 3;
int thirdKeyPin = 4;

int led1 = 9;
int led2 = 10;
int led3 = 11;

void setup() {
  //set the button pins as inputs
  pinMode(firstKeyPin, INPUT_PULLUP);
  pinMode(secondKeyPin, INPUT_PULLUP);
  pinMode(thirdKeyPin, INPUT_PULLUP);

  // set leds for output
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
  pinMode(led3, OUTPUT);

}

void loop() {
  // read voltage from potentiometer
  int delay_time = analogRead(A0);

  if(digitalRead(firstKeyPin) == LOW){        //if the first key is pressed
    // turns on led1
    digitalWrite(led1, HIGH);
    // delays for the value read from the potentiometer
    delay(delay_time);
    // turns off led1
    digitalWrite(led1, LOW);
    // delays for the value read from the potentiometer
    delay(delay_time);
  }
  else if(digitalRead(secondKeyPin) == LOW){  //if the second key is pressed
    // turns on led2
    digitalWrite(led2, HIGH);
    // delays for the value read from the potentiometer
    delay(delay_time);
    // turns off led2
    digitalWrite(led2, LOW);
    // delays for the value read from the potentiometer
    delay(delay_time);
  }
  else if(digitalRead(thirdKeyPin) == LOW){   //if the third key is pressed
    // turns on led3
    digitalWrite(led3, HIGH);
    // delays for the value read from the potentiometer
    delay(delay_time);
    // turns off led3
    digitalWrite(led3, LOW);
    // delays for the value read from the potentiometer
    delay(delay_time);
  }
  else{
    // turns off all leds
    digitalWrite(led1, LOW);
    digitalWrite(led2, LOW);
    digitalWrite(led3, LOW);
  }
}

Ideas for Future Improvements

For future improvements, I hope it doesn’t take me as much time as it took me this time to get everything working properly.

I used the tinker kit circuit guide as a reference when I got stuck.

In my initial perspective, I approached the interaction in physical computing from a strictly practical standpoint. However, the revelation brought about by the mechanical pixels and the surrounding fields of grass has broadened my understanding, highlighting the potential for creativity and aesthetics in these interactions. Previously, I considered the user’s input as the primary influence, shaping the device’s responses accordingly. Yet, the mechanical pixels and the grassy environment exhibit a distinct “will of technology.” Despite their simplicity, they engage with their surroundings not merely to fulfill a predetermined purpose dictated by humans, but to actively create an interaction with people. An illustrative example is the subtle quivering of the mechanical pixel “leaves” in an attempt to attract attention when no one is nearby. As individuals pass by, they collectively form a wave, accompanied by a tinkling sound, showcasing a dynamic and engaging interaction that transcends the conventional user-device relationship.

After delving into Tigoe’s “Making Interactive Art,” my perspective on interaction and interactivity has evolved. Initially, I conceived these concepts as a straightforward exchange where two entities respond to each other through inputs and outputs. However, Tigoe’s insights have led me to perceive interactivity as a more nuanced and profound experience. The excerpt from “Making Interactive Art” that resonated with me emphasizes the importance of letting the audience absorb the work through their senses, encouraging them to contemplate the meaning of each part, identify elements open to contact or control, and ultimately empowering them to interpret and respond in their own unique ways.

This perspective reframes interactivity as a process that places emphasis on the receiving end, highlighting the significance of allowing individuals to engage with artistic or interactive creations on a personal and subjective level. Rather than a uniform response to inputs, true interactivity, as suggested by Tigoe, enables a diverse range of interpretations and responses. In this light, I now see interaction not only as a means of communication but also as a pathway for individuals to feel a sense of uniqueness, care, and individuality within the realm of human experience.

The concept that attractive things work better raises an intriguing question about the relationship between aesthetics and functionality. It is indeed thought-provoking to consider whether we find objects appealing because we can subconsciously perceive their potential ease of use, and the subsequent satisfaction we derive from confirming our expectations. Just as when we examine a product and intuitively sense its ergonomic design, we appreciate its simplicity and effectiveness even before handling it. This initial attraction is comparable to our perceptions of beauty in people; an attractive exterior often becomes more compelling when accompanied by qualities like a warm smile, healthy teeth, a pleasant voice, and a likable personality.

On the other hand, the counter argument suggests that our thoughtfulness in assessing attractiveness beforehand may be limited. It’s true that not all functional products on the shelves are necessarily coveted in the manner described. Many utilitarian items do not receive the same level of initial attention or appeal as aesthetically pleasing ones. However, the counter argument acknowledges that functionality can enhance attractiveness afterward. For instance, a product that may not appear striking initially but offers exceptional functionality can become more attractive once its usefulness and positive attributes are realized. This is analogous to a person who may not be conventionally attractive but is incredibly enjoyable to be around, gradually altering our perception and making us appreciate their company in a different light.

Concept

The unusual switch I decided to create is not as unusual as I anticipated. I just decided to create something out of that awkward experience when your roommate turns on the light in the middle of the night. I used the arduino to power an LED connected to a photo resistor. The photo resistor produces less resistance and it is exposed to more intense light.

 

Ideas for Future Improvement

I believe it would have been more fun with some form of text display or a buzzing sound, but hearing a buzzing sound in the middle of night isn’t a good idea (smiling emoji).

Link to edit

Images from Sketch

 

Concept

ArtfulMotion is an innovative fusion of interactive art creation and musical immersion, designed as a captivating digital canvas for users to unleash their creativity. Grounded in the p5.js framework, the program offers a dynamic platform where art and music coalesce seamlessly. A richly textured backdrop, comprising the fifth print from Casey Reas’s Tissue prints, sets the visual stage, creating an aesthetic foundation for users to craft their masterpieces. The harmonious integration of various audio tracks and intuitive music controls allows users to select a musical score that perfectly complements their artistic journey, cultivating a multi-sensory and immersive experience.

The project pushes the boundaries of interaction with the implementation of machine learning through ml5.js. Leveraging the handpose model, users can shape their art through real-time hand gestures, offering a tangible link between the digital canvas and the physical world. A diverse array of artistic modes empowers users to explore varied styles and tools, encouraging experimentation and artistic expression. The user-friendly interface facilitates smooth navigation through different sections, while responsive design ensures the project adapts flawlessly to different screen sizes and resolutions. This program aspires to inspire creativity, fostering an environment where art and music converge to create a captivating and enjoyable artistic experience.

 

Implementation

In developing this project, I adopted a systematic approach that involved several key steps. First, I conducted an initial assessment to distinguish between frames containing a hand and those without. Subsequently, I delved into verifying the accuracy of the model’s key points. To ensure that these points corresponded correctly to the hand’s landmarks, I employed green ellipses as visual indicators. During this process, I identified a mirroring issue, which arose from my attempt to mirror the webcam feed. To address this, I placed the drawing function for the points within the push() and pop() functions, effectively correcting the mirroring problem.

A pivotal element of my approach was the creation of a dedicated Point class, designed to render the model’s points onto the screen with precision. I seamlessly integrated this class into the existing sketch responsible for drawing the hand’s landmarks. I also fine-tuned the drawKeyPoint() function to generate points that were stored in an array, allowing for streamlined rendering on the canvas.

For the project’s second mode, I took a different artistic approach by implementing curveVertex() in the draw function of the Point class. This choice lent a unique aesthetic to this mode, differentiating it from the first. Furthermore, I embarked on the design of the program’s landing page and other sub-interfaces. These elements were connected through functions I defined in separate JavaScript files. The collective result of these steps was a visually engaging project, which not only translated logic into code but also integrated modularity, object-oriented programming, event-driven programming, and image handling.

[Sketch of planning phase]

Highlight of Code

 The draw() function plays a pivotal role in the code, as it manages the application’s state and navigation. It renders different pages, such as the menu, instructions, color selection, mode selection, and the art creation canvas, by utilizing a switch statement to determine the current state. It also incorporates a back button for easy navigation between pages, excluding the menu and art creation canvas. Additionally, the function is responsible for rendering music control buttons, allowing users to adjust the soundtrack as they create art. The code’s modularity and clear separation of rendering logic for distinct states contribute to improved code organization and maintenance.

function draw() {
  
  // determines which page to display
  switch (state) {
    case "menu":
      drawMenu();
      break;

    case "instructions":
      drawInstructions();
      break;
      
    case "select_colors":
      drawSelectColors();
      break;

    case "select_mode":
      drawSelectMode();
      break;
      
    case "create_art":
      drawArt();
      break;      
  }
  
  // adds back button if on any other page except menu and main sketch
  if (state != "menu" && state != "create_art") {
    drawBackButton();
  }
  
  // draws music control buttons
  drawMusicControls();
}

One of the primary technical challenges encountered in the project was related to resizing the video feed within the drawArt() function while preserving its original aspect ratio and ensuring it was correctly positioned. The challenge involved intricate mathematical calculations to determine the new dimensions and position for the scaled video feed. Additionally, it required addressing the mirroring of the feed to ensure that user interactions remained intuitive and natural. The process demanded rigorous testing and iterative adjustments to strike the right balance and achieve the desired outcome, ensuring that the video feed displayed in the intended location on the canvas while preserving its correct proportions.

function drawArt() {
  
  // scaling video to avoid distortion
  let aspectRatio = video_feed.height/video_feed.width;
  
  // mirroring feed from the webcam
  // -- beginning of transformation
  push();
  translate(width, 0);
  scale(-1, 1);
  if (drawing_flag) {
    loadKeyPoints();
    drawKeyPoints();
  }
  image(video_feed, width - ( width / videoScale ), 0,  
        width / videoScale , (width /videoScale) * aspectRatio);
  pop();
  // -- ending of transformation
  
  // print button
  updatePrintButton();
  
  // end button
  createEndButton();

}

 

Areas for Improvement

In future iterations of ArtfulMotion, key considerations include implementing real-time collaboration, providing an intuitive and secure environment for multiple users to collectively create art; incorporating interactive art elements, enabling users to seamlessly add animations, dynamic effects, or physics simulations, with a focus on user-friendliness and real-time previewing; and achieving music and art synchronization, allowing users to link music parameters to visual elements for a multimedia experience. Furthermore, the project could offer customizable brushes and visual effects, giving users the tools to add unique artistic touches to their creations through an accessible interface that balances customization and usability. These enhancements have the potential to expand the project’s creative horizons and provide users with a more versatile and engaging platform for artistic expression.