Month: November 2024

Example 1 – Arduino to p5 communication

IMG_3382

P5 code

let X = 0; // ellipse x position


function setup() {
  createCanvas(400, 400); 
}

function draw() {
  background(240); 

  fill('rgb(134,126,126)'); 
  ellipse(X, height/2, 80); 
}

function keyPressed() {
  if (key === " ") {
    setUpSerial(); // Start the serial connection on space bar press
  }
}

// Processes incoming data from Arduino
function readSerial(data) {
  if (data != null) {
    let fromArduino = split(trim(data), ","); // Split incoming data by commas

    if (fromArduino.length >= 1) {
      // Process the first value for X position
      let potValue = int(fromArduino[0]); // Convert string to integer
      X = map(potValue, 0, 1023, 50, width - 50); // Map potentiometer value to X position
      Y = height / 2; // Keep Y position constant
    }
  }
}

Arduino code

void setup() {
  Serial.begin(9600); //  serial communication
}

void loop() {
  int potValue = analogRead(A0); // potentiometer value
  Serial.println(potValue);     // send the value to the serial port
  delay(10);                   
}

Example 2 – P5 to Arduino Communication

 

 

 

 

p5 code

let brightness = 0; // Brightness value to send to Arduino

function setup() {
  createCanvas(640, 480);
  textSize(18);
}

function draw() {
  background(255);

  if (!serialActive) {
    // If serial is not active display instruction
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    // If serial is active, display connection status and brightness value
    text("Connected", 20, 30);
    text('Brightness = ' + str(brightness), 20, 50);
  }

  // Map the mouseX position (0 to width) to brightness (0 to 255)
  brightness = map(mouseX, 0, width, 0, 255);
  brightness = constrain(brightness, 0, 255); // Ensures brightness is within the range 0-255

  // Sends brightness value to Arduino
  sendToArduino(brightness);
}

function keyPressed() {
  if (key == " ") {
    // Start serial connection when the space bar is pressed
    setUpSerial();
  }
}


function readSerial(data) {
  if (data != null) {

  }
}
// We dont need this part of the code because we are not getting any value from the Arduino

// Send brightness value to Arduino
function sendToArduino(value) {
  if (serialActive) {
    let sendToArduino = int(value) + "\n"; // Convert brightness to an integer, add newline
    writeSerial(sendToArduino); // Send the value using the serial library
  }
}

Arduino code

void setup() {
  Serial.begin(9600); //  serial communication
}

void loop() {
  int potValue = analogRead(A0); // potentiometer value
  Serial.println(potValue);     // send the value to the serial port
  delay(10);                   
}

Example 3 – Bi-Directional Communication

 

 

 

 

 

 

p5 code

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;


let windValue = 0; // Wind value from Arduino (light sensor)
let serialConnected = false; // Tracks if the serial port is selected

function setup() {
  createCanvas(640, 360);
  textSize(18); 
  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(255);

  if (!serialConnected) {
    // Show instructions to connect serial port
    textAlign(CENTER, CENTER);
    fill(0); // Black text
    text("Press Space Bar to select Serial Port", width / 2, height / 2);
    return; // Stop loop until the serial port is selected
  } else if (!serialActive) {
    // Show connection status while waiting for serial to activate
    textAlign(CENTER, CENTER);
    fill(0);
    text("Connecting to Serial Port...", width / 2, height / 2);
    return; // Stop until the serial connection is active
  } else {
    // display wind value and start the simulation if connected
    textAlign(LEFT, TOP);
    fill(0);
    text("Connected", 20, 30);
    text('Wind Value: ' + windValue, 20, 50);
  }

  // Apply forces to the ball
  applyForce(wind);
  applyForce(gravity);

  // Update motion
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);

  // Draw the ball
  ellipse(position.x, position.y, mass, mass);

  // Check for bounce
  if (position.y > height - mass / 2) {
    velocity.y *= -0.9; 
    position.y = height - mass / 2; // Keep the ball on top of the floor 

    // Sends signal to Arduino about the bounce
    sendBounceSignal();
  }

  // Update wind force based on Arduino input
  wind.x = map(windValue, 0, 1023, -1, 1); // Map sensor value to wind range
}

