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.
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.
“It’s not a weapon, it’s more of a highly advanced prosthesis.” ― Tony Stark (when the court asks if his Iron Man suit is a weapon)
Reflecting upon Graham Pullin’s Design Meets Disability, I find myself musing about this quote from Tony Stark in Iron Man. The suit, while seemingly a robust piece of technology, parallels a fashionable prosthesis, both functional and aesthetically pleasing with its intricate yet discreet components. Indeed, his suit is a prosthesis. This amusing interpretation not only highlights the suit’s dual nature but also aligns with broader design principles.
Transitioning from the fictional world of Iron Man to the real-world impact of design, Charles Eames’s perspective that “design depends largely on constraints” resonates deeply with me. This principle is vividly illustrated in the creation of the Eames leg splint during wartime—a necessity that spurred innovation. The splint was not only functional but also aesthetically pleasing, subsequently influencing mainstream furniture design. This example beautifully encapsulates the dance between limitation and innovation, challenging the preconceived notion that design for disability must forsake beauty for functionality.
The juxtaposition of fashion and discretion in disability design is equally eye-opening. The evolution of eyewear from a stigmatized medical appliance to a fashion accessory exemplifies a significant shift in societal perception. However, the underlying desire for discreet devices reveals a lingering societal discomfort with visible signs of disability. Graham Pullin’s insights provoke a reevaluation of this narrative, advocating for a shift from concealing disabilities to celebrating and empowering individuals.
Pullin’s text not only expands my understanding of functional design but also reaffirms the importance of aesthetics in user-centered design. Whether it pertains to physical objects like a leg splint or digital solutions like software interfaces, the essential principle remains the same: effective design must resonate with users on both functional and aesthetic levels, thereby enhancing their interaction and experience.
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 exercise, we used a potentiometer as our analog sensor. The Arduino program sends the reading from the sensor over to p5, where it is mapped to the range [ellipseWidth/2, canvasWidth-ellipseWidth/2]. The mapped value is then used to determine the x position of the center of the ellipse. Since nothing on Arduino is controlled by p5, p5 sends dummy data that is ignored by p5 to maintain the two-way handshake.
// ===== P5 =========
let diameter = 60;
let sensorVal; // read from p5 transmitted message
function setup() {
createCanvas(640, 480);
sensorVal = 1023/2;
}
function draw() {
background(220);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
fill(0);
ellipse(map(sensorVal, 0, 1023, diameter/2, width-diameter/2), height/2, diameter, diameter)
}
// === ARDUINO ====
void loop() {
// wait for data from p5 before doing something
while(Serial.available()){
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int _ = Serial.parseInt(); // get dummy variable sent over by p5
if(Serial.read() == '\n'){
delay(5);
int sensor = analogRead(A1); // read sensor value
delay(5);
Serial.println(sensor); // send sensor value
}
}
digitalWrite(LED_BUILTIN, LOW);
}
2. Make something that controls the LED brightness from p5
For this exercise, we created a slider that controls the brightness of the LED. The range of the slider matches that of the LED analog value ranges, from 0 to 255. Hence, we only had to send that value over to the Arduino. Once received, the Arduino program writes that value to the LED PWM pin in an analog fashion. For visualization, our p5 sketch draws a circle whose diameter is proportional to the LED brightness.
// ===== p5 ======
let slider;
function setup() {
createCanvas(640, 480);
sensorVal = 1023/2;
slider = createSlider(0, 255, 0);
}
function draw() {
background(0);
fill(0,0,255);
noStroke();
let diameter = map(slider.value(), 0, 255, 0, height);
ellipse(width/2, height/2, diameter, diameter);
fill(255);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
}
function keyPressed() {
if (key == " ") {
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
let sendToArduino = slider.value() + '\n';
print(sendToArduino)
writeSerial(sendToArduino);
}
}
// ===== ARDUINO =====
void loop() {
// analogWrite(leftLedPin, pwm);
// wait for data from p5 before doing something
while (Serial.available()) {
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
pwm = Serial.parseInt(); // get dummy variable sent over by p5
if (Serial.read() == '\n') {
delay(5);
analogWrite(rightLedPin, pwm);
delay(5);
Serial.println("0");
}
}
digitalWrite(LED_BUILTIN, LOW);
}
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
We needed to establish bi-directional meaningful data exchange in this exercise. The first is to send the Arduino a signal from p5 when the ball hits the ground. This is done by checking if the bottom portion of the ellipse touches the canvas’s lower boundary position.y + mass/2 == height . If this evaluates to true, a signal of 1 is sent over. Otherwise, 0 is sent. When the Arduino program receives the signal, it turns the LED on or off accordingly. Similarly, the Arduino sends the value of the potentiometer (our chosen sensor) over to p5, where it gets mapped to the range [-1, 1]. The mapped value is set towind.x. The closer the potentiometer value is to the extremes, the stronger the wind effect on the ball. Sensor values below 512 also get mapped to negative values, and the ball motion trajectory goes leftward. Otherwise, the wind effect goes in the opposite direction.
// ===== p5 =======
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let analogVal = 0;
let dir = 0;
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(220);
applyForce(wind);
applyForce(gravity);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
if (!serialActive) {
text("Press S to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
fill(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;
}
}
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 (keyCode==LEFT_ARROW){
wind.x=-1;
}
if (keyCode==RIGHT_ARROW){
wind.x=1;
}
if (key==' '){
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
if (key == 's') {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
// make sure there is actually a message
let fromArduino = data;
// if the right length, then proceed
if (fromArduino.length > 0) {
analogVal = int(data);
}
wind.x = map(analogVal, 0, 1023, -1, 1);
let sendToArduino;
if (position.y + mass/2 == height){
sendToArduino = 1 + '\n';
}
else{
sendToArduino = 0 + '\n';
}
writeSerial(sendToArduino);
}
}
// ======= Arduino ======
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
ledState = Serial.parseInt(); // get ball bounce indicator from p5.js
if (Serial.read() == '\n') {
// turn on LED accrodingly
if (ledState == 1){
digitalWrite(rightLedPin, HIGH);
}
else{
digitalWrite(rightLedPin, LOW);
}
currSensorVal = analogRead(A1); // read sensor value
Serial.println(currSensorVal); // send sensor value
}
}
digitalWrite(LED_BUILTIN, LOW);
}
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
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
let xPos = 0; // Position of the ellipse
function setup() {
createCanvas(640, 480);
textSize(18);
noStroke();
}
function draw() {
// one value from Arduino controls the background's red color
background(255, 255, 255);
// Update the position of the ellipse based on the alpha value
// Mapping alpha to the width of the canvas
xPos = map(alpha, 0, 1023, 0, width);
// Draw an ellipse that moves horizontally across the canvas
fill(255, 0, 255, 255); // Same mapping as the text transparency
ellipse(xPos, height / 2, 50, 50); // Position ellipse at center height with a diameter of 50
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() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
let fromArduino = split(trim(data), ",");
if (fromArduino.length == 2) {
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
let sendToArduino = left + "," + right + "\n";
writeSerial(sendToArduino);
}
}
Production 2
Make something that controls the LED brightness from p5
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
let xPos = 0; // Position of the ellipse
let ledState = false; // To toggle LEDs
function setup() {
createCanvas(640, 480);
textSize(18);
noStroke();
}
function draw() {
// one value from Arduino controls the background's red color
background(255, 255, 255);
// Update the position of the ellipse based on the alpha value
// Mapping alpha to the width of the canvas
xPos = map(alpha, 0, 1023, 0, width);
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);
}
text("Then, press A to flash the police lights.",20, 100)
//Edit the code below
// Toggle LED state every frame if space is held down
if (keyIsDown(65)) { // 32 is the ASCII code for space
ledState = !ledState;
if (ledState) {
left = 1;
right = 0;
} else {
left = 0;
right = 1;
}
}
// Edit the code above
}
function keyPressed() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
function keyReleased(){
if (key == "a") {
left = 0;
right = 0;
}
}
function readSerial(data) {
if (data != null) {
let fromArduino = split(trim(data), ",");
if (fromArduino.length == 2) {
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
let sendToArduino = left + "," + right + "\n";
writeSerial(sendToArduino);
}
}
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
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
let serialSetup = false;
// Declare a variable to store the time at which to trigger the action
let triggerTime = 0;
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);
// Set the trigger time to be 5 seconds after setup runs
triggerTime = millis() + 5000;
textSize(20);
}
function draw() {
// Check if the current time has passed the trigger time
if (millis() >= triggerTime && !serialSetup) {
serialSetup = true;
}
push();
fill(0);
if (!serialSetup) {
text("Simulation starts in 5 seconds. Press a to set up serial.", 20, 50);
}
pop();
if (serialSetup) {
background(255);
let windtext = "";
if (alpha < 300) {
wind.x = -1;
windtext = "Wind : Right";
} else if (alpha > 800) {
wind.x = 1;
windtext = "Wind : Left";
} else {
wind.x = 0;
windtext = "No wind.";
}
push();
fill(0);
text(windtext, 20, 50);
pop();
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;
console.log(
"Bounce! Position Y: " + position.y + ", Velocity Y: " + velocity.y
);
left = 1;
} else {
left = 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 (keyCode == LEFT_ARROW) {
wind.x = -1;
}
if (keyCode == RIGHT_ARROW) {
wind.x = 1;
}
if (key == " ") {
mass = random(15, 80);
position.y = -mass;
velocity.mult(0);
}
if (key == "a") {
// 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);
}
}
Personally, I liked this reading. The article Design meets Disability, mentions points which I hadn’t previously considered but are intuitive. While the author gave multiple examples of designs that were made to be more accessible while not highlighting one’s disability there were a few that stood out to me.
The most obvious product which is meant to help people with a disability are glasses. Like the article mentioned people don’t view glasses the same way as a wheelchair or a crutch or an arm sling. People see glasses as aesthetically appealing and as someone that wears glasses I haven’t seen as it as a disability either. I believe that the reason for this is mostly that glasses are very commonplace but that also they can be both aesthetically appealing and discrete.
The theme of aesthetically appealing and discrete is consistent for designs that are meant to also help those with a disability. The author mentioned the iPod but really it made me consider a previous reading we had. The previous reading discussed how something that is aesthetically appealing can be helpful for creativity and that people are willing to overlook small details. I wondered if a product that may not be as technically advanced as another can still sell more if the user-experience is far greater. I think this has already been shown to be the case with the Macintosh, and Macs in general, but also the iPhone which has a cult-following (including myself). While some people stick to the iPhone because of the apple ecosystem being very convenient I think a lot of people (and I am speaking from anecdotal experiences) like the user-interface both because it is intuitive and aesthetically appealing whilst being discrete, and because they have been using it for such a long time that it’s inconvenient to change. Many android phones have better features and some are cheaper and yet people, like myself, still choose to buy an iPhone.
Going into the final project now I want to try to make the design aesthetically appealing and keep certain parts discrete depending on the function. For example any buttons or switches that should be used by the players will be easy to see and everything else will hopefully add to the aesthetic whilst not being distracting. Hopefully I can have this done before user-testing so that I can change it before the final deadline if needed.
