Category: Spring 2024 – Aaron (Section 001)

Reuse and Recycle: A reflection on Design Meets Disability

In Design Meets Disability, the idea of trickle-down effects made a lot of sense to me. The tech market’s priorities often align with majority demand, leaving designs for the disabled marginalized in terms of research and funding. Sectors like fashion or mass-market tech get the lion’s share of attention, while solutions for disabilities often lack the investment they deserve.

However, the book highlights a crucial skill for designers: recognizing the applicability of existing technology to new problems. While creating something original is commendable, repurposing an established design can be equally impactful. Legal hurdles, like patents, may limit financial gains from such adaptations, but progress shouldn’t be confined by a competitive or profit-driven mindset. True innovation lies in recognizing the value of existing tools to accelerate development and as designers or artists, we have the benefit of the sky being the limit to our creativity. Thus, repurposing existing technology is never frowned over by our kind as artists have the ability to bring their own touch to any project.

Title: Catch the Horse
Mechanical Horse.mp4 – Google Drive

Concept:

“Catch the Horse” is an interactive two-player game that blends physical and virtual gameplay to create an engaging experience. A physical mechanical horse and a digital cowboy chase are brought to life through Arduino and p5.js integration. The game revolves around strategy, reflexes, and decision-making, where one player controls a cowboy trying to catch a runaway horse, while the other player actively defends the horse using tools like mud, fences, and boosters. With immersive elements like crouching to dodge obstacles and precise timing challenges to throw a lasso, the game offers an interactive and entertaining experience.

Overview:

In “Catch the Horse,” a virtual horse escapes its stable and leaves the screen, triggering a motor that animates a physical mechanical horse placed beside the monitor. The cowboy avatar must chase after the horse, dodging obstacles and using a lasso to attempt capture. The horse player can make the chase challenging with mud, fences, and boosters, while the cowboy must rely on strategic decision-making and skill to win.

Gameplay Mechanics

The Cowboy’s Role (Player 1)

• Chasing the Horse:
  • The cowboy avatar moves left and right using a joystick to dodge mud and other obstacles.
  • Physical crouching (detected by an ultrasonic sensor) is required to avoid fences thrown by the horse player.
  • At set intervals, the cowboy can attempt to throw a lasso to capture the horse or a bag of treats.
• Lasso Mechanic:
  The cowboy has two options when throwing the lasso:
  1. Catch the Horse (Luck-Based):
     • A meter appears with an oscillating needle that moves slower, making it easier to time the throw.
     • If successful, the player rolls a virtual dice. A roll of 5 or 6 captures the horse; otherwise, the chase continues.
  2. Catch the Treats (Skill-Based):
     • The meter’s needle oscillates faster, requiring greater precision to time the throw.
     • Success guarantees the bag of treats, which stops the horse and ensures a win.
     • Failure results in no capture, and the chase continues. 

The Horse’s Role (Player 2)

• The horse player uses three buttons to evade capture:
  1. Mud Throw: Throws mud obstacles that the cowboy must dodge with the joystick.
  2. Fence Throw: Launches fences that the cowboy must crouch to avoid.
  3. Booster: Temporarily speeds up the horse, preventing the cowboy from throwing a lasso.
• All buttons have cooldown periods to maintain fairness and balance. 

Challenges and Solutions

1. Mechanical Horse Durability:
   • The motor runs at a controlled speed to prevent stress on the fragile body.
2. Button Cooldowns and Fairness:
   • Cooldown timers for the horse player’s buttons ensure balanced gameplay.
3. Accurate Crouch Detection:
   • Calibrate the ultrasonic sensor to detect movement precisely while avoiding false triggers.

Winning Conditions

• The cowboy wins if they:
  • Successfully throw the lasso and roll a 5 or 6.
  • Successfully capture the bag of treats.
• The horse wins if:
  • The cowboy fails all lasso attempts, or the timer runs out.

EXCERCISE 1: ARDUINO TO P5.JS COMMUNICATION

RESULT:

TASK 1 VIDEO

P5 CODE:

let sensorValue = 0; // Variable to store sensor data
function setup() {
  createCanvas(640, 480);
  textSize(18);
  if (!serialActive) {
    setUpSerial(); // Start serial communication with Arduino
  }
}
function draw() {
  // Set the background to dark blue and purple hues based on the sensor value
  background(map(sensorValue, 0, 1023, 50, 75), 0, map(sensorValue, 0, 1023, 100, 150));
  // Map the sensor value to control the ellipse's horizontal position
  let ellipseX = map(sensorValue, 0, 1023, 0, width);
  // Draw the ellipse in the middle of the screen
  fill(255); // White ellipse for contrast
  ellipse(ellipseX, height / 2, 50, 50);
  // Display connection status
  fill(255); // White text for readability
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    // Display the current sensor value
    text("Sensor Value = " + str(sensorValue), 20, 50);
  }
}
function keyPressed() {
  if (key === " ") {
    setUpSerial(); // Start the serial connection when the spacebar is pressed
  }
}
// This function is called by the web-serial library with each new line of data
function readSerial(data) {
  if (data != null) {
    // Parse the sensor value from the Arduino
    sensorValue = int(trim(data));
  }
}

ARDUIN CODE:

int sensorPin = A0; // Sensor connected to A0

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

void loop() {
  int sensorValue = analogRead(sensorPin); // Read sensor value
  Serial.println(sensorValue); // Send the value to p5.js
  delay(10); // Small delay to avoid overwhelming the serial buffer
}

EXCERCISE 2: P5 TO ARDUINO COMMUNICATION

RESULT:

TASK 2 VIDEO

P5 CODE:

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

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

  // Check if serial is active and set it up if not
  if (!serialActive) {
    setUpSerial(); // Initialize serial communication
  }
}

function draw() {
  background(30); // Dark background
  fill(255); // White text
  text("Use the UP and DOWN arrows to control LED brightness", 20, 30);

  // Display the current brightness value
  text("Brightness: " + brightness, 20, 60);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    // Increase brightness
    brightness = min(brightness + 10, 255); // Max brightness is 255
    sendBrightness();
  } else if (keyCode === DOWN_ARROW) {
    // Decrease brightness
    brightness = max(brightness - 10, 0); // Min brightness is 0
    sendBrightness();
  } else if (key === " ") {
    // Start serial connection when spacebar is pressed
    setUpSerial();
  }
}

function sendBrightness() {
  if (writer) {
    // Send the brightness value to Arduino
    writer.write(brightness + "\n");
  } else {
    console.error("Writer is not available. Please connect to the serial port.");
  }
}

ARDUINO CODE:

int ledPin = 9; // LED connected to PWM pin 9
int brightness = 0; // Variable to store brightness value from p5.js

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

void loop() {
  // Check if data is available to read
  if (Serial.available() > 0) {
    // Read the brightness value sent from p5.js
    brightness = Serial.parseInt();

    // Constrain the brightness value to 0-255
    brightness = constrain(brightness, 0, 255);

    // Set the LED brightness
    analogWrite(ledPin, brightness);
  }
}

EXCERCISE 3: BI-DIRECTIONAL COMMUNICATION

RESULT:
TASK 3 VIDEO

P5 CODE:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let sensorValue = 0; // Variable to store wind value from Arduino
let windStrength = 0; // Wind force determined by the sensor

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);

  // Initialize serial communication
  if (!serialActive) {
    setUpSerial();
  }
}

function draw() {
  background(255);

  // Apply gravity
  applyForce(gravity);

  // Apply wind (continuously updated from sensor)
  wind.x = map(sensorValue, 0, 1023, -2, 2); // Map sensor value to a stronger wind range
  applyForce(wind);

  // Update position and velocity
  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; // A little dampening when hitting the bottom
    position.y = height - mass / 2;

    // Notify Arduino about the bounce
    sendBounce();
  }
}