function applyForce(force) {
  let f = p5.Vector.div(force, mass);// Force divided by mass gives acceleration
  acceleration.add(f);
}

// Send a bounce signal to Arduino
function sendBounceSignal() {
  if (serialActive) {
    let sendToArduino = "1\n"; // Signal Arduino with "1" for a bounce
    writeSerial(sendToArduino);
  }
}

// incoming serial data from Arduino
function readSerial(data) {
  if (data != null) {
    windValue = int(trim(data)); // store the wind value
  }
}

// Press space bar to initialize serial connection
function keyPressed() {
  if (key == " ") {
    setUpSerial(); // Initialize the serial connection
    serialConnected = true; // Mark the serial port as selected
  }
}

// Callback when serial port is successfully opened
function serialOpened() {
  serialActive = true; // Mark the connection as active
}

Arduino code

const int ledPin = 9;  // Digital pin 9 connected to the LED
const int lightSensor = A0; // Analog input pin A0 for the light sensor

void setup() {
  Serial.begin(9600);      // Start serial communication
  pinMode(ledPin, OUTPUT); // Set LED pin as an output
}

void loop() {
  // Read the light sensor value
  int lightValue = analogRead(lightSensor);

  // Send the light value to p5.js
  Serial.println(lightValue);

  // Check for bounce signal (when ball touches the ground) from p5.js
  if (Serial.available() > 0) {
    int bounceSignal = Serial.parseInt();
    if (Serial.read() == '\n' && bounceSignal == 1) {
      // Turn on the LED briefly to indicate a bounce
      digitalWrite(ledPin, HIGH);
      delay(100);
      digitalWrite(ledPin, LOW);
    }
  }

  delay(50); // Small delay 
}

 

 

 

For my final project, I’m creating a music learning device to help kids read beginner music notes in a fun and interactive way. The device will have an LED button panel with nine buttons, each representing a specific musical note on the staff. These buttons will cover notes on both the lines and spaces, making it easy for kids to learn where each note is positioned.

I’ll start with a tutorial to introduce the notes, showing their names and positions on a staff while the matching LED button lights up. This way, kids can visually connect each note’s name with its place.

After the tutorial, there’s a gameplay mode to reinforce what they’ve learned. Notes will appear on a screen, and the player needs to press the corresponding LED button as fast as they can. They’ll earn points for correct answers and lose points for wrong ones, with the goal of getting as many points as possible in 90 seconds. This competitive element makes learning both challenging and enjoyable.

The device will use serial communication between an Arduino and p5.js. The Arduino will handle the LEDs and buttons, while p5.js will display notes on the screen and manage the game logic, like scoring and timing. This setup will create a smooth connection between what’s happening on screen and the physical buttons.

To make the learning even more immersive, there will be sounds for each note. A potentiometer will be included to allow the user to adjust the volume of the sound, giving them control over how loud or soft they want the feedback to be. When a button is pressed, the corresponding musical tone will play, helping kids connect the note visually.

In “Design Meets Disability,” the author talks about how design and disability come together in ways we don’t usually think about. He challenges the idea that things made for people with disabilities shouldn’t only be practical. Instead, they can be beautiful and a way for someone to express who they are. I found this really interesting, especially when the author compared eyeglasses, which are now a fashion accessory, with hearing aids, which are often hidden. It made me realize how much society’s views affect the way these tools are designed.

I really liked how the author said that designers should do more than just try to “fix” disabilities. They should make products that celebrate differences. It made me think about what good design really means. Shouldn’t it be about helping people feel empowered and giving them choices? For example, think about how wheelchairs have changed over time. Old wheelchairs were bulky and just focused on function. But now, there are wheelchairs that are lightweight, stylish, and customizable. They give people more than just mobility, they help them feel confident. This is exactly the kind of change the author is talking about.

