Author: Youssef Aouni

Background :                                                                                                                                      After we learnt about the future of design and having read the rant on the future of interaction design by bret vector. I started thinking deeper about the concept of interactivity and how we as the future generation of designers and technologists can design innovative and authentic interaction experiences that differ from the “glass screen”.

Solution:                                                                                                                                     Using a different interactive gadget that allows the user to immerse in a designed universe without using their fingers or hands!

Using electrodes would allow the detection of EMG signals of the muscle and that will make it possible to use “muscle flexes” as input that can be detected, transferred and used as main input in the final product..         Concept:                                                                                                                                     My idea is to create an interactive P5 video game that is based on a retro style game such as ( Racing games, Tetris or even flappy bird). I would like to use the Backyards brain product( Arduino+Shield+ Electrodes) and combine that with p5, where the video game/ virtual environment will be created. I might also develop another game that some how incorporate muscle flexes to commit some sort of action in the game/ virtual environment.

Arduino:                                                                                                                                            Other than the Arduino circuit, shield and the electrodes already provided. I would like to incorporate a buzzer and LEDs that will allow to add a visual and a sonic signals to the game making it more immersive and adding another layer to the game by including sound and light signals that depend on the either the strength or the length of the flex. The EMG detected signals will then be transferred by the Arduino to the p5 which will cause certain actions to happen in the game

P5:                                                                                                                                                        As I mentioned above the P5.js side of the project will probably be a game based on either a retro style game or another game that requires repetitive action such as flappy bird or bounce ball.

Issues:                                                                                                                                                   I would like to make the game very responsive so I need to check that the hardware and the P5.js game are both at tune so that the game does not lag when the EMG signal has not been detected.

 

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.

P5 link:   https://editor.p5js.org/Arslan108/sketches/DVc3r1-YY            Arduino script:

// defines pins numbers
const int trigPin = 9;
const int echoPin = 10;
// const int ledPin = 3;
// int duty = 10;
// defines variables
long duration;
int distance;
void setup() {
  pinMode(trigPin, OUTPUT); // Sets the trigPin as an Output
  // pinMode(ledPin, OUTPUT); // Sets the trigPin as an Output
  pinMode(echoPin, INPUT); // Sets the echoPin as an Input
  Serial.begin(9600); // Starts the serial communication
}
void loop() {
  // Clears the trigPin
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  // Sets the trigPin on HIGH state for 10 micro seconds
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  // Reads the echoPin, returns the sound wave travel time in microseconds
  
  duration = pulseIn(echoPin, HIGH);
  // Calculating the distance
  distance = duration * 0.034 / 2;
  // Prints the distance on the Serial Monitor * 0.034 / 2
  // analogWrite(ledPin, duty);
  Serial.println(distance);
  delay(150);
}

The Ball class defines the properties and methods for the ball, including its position, velocity, and radius. The update() method updates the ball’s horizontal position and velocity according to the gravity, bounce factor, and the sensor value that is taken from the ultrasonic distance sensor. The show() method is responsible for displaying the ball on the canvas.

Exercise2: Make something that controls the LED brightness from p5

P5 link: https://editor.p5js.org/Arslan108/sketches/rSn6NmdHy.                         Arduino script:

int ledPin = 3;


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

}

void loop() {
  while (Serial.available()) {
    // digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data

    int duty = Serial.parseInt();
    if (Serial.read() == '\n') {
      analogWrite(ledPin, duty);
    }
 

}
}

The code allows the control the intensity of the light emitted by the LED depending on the Y coordinate of the mouse. The higher the Y-coordinate is the brighter the LED is.

Exercise 3: Make something that controls the LED brightness from p5.

P5 link: https://editor.p5js.org/Arslan108/sketches/yhLl1hYsD.                                      Arduino script:

// defines pins numbers
const int trigPin = 9;
const int echoPin = 10;
const int ledPin = 4;
// int duty = 10;
// defines variables
long duration;
int distance;
void setup() {
  pinMode(trigPin, OUTPUT); // Sets the trigPin as an Output
  pinMode(ledPin, OUTPUT); // Sets the trigPin as an Output
  pinMode(echoPin, INPUT); // Sets the echoPin as an Input
  Serial.begin(9600); // Starts the serial communication
}
void loop() {
  // Clears the trigPin
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  // Sets the trigPin on HIGH state for 10 micro seconds
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  // Reads the echoPin, returns the sound wave travel time in microseconds
  
  duration = pulseIn(echoPin, HIGH);
  // Calculating the distance
  distance = duration * 0.034 / 2;
  // Prints the distance on the Serial Monitor * 0.034 / 2
  int duty = Serial.parseInt();
    if (Serial.read() == '\n') {
      digitalWrite(ledPin, duty);
    }
  Serial.println(distance);
  delay(150);
  // digitalWrite(ledPin, low);
}

