Final project User testing

Video: 

IMG_4223

 

User testing analysis: 

The basics of my project were easily understood by users, without needing much instructions, they all understood that the buttons corresponds with the graphics that are shown on p5. There was nothing that particularly confused them regarding the mapping of the controls and the experience. However, the drum selection dropdown was mostly ignored by everyone that I have shown the project to. I felt the need to tell the users that that was a feature that was built in, so I think i can improve on making it more clear to the users that the dropdown menu is available on for them choose different drum kits from.

 

 

 

Final project final concept

Concept:

Drum pad/ machine, that takes inputs in the form of buttons an doutputs sound.

P5.js:

Responsible for the output of sound, the selection of sounds, and shows a digital layout of the drumpad, with the names of each drum on top of the corresponding pads.

Arduino:

Will send serial data for each button press. Each button will also light up when it is pressed. 

Progress: 

The p5 sketch has the general layout of the drum pad, loaded with 2 sets of drums. On the Arduino side, I have programmed button presses and the light up sequence for each corresponding button.

A CAD of the case has also been made to be 3D printed.

Week 11 Assignment

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.

P5 code: https://editor.p5js.org/lj2369/full/dO1bxX9t_

let ellipseX = 0; //x value of ellipse to be changed by potentiometer
let B =0;

function setup() {
  createCanvas(640, 480);
  ellipseMode(CENTER);
}

function draw() {
  clear();
  background(0)
  fill(255,0,B);
  ellipse(ellipseX, height/2, 50, 50);


  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);  
    // Print the current values
    text('ellipseX = ' + str(ellipseX), 20, 50);
  }
}

function keyPressed() {
  if (key == " ") {
   
    setUpSerial(); //establish serial communication
  }
}

function readSerial(data) {  
  if (data) {    //run only if data is received
    data = data.trim(); // Remove any whitespace
    if (!isNaN(data)) { //check whether data is a number or not
      //debug: console.log("Received:", data);
      ellipseX = int(data);
    }
  }
}

the location of the x of ellipse is being altered by the potentiometer

Arduino ide: https://github.com/lonussss/Intro-to-IM/blob/main/week11exercise1.ino 

 

int sensor = A0; 

void setup() {

  Serial.begin(9600);


 
}

void loop() {
      int sensorValue= analogRead(sensor);
      int mappedValue = map(sensorValue,0,1023,0,640); //mapped value to size of canvas
      Serial.println(mappedValue); //send value to p5.js
  }

The value from the potentiometer is mapped between 0 and 640, the width of the canvas.

Utilizing a Potentiometer, the ellipse moves along the horizontal axis, while also changing colors by making changes to the B value of fill.

 

Demonstration:

IMG_3526

 

EXERCISE 02: P5 TO ARDUINO COMMUNICATION

Make something that controls the LED brightness from p5.

P5 slider to control LED brightness

P5: https://editor.p5js.org/tinganyang/sketches/oFcyYfJaa

let slider;
let brightness = 0;
function setup() {
  createCanvas(400, 400);
  // Create a brightness slider
  slider = createSlider(0, 255, 128);
  slider.position(width/2, height/2);
  slider.style('width', '100px');
}
function draw() {
  background(255);
  if (!serialActive) {
    textAlign(CENTER)
    text("Press Space Bar to select Serial Port", width/2, height/3);
  } else {
    text("Connected", width/2, height/3);
  }
  brightness = slider.value();
}
function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}
function readSerial(data) {
  console.log(data);
    let dataToSend = brightness + ", \n";
    writeSerial(dataToSend);  
}

A slider is created and data from it is sent to the arduino.

Arduino: https://github.com/Ting-AnYang/Intro-to-IM/blob/ebd695cde4ece4858599434e4cc13a205d2b5aef/Week11%20Exercise%202.ino

const int ledPin = 9;  
void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}
void loop() {
  Serial.println("sensor");
  if (Serial.available() > 0) {
    int brightness = Serial.parseInt();
    brightness = constrain(brightness, 0, 255);
    analogWrite(ledPin, brightness);
  }
}

Based on the input from the p5 sketch, the LED’s brightness is adjusted accordingly.

Demonstration:

IMG_8413

EXERCISE 03: BI-DIRECTIONAL COMMUNICATION

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

 

Using a potentiometer mapped from -2 to 2, when the potentiometer is towards the left, the wind blows towards the left, and vice versa. The LED lights up every time the ball touches the bottom edge of the canvas.

P5: https://editor.p5js.org/lj2369/full/EbBBWKl0S

