Category: F2023 – Mang

Exercise 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

Using the ultrasound sensor, the circle moves horizontally on the canvas.

Video: exercise_1_week_11

 

Arduino code:

#define echoPin 2
#define trigPin 3


long duration;
int distance;


void setup() {
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
Serial.begin(9600);


}


void loop() {
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
duration = pulseIn(echoPin, HIGH);


// Calculate distance in centimeters
distance = duration * 0.034 / 2;


Serial.println(distance); // Print distance in centimeters
delay(100); // Delay for stability
}

Exercise 2: make something that controls the LED brightness from p5. 

The LED brightness is controlled by the vertical distance of MouseY and the top of the screen. The higher the distance the brighter the LED. So, when the user drags the ellipse from the top to the bottom of the canvas, the brightness of the LED increases proportionally and vice versa.

Video: exercise_2_week_11

Arduino code:

//exercise 2, week 11, controlling the brightness of LED with p5.js
//Diana and Buka
// Output:
// - 5 - LED

const int ledPin = 5; //the LED pin is at 5

void setup() {
 // Start serial communication so we can send data
 // over the USB connection to our p5js sketch
 Serial.begin(9600);
 // use the builtin LED as a status output.
 pinMode(LED_BUILTIN, OUTPUT);
 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
   // reading the integer value, confirming that the next character is a new line and sending confirmation 1
   int brightness = Serial.parseInt();
   if (Serial.read() == '\n') {
     delay(5);
     Serial.println("1");
   }

   // LED brightness is set accordingly
   analogWrite(ledPin, brightness);
 }
 digitalWrite(LED_BUILTIN, LOW);
}

Exercise 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

The LED is on when the ball is on the ground / hits the ground when bouncing. And the ball can be controlled by the potentiometer to move left and right.

Video: exercise_3_week_11.mov

Arduino code:

const int LED_PIN = 3;
const int SENSOR_PIN = A2;


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


// Test the LED
digitalWrite(LED_PIN, HIGH);
delay(500);
digitalWrite(LED_PIN, LOW);
}


void loop() {
int p_value = analogRead(SENSOR_PIN); // read from the potentiometer
int move = map(p_value, 0, 1023, -1, 2); // map the value to -1, 0, and 1
Serial.println(move);


if (Serial.available() > 0) {
// read from p5.js
int touch = Serial.parseInt();
// set the LED command
if (touch == 1) {
digitalWrite(LED_PIN, HIGH);
} else {
digitalWrite(LED_PIN, LOW);
}
}
}

Horse Race

Concept: Historically, Kazakhs are nomadic people, migrating from one place to another every season of the year. Because of this, we have many national games and traditions connected with horse riding. I would like to connect my final project with one of the Kazakh national games called Båige, which means competition in horse riding. The people compete with each other in horse riding, so the winner is the person who comes first to the finish line. Throughout the game, there might be several barriers the equestrians should successfully overcome. In my game, I would like to make four lines with the appearing barriers. The user is going to be the equestrian on the horse, who should overcome the obstacles, which will speed up by the time. In addition to that, I would like to add the Kazakh national music as the background sound playing throughout the game. 

The technical implementation: On the p5.js screen, there are going to be four lines with the appearing obstacles and the image of the equestrian. In front of the user, there are going to be four squares, each representing the line of the game. I will stick the aluminum to the base of the figure of the equestrian, so that when the user taps the equestrian on the square, the aluminum connects the wires, completing the circuit. In other words, when the equestrian figure taps the first square, the first circuit is completed, indicating to the p5.js that the equestrian is on the first line. 

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 exercise, I kept the arduino code the same as the one in the example and I expanded on the p5js code in the example to include input from the potentiometer on the arduino. Different values of the potentiometer are mapped to the x coordinates of the ellipse. This makes it move across the horizontal axis in the middle of the screen. 

/* Week 11.2 bidi serial example
 * Originally by Aaron Sherwood
 * Modified by Mangtronix
 * Modified further by Mirette Dahab
 *
 * Add this library to Sketch files
 *  https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/code/p5.web-serial.js files
 *
 * You must include this line in your index.html (in Sketch Files) to load the
 * web-serial library
 *
 *     <script src="p5.web-serial.js"></script>
 *
 * Arduino code:
 * https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/code/Week11Serial.ino
 */

