Category: F2023 – Mang

I want to create a color-mixing game. Using potentiometers that represent primary colors red, green and blue, players will have to match a presented color as closely as possible by tuning the RGB values. I will use some sort of a system or an equation to calculate a score as to how close to the target color the match is. The feedback would be instant, meaning that the color changes would appear at the same time the potentiometers are used. I think it would be nice to have multiple rounds, let’s say 5, which would progress in difficulty, and perhaps a time limit for each round. There would be a final score that could be used for the players to compete with each other. I believe that the game would be a valuable interactive experience in terms of providing a better understanding of color theory and enhancing visual perception.

I find it interesting how smooth was the transition of the perspective on the eyeglasses from the ‘sign of disability’ to a fashionable item. This idea became so popular because of the unique design and style of the eyeglasses that they are bought by people with no issue with eyesight just because they are fashionable, adding to the style and creating an overall image. Hence, eyeglasses became something that we don’t hide but rather emphasize in a stylish way, changing our view on disability as something we have to hide or be ashamed of. 

While reading the article, I started questioning whether the same approach can be applied to bigger items such as wheelchairs. Although for now there is not much to do for the design of the wheelchairs, their functionality is advancing day by day. However, it is not an absolute solution as not all the facilities in the urban and rural areas are made for wheelchairs. I feel like they consider themselves as people with disabilities mostly when there is a hardship in the movement in the city as not everything is made accessible. Therefore, I believe that not only the design of the items for accessibility should be improved, but also the things all around should be designed to be accessible. 

Although the transition for other items is not as fast as with the eyeglasses, I appreciate the work of designers in trying to make other disability items through the changes in the design of the items, raising awareness about their normality in the magazines, etc.

Growing up, I used to love playing with pinball machines in malls and carnival parks, so I would like to recreate the same fun that I had as a kid in my final project. My concept revolves around replicating a traditional pinball machine using Arduino and P5.js. By combining the power of Arduino and P5.js, I will be able to create a physically and digitally interactive pinball game, and I hope to bring the joy and challenge of playing pinball into a more modern and unique setting.

Through switches that control the flippers on P5.js, users will have the objective of scoring as many points as possible before losing the ball, just like in a classic arcade setting, being able to mimic the experience of playing a pinball machine. Many dynamics could be added to the game, and I am excited to explore sensors that I could potentially use.

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.