function draw() {
  background(255);
  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;
    
    
    if(serialActive){
      writeSerial("bounced\n");
    }
    }
  // Check for collisions with the left wall
  if (position.x < mass / 2) {
    velocity.x =0; // Reverse horizontal velocity (bounce)
    position.x = mass / 2; // Correct position
  }

  // Check for collisions with the right wall
  if (position.x > width - mass / 2) {
    velocity.x =0; // Reverse horizontal velocity (bounce)
    position.x = width - mass / 2; // Correct position
  }
}

f

function readSerial(data){
  
  if (data != null){
    wind.x=int(data);
    console.log("working");

  }
}

A serial signal is sent to arduino everytime the ball touches the bottom of the canvas, resulting in the led to light up on the arduino. The potentiometer’s value will be reflected in the direction that the wind is blowing on the ball. I also added two walls on the right and left sides of the canvas, to prevent the wind from blowing the ball outside of the canvas.

Arudino: https://github.com/lonussss/Intro-to-IM/blob/main/week11exercise3.ino 

 

int ledPin = 8;       // Pin connected to the LED
int sensorPin = A0;   // Pin connected to the analog sensor
String inputString = "";  // String to accumulate incoming serial data
bool stringComplete = false; // Flag to check if a full command is received

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

void loop() {
  

  while(Serial.available()){
    String bounced = Serial.readStringUntil('\n');  //read serial string until new line
    if(bounced == "bounced"){
      flashLED();
    }
  int sensorValue = analogRead(sensorPin); // Read the analog sensor value
  int mappedValue = map(sensorValue, 0, 1023, -3 ,3);  // Map the sensor value to a range (-3 to 3)
  Serial.println(mappedValue); // Send the mapped value to p5.js
  }

  

}

void flashLED() {
  digitalWrite(ledPin, HIGH); // Turn LED on
  delay(100);                 // Keep LED on for 100 ms
  digitalWrite(ledPin, LOW);  // Turn LED off
}

There’s a function called flashLED which flashes the led 100ms whenever the ball touches the bottom of the canvas. The potentiometer is mapped between -3, and 3. The input will be reflected on the wind in p5.

Demonstration:

IMG_3537

Week 11 Reading Reflection

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.

Final Project Ideas

Concept: 

Similar to part of my midterm project, I want to create another drum machine. However, instead of it being automated, I hope to create a drum machine that is based on human input.  The project would consist of audio and visual elements on the p5 side, and buttons, as inputs that activate the drum sounds on the arduino side.

Inspiration: 

Akai MPC Studio 2

I wish to use arduino, connected to buttons, which would activate the sounds that play through p5.js. I hope to utilize arcade style buttons, housed within a 3D printed, cardboard, or wood housing.  Leapiture Arcade Buttons, 5pcs Arcade Game Buttons Game Buttons 5V 12V With Professional LED Lighting Built-in Switch For Arcade Machine Games Parts ...

The project would be engaging, allowing participants to actively create new drum beats.

Week 10 Assignment: instrument

Concept

For this assignment, we were inspired by the toy pianos that we’ve all played with at least a few times as children. These toys were often quite limited, as they only had enough space to accommodate the keys for a single octave. We decided to create a miniature piano that could play the notes from C to A, with a knob that can be turned to change octaves.

Setup and Code

We set up a row of buttons that play a note when pressed, a potentiometer that changes the octave, and a switch that switches the notes to their respective sharp notes.

We created arrays that store the frequencies of the natural notes across seven octaves, doing the same for the sharp notes. The range of the potentiometer is mapped to a range of 0-6 and determines which octave the notes will be played in. When the switch is low, natural notes are played, and vice versa.

To prevent the notes from continuously playing, the noTone() function stops the buzzer playing any sound when no button is pressed.

Full code on Github

if (buttonState7 == LOW && buttonState6 == LOW && buttonState5 == LOW && 

    buttonState4 == LOW && buttonState3 == LOW && buttonState2 == LOW) {

  noTone(8);  // Stop any tone on pin 8

}

 

Open photoDemo

Vid link

Reflection

Overall, this group project was a success as we managed to recreate our inspiration using Arduino. We were really satisfied with how we made sure to implement the natural notes as well as sharp notes in our project. A few struggles we faced was that the wires and resistors were really crowded on our small breadboards, making it a little difficult to reach the buttons. Ideally, we would want to get bigger breadboards in the future so that there would be more room for interacting with the product. Additionally, the bread board was just a little too small for us to add the 7th natural note, so we could only fit 6, as we’re missing a B note. 

In the future, we would like to add two different colored led lights that switch on and off along with the natural or sharp notes. This way, it would help users know if they are currently playing natural or sharp notes, as not everyone is familiar with musical notes in that sense. 

 

Week 10 reading reflection

A Brief rant on the Future of Interactive Design 