Another example is prosthetic limbs. In the past, they were designed to blend in and look as “natural” as possible. But now, some prosthetics are colorful and artistic, or they look futuristic, like the bionic limbs. These designs are more than just tools, they let people show their personality and feel proud of what they’re wearing.

The book left me feeling hopeful about what could happen if more designers thought this way. Assistive devices could become something people actually want to use, not just something they need. Imagine a future where these devices are seen as an exciting part of someone’s personality, like how clothes or accessories are today.

Overall, I appreciated the author’s perspective. It added a lot to the conversation about inclusion and made me see how much potential there is in rethinking assistive design as something not just useful, but also appealing.

Example 1 – Arduino to p5 communication

The potentiometer was used to control the horizontal axis of the ellipse.

Setup

Schematic

P5 code

let X = 0; // ellipse x position


function setup() {
  createCanvas(400, 400); 
}

function draw() {
  background(240); 

  fill('rgb(134,126,126)'); 
  ellipse(X, height/2, 80); 
}

function keyPressed() {
  if (key === " ") {
    setUpSerial(); // Start the serial connection on space bar press
  }
}

// Processes incoming data from Arduino
function readSerial(data) {
  if (data != null) {
    let fromArduino = split(trim(data), ","); // Split incoming data by commas

    if (fromArduino.length >= 1) {
      // Process the first value for X position
      let potValue = int(fromArduino[0]); // Convert string to integer
      X = map(potValue, 0, 1023, 50, width - 50); // Map potentiometer value to X position
      Y = height / 2; // Keep Y position constant
    }
  }
}

Arduino code

Github

Video

Example 2 – P5 to Arduino Communication

The horizontal position of the mouse detects the brightness of the LED.

Setup

Schematic

P5 code

let brightness = 0; // Brightness value to send to Arduino

function setup() {
  createCanvas(640, 480);
  textSize(18);
}

function draw() {
  background(255);

  if (!serialActive) {
    // If serial is not active display instruction
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    // If serial is active, display connection status and brightness value
    text("Connected", 20, 30);
    text('Brightness = ' + str(brightness), 20, 50);
  }

  // Map the mouseX position (0 to width) to brightness (0 to 255)
  brightness = map(mouseX, 0, width, 0, 255);
  brightness = constrain(brightness, 0, 255); // Ensures brightness is within the range 0-255

  // Sends brightness value to Arduino
  sendToArduino(brightness);
}

function keyPressed() {
  if (key == " ") {
    // Start serial connection when the space bar is pressed
    setUpSerial();
  }
}


function readSerial(data) {
  if (data != null) {

  }
}
// We dont need this part of the code because we are not getting any value from the Arduino

// Send brightness value to Arduino
function sendToArduino(value) {
  if (serialActive) {
    let sendToArduino = int(value) + "\n"; // Convert brightness to an integer, add newline
    writeSerial(sendToArduino); // Send the value using the serial library
  }
}

Arduino Code

Github

Video

Example 3 – Bi-Directional Communication

Every time the ball bounces and LED blinks, and the wind is controlled by the light sensor

Setup

Schematic

P5 Code

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;


let windValue = 0; // Wind value from Arduino (light sensor)
let serialConnected = false; // Tracks if the serial port is selected

