Author: Fady John

The Concept:

“Engage in a thrilling race against time with ‘Drive to Survive,’ where your objective is to outlast the clock for three intense minutes. Can you master the controls, avoid crashes, and emerge victorious? But that’s not all – your ultimate goal is to achieve the maximum distance moved by your high-tech car. Each moment is critical as you strive to set a new distance record”

This is what the user actually experiences in my project. On my side, I wanted my project to simulate the experience of driving a manual car by providing complete control through the p5.js sketch. I added a static car window in the sketch that makes the users feel like they’re actually inside the car while controlling it remotely. Also, the sketch provides a gear box, allowing users to adjust the speed as if they are accelerating in a real car. The cool thing about this project is that it aims to seamlessly bring in a webcam, providing users with a live visual experience on p5.js. This goes beyond physical boundaries, allowing for easy remote control, even if the car is far away.

User Testing:

User 1 Testing: Project was not finalized

User 2 Testing: Final Project

Users Feedback:

• The two users generally demonstrated an ability to engage with the project without explicit instructions and they quickly grasped the basic mechanics for car movement.
• A good comment was about the game interface which is very simple and friendly. Another good comment was about the filter added to the video, which adds a non-realistic mood that suits the game.
• I think only one part of the project required additional explanation which is paying attention to how far is the car because it’s all wired connections so there is a risk of losing connection or laptop fall if it’s put, for example, on a table. For that particular issue, I think I should tell the user about it or maybe adding this instruction in the game sketch as well.

Implementation:

Circuit:

P5JS Code & Sketch:

P5JS code can be described as separate blocks of code which are as follows:

• • • Declaring global variables for the game and car control
    • Pre-loading all the media used in the project (images, audio, …)
    • Setting up the sketch and view the game state screen
    • State1: start which is shown in the sketch below where the user chooses to start the game or show instructions.
    • State2: Instructions which obviously guide the user
    • State3: game where you experience driving
    • State4: end screen where your score is displayed

Arduino Code:

The code basically sets up the car functionality. The code starts with identifying the pins used in the circuit for the motor drivers and the ultrasonic distance sensor. Also, I created a separate function for each direction movement. Based on the data received from the sketch, a function is triggered.

//front left
const int ain1Pin = 13;
const int ain2Pin = 12;
const int pwmAPin = 11;
//back left
const int bin1Pin = 8;
const int bin2Pin = 9;
const int pwmBPin = 10;
//front right
const int cin1Pin = 7;
const int cin2Pin = 6;
const int pwmCPin = 5;
//back right
const int din1Pin = 2;
const int din2Pin = 4;
const int pwmDPin = 3;

const int TRIGGER_PIN = A0;
const int ECHO_PIN = A1;

//global
int speed = 0;

void setup() {
  Serial.begin(9600);
  pinMode(ain1Pin, OUTPUT);
  pinMode(ain2Pin, OUTPUT);
  pinMode(bin1Pin, OUTPUT);
  pinMode(bin2Pin, OUTPUT);
  pinMode(cin1Pin, OUTPUT);
  pinMode(cin2Pin, OUTPUT);
  pinMode(din1Pin, OUTPUT);
  pinMode(din2Pin, OUTPUT);
  pinMode (TRIGGER_PIN, OUTPUT);
  pinMode (ECHO_PIN, INPUT);
}

void loop() {

  // Check if data is available from p5.js
  if (Serial.available() > 0) {
    // Read the brightness value from p5.js
    speed = Serial.parseInt();
    int up = Serial.parseInt();
    int down = Serial.parseInt();
    int right = Serial.parseInt();
    int left = Serial.parseInt();
    if(up == 1){
        moveForward();
    }else if(down == 1){
        moveBackward();
    }else if(right == 1){
        moveRight();
    }
    else if(left == 1){
        moveLeft();
    }
    else{
        digitalWrite(ain1Pin, LOW);
        digitalWrite(ain2Pin, LOW);
        digitalWrite(cin1Pin, LOW);
        digitalWrite(cin2Pin, LOW);
        digitalWrite(bin1Pin, LOW);
        digitalWrite(bin2Pin, LOW);
        digitalWrite(din1Pin, LOW);
        digitalWrite(din2Pin, LOW);
    }
  }
  unsigned long duration;
  float distance;
  digitalWrite(TRIGGER_PIN, HIGH);
  delayMicroseconds(1000);
  digitalWrite(TRIGGER_PIN, LOW);
  duration = pulseIn (ECHO_PIN, HIGH);
  distance = (duration / 2.0) / 29.0;
  Serial.println(distance);
}