function applyForce(force) {
  // Newton's 2nd law: F = M * A
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

// Notify Arduino when the ball bounces
function sendBounce() {
  if (writer) {
    writer.write('1\n'); // Send the bounce signal
  }
}

// Read wind control value from Arduino
function readSerial(data) {
  if (data != null) {
    // Parse the sensor value directly into a variable for wind force
    sensorValue = int(trim(data));
  }
}

// Handle serial setup (using the serial.js file)
function keyPressed() {
  if (key === " ") {
    setUpSerial();
  }
}

ARDUINO CODE:

const int ledPin = 9;      // LED connected to pin 9
const int sensorPin = A0;  // Analog sensor for wind control
int sensorValue = 0;       // Variable to store sensor value from analog pin

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

void loop() {
  // Read the sensor value and send it to p5.js
  sensorValue = analogRead(sensorPin);
  Serial.println(sensorValue);

  // Check if a bounce signal is received
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == '1') {
      // Turn on the LED
      digitalWrite(ledPin, HIGH);
      delay(100);  // Keep the LED on briefly
      digitalWrite(ledPin, LOW);  // Turn off the LED
    }
  }
}

In my opinion, this reading challenges the idea that design for disability should only focus on solving problems. The prosthetic designs by Aimee Mullins show that disability can spark bold and exciting ideas, not just practical solutions. I think this mindset is what’s missing in most assistive designs today. Why settle for blending in when design can help people stand out and feel empowered? Similarly, the trend of customizing prosthetic eyes with unique designs—like intricate patterns or bold colors—proves that assistive devices can be about self-expression. These designs don’t try to look like a “normal” eye; instead, they let people proudly showcase their personalities. This is exactly the kind of creativity the design world needs.

The reading also points out a major flaw in how we think about inclusivity in design. Universal design sounds great in theory, but trying to make one product fit everyone often dilutes its purpose. For example, overly adjustable furniture for kids with disabilities can end up alienating them instead of including them. Instead of trying to be “one size fits all,” designers should focus on creating multiple, simple solutions that truly meet the needs of different individuals. This isn’t about making disability invisible—it’s about making design human and the diversity that comes with it.

Exercise 1 – Moving Ellipse

EXERCISE 01: ARDUINO TO P5 COMMUNICATION 

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.

In our solution, the we used a photoresistor to detect the surroundling light level. The ball in the screen then moves to the left when it’s dark and to the right when it’s bright.

Please find the demonstration video here:

Exercise 1

Please find the p5.js sketch here 

let port, reader, writer;
let serialActive = false;

async function getPort(baud = 9600) {
  let port = await navigator.serial.requestPort();
  await port.open({ baudRate: baud });

  // create read & write streams
  textDecoder = new TextDecoderStream();
  textEncoder = new TextEncoderStream();
  readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
  writableStreamClosed = textEncoder.readable.pipeTo(port.writable);

  reader = textDecoder.readable
    .pipeThrough(new TransformStream(new LineBreakTransformer()))
    .getReader();
  writer = textEncoder.writable.getWriter();

  return { port, reader, writer };
}

class LineBreakTransformer {
  constructor() {
    this.chunks = "";
  }

  transform(chunk, controller) {
    this.chunks += chunk;
    const lines = this.chunks.split("\r\n");
    this.chunks = lines.pop();
    lines.forEach((line) => controller.enqueue(line));
  }

  flush(controller) {
    controller.enqueue(this.chunks);
  }
}

async function setUpSerial() {
  noLoop();
  ({ port, reader, writer } = await getPort());
  serialActive = true;
  runSerial();
  loop();
}

async function runSerial() {
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        reader.releaseLock();
        break;
      }
      readSerial(value);
    }
  } catch (e) {
    console.error(e);
  }
}

let rVal = 0; // Value from photoresistor

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

function draw() {
  background(245, 245, 200);
  fill(0);

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    text('Photoresistor Value = ' + str(rVal), 20, 50);

    // Map the sensor value to the x-position of the ellipse
    let xPos = map(rVal, 0, 1023, 0, width);
    fill(100, 123, 158);
    ellipse(xPos, height / 2, 50, 50);
  }
}

function keyPressed() {
  if (key == " ") {
    setUpSerial();
  }
}