function setup() {
  createCanvas(640, 360);
  textSize(18); 
  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(255);

  if (!serialConnected) {
    // Show instructions to connect serial port
    textAlign(CENTER, CENTER);
    fill(0); // Black text
    text("Press Space Bar to select Serial Port", width / 2, height / 2);
    return; // Stop loop until the serial port is selected
  } else if (!serialActive) {
    // Show connection status while waiting for serial to activate
    textAlign(CENTER, CENTER);
    fill(0);
    text("Connecting to Serial Port...", width / 2, height / 2);
    return; // Stop until the serial connection is active
  } else {
    // display wind value and start the simulation if connected
    textAlign(LEFT, TOP);
    fill(0);
    text("Connected", 20, 30);
    text('Wind Value: ' + windValue, 20, 50);
  }

  // Apply forces to the ball
  applyForce(wind);
  applyForce(gravity);

  // Update motion
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);

  // Draw the ball
  ellipse(position.x, position.y, mass, mass);

  // Check for bounce
  if (position.y > height - mass / 2) {
    velocity.y *= -0.9; 
    position.y = height - mass / 2; // Keep the ball on top of the floor 

    // Sends signal to Arduino about the bounce
    sendBounceSignal();
  }

  // Update wind force based on Arduino input
  wind.x = map(windValue, 0, 1023, -1, 1); // Map sensor value to wind range
}

function applyForce(force) {
  let f = p5.Vector.div(force, mass);// Force divided by mass gives acceleration
  acceleration.add(f);
}

// Send a bounce signal to Arduino
function sendBounceSignal() {
  if (serialActive) {
    let sendToArduino = "1\n"; // Signal Arduino with "1" for a bounce
    writeSerial(sendToArduino);
  }
}

// incoming serial data from Arduino
function readSerial(data) {
  if (data != null) {
    windValue = int(trim(data)); // store the wind value
  }
}

// Press space bar to initialize serial connection
function keyPressed() {
  if (key == " ") {
    setUpSerial(); // Initialize the serial connection
    serialConnected = true; // Mark the serial port as selected
  }
}

// Callback when serial port is successfully opened
function serialOpened() {
  serialActive = true; // Mark the connection as active
}

Arduino Code

Github

Video

The reading explains how good design transcends functionality. The transition from medical necessity to mainstream artistry shows how constraints can drive innovation. It challenges the assumption that advances flow only from mainstream to niche needs, showing that disability inspired innovations can enrich and transform general design.

Aimee Mullins’s carved wooden legs is an example of how disability can be used as a unique and artistic expression. Mullins’s prosthetic legs are not just functional but also works of art, showcasing intricate carvings and unique designs that celebrate individuality rather than hiding difference. This approach challenges the traditional narrative of discretion in assistive devices, turning them into tools for personal empowerment and storytelling. It blends function with artistry creating meaningful user experiences. Just as Mullins’s legs redefine prosthetics as wearable art, I think it’s amazing to create projects that invite users to see technology as not just practical but as an extension of self expression and creativity.

The reading presents a compelling argument for balancing functionality and artistic expression in design, particularly in the context of disability. I agree with most of the points made especially the idea that design should aim to empower users and reduce stigma. However, I question the extent to which simplicity is always the best approach in inclusive design. I always believe less is more, but while minimalism can enhance cognitive accessibility, it may not always meet the diverse needs of users. In some cases, a more complex design with customizable features could provide greater flexibility and inclusivity, especially for users with varying preferences or conditions, like the color changing display or text size change on the iPhone, for those who have vision problems. 

Sometimes, all we need is a long hug to help us recover from a long day. So, why not be able to hug a responsive cute fuzzy teddy bear?

The idea for my final project is still pretty rough, but I want to make something that is cute and wholesome that can also help promote well-being as final season is approaching. I was thinking of a teddy bear with a pressure sensor that activates LEDs that form a heart shape when the user hugs it. Maybe I could also figure out getting it to output randomized sounds for each hug, such as “That made my day!” “Aww thanks!” “Cozy!” Etc.. The P5 screen could animate a corresponding background for the teddy bear in awe, such as a bunch of hearts growing in size or cheerful floating bubbles. In the end, I just want to create something that will make users feel loved and appreciated, even if it’s just a little teddy bear

For a back up idea, that’s actually quite ambitious, I thought I could make a fake robot pet that’s always grumpy and will turn around and move away from you when you come close to it unless you have a hot treat for it. I think think the hot treat part might be a bit hard to accomplish, because warm cookies aren’t super hot and I haven’t used a temperature sensor yet, so I don’t know how sensitive it is