void moveForward(){
  analogWrite(pwmAPin, speed);
  analogWrite(pwmCPin, speed);
  analogWrite(pwmBPin, speed);
  analogWrite(pwmDPin, speed);
  digitalWrite(ain1Pin, HIGH);
  digitalWrite(ain2Pin, LOW);
  digitalWrite(bin1Pin, HIGH);
  digitalWrite(bin2Pin, LOW);
  digitalWrite(cin1Pin, HIGH);
  digitalWrite(cin2Pin, LOW);
  digitalWrite(din1Pin, HIGH);
  digitalWrite(din2Pin, LOW);
}

void moveBackward(){
  analogWrite(pwmAPin, speed);
  analogWrite(pwmCPin, speed);
  analogWrite(pwmBPin, speed);
  analogWrite(pwmDPin, speed);
  digitalWrite(ain1Pin, LOW);
  digitalWrite(ain2Pin, HIGH);
  digitalWrite(bin1Pin, LOW);
  digitalWrite(bin2Pin, HIGH);
  digitalWrite(cin1Pin, LOW);
  digitalWrite(cin2Pin, HIGH);
  digitalWrite(din1Pin, LOW);
  digitalWrite(din2Pin, HIGH);
}

void moveRight(){
  analogWrite(pwmAPin, 255);
  analogWrite(pwmBPin, 255);
  analogWrite(pwmCPin, 255);
  analogWrite(pwmDPin, 255);
  digitalWrite(cin1Pin, HIGH);
  digitalWrite(cin2Pin, LOW);
  digitalWrite(din1Pin, HIGH);
  digitalWrite(din2Pin, LOW);
  digitalWrite(ain1Pin, LOW);
  digitalWrite(ain2Pin, HIGH);
  digitalWrite(bin1Pin, LOW);
  digitalWrite(bin2Pin, HIGH);
}

void moveLeft(){
  analogWrite(pwmAPin, 255);
  analogWrite(pwmBPin, 255);
  analogWrite(pwmCPin, 255);
  analogWrite(pwmDPin, 255);
  digitalWrite(cin1Pin, LOW);
  digitalWrite(cin2Pin, HIGH);
  digitalWrite(din1Pin, LOW);
  digitalWrite(din2Pin, HIGH);
  digitalWrite(ain1Pin, HIGH);
  digitalWrite(ain2Pin, LOW);
  digitalWrite(bin1Pin, HIGH);
  digitalWrite(bin2Pin, LOW);
}

long microsecondsToCentimeters(long microseconds) {
  return microseconds / 29 / 2;
}

Communication between P5 and Arduino:

The Arduino C code basically receives data from the P5Js sketch and work accordingly. There are 5 variables received that controls the car movement: the four directions (up, down, left, and right) and the speed controlled by the gear box in the sketch. On the other hand, the P5JS sketch receives one value which is the distance of the ultrasonic distance sensor and checks for collisions.

Parts I am proud of:

I am proud of the overall output of my project and that I got some hardware control in my skill set. I am particularly proud of two things: the visual design of my game and creating a gear box to control the car speed. For this project, I spent much time trying to improve the visual elements of my game whether through the static elements (car, gearbox, …) or dynamic video feed. I added a filter to my screen which I think it gives a nice effect that perfectly matches the overall experience. For the gear box, it was very challenging to make it and shift from one gear to another, but eventually, I figured it out. Here is the function that does so.

Future Improvements:

One thing that I want to improve in my project in the wired connection because it somehow limits this fun experience. One way is to use a bluetooth module for sending and receiving data. However, the wired connection was still required for connecting the webcam to the laptop and capturing the car view. I am not sure, but maybe there is a wireless webcam somewhere on Earth…

Finalized Concept:

I really love cars and driving, which is why I’m super excited about creating a car for my final project. My solidified idea is to build a remotely controlled car using p5.js. The main goal is to replicate the experience of driving a manual car by providing complete control through the p5.js sketch.
In this project, I plan to incorporate a webcam, giving users a live video feed in the sketch that mimics a car window. This way, it feels like you’re actually inside the car while controlling it remotely. The sketch will also feature a gear stick, allowing users to adjust the speed as if they are accelerating in a real car.
The cool thing about this project is that it aims to seamlessly bring in a webcam, providing users with a live visual experience on p5.js. This goes beyond physical boundaries, allowing for easy remote control, even if the car is far away. I’m also thinking of adding a distance sensor to enhance safety by alerting users about potential collisions.
Here’s a basic visualization of what the sketch might look like initially:

Arduino Program:

Input:

1. Distance sensor sending distance values to the P5JS to check for possible collisions.

Output:

1. Motors rotating wheels based on the received instructions from P5JS.
2. Leds turning on/off based on the received instructions from P5JS.

Also, I have designed an initial circuit for controlling the four wheels of the car:

P5JS Program:

Input:

1. Gear value that changes the maximum speed of the car.
2. Keyboard controls that move the car.

Output:

1. Road view stream of the car displayed using a webcam covered by a car window as shown in the following figure.

   

2. Alert triggered when the distance from the car becomes less than a certain threshold.

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

I used an Arduino potentiometer to change the horizontal position of the ellipse in the p5js sketch. The values read from the potentiometer are mapped to the x coordinates of the ellipse, moving it across the horizontal axis in the middle of the screen.

Video of implementation:

Code:

let left = 0;

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

function draw() {
  background(220);
  fill("red");
  ellipse(left, 50, 50, 50);
}

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

function readSerial(data) {
  left = map(data, 0, 1023, 0, 400);
}

//// Arduino Code
/*

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

}

void loop() {
  // put your main code here, to run repeatedly:
  int sensor = analogRead(A0);
  delay(5);
  Serial.println(sensor);

}

*/

 

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

To control the led brightness through P5JS, I created a brightness slider similar to that in our smartphones. The value of the slider is sent to Arduino to be the value of the analog write of the led and change its brightness.

Video of implementation:

Code:

let brightnessSlider;
let brightnessValue = 0;

function setup() {
  createCanvas(400, 200);

  // Create a brightness slider
  brightnessSlider = createSlider(0, 255, 128);
  brightnessSlider.position(width/2-50, height/2);
  brightnessSlider.style('width', '100px');
}

function draw() {
  background(255);

  // Get the brightness value from the slider
  brightnessValue = brightnessSlider.value();
}

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

function readSerial(data) {
  console.log(data);
    let dataToSend = brightnessValue + ", \n";
    writeSerial(dataToSend);  
}

///Arduino COde
/*

const int ledPin = 9;  // Digital output pin for the LED

void setup() {
  pinMode(ledPin, OUTPUT);

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

void loop() {
  Serial.println("sensor");
  // Check if data is available from p5.js
  if (Serial.available() > 0) {
    // Read the brightness value from p5.js
    int brightness = Serial.parseInt();

    // Map the received value to the LED brightness range
    brightness = constrain(brightness, 0, 255);

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

*/

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

When the ball touches the ground, the value of the variable Led changes accordingly (either 0 or 1) and then sent to the Arduino to toggle the led at pin 9. For the wind effect, I used a potentiometer where its values are mapped to values between -2 and 2, making a smooth wind effect moving the ball horizontally.

Video of implementation:

Code:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let led = 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)){ 
    led = 1;
  }else{
    led = 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 (key == "n") {
    // 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) {
    // make sure there is actually a message
    // split the message
    wind.x = data;

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

///Arduino COde
/*

int ledPin = 9;

void setup() {
  // Start serial communication so we can send data
  // over the USB connection to our p5js sketch
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);
}

void loop() {
  int sensor = analogRead(A0);
  int wind = map(sensor, 0, 1023, -2, 2);
  Serial.println(wind);
  delay(10);
  if (Serial.available() > 0) {
    // Read the brightness value from p5.js
    int touch = Serial.parseInt();
    // Set the LED brightness
    digitalWrite(ledPin, touch);
  }
}
*/

 

The concept

Embarking on the final project, my vision is to delve into the realms of robotic design and control, materializing as a remotely operated car crafted with P5JS. This innovative creation aims to seamlessly integrate a webcam, offering users a live, visual stream on P5JS that transcends physical boundaries, enabling intuitive remote navigation, even when the car finds itself in a distant locale. A noteworthy feature includes the incorporation of a distance sensor, placed to alert users and avoid potential collisions, enhancing the overall safety and user experience.

The broader implications of this project are both captivating and practical. Beyond the realms of a mere technological endeavor, this remotely controlled car carries the potential to be a transformative tool. One significant application lies in aiding individuals with limited mobility, serving as a conduit for them to virtually traverse diverse spaces.

The reading looks into the complicated world of inclusive design, examining the obstacles and trade-offs involved in developing products that appeal to a wide range of abilities and needs. The conflict between universality and simplicity is a reoccurring subject, presenting serious concerns about the delicate balance required to achieve both accessible and user-friendly designs.

One argument highlights the difficulties and conflicts involved in designing for disability, especially in the context of universal or inclusive design. On one hand, there’s a commercial rationale for not fragmenting the market by developing specialized designs for tiny populations. In contrast, inclusive design seeks to meet the unique needs and goals of the whole population while taking into account varying abilities and preferences. I see that inclusive design is a good approach designers should always seek regardless of the financial objectives. I feel like it’s our commitment to create products and environments that are welcoming and functional for a diverse range of individuals. We don’t always have to choose between simplicity and universality; instead, we might achieve a balance that meets both needs. I think that Apple’s invention of the iPod device is a good example of this balance.

The reading also looks at examples of radios developed for specific purposes, such as assisting dementia patients. It highlights the importance of design in developing things that are not only usable but also aesthetically beautiful and emotionally engaging, even for those who have cognitive challenges. For me, it is not only about design, but about enhancing the quality of life and making daily experiences accessible for everyone.

Instrument: piano.

Team members:  Fady John (fje3683) and Victor Alves Gomes Nadu (va2269).

Concept

For our instrument project, we have decided to create a piano that plays different tones of the musical scale depending on the measured distance that someone is from the sensor. To build the instrument on the breadboard, we utilized an ultrasonic sensor, LEDs, resistors, and jumper wires, creating an interactive and dynamic musical experience. The analog ultrasonic sensor was responsible for measuring the distance, allowing for an intuitive interaction with the piano. As the user moves closer or farther away, the musical output changes, providing a unique take on the instrument. As for the LEDs, they add a visual element to the project besides also offering an understanding of the distance-based musical scale since they light up corresponding to the played notes.

Circuit Schematic

Code

In the code, we defined the specific pins used for each LED and provided the notes in the musical scale in the form of an array. Specifically, we have used the tones from C4 to C5 in the musical scale as shown in figure 3 below.

 

 

 

Reflections and improvements

Initially, we planned to create drums, but we ended up settling on a piano since that was a more feasible and practical instrument. As for improvements, currently, the distance sensor is not that accurate, which is something that could be worked on. Other than that, we have managed to create something fun and so we are proud of our work.

Thinking about the Microsoft Productivity Vision video and Bret Victor’s thoughts, it feels like there’s a big question about where technology is heading. The video shows a future where everything is super connected and digital, but it made me worry about losing the real experiences that make us human. Bret Victor’s point about wanting more tangible and inclusive interactions with technology makes sense. He’s saying that we shouldn’t sacrifice the good things about being human just to make technology more efficient.

It’s interesting to note that Victor grew up in a different time, which shapes his views. I get that the ‘Pictures behind Glass’ way of doing things is familiar and easy, especially for someone like me who grew up in the digital age. Still, Victor’s idea of finding a balance between the physical and digital world seems like a smart move. The challenge is to make technology work with us, enhancing our experiences instead of taking away from them. Looking at new innovations, like a pen turning physical notes into digital copies, shows a step in that direction. In short, Victor’s thoughts push us to think about how we can have the best of both worlds in our tech-filled future.

As I dove into the second article, what struck me was how people had such different reactions to where interactive media is headed. One response “My child can’t tie his shoelaces, but can use the iPad.” shows the influence of technology on people. It’s just a simple example about a child using ipad but it has more beyond it. Our interaction with technology is a double-wedged weapon. Hence, we should carefully try to use technology to have a positive impact on our life rather than negatively affecting it.

The concept
For this assignment, I wanted to make use of one of the sensors to automate a process. The first sensor I thought of was Grove Light Sensor, which is a module that is used to measure light intensity. The idea is simply controlling the speed of LED blinking based on the ambient brightness of the room. The system monitors brightness through the light sensor and intensifies the LED blinking speed in low-light or dark conditions, serving as a visual cue for urgent notifications.

Process
I started the assignment by creating a schematic diagram for my circuit, illustrated in Figure 1. The pivotal components include a light sensor, responsible for monitoring the ambient brightness of the room, and dynamically adjusting the blinking speed of the LEDs accordingly. Additionally, a toggle switch has been integrated into the circuit, allowing users to seamlessly switch between the two LEDs based on their preferences.
Figure 2 delves into the software aspect of the assignment. The software reads the digital input generated by the switch, ensuring a smooth and controlled transition between the two LEDs.

Video of implementation

Reflections
In this task, it was really interesting that I got to combine physical parts like circuits with software to create interactive and automated product. However, I faced some issues while designing the circuit. It was a bit confusing at the beginning to add these different components together, but I eventually figured it out by going step by step from using just a simple led to using a sensor for controlling other components.

Physical Computing’s Greatest hits and misses

The first article “Physical Computing’s Greatest Hits (and misses)” provides a fascinating insight into the world of interactive design, showcasing recurring themes and popular ideas in the realm of physical computing. As I read through the diverse range of projects and ideas, I could reflect on the ingenuity and creativity that arises from the fusion of technology and human interaction.
Different types of projects, like making instruments that work like theremins or devices for sending remote hugs, show how flexible and adaptable physical computing can be. Each project has its own special appeal and room for creative ideas. It highlights how important it is to think about the person using the technology when designing interactive systems. Instead of just focusing on what the machine does, these projects make sure that technology improves and reacts to what people do, making the interaction more meaningful.
Additionally, I liked how the article mentioned projects that mix different ideas. It shows that new and creative things often come from combining unrelated concepts. For example, the flight simulator, which combines a tilty controller with a big glove, demonstrates how unexpected combinations can be both surprising and enjoyable.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

In this article, the author advises artists creating interactive art not to interpret their own work explicitly. Instead of providing detailed explanations and pre-scripting the participant’s experience, the focus should be on designing an environment or device that initiates a conversation with the audience. I totally agree with the writer’s perspective on creating interactive art without explicit interpretation. The idea that artists should let their audience engage with the work independently resonates deeply with my own experiences as a user not a designer.
Reflecting on my visits to art museums, I can recall instances where the lack of clear interpretation hindered my appreciation of certain works. Some pieces seemed inaccessible, their beauty obscured by ambiguity. I often found myself yearning for a more interactive and participatory experience, one that allowed me to unravel the layers of meaning at my own pace.
Overall, the article confirmed my belief in the power of interactive art, where the beauty lies not only in the creation but also in the ongoing conversation it sparks between the artist and the audience.

Concept:
For this assignment, I wanted to set up something automated. You see, in my dorm room, I’ve got these cool, colorful LED lights that I like to switch on when it gets dark. But here’s the thing: I often turn them on when I close the window by my bed. That got me thinking: why not connect the LED with the window? So, I came up with a simple idea. Now, when I close the window, the LED light automatically pops on. And when I open the window, it goes off. It’s like a little automation trick to make my room feel cozy without me even lifting a finger.

Process:
I’ve put together a basic circuit here. It’s pretty straightforward – just one resistor and one light bulb. I connected the wires and fixed a little coin to the end of each wire. At the bottom of the window, I stuck a sheet of aluminum foil. When I shut the window, those two coins make contact with the foil, and that’s when the circuit completes. The light bulb lights up when they touch the foil.

Video of implementation:

Reflections:
This assignment was so fun and I really liked that I did something that is very interesting for me. The only problem I encountered was attaching the board to the window, but I managed to solve it in no time. Another aspect that could be improved is the choice of materials. I used basic items like coins and aluminum foil, which I believe may not be the most suitable options for projects like this.