function readSerial(data) {
  if (data != null) {
    let fromArduino = trim(data); // Remove any whitespace
    rVal = int(fromArduino); // Convert the string to an integer
  }
}

Please find the Arduino code here:

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
}


void loop() {
  // put your main code here, to run repeatedly:
  int sensorValue = analogRead (A2);
  Serial.println (sensorValue);
  Serial.write(sensorValue);
  delay (1);
}

EXERCISE 02: P5 TO ARDUINO COMMUNICATION 

Make something that controls the LED brightness from p5.

In our solution, we used an LED whose brightness changes according to the slider value.

• Please find the demonstration video here

Exercise 2

• Please find the p5.js sketch here 

let brightness = 0; 
let slider;

function setup() {
  createCanvas(400, 200);
  //make the slider
  slider = createSlider(0, 255, 127); 
  slider.position(10, 10);
  slider.style('width', '300px');

  let serialButton = createButton("Connect to Arduino");
  serialButton.position(10, 50);
  serialButton.mousePressed(setUpSerial);
}

//troubleshoot
function readSerial(data) {
  console.log("Received data:", data); // Log the received data to the console
}

function draw() {
  background(220);
  brightness = slider.value(); 
  fill(0);
  textSize(16);
  text(LED Brightness: ${brightness}, 10, 100);

  // Send brightness value to Arduino via Serial
  if (serialActive) {
    writeSerial(brightness + "\n"); // Append a newline character
  }
}

• Please find the Arduino code here:

int ledPin = 9; // PWM pin connected to LED

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);
}

void loop() {
  int bright;

  if (Serial.available() > 0) {
    bright = Serial.parseInt();
    analogWrite(ledPin, bright);
  }
}

EXERCISE 03: BI-DIRECTIONAL COMMUNICATION

Every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor.

• Please find the p5.js sketch here 

let port, reader, writer;
let serialActive = false;

async function getPort(baud = 9600) {
  let port = await navigator.serial.requestPort();
  await port.open({ baudRate: baud });

  // create read & write streams
  textDecoder = new TextDecoderStream();
  textEncoder = new TextEncoderStream();
  readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
  writableStreamClosed = textEncoder.readable.pipeTo(port.writable);

  reader = textDecoder.readable
    .pipeThrough(new TransformStream(new LineBreakTransformer()))
    .getReader();
  writer = textEncoder.writable.getWriter();

  return { port, reader, writer };
}

class LineBreakTransformer {
  constructor() {
    this.chunks = "";
  }

  transform(chunk, controller) {
    this.chunks += chunk;
    const lines = this.chunks.split("\r\n");
    this.chunks = lines.pop();
    lines.forEach((line) => controller.enqueue(line));
  }

  flush(controller) {
    controller.enqueue(this.chunks);
  }
}

async function setupSerial() {
  noLoop();
  ({ port, reader, writer } = await getPort());
  serialActive = true;
  runSerial();
  loop();
}

async function runSerial() {
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        reader.releaseLock();
        break;
      }
      readSerial(value);
    }
  } catch (e) {
    console.error(e);
  }
}


////////////////////////////////////////////////////////////

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


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);
  textSize(16);
}

function draw() {
  background(0);
  
  if (serialActive){
    wind.x = map(windSpeed, 0, 1023, -1, 1);
  }
  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity); 
  acceleration.mult(0);
  ellipse(position.x, position.y, mass, mass);
  console.log("Wind Speed: " + windSpeed); // For debugging

  if (position.y > height - mass / 2) {
    velocity.y *= -0.9; // A little dampening when hitting the bottom
    position.y = height - mass / 2;

    // Send signal to Arduino on bounce
    if (serialActive) {
      sendBounceSignal();
    }
  }

  if (!serialActive) {
    fill(255);
    text("Press SPACE to connect to Serial Port", 20, 30);
  } else {
    fill(0, 255, 0);
    text("Connected to Serial Port", 20, 30);
  }
}

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 == " ") {
    if (!serialActive) {
      setupSerial();
    } else {
      mass = 50;
      position.y = -mass;
      velocity.mult(0);
    }
  } 
}

