My final concept remains the same, although I would like to make it something a bit more. I am considering making it into an allegory for attention by having the sensor control a tracking flashlight. I have yet to figure out how I can attach and control a flashlight in an elegant manner, but that will come with time. Additionally, I have some music playing to enhance the contemplative nature of the piece.
I have begun playing around with methods of attaching the sensor to a servo. Likely, I will attach it to a wheel that was provided with the kit and disguise the wheel with some paper.
I have yet to figure out what exactly I should use the p5 portion for except for music. Initially I wanted a radar-like display but that is no longer suitable for what I want to make. Maybe if I don’t figure out the flashlight problem, I can just have a flashlight or stage graphic on the screen that changes on whether the sensor detects someone or not.
The Arduino continuously reads the electrical signal from a potentiometer. This signal represents the potentiometer’s position based on its rotation. The code then scales this raw sensor reading (ranging from 0 to 1023) to a new range of 0 to 400 using a function called map. This scaled value becomes the control signal for the circle’s movement on the web page.
The scaled sensor value (now within the 0-400 range) is sent from the Arduino to the p5js code running in the web browser. When data arrives to p5js, the code assigns it to a variable named circleX. This variable essentially controls the circle’s position on the screen. Finally, the code uses this value to dynamically adjust the horizontal position (X coordinate) of the circle drawn on the p5js canvas.
The p5js code continuously tracks the mouse cursor’s position on the canvas (represented by mouseX and mouseY variables). The p5js code directly assigns the mouseX value to the brightness 1 variable and the mouseY value to the brightness2 variable. These variables essentially store the desired brightness levels for the two LEDs. The readSerial function in p5js combines the brightness1 and brightness2 values with a comma (“,”) separator and adds a newline character (“\n”) to create a formatted message. This formatted message is then sent to the Arduino.
Once the data (representing the formatted message) are available, the code reads them using Serial.parseInt. This separates the combined brightness values stored in brightness1 and brightness2. The map function then scales both brightness values from the p5js range (0-400) to the appropriate range (0-255) for controlling the LEDs. The code includes error handling by checking for a newline character (\n) after reading the brightness values. This ensures complete data reception before setting the LED brightness. If no data is received, the Arduino prints an error message “No signal received” to the serial monitor. Finally, the Arduino sets the brightness of each LED (LED 1 on pin 10 and LED 2 on pin 11) based on the corresponding received values (brightness1 and brightness2).
The p5js code establishes the core mechanics for simulating a bouncing ball on the screen. It defines various physics concepts like: Gravity, Drag, Acceleration and Wind. The code continuously updates the ball’s position and velocity based on the applied forces and drag. When the ball hits the bottom of the canvas, its vertical velocity is reversed, simulating a bounce. At this point, a variable named ledOn is set to 1, indicating the LED should be turned on. If the serial connection is active, the code sends the ledOn value (0 or 1) as a string followed by a newline character (“\n”) to the Arduino using writeSerial.
The readSerial function gets called whenever new data arrives from the Arduino. Here, it parses the received data and assigns it to the windVale variable. This value updates the wind vector, influencing the ball’s horizontal movement in the simulation. The Arduino code continuously reads the analog value from a potentiometer connected to pin A0. It then maps this value (ranging from 0 to 1023) to a new range of -10 to 10 using the map function. This mapped value represents the wind force affecting the ball in the p5js simulation. The Arduino transmits this wind force value to the p5js code. The Arduino constantly checks for incoming data on the serial port. If data is available, it reads the first character and checks its value. If the character is ‘1’, the LED connected to pin 13 is turned on. If the character is ‘0’, the LED is turned off.
Overall we faced quite a few challenges, regarding Arduino malfunctioning due to serial communication error. Sometimes it was the fault of code, adapter or p5js. Either way we found step by step troubleshooting to be a solution. However, in the end we are happy with our progress and this has helped us prepare for our final project.
This week’s reading about design and disability has been eye-opening, prompting a shift in how I perceive both accessibility and aesthetics. It’s clear that the potential of design in creating assistive devices has been vastly underestimated. The notion that functionality must come at the expense of beauty is challenged, as exemplified by everyday items like glasses – seamlessly merging utility and style.
This realization aligns with the idea that good design goes beyond mere usability; it enhances user experience and self-perception. It’s not about creating universally bland solutions, but rather celebrating diversity through targeted designs that cater to individual needs and preferences. Involving artists and fashion designers in this process can inject a sense of identity and personal expression into assistive devices, transforming them from purely functional tools into extensions of oneself.
The shift in language, from “patients” to “wearers” and “hearing aids” to “HearWear,” further emphasizes this transformation. It moves away from medicalized labels and towards empowerment and individuality.
The idea of universal design resonated deeply as well. Creating things everyone can use and enjoy, like the curb cut example, demonstrates how good design benefits a wider range of people than initially intended. It’s not just about accessibility; it’s about smart and inclusive solutions. It’s always important to consider how to get more designers on board with inclusive design and ensure accessibility isn’t an afterthought. This involves asking crucial questions: How can we create a world where everyone feels welcome and valued? How do we ensure diverse needs and aspirations are met, not just accommodated? By merging functionality with individuality and embracing inclusive design principles, we can create a more accessible and empowering world for everyone.
I had the chance to take a class that studies disability within a musical context earlier this semester. One of the ongoing debates is to consider the definition of disability itself. Is disability a medicalized condition, or is it a social construct? Think of it, how many of us can do handwriting with both hands, probably not much. Intriguing isn’t it?
Speaking of hands, when it comes to design, I would like to point out one of the most commonly used appliances: a computer mouse.
Pullin mentioned in the book that an accessible design tends to be made universal, equipped with redundant features that help the majority and those in need. However, this approach to a universal and simpler design might give some drawbacks.
In the picture above, the right mouse is commonly referred as an ambidextrous mouse, which translates to both hands. This type of mouse is designed to fit in everyone’s hands. The mouse on the left, however, can only be used by a right-handed person.
What makes the mouse on the left is its design to be ergonomic. The ambidextrous mouse design, although is used by everyone, tends to nudge the user to ‘claw’ grip the mouse. Prolonged usage of a mouse might cause more harm than good. The ergonomic mouse is designed to prevent this from happening (Logitech). As a designer, it is important to notice these issues and make a decision about whether to provide accessibility for everyone or create a design for specific audiences.
The reading for this week made me think about the intersection between design, disability, and the self-perception of dignity. According to the reading, “the priority for disability has traditionally been to enable, while attracting as little attention as possible” (15). In other words, how can you make something that helps someone’s disability while aiding the person in not feeling uncomfortable due to being different? It is a difficult question, but as I was reading this, I had some thoughts.
It seems that our society values fashion in niches as well as being more open to try new things. For example, glasses went from being an only enabler to a wearable that is commonly found in fashion. Another example would be if we look into desktop mouses, they are devices who are there not to only assist a difficulty, but still make some tasks accessible. As for their design, they are not wearable per se, but were characterized by a simple and practical design, but nowadays, you will see mouses that range from office look to full on artistic; in other words, they are trying to find its niche market.
Regarding dignity, I do believe we should not feel ashamed of admitting that we are different. Those who have a financial incentive to profit from those in need should avoid further stigmatization by not making it super obvious that someone is different. As the book mentions, we have to avoid mediocrity. There are other observations that make me wonder in my mind as to what was an only-enabler, and now it’s a common wearable in our world, but that is an activity that requires careful observation and conscientization; there are a variety of problems that might be invisible to our current knowledge.
Finalized concept:
My finalized concept is still Fruit Ninja XR, but the only change is that I am currently using an accelerometer instead of a flex sensor, The program uses the camera to get the user’s hands x position using the ml5 hand pose model, and then while rotating the Arduino the y axis changes.
The Arduino will be moved in a knife motion and will send the y value of the accelerometer to change the y value of the cutter in the p5 sketch.
The p5 will not send any data to the Arduino. The p5 sketch captures the camera input from the device and detects the user’s hand. Also, the p5 sketch generates fruits and bombs from the bottom of the screen and throws them in a projectile motion. After the user slices through a fruit a line with an angle of slicing appears, the fruit gets sliced into two halves, and then the score increases by one. If the user slices a bomb, the bomb explodes, he loses a life, and the screen goes white for a couple of seconds.
The reading reminds me about the question of whether we should make disability look normal or to make it visually attractive. There are different ways of how equipment for disability can be presented. One of them is making it become a part of fashion. It is similar to the example of eyeglasses. Eyeglasses are a tool for eye problems. However, it has become a fashion tool, an accessory for clothes matching. It seems the first thing they will see is the glasses because they are dangling on our face.
However, in the similar case of the hearing aids, its presence seems to be more and more invisible. Its design has become so small that if we do not look for it, we may miss it. Controversially, the earbuds, which are also used for hearing, are more and more widely used. If something such as the earbuds has become so common, why is there a need to hide away the hearing aids?
Comparing the two different examples, it seems that there are some unknowing gaps between design for everyone and design for disabilities. I think it is because of the actual needs of the majority of the crowd. For example, the glasses can be worn without the wearer actually having any visual problem. On the other hand, hearing aids can only be used for those who need them. There are also differences in accessibility where glasses are widely sold and the hearing aids are produced by specific companies.
Reading “Design Meets Disability” felt like a light bulb turning on in my head. I’d never really thought about disability as something created by society, you know? It made me realize how much design impacts people’s lives, either by opening doors or putting up walls.
The part about universal design really stuck with me. It’s like, why wouldn’t we want to make things that everyone can use and enjoy? It just makes sense! It’s like that curb cut example – it helps so many people, not just those in wheelchairs. It shows how good design can be helpful and just plain smart.
The book also reminded me of the saying, “Nothing About Us Without Us,” which is all about giving disabled people a voice. It made me think about how important it is for designers to actually listen to the people they’re designing for, especially when it comes to accessibility. Their experiences are what matters most, and they can help create designs that truly work for everyone.
This book really got me thinking. How can we get more designers on board with inclusive design? How can we work together to make sure accessibility isn’t just an afterthought? These are big questions, but I think finding answers is super important for creating a world where everyone feels welcome and valued.
The Arduino continuously reads the electrical signal from a potentiometer. This signal represents the potentiometer’s position based on its rotation. The code then scales this raw sensor reading (ranging from 0 to 1023) to a new range of 0 to 400 using a function called map. This scaled value becomes the control signal for the circle’s movement on the web page.
The scaled sensor value (now within the 0-400 range) is sent from the Arduino to the p5js code running in the web browser. When data arrives to p5js, the code assigns it to a variable named circleX. This variable essentially controls the circle’s position on the screen. Finally, the code uses this value to dynamically adjust the horizontal position (X coordinate) of the circle drawn on the p5js canvas.
The p5js code continuously tracks the mouse cursor’s position on the canvas (represented by mouseX and mouseY variables). The p5js code directly assigns the mouseX value to the brightness 1 variable and the mouseY value to the brightness2 variable. These variables essentially store the desired brightness levels for the two LEDs. The readSerial function in p5js combines the brightness1 and brightness2 values with a comma (“,”) separator and adds a newline character (“\n”) to create a formatted message. This formatted message is then sent to the Arduino.
Once the data (representing the formatted message) are available, the code reads them using Serial.parseInt. This separates the combined brightness values stored in brightness1 and brightness2. The map function then scales both brightness values from the p5js range (0-400) to the appropriate range (0-255) for controlling the LEDs. The code includes error handling by checking for a newline character (\n) after reading the brightness values. This ensures complete data reception before setting the LED brightness. If no data is received, the Arduino prints an error message “No signal received” to the serial monitor. Finally, the Arduino sets the brightness of each LED (LED 1 on pin 10 and LED 2 on pin 11) based on the corresponding received values (brightness1 and brightness2).
The p5js code establishes the core mechanics for simulating a bouncing ball on the screen. It defines various physics concepts like: Gravity, Drag, Acceleration and Wind. The code continuously updates the ball’s position and velocity based on the applied forces and drag. When the ball hits the bottom of the canvas, its vertical velocity is reversed, simulating a bounce. At this point, a variable named ledOn is set to 1, indicating the LED should be turned on. If the serial connection is active, the code sends the ledOn value (0 or 1) as a string followed by a newline character (“\n”) to the Arduino using writeSerial.
The readSerial function gets called whenever new data arrives from the Arduino. Here, it parses the received data and assigns it to the windVale variable. This value updates the wind vector, influencing the ball’s horizontal movement in the simulation. The Arduino code continuously reads the analog value from a potentiometer connected to pin A0. It then maps this value (ranging from 0 to 1023) to a new range of -10 to 10 using the map function. This mapped value represents the wind force affecting the ball in the p5js simulation. The Arduino transmits this wind force value to the p5js code. The Arduino constantly checks for incoming data on the serial port. If data is available, it reads the first character and checks its value. If the character is ‘1’, the LED connected to pin 13 is turned on. If the character is ‘0’, the LED is turned off.
Hardware
Computer
Arduino Board
Potentiometer
LED
Connecting Wires
Bread board
Picture:
Video:
Schematics:
Code and other resources: Exercises 1 & 2: https://drive.google.com/drive/folders/1sVlmQsPKM8jgOwRl0b_gx8DIoMTCjYt0?usp=share_link
let xposition = 100;
function setup() {
createCanvas(640, 480);
textSize(18);
}
function draw() {
background(0, 255, 0);
fill(0);
ellipse(xposition, height / 2, 50, 50);
}
function keyPressed() {
if (key == " ") {
// Calls a function to set up the serial connection
setUpSerial();
}
}
// Function to read data from the serial port
function readSerial(data) {
// Check if data received is not null
if (data != null) {
// Maps the integer value of data from range 0-1023 to 0-640 and updates xposition
xposition = map(int(data), 0, 1023, 0, 640);
}
}
Arduino Code:
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
}
void loop() {
int sensor = analogRead(A0);
delay(5);
Serial.println(sensor);
}
Circuit:
For this exercise, we have utilized the potentiometer to change the position of the ellipse in the p5.js sketch. As shown in the code snippet, the ellipse’s x position is mapped to the value of the potentiometer from the Arduino. First of all, by calling the setUpSerial() function when the space bar is pressed, the p5.js sets up the serial connection with the Arduino. Then, using the readSerial(data) the p5.js reads data regarding the potentiometer value from the Arduino.
For the Arduino, we used Serial. begin(9600) to start the serial communication. Inside the loop function, we have Serial.println(sensor) to send the sensor value to the serial port as a line of text (string), ending in a newline character.
Exercise 2:
Video:
P5 sketch:
P5.js code
In the p5 code, the mouseX is used to control the brightness of the LED light. MouseX is mapped from 0 to width of the canvas to 0 to 255. Utilizing the function readSerial(), we send the value of the mapped mouseX to the Arduino using the below line of codes:
function readSerial(data) {
if (data != null) {
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = left + "\n";
writeSerial(sendToArduino);
}
}
Arduino Code
In the Arduino code, after the initial handshake, the code continuously checks for any data that is sent from the Arduino code. It then parses the sending string and uses that string to control the brightness of the LED using analogWrite. The value has been mapped to the range of 255 so there is no need of mapping again in the Arduino code.
int leftLedPin = 3;
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);
// Outputs on these pins
pinMode(leftLedPin, OUTPUT);
// Blink them so we can check the wiring
digitalWrite(leftLedPin, HIGH);
delay(200);
digitalWrite(leftLedPin, 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()) {
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int left = Serial.parseInt();
// int right = Serial.parseInt();
if (Serial.read() == '\n') {
analogWrite(leftLedPin, left);
Serial.println();
}
}
digitalWrite(LED_BUILTIN, LOW);
}
Circuit
Exercise 3
Video:
P5.js Sketch
For the LED to light up every bounce, we assigned a flag “ground”. Every time the ball hits the ground, we set ground = true else it equals to false.
if (position.y > height-mass/2) {
velocity.y *= -0.9; // A little dampening when hitting the bottom
position.y = height-mass/2;
ground = true;
}
else{
ground = false;
}
If ground = true, we will send to Arduino the value of 1, else, we will send 0. We did this because we only use digitalWrite in Arduino which only accepts LOW (0) and HIGH (1) as its value.
For the control of the wind, we used the potentiometer to change the value of the wind. Since there is only one data coming from the Arduino, we didn’t use the trim to parse the function. Instead, we directly map the receiving data to the wind value:
wind.x= map(int(data), 0,1023,-1, 1);
Arduino Code:
int ledPin = 8;
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);
// Outputs on these pins
pinMode(ledPin, OUTPUT);
// Blink them so we can check the wiring
digitalWrite(ledPin, HIGH);
delay(200);
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()) {
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int led = Serial.parseInt();
if (Serial.read() == '\n') {
digitalWrite(ledPin, led);
int sensor = analogRead(A5);
Serial.println(sensor);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
In the Arduino sketch, we initiated serial communication with Serial.begin(9600) within the setup() function to set up data transfer at 9600 bits per second. The ledPin variable is set to 8, corresponding to the pin connected to an LED. We use Serial.available() to check for incoming serial data. Initially, the sketch blinks the LED on pin 8 to verify the correct wiring. When it begins receiving data from the serial port, the built-in LED lights up as a signal of data processing. The received data is then used to control the state or brightness of the LED on pin 8. Additionally, the sketch reads the analog value from pin A5 (connected to a potentiometer) and sends this value back to the p5.js, facilitating a continuous, dynamic interaction between the Arduino hardware and the p5.js.
Circuit:
Reflection:
Initially, we had a bit of a problem understanding how the communication between the p5.js and Arduino works. After spending quite a few investigating the sample code, we identified a few of the differences we had in our code and the sample code that caused our code to not work. We also learnt the mapping of values between the p5.js values and the Arduino values (including both variable resistors and analogWrite ranges).