let Y = 0;
let X = 0;
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

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

function draw() {
  // one value from Arduino controls the background's red color
  background(255);
  fill(255,0,0);
  ellipse(map(X, 0, 1023, 0, width), 220, 100);

  // the other value controls the text's transparency value
  // fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } 


  // click on one side of the screen, one LED will light up
  // click on the other side, the other LED will light up
  if (mouseIsPressed) {
    if (mouseX <= width / 2) {
      left = 1;
    } else {
      right = 1;
    }
  } else {
    left = right = 0;
  }
}

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 == 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
      Y = int(fromArduino[0]);
      X = int(fromArduino[1]);
    }

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = left + "," + right + "\n";
    writeSerial(sendToArduino);
  }
}

2. make something that controls the LED brightness from p5

for this exercise, I created a short program that allows the user to control the brightness by moving the mouse around the screen, each area in the screen has a different brightness value assigned and the value is sent to the arduino to light up the led as expected.

p5js:

let brightnessVal= 0;

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

function draw() {//control the brightness value according to the placement of the mouse on the x axis
  if(mouseX >= 0 && mouseX <= 100){
      brightnessVal = 0;
  }else if(mouseX > 100 && mouseX <= 200){
      brightnessVal = 50;
  }else if(mouseX > 200 && mouseX <= 300){
      brightnessVal = 150;
  }else if(mouseX > 300 && mouseX <= 400){
      brightnessVal = 250;
  }
  // console.log(brightnessVal);
}

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

function readSerial(data) { //sends data to arduino
  let SentData = brightnessVal + ", \n";
  writeSerial(SentData);  
}

arduino:

const int RedledPin = 5;  // assign the pin for the LED

void setup() {
  pinMode(RedledPin, OUTPUT);
  Serial.begin(9600);// Start serial communication
}

void loop() {
  Serial.println("sensor");
  if (Serial.available() > 0) {  // Check if data is available from p5.js
    int brightnessVal = Serial.parseInt();   // Read value from p5.js
    analogWrite(RedledPin, brightnessVal);
  }
}

3.take the gravity wind example (https://editor.p5js.org/aaronsherwood/sketches/I7iQrNCul) 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, I extended the example given by creating an OnOff variable that would store whether or not the ball is hitting the ground or not and sending it to the arduino to control the LED. I also read input from the potentiometer and stored it in the wind.x variable so that it controls the wind.

p5js:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let OnOff = 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(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(position.y == height-mass/2 && (velocity.y > 0.5 || velocity.y < -0.5)){ 
    OnOff = 1;
  }else{
    OnOff = 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 == UP_ARROW) {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
  if (key==' '){
    mass=random(15, 80);
    position.y=-mass;
    velocity.mult(0);
  }
}

function readSerial(data) {

  if (data != null) {
    wind.x = data ;
    let sentData = OnOff + "\n";
    writeSerial(sentData);
  }
}

Arduino:

int ledPin = 5; 
int Potpin = A1;

void setup() {
  // Start serial communication so we can send data
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT); //set led for output
  pinMode(Potpin, INPUT);//set potentiometer for input
}

void loop() {
  int windsensor = analogRead(Potpin);//read data from the potentiometer
  int wind = map(windsensor, 0, 1023, -2, 2);
  delay(10);
  if (Serial.available() > 0) { //read data from p5js
    int Val = Serial.parseInt();
    digitalWrite(ledPin, Val);
  }
}

The idea is to create an interactive car simulator that combines P5 and Arduino. Users will be able to simulate driving a car on a computer screen by using physical gestures detected by Arduino sensors. I would like to incorporate features such as LEDs and a horn into the system using sensors. The system aims to provide an engaging and interactive experience, where users can control various aspects of the virtual car’s behavior through their movements. Users can control the virtual car using physical gestures detected by sensors connected to Arduino. This project emphasizes careful and timely sensing of the user’s actions, translating them into responsive and engaging interactions within the virtual car simulation. The goal is to create an immersive experience that involves a dynamic exchange between the user and the simulated car, making the interaction enjoyable and interactive.

I was glad to read about the topic of design in the context of disability and how it has historically been approached with a focus on discretion rather than aesthetics or even functionality. I found the discussed collaboration between athlete and model Aimee Mullins and designer Alexander McQueen to be beautifully inspiring. It highlights the power of design and how it can be used to transform something that is considered a pitied disadvantage into an element of individual identity. It opens a completely new direction, one that values empowerment and personal expression rather than the wish to blend in and the strive for “normal”.

As we go deeper into this evolving conversation about design and disability, I’m left wondering about the potential effects on societal perceptions. How might a more widespread acceptance of visually expressive assistive devices lead to a more inclusive sense of beauty and ability? Can collaboration between designers and people with disabilities pave the way for a cultural shift towards celebrating uniqueness rather than conforming to preconceived norms? Storieslike the one of Aimee Mullins and Alexander McQueen invite to consider the transforming role of design not only in the lives of persons with disabilities, but also in constructing a more inclusive and welcoming society that celebrates the complexity of individual experiences.

Concept)
I still haven’t fully decided what I want to do for my final project, but I plan to have the main concept as ‘screaming.’ I created a game that required the player to scream and I really liked the concept. One thing I regret from last project is that if I made it so that the player would have to continue screaming in order to make the game playable (i.e. slower the speed), it would’ve made more sense. I think trying this approach in my final project would be nice.