async function setupSerial() {
  try {
    noLoop();
    // ({ port, reader, writer } = await getPort());
    
    port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });
    
    
    // Create a TextDecoderStream to decode incoming bytes to text
    const textDecoder = new TextDecoderStream();
    const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);

    // Create the reader to read from the decoded text stream
    reader = textDecoder.readable
    .pipeThrough(new TransformStream(new LineBreakTransformer())) // Optional: split data by lines
    .getReader();
    
    writer = port.writable.getWriter();
    serialActive = true;
    // Start reading data after successfully opening the port
    runSerial();
    loop();
  } catch (err) {
    console.error("Serial connection failed:", err);
    serialActive = false;
  }
}

function readSerial(data) {
  if (data != null) {
    let fromArduino = trim(data); // Remove any whitespace
    console.log(data);
    if (fromArduino !== "") {
      fromArduino = parseInt(fromArduino, 10);
      windSpeed = int(fromArduino); // Convert the string to an integer
      
    }
  }
}


async function sendBounceSignal() {
  try {
    if (writer) {
      await writer.write(new TextEncoder().encode("bounce\n"));
    }
  } catch (err) {
    console.error("Failed to send bounce signal:", err);
  }
}

• Please find the Arduino code here:

int ledPin = 13; // LED pin#
int sensorPin = A0;
int windValue;

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
  
}

void loop() {
  windValue = analogRead(sensorPin); // Read the sensor value
  Serial.println(windValue); // Send the value to the serial port
  // Serial.write(windValue);
  

  if (Serial.available() > 0) {
    String data = Serial.readStringUntil('\n'); // Read data until newline
    if (data == "bounce") {
      digitalWrite(ledPin, HIGH);
      delay(100); // Keep the LED on for 100ms
      digitalWrite(ledPin, LOW);
    }
  }
}

Concept

For my final project, I plan to create a game using Arduino and P5js. This game will allow user to use physical components (boxes, figures) in real life to control the game happening on the computer.

Particularly, I want to create a platformer game where player can alter the platforms or the obstacles. The physical components will include some card board boxes that looks like the platforms on the computer. When player moves these boxes or obstacles, the platforms on computer will also move. Based on this mechanism, I will design a few levels of puzzle for the player. The goal of the game is to move the boxes around so that the game character on the computer can get from one point to another.

An introductory or example of this game can be moving the boxes (2 different platforms) so that the game character can jump across.

In this week’s reading, the author studies and discusses the relationship between Style, fashion, and disability. One of the easiest and best examples of this that was given is in eyewear. Eyewear strikes the balance perfectly between showing off your style whilst being a tool of solving a problem of disability. The author believes that, even for larger forms of assitive products, such as legwear and armwear, there should be close attention payed to the aesthetics of these products. The author signifies the importance of product designs being inclusive, involving both designer and user. The aesthetics or design of a product should not be payed with any less attention to detail just because it is an assistive device. The author introduces the idea of universal design, in which the problems of accessibility and the needs and wants of a consumer is tackled. This reading helped me reflect upon the ideology that goes behind designing things, thinking about the intended audience and allowing not just a small population to be able to utilize a product.

For my Final project, I am still unsure of what I want to do. However, something came to mind that I think is a cool concept. I want to create an Interactive mood lamp with music integration.  So basically, the lamp changes colors and plays music based on the user’s actions and mood. The project will integrate the Arduino for a sensor-based interaction and P5 for a visual interface. For now I’m thinking of having 3 modes:

1. • Mode 1: Calm (ambient sounds and soft colors).
   • Mode 2: Party (dynamic colors and upbeat music).
   • Mode 3: Focus (single-color light with lo-fi beats).

For the P5 visualization, which I’m still unsure if I’ll keep it this way, I might do a real-time visualization of soundwaves and color patterns that mirrors the lamp’s output on a screen.

A mood lamp for your reference:

mood lamp

For the design im planning to do something similar. I want to input the LEDs from the Arduino inside, like a lamp jar, to give. the aesthetic of the mood lamp, I still need to look into this more and see if there are other ways to do this.