We have kept the code form exercise 1 but we have added the lines that send the light up order to the LED, every time the ellipse get in contact with the right or the left borders of the canvas.

let sendToArduino = light + "\n";
writeSerial(sendToArduino);
light = 0;

 

Music Machine:

The ultimate surprise party gadget. I have had this idea after my friend’s surprise birthday party. This gadget detects when the person passes in front of the ultrasonic motion sensor and automatically plays the famous birthday song tune and lights up three LEDs that create the festive vibes. The music machine also played a different tune depending on where the detected person (or teddy bear) is situated. Thus, the gadget will play different tune depending on the where the person is. This allows the music machine to keep playing different melodies throughout the party and set the party mood.

circuit :

the circuit includes ultrasonic motion sensor, buzzer, 3 LEDs, 3 resistors, variable resistor, Arduino uno.

I have included the variable resistor as it allows to adjust the volume of the buzzer. The LEDs are wired in parallel as it allow to for the LEDs to light up alternatively and create a light pattern. The diagram below describes all the wiring in the circuit:

Arduino script:

The biggest challenge I found while setting the script was making the LEDs light up simultaneously as the buzzer is on, but also creating some sort of pattern when the LED light up. I ended up solving that problem by creating a function Playtune() that gets called from inside the void Loop(). This allows both tasks to be done with interfering with each other.

int trig = 10;
int echo = 11;
long duration;
long distance;

// Define the LED pins
int led1 = 6;
int led2 = 7;
int led3 = 8;

// Define the Happy Birthday tune
int tune1[] = {264, 264, 297, 264, 352, 330};
int tune2[] = {264, 264, 297, 264, 396, 352};
int Newtune[] = {392, 330, 330, 349, 392, 392, 392, 440, 392, 349, 330, 294};


int tune1Length = sizeof(tune1) / sizeof(tune1[0]);
int tune2Length = sizeof(tune2) / sizeof(tune2[0]);
int NewtuneLength = sizeof(jaws) / sizeof(Newtune[0]);

void lightUpLed(int led, int duration) {
  digitalWrite(led, HIGH);
  delay(duration);
  digitalWrite(led, LOW);
}

void playTune(int tune[], int tuneLength) {
  for (int i = 0; i < tuneLength; i++) {
    tone(12, tune[i]);
    
    // Light up the LEDs in a rhythmic pattern
    lightUpLed(led1, 150);
    lightUpLed(led2, 150);
    lightUpLed(led3, 150);

    noTone(12);
    delay(50);
  }
}