In this reading, the author voices his frustrations with current and future visions of input devices being centered on touch screens, or as he calls it Picture Under Glass. I aggree with the authors frustrations with ordinary objects moving to become less tactile and moving to resemble touch screens. For example, many new induction stoves utilize touch capacitive buttons, which become quite unresponsive when you’re cooking and have greasy fingers. Much of the “innovations” for the future now are fixing problems that were non-existent to begin with. As the author said, our hands and fingers can do much more than just touch and swipe, which is the only thin a touch screen allows us to do. What we need to innovate is a way to utilize more than this basic motion, to create technology that is able to make use off the various other features that our hands are capable of.

Responses: 

The author acknowledges that no solution is possible with the current state of our technology, however, what he is trying to tell us is that our hands are capable of much more, and instead of “improving” everything by transitioning to touch screen interfaces, we need to aim to keep the tactile sensations that we are much used to and are much more used to.

 

Week 9 assignment

Code Link: 

https://github.com/lonussss/Intro-to-IM/blob/main/week9_assignment.ino

Concept:

My concept for this week’s assignment was pretty simple, I wanted a button activated LED to power trigger another LED, that is triggered by a light sensor.

Code Highlight:

void loop() {
  // put your main code here, to run repeatedly:
int buttonState = digitalRead(A1);
int sensorValue = analogRead(A2);

if (buttonState == HIGH )
{
  digitalWrite(13, HIGH);
  //Serial.println("button pressed");
} else{
  digitalWrite(13, LOW);
  
}


sensorValue = constrain(sensorValue, 300,350);

brightness = map(sensorValue,300,350,0,255);
Serial.println(sensorValue);

analogWrite(redLed,brightness);

delay(30);
}

the loop part of the codes holds the code for both the digital button-activated led, and the light sensor led. I had adjusted the sensor values to vary between 300 to 350, since that was magnitude of change that I had observed through the serial monitor that the LED had on the environment.

Video Demonstration: 

IMG_3353 2

Problems fixed and future improvements:

I initially just had the led wired, however, the light sensor was inconsistent in detecting a different of whether the led was turned on or not, so I had to improvise a bit a built a little paper tent to go over the button activated led and the light sensor, doing this allowed the light sensor to clearly detect a change in the brightness of the environment.

Although I have 2 leds now, some future improvements to make this more useful would be connecting something else like a motor or speaker to the light sensor, so that the button pressed could affect more things and not just 2 leds.

Week 9 reading

Making Interactive Art: Set the stage then shut up and listen

I think the author makes a very important distinction between traditional art pieces and interactive art pieces by bringing up the importance of user interpretation within interactive pieces. When it comes to art, we would often want the viewers and users to have the same takeaways as we did when creating the project, however, the thing that sets interactive works apart is its ability to allow interpretation from people experiencing the piece instead of just being viewers of a story that is being told solely from the perspective of the artist. The essence of interactive works may be lost when we try to force 1 singular interpretation for it.

Physical Computing’s Greatest Hits (and misses)

The Article introduces many different hardware for physical computing which was very interesting to read about.  Each piece of hardware offered a different type of interaction between human and computers. For example, floor pads implemented buttons that you step on, much like arcade games like Dance Dance Revolution. The project Things to yell at is also very interesting to me. In general projects that is reactive and implements sounds are all fascinating to me, you hear things everyday, and its interesting to see how that is visualized.

 

Week 8 Unusual Switch

Code Link:

https://github.com/lonussss/Intro-to-IM/blob/25ad7a56cd164118742c7f7bec29d9868ff476be/unusual_switch.ino

Concept: 

This idea is distantly inspired by how cars warn you when your seatbelt is not attached. I was inspired by the concept of leds lighting up or not lighting up based on humans interactions with chairs.

How I proceeded was adapting the code and circuit from the in-class example to fit my needs. I replaced the switch with 2 wires attached to 2 pieces of tin-foil, one attached to my chair, and one attached to my shirt.

The LED lights up when i lean back on my chair, and turns off when I’m not leaning back on my chair.

IMG_3267

Code Highlights: 

The code that controls the output pretty much is the same as the in-class exercise, where when the circuit is connected, the led lights up, and when it is closed, the led dims.

int buttonState = digitalRead(A2);

if (buttonState == HIGH) {

digitalWrite(13, HIGH);

} else {

digitalWrite(13, LOW);

 

Improvements: 

Currently, I’m using 2 pieces of tin foil loosely attached to my shirt and to my chair, for the future, something like this could be implemented with a pressure sensor of sorts, where it can determine how much pressure I am applying on the chair, which could affect the brightness of the LED. This would not only be better in terms of not needing conductive material but it also increases functionality.
Continue reading “Week 8 Unusual Switch”