I found “Designer Meets Disability” to be really meaningful. Not only was it a thought-provoking read, but it also made me consider my own design methods and prejudices. I was forced to reconsider what good design actually entails after reading this book, particularly in light of accessibility.
I remember a project I worked on where I had to use p5.js to create an interactive experience. At first, all I concentrated on was making things look good and work well enough for the average user. But reading this book made me see how important it is to take into account the people who might interact with my work in a different way. This realisation completely changed the way I approached design.
Especially inspirational was the notion that disability may spur innovation rather than hinder it. It has forced me to take a more expansive view, realising that include accessibility from the outset benefits everyone by enhancing both the design process and the final product, rather than just being about ethics or compliance.
I’m more dedicated than ever to making sure that my designs are not just aesthetically pleasing and useful, but also widely accessible as I work on my interactive media projects. Regardless of a person’s ability, I aim to create experiences that they can all enjoy and profit from.
The reading from “Design Meets Disability” suggests a profound paradigm shift in the approach to design, particularly for products meant to be accessible for all, including those with disabilities. This shift moves away from a focus on mere functionality and discretion toward a more holistic view that embraces aesthetic appeal, personal identity, and cultural relevance.
The text draws attention to the meticulous process behind achieving the apparent simplicity of designs like the iPod, which balances minimalism with functionality and accessibility. It emphasizes the idea that while simplicity in design is often celebrated, the complexity involved in achieving it is substantial and not necessarily apparent to the end-user.
Further discussed is the idea of “spimes,” a term coined by Bruce Sterling to describe objects that are more than their physical form; they are information-rich, context-aware, and sustainable. This represents a vision of the future where products are integrated into our lives in a way that is both meaningful and mindful of the larger ecological and informational ecosystems they inhabit.
Moreover, the reading posits that designs should not be solely driven by the technological capability or the imperative of universality but should consider the nuanced needs and preferences of individual users, which includes emotional and psychological responses. It illustrates that designing for disability isn’t just about providing a function; it’s about creating an experience and empowering the user.
the challenge presented to designers: to forge a path that neither patronizes nor alienates but instead enriches the user’s life. It calls for a commitment to design that is not only inclusive in its utility but also in its beauty and its ability to resonate with users on a personal level. The aim is to push the envelope of what is possible, creating products that are not just usable by everyone but also desirable by everyone, thus fostering a more inclusive and empathetic society.
I initially gave the idea to professor to make this reading optional since we have a lot on our plate with the final being due, but since its extra credit, it automatically became crucial for me to complete 🙂
So while reading “Design Meets Disability” by Graham Pullin, it has profoundly shifted my view on the design of assistive devices. Pullin advocates for merging functionality with aesthetic appeal, an approach that resonates deeply with current trends in consumer technology. For example, the transformation of eyeglasses from functional items to fashion statements illustrates the potential for assistive devices to follow a similar trajectory.
However, the reality in the market shows a lag in adopting this inclusive design philosophy. Many devices, especially those for less visible disabilities, remain primarily functional, highlighting a gap between Pullin’s ideal and the industry’s current practices. This discrepancy might be due to cost constraints and a lack of awareness among designers about how to integrate aesthetics without compromising functionality.
Reflecting on this, I am more aware of the biases that might exist in the design community and society’s perception of disability. Pullin’s optimism is inspiring, yet it also brings to light the practical challenges of such a vision. It raises crucial questions about balancing cost and style and how the industry can be motivated to embrace this more holistic approach to design.
Reflecting on “Design Meets Disability,” the book pushes the boundaries of traditional views on assistive device design by advocating for a blend of functionality and aesthetic appeal. This approach resonates strongly with the current trends in consumer technology, where design and personal expression play pivotal roles. For instance, eyewear, originally a purely functional item for vision correction, has evolved into a fashion statement, highlighting the argument that assistive devices can similarly be fashion-forward and not just functional. However, while Pullin champions a more inclusive design philosophy, evidence from the current market for assistive devices shows a lag in the widespread adoption of this philosophy. Many products, particularly for less visible disabilities, remain starkly functional, suggesting a discrepancy between Pullin’s ideal and the industry’s execution. This gap may stem from various factors, including cost constraints and limited awareness among designers about the possibilities for aesthetic integration without compromising functionality.
The reading subtly nudges one to consider potential biases in how society and designers view disability and assistive technologies. Pullin seems optimistic about the convergence of design and disability, which might seem biased to those who see significant structural and societal barriers still in place. This optimism does not fully address the economic and practical challenges of redesigning assistive devices as fashionable items, which could be perceived as an oversight or a bias towards a more idealistic outlook. The reading has shifted my perspective, making me more aware of the need for a holistic approach to design—one that considers both function and form. It raises questions about the feasibility of such integration: How can designers balance the cost implications with the desire for style? How can the industry be incentivized to adopt this approach? These questions underline the complexities of implementing Pullin’s vision in real-world settings, suggesting the need for a broader dialogue among designers, manufacturers, and users within the disability community.
In “Design Meets Disability,” Graham Pullin talks about how functionality meets aesthetics in the realm of assistive technologies. It was interesting how Pullin challenges the traditional views that often limit the design of assistive devices to practical purposes.
The call for a “design revolution” in the disability sector was very intriguing as Pullin illustrates this with the transformation of eyeglasses from simple visual aids to fashion accessories, showing us how societal perceptions and user demands can dramatically shift design priorities. This transformation, he argues, should serve as a blueprint for other assistive devices.
Pullin delves into the social implications of design choices, suggesting that the aesthetic neglect often found in the design of disability aids can reinforce feelings of stigmatization. By integrating design principles from mainstream fashion and technology, he suggests that these devices can instead promote a sense of pride and personal identity.
What I liked most was how realistic Pullin is about the challenges, he acknowledges the complexities of designing for such a diverse range of needs and the potential higher costs associated with the design concepts.Â
Finalized Concept for the Project:
The final project involves developing a gyroscope-based controller using an Arduino that interfaces with p5.js to enhance the gaming experience in a space simulation game. This setup aims to provide a more intuitive and immersive way for players to control a spaceship using natural hand movements.
Design and Description of the Arduino Program
Hardware Setup:
Input: 3-axis gyroscope sensor integrated into an Arduino board. This sensor detects the controller’s orientation and motion.
Output: Serial signals sent to a computer running the p5.js application.
Functionality:
The Arduino program continuously reads data from the gyroscope sensor, including angular velocity and orientation relative to its starting position.
The program processes these data to determine the intended motion or command (e.g., turn left, accelerate).
These interpreted commands are then sent as serial data to the p5.js application, formatted as simple strings or numerical values.
Interaction with p5.js:
Sending: Commands such as “turn_left”, “turn_right”, “accelerate”, and “stop” based on gyroscope readings.
Receiving: The Arduino may receive feedback from the p5.js application for settings adjustments based on user preferences or gameplay state.
Design and Description of the p5.js Program
Software Setup:
Runs on a computer and serves as the interface between the Arduino controller and the space simulation game.
Functionality:
The p5.js application listens for serial communication from the Arduino, parsing the incoming data into actionable game commands. It translates these commands into manipulations of the game environment, such as rotating the spaceship or changing speed, ensuring real-time responsiveness to the player’s movements.
Interaction with Arduino:
Receiving: Commands like rotations and accelerations are received from the Arduino.
Sending: p5.js can send calibration data back to Arduino, error messages if commands are unrecognized, or game state information that might influence how sensor data is processed.
Conclusion
This project’s core is the integration of Arduino with a gyroscope sensor and the p5.js application. Arduino captures and interprets the controller’s physical movements, turning them into digital commands, while p5.js translates these into meaningful game interactions. This system is designed to elevate the player’s gaming experience, making it more engaging by simulating the piloting of a spaceship with realistic controls.
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 was probably the easiest exercise, we just had to edit the code that was in the Week 12 Lecture Notes.
P5.js Code:
let potentiometer = 0;
function setup() {
createCanvas(640, 480);
textSize(18);
}
function draw() {
background(255);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
text('Potentiometer = ' + potentiometer, 20, 70);
}
let ellipseX = map(potentiometer, 0, 1023, 0, width);
fill(0);
ellipse(ellipseX, height / 2, 50, 50);
function keyPressed() {
if (key === ' ') {
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
let trimmedData = trim(data);
if (!isNaN(trimmedData)) {
potentiometer = int(trimmedData);
}
}
}
Arduino Code:Â
void setup() {
 Serial.begin(9600);
 pinMode(LED_BUILTIN, OUTPUT);
 digitalWrite(LED_BUILTIN, HIGH);
 delay(200);
 digitalWrite(LED_BUILTIN, LOW);
}
void loop() {
 int sensorValue = analogRead(A1);
 Serial.println(sensorValue);
 delay(10);
}
According to the other exercises, we tried multiple times with the code, and tried manipulating it to fit the requirments but we kept getting errors
After multiple trials we gave up and decided to dedicate all our time for our final project, however here is the code that was in progress with multiple errors:
the P5 code was the one giving us errors:
let serial;
let rVal = 0;
let alpha = 255;
let left = 0;
let right = 0;
let slider;
function setup() {
createCanvas(640, 480);
textSize(18);
function setup() {
console.log('Setting up...');
serial = new p5.SerialPort();
serial.on('data', readSerial);
serial.on('open', onSerialOpen);
serial.on('error', onSerialError);
serial.open('COM3'); // Update this to your port
}
slider = createSlider(0, 255, 127);
slider.position(10, 10);
slider.style('width', '380px');
// Initialize the serial port
serial = new p5.SerialPort();
serial.open('COM3'); // change this to your Arduino port
serial.on('data', readSerial); // function to call when new data arrives
serial.on('open', onSerialOpen); // function to call when the serial port opens
serial.on('error', onSerialError); // function to call on error
}
function draw() {
background(map(rVal, 0, 1023, 0, 255), 255, 255);
fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));
if (!serial.isOpen()) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
text('rVal = ' + str(rVal), 20, 50);
text('alpha = ' + str(alpha), 20, 70);
if (slider.value() > 127) {
left = 1;
right = 0;
} else {
left = 0;
right = 1;
}
let sendToArduino = left + "," + right + "\n";
serial.write(sendToArduino);
}
}
function keyPressed() {
if (key === ' ') {
serial.open('/dev/tty.usbmodem1411'); // open a serial port
}
}
function readSerial() {
let data = serial.readLine(); // read the incoming string
trim(data); // trim off trailing whitespace
if (!data) return;
let fromArduino = split(data, ',');
if (fromArduino.length >= 2) {
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
}
function onSerialOpen() {
console.log('Serial Port Opened');
}
function onSerialError(err) {
console.log('Serial Port Error: ' + err);
}
1. 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
For this project, I used a potentiometer connected to the Arduino to send its readings to a p5.js sketch via serial communication. The position of the ellipse on the screen will correspond to the potentiometer’s position.
Arduino Code:
#include <Arduino.h>
void setup() {
Serial.begin(9600);
}
void loop() {
int sensorValue = analogRead(A0); // Read the potentiometer
Serial.println(sensorValue); // Send the value to the serial port
delay(50); // Delay for stability
}
p5.js Code:
let serial;
let latestData = 0;
function setup() {
createCanvas(640, 360);
serial = new p5.SerialPort();
serial.on('data', gotData);
serial.open('/dev/tty.usbmodem11101');
}
function draw() {
background(255);
let sensorValue = map(latestData, 0, 1023, 0, width);
ellipse(sensorValue, height / 2, 50, 50);
}
function gotData() {
let currentString = serial.readLine();
trim(currentString);
if (!currentString) return;
latestData = parseInt(currentString);
}
2. Make something that controls the LED brightness from p5
To control an LED’s brightness from p5.js sketch, this setup will use a graphical slider in the p5.js sketch to send brightness values to the Arduino, which in turn will adjust the brightness of the LED accordingly.
Arduino Code:
#include
const int ledPin = 9;
void setup() {
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
if (Serial.available()) {
int brightness = Serial.parseInt();
if (Serial.read() == '\n') {
analogWrite(ledPin, brightness);
}
}
}
p5.js Code:
let serial;
let slider;
function setup() {
createCanvas(400, 300);
serial = new p5.SerialPort();
serial.on('open', onSerialOpen);
serial.on('error', onSerialError);
serial.open('/dev/tty.usbmodem11101');
//Create a slider from 0 to 255 (LED brightness range)
slider = createSlider(0, 255, 127);
slider.position(10, 10);
slider.style('width', '380px');
}
function draw() {
background(102);
let val = slider.value();
serial.write(val + '\n');
fill(255);
noStroke();
text("LED Brightness: " + val, 10, 50);
}
function onSerialOpen() {
console.log('Serial Port is open');
}
function onSerialError(err) {
console.log('Something went wrong with the serial port. ' + err);
}
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, the wind force is controlled by a potentiometer connected to the Arduino, allowing the user to influence the ball’s horizontal movement by adjusting the potentiometer. And every time the ball bounces off the bottom of the canvas, an LED connected to the Arduino lights up briefly as a visual indicator of the bounce.
Arduino Code:
#include
const int ledPin = 13;
const int potPin = A0;
void setup() {
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
int potValue = analogRead(potPin);
Serial.println(potValue);
if (Serial.available()) {
char command = Serial.read();
if (command == '1') {
digitalWrite(ledPin, HIGH);
delay(100);
digitalWrite(ledPin, LOW);
}
}
delay(10);
}
p5.js Code:
let serial;
let position, velocity, acceleration, gravity;
let wind = 0;
let drag = 0.99;
let mass = 50;
function setup() {
createCanvas(640, 360);
serial = new p5.SerialPort();
serial.on('data', serialEvent);
serial.open('/dev/tty.usbmodem11101');
position = createVector(width / 2, 50);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.1 * mass);
}
function draw() {
background(220);
applyForce(createVector(wind, 0));
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;
position.y = height - mass / 2;
serial.write('1\n');
} else {
serial.write('0\n');
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
function serialEvent() {
let data = serial.readStringUntil('\n').trim();
if (data !== '') {
let analogVal = int(data); // Convert the received string to an integer
wind = map(analogVal, 0, 1023, -5, 5); // Map the value to a suitable range for wind
}
}
Challenges:
As I had to do this solo while other people did in groups, I had some disadvantages of course – by not having another perspective of “why’s this not working”.
The first one was rather easy, thought I’m not sure if we’re supposed to show the values on the serial monitor in the video. The second one was quite tricky for me at first – I had taken a different approach where the brightness of the LED was supposed to increase while I move the cursor horizontally on screen from left to right with a ball on screen which when white the LED would turn off and when getting filled with darker shades the brightness of the LED will also increase. But that wasn’t working well as the LED would turn on and off randomly so I took the slider approach instead which was better and clearer to see.
For the third one, as it took input from p5 to show output to Arduino and vice versa – it took a bit of understanding to implement it. First I did one where the ball bounces vertically and the LED will turn on and off with every bounce – as instructed. And you could push the ball to either left or right using the potentiometer. But the one I submitted I found it better – it can bounce towards left or right depending on which side you turn the potentiometer – even if it starts at one side you can change the way while it’s bouncing and the LED also works fine. Overall, it was a great experience doing it by myself to learn better about serial communication.
