For user testing, I asked two of my friends to come in and try interacting with my piece. I have so far managed to bring everything together: 1) construct the box that would come to enclose the Arduino and whose surface would act as a canvas for the sketch to be projected on, 2) make the butterfly body out of printed laminated paper and attach the wings to the servos, 3) secure the butterfly atop the surface, and 4) attach two wires, shaped like butterfly antennas, beneath the wings to convey touch signals to the p5 sketch and activate the animation and the butterfly flutters. I knew that upon seeing the piece, users might not get the intuition to touch the butterfly. They also might shy away from touching it, out of fear of ruining the butterfly’s delicate structure, or assume that some other automatic process would have to trigger the movement of the piece. To counter that, I will be displaying a name next to my piece that indicates, but does not outright reveal, that a touch signal is necessary. I have not yet settled on a name, but have told my two friends that it would be called “catch a butterfly” or “pet a butterfly” and they immediately figured out that they had to use their hands in some way. I placed the antennas facing them so that they were more likely to come into contact with them and I was glad that they did end up placing their touch close enough to the wires for the signal to be captured.
They both loved seeing the butterfly in action, but gave the following feedback, which was mainly focused on the sketch itself:
add different colors to the butterflies in the sketch
experiment with different movement paths for the projected butterflies (inward movement from outside the sketch bounds or having multiple center points for their emergence, for example) or smoothen/slow down their movement.
I expected the feedback I got from them, as I have been planning to implement those two features after I had the basic version of the project implemented. I will be working on that over the next couple of days, as well as decorating the surface some more (adding flowers to cover the base of the servos and on different parts of the surface).
The project is well on its way, and I have some updates for all of you!
First of all, let’s start with the good things, and that is that the boat structure has been successfully 3d printed and is waterproof. Yaay. The arduino as well as all the batteries and breadboard fit comfortably on the structure so the sizing was correct (for the most part).
There is a few things I need to tackle which I realized during the user testing. Firstly, the fan that I have is not strong enough to move the boat, I will need to find, or make a bigger and better one. The boats construction also needs some styrofoam on the bottom since the boat is too heavy to float, as seen in the video below.
Over the next two days I want to solve the problem with the floating and the movement on the boat so I can leave the controls for the last day.
As I was conducting user testing for my game, an actual storm was hitting Abu Dhabi, echoing the storm scenario in my game and making the experience feel all the more relatable.
I enlisted my sister to test the game without any prior instructions, which was a great decision as the game proved to be intuitive—she knew immediately that she needed to press the button. However, since I haven’t yet built the controller box, I had to hold it for her. For the wooden block, I explained that she should imagine it as a car moving on the screen.
To my surprise, she played better than I did! It was really enjoyable to watch my game perform exactly as intended. She managed to figure everything out smoothly; the only hiccup was the wooden block. If it had actually looked like a car, I wouldn’t have needed to explain anything. I also handled connecting to the serial port since she wasn’t familiar with it. For the actual exhibition, I’ll provide short written instructions for the connection to assist anyone if I’m not around.
Area for improvement:
The game runs smoothly overall, but the collision detection between the hail and the car is glitchy. Sometimes it triggers a game over even when it shouldn’t, which is quite frustrating. I plan to resolve this issue before the exhibition for sure.
So till now I incorporated one rose out of 4/5 I’m planning to show. It’s working fine with one so I’m hoping it’d be able to detect all of the roses lighting up and flowers blooming along with it. I’m also hoping to incorporate sound with each rose and have all the samples ready – just have to put it in the code (hope that’d be easy).
“Design Meets Disability” delves into a provocative reevaluation of how design interacts with disability, challenging the traditional ethos that design for disability should aim for invisibility and discretion. This text argues that such designs, exemplified by the Eameses’ leg splints and contemporary medical devices, need not shy away from aesthetics in pursuit of functionality. Instead, it suggests that these designs can embrace both, much like eyeglasses have evolved from mere medical necessity to fashion statements.
The core thesis of the book seems to be a call to shift perceptions—away from designing disability aids that blend in, towards creating products that stand out, empowering users and making a statement. This reflects a broader cultural shift in how disability and aids are perceived, a move from viewing them as merely corrective devices to seeing them as integral parts of one’s identity that can express personal style.
The examples of Hearwear and the work of designers like Sam Hecht and Ross Lovegrove underscore the potential for medical devices to be both functional and fashionable. The discussion extends to prosthetics, where figures like Aimee Mullins have not only redefined performance through innovative designs but have also challenged the very aesthetics of disability. Mullins, by using prosthetics that are visually striking, shifts the narrative from loss to empowerment.
The text critically engages with the notion of universal design and its practical applications. It reflects on the complexity inherent in designing products that are universally accessible yet simple and intuitive to use, a challenge that echoes through the design community.
“Design Meets Disability” advocates for a design philosophy that respects both function and fashion, which can transform products for disability into symbols of identity and empowerment. This approach doesn’t just serve the disabled community but enriches our cultural fabric, advocating for inclusivity and diversity in design practices. This reading fosters a deeper appreciation for the intersections between design, technology, and social values, urging us to reconsider our approach to disability not as a deficit to be concealed but as an aspect of human diversity to be celebrated.
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
Make something that controls the LED brightness from p5
For these two exercises, we made it so that the potentiometer that is connected to the Arduino controls the LED on the breadboard and the ellipse in the p5 sketch in the middle of the screen, and also when the keyboard keys are pressed up or down it would change the brightness of that LED light.
P5.js Code:
let LEDbrightness = 0;
function setup()
{
createCanvas(400, 400);
}
function textDisplay() //display text in the starting
{
text("PRESS SPACE TO START SERIAL PORT", width/2 - 109, height/2 - 5);
}
function draw()
{
background(255);
if (serialActive) //if serial is active
{
text("CONNECTED", width/2 - 27, height/2 - 5);
text("PRESS UP/DOWN ARROW KEYS TO CHANGE BRIGHTNESS!", width/2 -180, height/2 + 15);
}
else
{
textDisplay();
}
}
function keyPressed() //built in function
{
if (key == " ") //if space is pressed then
{
setUpSerial(); //setup the serial
}
else if (keyCode == DOWN_ARROW)
{
if (LEDbrightness != 0)
{
LEDbrightness = LEDbrightness - 20;
}
}
else if (keyCode == UP_ARROW)
{
if (LEDbrightness != 250)
{
LEDbrightness = LEDbrightness + 20;
}
}
}
//callback function
function readSerial(data)
{
let sendToArduino = LEDbrightness + "\n"; //add the next line to dimness counter
writeSerial(sendToArduino); //write serial and send to arduino
}
Arduino Code:
const int LED_PIN = 5;
int brightness = 0;
void setup()
{
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
while (Serial.available() <= 0)
{
Serial.println("CONNECTION STARTED");
}
}
void loop()
{
while (Serial.available())
{
brightness = Serial.parseInt();
Serial.println(brightness);
if (Serial.read() == '\n')
{
analogWrite(LED_PIN, brightness);
}
}
}
Video and Photos for Exercise 1:
For exercise 1, since we were just getting started, the main problem was understanding how serial communication works. We had some kind of idea when it was being presented to us, but until we started working, we didn’t really know. Other than that, there weren’t really any specific challenges. We didn’t need to use the trim() method, we had one value coming in from the Arduino, which was the potentiometer, and we had some troubles at first, but once we casted it as an integer value (it’s received as a string), then mapped it to the width and made the mapped value the x-position of the ellipse the project was done.
You’ll notice in the image that there’s an LED. The LED was there to test whether or not there was power being outputted from the potentiometer. We added it while we were debugging.
Video and Photos for Exercise 2:
Like the previous exercise there was only one value that was being communicated between the arduino and the p5js code so it was fairly simple. The hard part was just getting it such that tapping it reduced the brightness value by a specific amount and increasing it by a certain amount.
3. 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
For this exercise, the code creation uses p5, where physics principles like gravity and wind influence the ellipse’s motion. The sketch also communicates with the Arduino, which can control an LED based on the object’s motion, specifically if it bounces.
P5.js Code:
let dragForce = 0.99;
let mass = 20;
let ledState = 0;
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let force;
let bounced = false;
function setup() {
createCanvas(640, 480);
textSize(18);
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.3 * mass);
wind = createVector(0, 0);
}
function draw() {
background(0,40);
// background(0);
// background(255);
if (!serialActive) {
fill(255);
text("Press Space Bar to select Serial Port", 20, 30);
} else {
noStroke();
force = p5.Vector.div(wind, mass);
acceleration.add(force);
force = 0;
force = p5.Vector.div(gravity, mass);
acceleration.add(force);
force = 0;
velocity.add(acceleration);
velocity.mult(dragForce);
position.add(velocity);
acceleration.mult(0);
ellipse(position.x, position.y, mass, mass);
if (position.y > (height - mass / 2)-30 ) {
velocity.y *= -0.9;
position.y = (height - mass / 2)-30;
ledState= 1;
if (!bounced) {
fill(255, 0, 0); // Red when just bounced
bounced = true; // Update bounce state
} else {
fill(255); // White otherwise
bounced = false; // Reset bounce state
}
} else {
ledState = 0;
}
}
rect(0,height-30,width,30);
}
function keyPressed() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 1) {
let windCurrent = int(fromArduino[0]);
wind.x = map(windCurrent, 0, 1023, -1, 1);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = ledState + "\n";
writeSerial(sendToArduino);
}
}
Arduino code:
int ledPin = 5;
int potPin = A0;
void setup() {
Serial.begin(9600);
pinMode(LED_BUILTIN, OUTPUT);
// Outputs on these pins
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()) {
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int right = Serial.parseInt();
if (Serial.read() == '\n') {
digitalWrite(ledPin, right);
int potValue = analogRead(potPin);
delay(5);
Serial.println(potValue);
}
}
}
Video and Photos for Exercise 3:
Understandably, this was the hardest of the 3. We first manipulated the code given to us (which had the wind and ball code). We changed the wind global variable in much the same way as the first exercise: The potentiometer value was mapped to the wind variable. The hard part was the bouncing. There was a point during the exercise where we felt we had written everything correctly, and after going through the code together, we couldn’t see what was wrong. We made a variable called bounced and had it such that inside of the if statement, which would be called upon when the ball was supposed to bounce, the variable would be the opposite of what it was previously (if true then false, if its false then true). We then realized we were initializing the bounced variable inside of the draw function. We made it a global variable, and then it worked.
This week’s reading, “Design Meets Disability,” examines the relationship between design and disability, challenging the traditional view that disability aids should be discreet and practically invisible. The book argues for a new approach that balances functionality with aesthetic appeal, similar to how glasses have evolved from a medical necessity to a fashion statement. It emphasizes that disability aids should not only serve practical purposes but also make positive aesthetic statements.
The text highlights examples like the Eameses’ leg splints, initially designed for functionality but now celebrated for their innovative design. This shows the potential for disability design to extend beyond basic functionality and influence broader design disciplines.
The book critiques cultural and social norms that favor invisibility in disability aids and advocates for designs that are empowering and expressive. It explores how products like glasses have successfully become both functional and fashionable, suggesting a similar potential for other disability aids.
To conclude, “Design Meets Disability” calls for a reevaluation of design principles in the context of disability. It argues for designs that are not only functional but also aspirational and culturally relevant, aiming to reflect the diversity of users and contribute to a more inclusive society where design enhances individual identity and expression.
Designs, designs, designs. Throughout our whole life everything we see was designed and adapted for us (humans) to be used in the most practical and (sometimes) efficient way. The thing is that, all of these things more often than note don’t take into account people with disabilities.
One of the problems for that, as mentioned in the reading, is that people with disabilities cannot be exactly grouped the same as an “average human”. What I mean by that is the design process for items used by people with disabilities needs to be more tailored individually, because these people, even though they might be diagnosed with the same type of disability, very often have different ways of experiencing the world and “fighting” through the disability.
On the bright side, recently, I have seen more applications and Programs/ Games which seamlessly incorporate designs which take these people into account. One example is the game Fortnite. Fortnite has a special menu in the Video Settings where you can change the colors based on the Persons Type and Level of daltonism. This changes all the colors on the screen and allows for the player to have a normal playing experience. Another feature this game has is the Sound circle, which is a circle which appears around the character displaying where sounds come from, so this takes people with hearing disabilities into account.
It has also been a pleasure to be a witness of an IM Project last semester from one of my friends. He made a small machine which would let users hear a word and then learn the Braille alphabet. I thought this was a very nice design, with small pads that mimic the little dots from the Alphabet.
I feel like in the future we need to contribute to the community even more by adding more designs which would further improve the life of people with disabilities. The change starts from US!
let rVal = 0;
let alpha = 255;
let left = 0; // True (1) if mouse is being clicked on left side of screen
let right = 0; // True (1) if mouse is being clicked on right side of screen
function setup() {
createCanvas(640, 480);
textSize(18);
}
function draw() {
// one value from Arduino controls the background's red color
background(255)
// the other value controls the text's transparency value
fill(255, 0,0)
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
// Print the current values
text('rVal = ' + str(rVal), 20, 50);
text('alpha = ' + str(alpha), 20, 70);
}
// click on one side of the screen, one LED will light up
// click on the other side, the other LED will light up
if (mouseIsPressed) {
if (mouseX > rVal-50 && mouseX < rVal+50 && mouseY > height/2-50 && mouseY < height/2+50) {
right = 1;
}
} else {
right = 0;
}
ellipse(rVal, height/2, 50,50)
}
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) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 2) {
// only store values here
// do everything with those values in the main draw loop
// We take the string we get from Arduino and explicitly
// convert it to a number by using int()
// e.g. "103" becomes 103
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = left + "," + right + "\n";
writeSerial(sendToArduino);
}
}
We did not face any big issue in this part. We just added the ellipse and changed its position to rVal, height/2.
Video:
Exercise 2:
P5 code:
let rVal = 0;
let alpha = 255;
let left = 0; // True (1) if mouse is being clicked on left side of screen
let right = 0; // True (1) if mouse is being clicked on right side of screen
function setup() {
createCanvas(640, 480);
textSize(18);
}
function draw() {
// one value from Arduino controls the background's red color
background(map(rVal, 0, 1023, 0, 255), 255, 200);
// the other value controls the text's transparency value
fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
// Print the current values
text('rVal = ' + str(rVal), 20, 50);
text('alpha = ' + str(alpha), 20, 70);
}
function keyPressed() //built in function
{
if (key == " ") //if space is pressed then
{
setUpSerial(); //setup the serial.
}
else if (keyCode == DOWN_ARROW)
{
if (right != 0)
{
right = right - 20;
}
}
else if (keyCode == UP_ARROW)
{
if (right != 250)
{
right = right + 20;
}
}
}
}
// 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) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 2) {
// only store values here
// do everything with those values in the main draw loop
// We take the string we get from Arduino and explicitly
// convert it to a number by using int()
// e.g. "103" becomes 103
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = left + "," + right + "\n";
writeSerial(sendToArduino);
}
}
Arduino code for Exercise 1 and 2:
int leftLedPin = 2;
int rightLedPin = 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);
// Outputs on these pins
pinMode(leftLedPin, OUTPUT);
pinMode(rightLedPin, OUTPUT);
// Blink them so we can check the wiring
digitalWrite(leftLedPin, HIGH);
digitalWrite(rightLedPin, HIGH);
delay(200);
digitalWrite(leftLedPin, LOW);
digitalWrite(rightLedPin, 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') {
digitalWrite(leftLedPin, left);
digitalWrite(rightLedPin, right);
int sensor = analogRead(A0);
delay(5);
int sensor2 = analogRead(A1);
delay(5);
Serial.print(sensor);
Serial.print(',');
Serial.println(sensor2);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
Challenges:
We tried to get the light to decrease its brightness every time the person would click on the left side of the screen and for the brightness to increase whenever the person clicks on the right side of the screen. The code was correct, but for some reason it was not working. So, it might be something with the bulb or the Arduino itself. However, the light does take around 4 clicks on both sides of the screen to turn off or on so, we would consider that a success.
Video:
Exercise 3:
P5 code:
let dragForce = 0.99;
let mass = 20;
let ledState = 0;
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let force;
let bounced = false;
function setup() {
createCanvas(640, 480);
textSize(18);
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.3 * mass);
wind = createVector(0, 0);
}
function draw() {
background(255);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
noStroke();
force = p5.Vector.div(wind, mass);
acceleration.add(force);
force = 0;
force = p5.Vector.div(gravity, mass);
acceleration.add(force);
force = 0;
velocity.add(acceleration);
velocity.mult(dragForce);
position.add(velocity);
acceleration.mult(0);
ellipse(position.x, position.y, mass, mass);
if (position.y > (height - mass / 2)-30 ) {
velocity.y *= -0.9;
position.y = (height - mass / 2)-30;
ledState= 1;
if (!bounced) {
fill('blue'); // Red when just bounced
bounced = true; // Update bounce state
} else {
fill('red'); // White otherwise
bounced = false; // Reset bounce state
}
} else {
ledState = 0;
}
}
rect(0,height-30,width,30);
}
function keyPressed() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 1) {
let windCurrent = int(fromArduino[0]);
wind.x = map(windCurrent, 0, 1023, -1, 1);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = ledState + "\n";
writeSerial(sendToArduino);
}
}
Arduino code:
int ledPin = 10;
int potPin = A0;
void setup() {
Serial.begin(9600);
pinMode(LED_BUILTIN, OUTPUT);
// Outputs on these pins
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()) {
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int right = Serial.parseInt();
if (Serial.read() == '\n') {
digitalWrite(ledPin, right);
int potValue = analogRead(potPin);
delay(5);
Serial.println(potValue);
}
}
}
Challenges:
Everything went smoothly when writing the code. However, when we would click the play button to see the sketch, it would give us the error: “setUpArduino is not defined”. So, we spent countless minutes searching for something that was not there. After looking at the professors week 12 example on serial connection, we realized that we have forgotten the tab that would connect P5 to Arduino. So we just added that and it worked.
For my final project, I am building on my midterm project, which involves a game where players dodge falling hail. Initially, I had envisioned this game with a car maneuvering to avoid the hail, but the concept became too complex. Through trial and error, I simplified the gameplay to where players now use the mouse click to move the car away from the hail. This feature unexpectedly also allows control over another sprite, adding a unique twist to the gameplay. Taking this project to the next level, I plan to integrate an arcade button to start and re-start the game and a toy car that players can manipulate/move to control the game car on the screen through a sensor. Differing from the midterm which was consistently playing, my game has an end after a couple seconds of playing where the player would have won and arrived home safely from the storm, and this would enhance the interactive experience and depth of the game.
Description of what your Arduino program will do with each input and output and what it will send to and/or receive from P5:
Inputs:
HC-SR04 Ultrasonic Sensor: This sensor will measure the distance of an object from it. It uses two pins, TRIG and ECHO, to send out ultrasonic waves and measure the time it takes for the echo to return.
Arcade Button: The button will act as a simple digital input, where pressing the button changes its state from LOW to HIGH.
Outputs:
Serial Data to P5: The Arduino program will continuously send two pieces of data to the P5 sketch via the serial port:
Distance measured by the ultrasonic sensor, translated into a value that indicates the position of the car on the screen, hopefully when the toy car is moved left (close to the sensor it will move the car on screen left) and vise versa.
The state of the arcade button to control game states (start and restart).
Description of what P5 program will do and what it will send to and/or receive from Arduino:
As of my game, I don’t think P5 is going to send anything to Arduino other than: Serial Data from Arduino: The P5 sketch receives the distance and button state as a serialized string. Game Controls: Based on the received data, the P5 sketch adjusts the position of the car on the screen and manages the game state (starting and restarting).