void setup() {
  pinMode(echo, INPUT);
  pinMode(trig, OUTPUT);
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
  pinMode(led3, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  digitalWrite(trig, LOW);
  delayMicroseconds(2);
  digitalWrite(trig, HIGH);
  delayMicroseconds(10);
  digitalWrite(trig, LOW);
  duration = pulseIn(echo, HIGH);
  distance = (duration / 2) * .0344;    // 344 m/s = speed of sound. We're converting into cm

  if (distance > 0 && distance <= 35) {
    if (distance <= 15) {
      playTune(tune1, tune1Length);
      playTune(tune2, tune2Length);
    } 
    else {
       playTune(Newtune, NewtuneLength);
    }
  }
}

 

Concept:                                                                                                                                     For this project I wanted to create the flashing lights of police cars. Using the two buttons the user can either turn on the red LED or the blue one. While when both buttons are pressed both LEDs starting flashing rapidly creating the same visual effect as a police car or an ambulance.

Equipment:                                                                                                                                       In this project I have used two red and blue LEDS, two push buttons, 4 resistors. Using the resistors is important not to just protect the LEDS but also they are necessary to protect the Arduino board and avoid creating a short circuit between the button, the pins 3 and 4 and ground.

Here is the design of the circuit:

ARDUINO SCRIPT:

const int ledPin1 = 7;
const int ledPin2 = 4;
const int buttonPin1 = 2;
const int buttonPin2 = 3;

const long rapidInterval = 100; // 100ms interval for rapid flashing

void setup() {
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
  pinMode(buttonPin1, INPUT_PULLUP);
  pinMode(buttonPin2, INPUT_PULLUP);
}

void loop() {
  byte buttonState1 = digitalRead(buttonPin1);
  byte buttonState2 = digitalRead(buttonPin2);

  if (buttonState1 == LOW && buttonState2 == LOW) {
    rapidFlash();
  } else {
    digitalWrite(ledPin1, buttonState1 == LOW ? HIGH : LOW);
    digitalWrite(ledPin2, buttonState2 == LOW ? HIGH : LOW);
  }
}

void rapidFlash() {
  digitalWrite(ledPin1, HIGH);
  digitalWrite(ledPin2, HIGH);
  delay(rapidInterval);
  digitalWrite(ledPin1, LOW);
  digitalWrite(ledPin2, LOW);
  delay(rapidInterval);
}

 

Inspiration:
The inspiration for Star Shooter comes from a variety of sources, including classic arcade games like Space Invaders and Galaga, as well as more modern games like Geometry Wars and Asteroids. These games typically involve shooting at large moving targets, often with a spaceship or other vehicle as the player’s avatar. The use of space-themed graphics, such as stars and comets, and the inclusion of a timer and score system are also one of the common features of shooting games. The game draws inspiration from science fiction movies and TV shows, which often depict space battles and laser gun fights.

Features and challenges:

One of the main features of the game is that it uses object-oriented programming to create dots and bullets that move around the screen. I had to use arrays to hold all of the dots and bullets, and I spent a lot of time making sure that the movement and collision detection was smooth and accurate, using efficient algorithms for collision detection. I used the testIntersection() function that allows the measurement of the distance between the radius of the bullet and the comet. If the distance is less than or equal to the sum of their radii, the bullet has intersected with the dot.

testIntersection(dot) {
  var d = dist(this.x, this.y, dot.x, dot.y);
  if (d <= this.r + dot.r) {
    return true;
  }
}

preload(): This function is used to load all the necessary assets (images) for the game before it starts. It is called once when the program starts. The arguments are the file paths to the image files that need to be loaded. The function works by using the loadImage() function provided by p5.js to load the images and store them in global variables for later use.

mousePressed(): This function is called once every time the left mouse button is pressed. It is used to create a new bullet object and add it to the bullets array. The function works by creating a new instance of the Bullet class and passing the current x-coordinate of the mouse as an argument. The new bullet is then added to the bullets array.

keyPressed(): This function is called once every time a key is pressed. It is used to create a new bullet object and add it to the bullets array when the spacebar key is pressed. The function works by checking if the key that was pressed is the spacebar key, and if it is, creating a new instance of the Bullet class and adding it to the bullets array.

Bullet.display(): This method is used to display the bullet on the canvas. It takes no arguments. The function works by drawing a rectangle on the canvas with a white fill color and a size of 10×20 pixels, using the bullet’s x- and y-coordinates.

Bullet.move() : This method is used to move the bullet up the screen. It takes no arguments. The function works by subtracting a fixed value from the bullet’s y-coordinate every frame, causing it to move up the screen.

Bullet.testIntersection(): This method is used to test if the bullet has intersected with a dot (enemy). It takes a single argument, which is a dot object to test against. The function works by calculating the distance between the center of the bullet and the center of the dot, and comparing it to the sum of their radii. If the distance is less than or equal to the sum of their radii, the bullet has intersected with the dot.

Dot.display(): This method is used to display the dot on the canvas. It takes no arguments. The function works by drawing an ellipse on the canvas with a red fill color and a size of 60×60 pixels, using the dot’s x- and y-coordinates.

Dot.move(): This method is used to move the dot around the canvas. It takes no arguments. The function works by adding a random value to the dot’s x- and y-coordinates every frame, causing it to move in a random direction. If the dot reaches the edge of the canvas, it is wrapped around to the opposite edge.

Inspiration:

For this project I was inspired by old TV static. Growing up I always wondered about the cause of old TV static. Through intro to Interactive media I was introduced to Perlin noise and the power of computers to produce random like graphics that seem to morph and change organically.

Concept:

In this project I attempted to recreate a noise-like graphic display that mimics a TV static but without using the NOISE() function. The piece displays moving black rectangles and switch to random colours once the the user clicks the mouse. The more frequent the clicks are, the more chaotic and static like design is.

Technicalities:

I used some of the code from the bouncing ball code from class. However, the trick was to remove the background which removes the clean cut aspect of the piece and allows the audience to see everything about the rectangles throughout time.

 

    Creating this art piece was a very fun and instructive process. I intended to create a simple and aesthetic piece that is also interactive and fun for the audience. I have used code that allowed me to create a sinus function in order to display an animated wave across the screen. The piece also displays two large circles with changing dimensions that move and morph depending on the coordinates of the mouse.

Both shapes; the circles and the sin wave, move accordingly as the frequency of the wave depends on the radius of the circles and change according to the y-coordinate of the mouse. I have used the code snippets below in order to create the morphing effects of the circles:

let x = mouseX;
let y = mouseY;
let ix = width – mouseX; // Inverse X
let iy = height – mouseY; // Inverse Y
fill(250, 150);
ellipse(x, height/2, y, y);
fill(0, 159);
ellipse(ix, height/2, iy, iy);

Using the variables ix and iy has been useful in creating the inverse and alternating visual effect in the piece, as many of the dimensions used depend on each other. This was a very helpful trick, since it allowed me to link the dimensions of different shapes and, thus making the piece more symmetric, cohesive and aesthetic.

One of the biggest challenges I faced while creating the piece was probably designing the sin wave as I was thinking of having multiple small ones on the screen. But the best decisions turned out to have only one big shifting wave as that takes the centre of the piece.