I have two different types (still very general ideas) in mind.

One is a game that would have the goal of attacking (like aircraft wargame). In this case, I think I’ll give a gauge that can be filled up by screaming. Once the gauge is full, the player will be able to press the force sensor to use a booster. When this booster is used, the player will become invincible like players in mariokart when they have used starman (refer to the video below).

Second type is a more challenge-focused game without attacks. One example can be puzzle bubble. Also in this concept, I’ll have a gauge that makes the player scream. When the gauge is full, the player will be able to punch (or press) on the fore sensor. This will work as special item such as clearing 3 lines etc.

Although I’m still thinking about the general structure of the game, I have decided that I will make use of ‘screaming’ and ‘force sensor’ as the main theme of my game. By punching the force sensor, I mean something like below:

Implentation)

I think the first thing to do would be to get the general structure of the game decided. After that, I will decide how to make it clear that there’s a strong incentive for the player to scream and punch. I will first test simple codes with the sensors (arduino) separately, the p5js part separately, and then combine the two parts.

I really liked the approach of the reading. I think until now, based on the readings we’ve had, most of my  discussion on these posts and in class have been from a perspective that design tends to focus on a certain group of people- usually, the healthy and the capable. I remember multiple discussions I had with my classmates in our in-class discussion how different designs and pursuits of certain designs tend to leave out the minority. We had a shared emotion that this may be logical (from a company  or designer’s point of view) but such a sad downside of designs that pursue convenience or attractiveness.

I think this reading really makes us ask ourselves if really, a pursuit of something in a design means a give-up in other factors of a design, and if that’s ideal. One topic the reading looks at discretion and fashion. It talks about how they are concepts with tension, but not the opposite. I feel like there are some factors that we take to blindly think are at opposite ends and a pursuit of one means we would need to give up the other. I think as designers, one of our role is to realize such factors that are actually not at opposite ends and figure out how a design can pursue both (although there would be tension between them).

For the final project of this class, I have a lot of vague ideas but need to decide on one based on its practicality! I know what I want to use for the project but I’m trying to figure out if I want to make that in an interactive game form or an art form. Either an interactive art that takes input from the arduino through different body movements or a game that works on the same mechanism.

Things that I’m sure of:

1. Including the whole body as a part of this as after the readings from this class, one of my biggest takeaways has been using the entire body or atleast just more than hands for creating an immersive experience.
2. I want to try to use flex and force sensors since I’ve never had a chance to use them for the weekly assignments yet
3. I’m a person who has the shortest attention span and loses interest very quickly so I want to make something that is long lasting fun and not something that looses it charm after 2 minutes.

For my final project, I envision creating an immersive and interactive experience, a collaborative music jam that seamlessly combines Arduino gesture sensors with P5.js to transform hand movements into a dynamic and expressive musical journey. It will invite participants to engage in a unique music jam session where their gestures become the driving force behind the creation of a harmonious ensemble. Leveraging Arduino gesture sensors, the system will capture the nuances of users’ hand movements, translating them into musical notes or instrument selections in real-time through the P5.js environment.