let rVal = 0;
let potentiometerInput = 0;
let circleX;
function setup() {
createCanvas(640, 480);
textSize(18);
circleX = width/2;
}
function draw() {
// one value from Arduino controls the background's red color
background(255);
// the other value controls the text's transparency value
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
// Print the current values
text('potentiometerInput = ' + str(potentiometerInput), 20, 70);
}
//Draws the circle
circle(circleX,height/2,100);
}
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 == 1) {
// 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
potentiometerInput = int(fromArduino[0]);
//Maps the potentiometer input value to the width of the canvas.
circleX = map(potentiometerInput,0,1023,0,width);
}
let sendToArduino = "\n";
writeSerial(sendToArduino);
}
}
P5 ⬆️
void setup() {
Serial.begin(9600);
// 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
delay(5);
if (Serial.read() == '\n') {
int potentiometer = analogRead(A1);
delay(5);
Serial.println(potentiometer);
Serial.print(',');
Serial.println(potentiometer);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
while (Serial.available()) {
Serial.println("0,0");
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int value = Serial.parseInt();
int value2 = Serial.parseInt();
if (Serial.read() == '\n') {
analogWrite(ledPin, value);
analogWrite(ledPin2, value2);
}
}
Arduino ⬆️
function readSerial(data) {
if (data != null) {
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
value = int(map(mouseY,0, height, 0, 255));
value2 = int(map(mouseX,0, width, 0, 255));
let led1 = value + "\n";
let led2 = value2 + "\n";
writeSerial(led1);
writeSerial(led22);
print(value);
print(value2)
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {
// led on while receiving data
digitalWrite(LED_BUILTIN, HIGH);
// gets value from p5
int value = Serial.parseInt();
// led switch from p5 value input
if (Serial.read() == '\n') {
if (value == 1) {
digitalWrite(ledPin, HIGH);
}
else {
digitalWrite(ledPin, LOW);
}
// gets sensor value
int sensor = analogRead(A0);
delay(5);
// sends sensor value to p5
Serial.println(sensor);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
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 == 1) {
// 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
potentiometerInput = int(fromArduino[0]);
//Maps the potentiometer input value to the width of the canvas.
circleX = map(potentiometerInput,0,1023,0,width);
}
let sendToArduino = "\n";
writeSerial(sendToArduino);
}
}
Arduino code snippet:
void setup() {
Serial.begin(9600);
// 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
delay(5);
if (Serial.read() == '\n') {
int potentiometer = analogRead(A1);
delay(5);
Serial.println(potentiometer);
Serial.print(',');
Serial.println(potentiometer);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
while (Serial.available()) {
Serial.println("0,0");
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int value = Serial.parseInt();
int value2 = Serial.parseInt();
if (Serial.read() == '\n') {
analogWrite(ledPin, value);
analogWrite(ledPin2, value2);
}
}
p5 snippet:
function readSerial(data) {
if (data != null) {
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
value = int(map(mouseY,0, height, 0, 255));
value2 = int(map(mouseX,0, width, 0, 255));
let led1 = value + "\n";
let led2 = value2 + "\n";
writeSerial(led1);
writeSerial(led22);
print(value);
print(value2)
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {
// led on while receiving data
digitalWrite(LED_BUILTIN, HIGH);
// gets value from p5
int value = Serial.parseInt();
// led switch from p5 value input
if (Serial.read() == '\n') {
if (value == 1) {
digitalWrite(ledPin, HIGH);
}
else {
digitalWrite(ledPin, LOW);
}
// gets sensor value
int sensor = analogRead(A0);
delay(5);
// sends sensor value to p5
Serial.println(sensor);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
For my final project, I would really love to incorporate something with sound and color (very similar to my midterm). I think maybe a cool idea would be composing a short piece of music, that would generate some sort of light show using leds. I could assign different colors to the notes, so that when the piece plays, the leds (the translucent ones) will generate different colors for the piece.
For this week’s reading, the author discusses design in relation to disabilities. He specially talks about how the fashion industry has changed the perception of certain disabilities, purely based off of the design choices made to enhance the appearance of certain medical items. He used glasses as an example, stating that eyeglasses were once considered humiliating and undesirable, but that since the fashion industry/brands discovered a method to produce trendy and cool eyewear, glasses are now considered fashionable and stylish. This is a great example of positive framing (no pun intended) of a disability through its design, which not only offers a product for those with disabilities, but also allows indivsisuals with disabilities to seamlessly blend into society without feeling “different” from everyone else. What can become concerning about the fashion industry and its role in making certain medical items “fashionable” is its economic influence on these products. These fashionable items become more expensive and leave those who actually need these items unable to afford them. This is extremely concerning and it begs the question of whether emphasizing aesthetic in the process of manufacturing these products is a good idea. Personally, I believe that the (aesthetic) design part of these items is extremely necessary because it not only allows people with disabilities to feel more at ease in society, but it also enables them to feel good about themselves. Of course, there must be a fair balance between usability and appearance, but looking good also makes you feel good.
A dynamic light source that responds to the captured sound, adding a visual dimension to the auditory experience.
Soundscapes in Light is all about immersing users where the surrounding ambient sounds play the lead role in shaping a captivating visual atmosphere
I stumbled across this video I found which sort of matches the idea of what I want to display on p5.
Description:
I’m thinking of setting up a microphone to capture the audio vibes around. Different frequencies and amplitudes trigger variations in the light display for example if it’s a high-pitched sound the RGB LED nudges towards the blues or a deep bass note the RGB LED changes to reds.
Color Mapping: P5.js takes charge, translating the intensity and frequency of the captured sound into dynamic color schemes. Visuals come alive with vibrant colors and subtle gradients responding to every nuance of the audio, creating a visually harmonious representation.
Light Intensity: The volume and intensity of the sound guide the brightness and saturation of the RGB LED. A crescendo of sound could lead to a fully illuminated, vibrant display, while moments of silence might dim the lights, creating a tranquil ambiance.
Challenges:
Noise Interference:
The microphone may capture unintended ambient noise, leading to inaccurate or unwanted visual responses. Implementing effective noise reduction techniques is crucial to maintain the integrity of the sound-to-light transformation.
Color Mapping Aesthetics:
Determining the appropriate color mapping for different sound frequencies and amplitudes involves both artistic and technical considerations. Striking a balance between aesthetic appeal and meaningful representation is a challenge.
Thinking about what I picked up from the reading, it’s pretty clear that finding the right balance in designing stuff for people with disabilities is key. Leckey’s take on furniture for kids with disabilities nails it keeping things visually cool without making it stand out too much. The bit about radios adding screens throwing a wrench into accessibility for visually impaired folks hits home. It’s a reminder that sometimes less is more, especially when it comes to simplicity making things work for everyone. Digging into multimodal interfaces, like beeping buttons and flashing lights, sounds like a game-changer for folks with sensory issues, giving them more ways to interact.
And then there’s the reminder that everyone’s different. The story about two folks with visual impairments wanting totally different things in their devices shows we can’t do a one-size-fits-all deal. It’s not just about functionality; it’s about personal vibes and choices.
The questions the reading left me with are pretty cool too. Like, how do designers juggle making things accessible without getting too complex? And what’s the deal with fashion designers in the accessibility game? Plus, prosthetics—it’s not just about how they work, but how they fit people’s attitudes and styles. The reading opened up this whole world of thinking about design and accessibility that goes way beyond just ticking boxes. It’s making me look at things with a whole new lens.
After learning about the functionalities and the means of communicating between P5 and Arduino platforms, we were given the assignments to initialize various scenarios to and from p5.
First Assignment:
In this assignment, we initialized an Arduino to p5 connection using a potentiometer to control the horizontal position of an ellipse:
Arduino code:
const int potPin = A0; // Analog pin connected to the potentiometer
void setup() {
Serial.begin(9600);
}
void loop() {
int potValue = analogRead(potPin); // Read the value from the potentiometer
// Send the potentiometer value to p5.js
Serial.println(potValue);
}
P5 Code:
let ellipseHorizental;
function setup() {
createCanvas(640, 480);
textSize(18);
ellipseHorizental = width/2;
}
function draw() {
background(220);
// Draw ellipse with width based on potentiometer value
fill(255, 0, 255);
ellipse(ellipseHorizental, height / 2, 100, 150);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
// Print the current potentiometer value
text('Potentiometer Value = ' + str(ellipseHorizental), 20, 50);
}
}
function keyPressed() {
if (key == " ") {
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
// convert the string to a number using int()
let fromArduino = split(trim(data), ",");
// Map the potentiometer value to the ellipse width
ellipseHorizental = map(int(fromArduino[0]), 0, 1023, 0, 640);
}
}
Video:
Assignment 2:
In this assignment, we initiated a p5 to Arduino response. The slider in p5 can control the brightness of an LED in Arduino.
Arduino code:
int LED = 5; // Digital pin connected to the LED
void setup() {
Serial.begin(9600);
pinMode(LED_BUILTIN, OUTPUT);
pinMode(LED, 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 brightnessValue = Serial.parseInt();
if (Serial.read() == '\n') {
delay(5);
Serial.println(brightnessValue);
}
analogWrite(LED, brightnessValue);
digitalWrite(LED_BUILTIN, LOW);
}
}
P5 Code:
let brightnessSlider;
function setup() {
createCanvas(640, 480);
textSize(18);
// Create a slider
brightnessSlider = createSlider(0, 255, 128); // Set the range and initial value
brightnessSlider.position(20, 100); // Set the position of the slider
}
function draw() {
background(255);
// Draw a slider
fill(255, 0, 0);
rect(brightnessSlider.x, brightnessSlider.y, brightnessSlider.width, brightnessSlider.height);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
// Print the current brightness value
text('Brightness = ' + brightnessSlider.value(), 20, 50);
}
}
function keyPressed() {
if (key == " ") {
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
let sendToArduino = brightnessSlider.value() + "\n";
writeSerial(sendToArduino);
}
}
int LED = 5; // Digital pin connected to the LED
void setup() {
Serial.begin(9600);
pinMode(LED_BUILTIN, OUTPUT);
pinMode(LED, 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 brightnessValue = Serial.parseInt();
if (Serial.read() == '\n') {
delay(5);
Serial.println(brightnessValue);
}
analogWrite(LED, brightnessValue);
digitalWrite(LED_BUILTIN, LOW);
}
}
Video:
Assignment 3:
This assignment we spent an unholy and frankly embarrassing amount of time on this. We modified the code from class and figured out a way to light up both LEDs when the ball on the screen bounces. The wind speed depends on readings from the LDR, so the ball goes in different directions when the board is in light or dark conditions. At a certain light level, the ball remains stationary.
Arduino Code:
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);
}
P5 Code:
let rVal = 0;
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let groundFlag;
let dropFlag = false; // flag for when the spacebar is pressed and the ball should drop
let windFlag = false; // flag to start/stop wind
function setup() {
createCanvas(640, 500);
// noFill();
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.5 * mass);
wind = createVector(0, 0);
groundFlag = 0;
frameRate(30);
textSize(20)
}
function draw() {
background(255);
text("rVal: "+str(rVal), 20, 55);
text("wind.x: "+str(wind.x), 20, 80);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
if (dropFlag == true) { // when spacebar is pressed, start the sketch
if (position.y == height - mass / 2) {
groundFlag = 1; // this value is sent to the LED in the Arduino end
} else {
groundFlag = 0;
}
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;
position.y = height - mass / 2;
}
if (windFlag == true) {
wind.x = map(rVal, 0, 1023, -1, 1);
}
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
function keyPressed() {
if (keyCode == UP_ARROW) {
windFlag = true // wind is enabled when up arrow key is pressed
}
if (keyCode == DOWN_ARROW) {
windFlag = false // wind is paused when down arrow key is pressed
wind.x = 0
}
if (key == " ") {
setUpSerial();
dropFlag = true;
}
}
function readSerial(data) {
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
if (data != null) {
// make sure there is actually a message
let fromArduino = split(trim(data), ","); // split the message
// 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 = groundFlag + "," + groundFlag + "\n";
writeSerial(sendToArduino);
}
}
Video:
Reflection:
The overall exercises were a great way to comprehend further the logic behind the coding and how both platforms are intertwined. Knowing how things are operated between each other, we can now effectively work on our final projects and have so many possibilities of projects to work on.
We don’t typically discuss how disability influences design, so this was a very intriguing topic. Indeed, it was fascinating to observe how he connected glasses to disabilities, which influenced the creation of what we now refer to as eyewear. The author went on to discuss various disabilities and the medical equipment associated with them, as well as how fashion has improved their overall appearance and design. Graham Pullin talks about how important it is to make things like wheelchairs and hearing aids look good and easy to use for people with disabilities. He suggests calling them “chairwear” and “hearwear” to make them seem more like regular things you’d buy, not just medical stuff. But there’s a worry that making these things fashionable might make them more expensive, which could be a problem for people who don’t have a lot of money. Pullin doesn’t talk much about how to keep these cool designs affordable for everyone who needs them. He mentions how glasses used to be cheap for everyone, but now they can cost a lot because they’re seen as a fashion accessory. It’s important that making things look good doesn’t make them too pricey for people who really need them. There should be a balance between looking nice and being affordable for everyone who needs these tools.
For my final project, I’m considering several ideas but haven’t settled on one yet. One concept is to develop a memory pattern game, similar to the one where you observe a sequence of colors and replicate it in the same order, sometimes with timed intervals between each color—a classic memory challenge. Another option involves utilizing an ultrasonic sensor attached to a servo motor, scanning a 180-degree area to create a game where the player must accomplish a task without triggering detection on the “radar.” Another idea I’m really keen on exploring involves integrating Arduino and sensors to enhance my ongoing midterm project, which took weeks and weeks of work. These are just a few ideas I have for now that I need to look further into.
This week’s reading “Design meets Disability” seemed to capture the essence of a good design through the lens of disability. The author begins with the conversation regarding the traditional absence of design or focus on appearance in goods created to aid a disability. With an emphasis on discretion, the object often serves contrary to its purpose by depriving the wearer of a positive image and instead results in stigmatizing the disability. It was interesting to note that an object’s association with design often changes with the way it is categorized, evident in the example of eyewear transforming from an object of disability to that of fashion. Through this observation I was reminded of a previous reading that sparked a conversation about form versus function in a design. As mentioned in an earlier response, that an ideal design would be one that is able to strike a balance between the two. However, this article further prompted me to take into consideration the preference of people who often have varying needs. The inclusion of design can definitely be a boost for the self-confidence of people but it is useful only if it is done without compromising the intended functionality.
Reflecting on the ideas presented, I felt that it may be interesting to consider creating all existing items with more thought and consideration instead of creating an entire separate line of products for disability. While this brings us back to the debate around simple design over a universal design, I think making designs inclusive through simple tactile and auditory inputs can be done without complicating its usability. Finally, a user-centric design remains the top priority and it is necessary to ensure a product reflects simplicity, inclusion, design and allows the user to develop a positive self-image which can be achieved by involving all relevant people including designers in the creation of a product.
