Crypto Locker – Yaakulya’s Final Project

Concept Introduction : The Crypto Locker Puzzle is an interactive project designed to challenge users with a series of numbers-cracking tasks under time constraints. The objective is to solve hints and enter correct codes using a custom-built interface to unlock a cardboard box and win the prize inside. This game combines physical computing with digital elements to create an engaging and educational experience.

Link to P5.js Sketch: Click Here

Images of the project:

Initial Design , Credits to Dall-E.

Image of the unlocked candy box

Image of the wirings and breadboard (backside)

Image of the main user controller box.

User testing video:

1) Initial Testing: https://youtu.be/sKT85G0hJLI

2) Final Testing: https://youtu.be/hXSzTsB5x3o

Key Features:

1) Dynamic Countdown Timer: A prominently displayed timer adds a sense of urgency and excitement to the gameplay. It counts down from a set time, pushing players to think and act quickly, which enhances the challenge and engagement of the puzzle.

2) Cryptic Hints Display: As players progress, cryptic hints are displayed on the screen to aid in decoding the puzzle. This feature helps to balance the difficulty level and ensures that the puzzle remains solvable while still challenging.

3) Feedback on Input Accuracy: When players enter a code, the interface immediately provides feedback. If the code is incorrect, players are prompted to try again, and if correct, a success message is displayed, and the box unlocks. This immediate feedback loop keeps players engaged and informed.

Components I used:

1) Arduino Uno: Serves as the main controller for input and output operations.
2) Servo Motor: Operates the locking mechanism of the box.
3) Potentiometer: Allows users to select digits for the code
4) Button: Used for entering selected digits and navigating through the game.
5) P5.js: It acts like a digital interface that provides instructions, feedback, and manages the timer and attempt counter.

IM Show Pictures: People interacting with my project

Auto Locking Video: https://youtube.com/shorts/AAga9JHQt6c?feature=share


 

What’s the role of P5.js and Aurdino in this project?

P5.js Sketch: The P5.js sketch handles the game logic and user interface. It displays hints and the countdown timer.

Images:


Arduino Sketch: The Arduino controls the hardware aspects of the project. It uses a servo motor to lock and unlock the box. A potentiometer is used for dialing in digits (0-9), and a button confirms the entry of each digit. The Arduino sends these inputs to the P5.js program, which processes them to determine if the entered code matches the required one.

#include <Servo.h> // Include the Servo library

const int buttonPin = 2; // Push button connected to digital pin 2
int buttonState = 0;     // Variable to store the button state
const int potPin = A0;   // Potentiometer connected to analog pin A0
Servo servoMotor;        // Create a servo motor object

void setup() {
  pinMode(buttonPin, INPUT); // Set button pin as input
  Serial.begin(9600);        // Initialize serial communication
  servoMotor.attach(9);      // Attach the servo motor to digital pin 9
  servoMotor.write(0);       // Set initial position of the servo motor to 0 degrees
}

void loop() {
  buttonState = digitalRead(buttonPin); // Read the state of the button
  
  // If the button is pressed (buttonState is LOW)
  if (buttonState == LOW) {
    Serial.println("Button pressed!"); // Send message to serial monitor
    delay(1000); // Delay to debounce the button
  }
  
  // Read the value from the potentiometer and send it to the serial port
  int potValue = analogRead(potPin); // Read the value from the potentiometer
  int mappedValue = map(potValue, 0, 1023, 0, 10); // Map the value to the range 0-9
  Serial.println(mappedValue); // Send the mapped value to the serial port
  
  // Check if a signal is received from p5.js to control the servo motor
  while (Serial.available() > 0) {
    int signal = Serial.read(); // Read the signal from serial port
    if (signal == '0') { // Signal to reset servo motor to 0 degrees
      servoMotor.write(5); // Turn the servo motor to 0 degrees
    } else if (signal == '1') { // Signal to turn servo motor to 90 degrees
      servoMotor.write(90); // Turn the servo motor to 90 degrees
    }
  }
  
  delay(100); // Delay for stability
}

How the communication between P5.js and Aurdino Worked??

Initially I prepared the Arduino sketch to transmit data over the serial port. I wrote code to read sensor inputs, such as button presses or potentiometer values, and sent this data as messages over the serial port using functions like Serial.println() or Serial.write(). In my P5.js sketch, I initialized a serial port object within the setup() function using the new p5.SerialPort() constructor. This object represented the communication channel between my P5.js sketch and the Arduino connected to my computer.

Later I configured the serial port to listen for incoming data by using the serial.on('data', serialEvent) function. This setup ensured that whenever data was received on the serial port, the serialEvent function was automatically called, allowing my P5.js sketch to react to data sent from the Arduino.  Within the serialEvent function of my P5.js sketch, I read incoming data from the serial port using the serial.readLine() function. This function retrieved a line of text sent from the Arduino over the serial port. I then processed this data based on its content, performing actions such as updating the display or triggering events in my P5.js sketch.

Additionally, I enabled bidirectional communication by allowing my P5.js sketch to send data back to the Arduino. This allowed me to control actuators connected to the Arduino, such as servo motors or LEDs, from my P5.js sketch. I used the serial.write() function to send data from my P5.js sketch to the Arduino and vice-versa, facilitating interactive control over hardware components.

Schematics of the complete circuit:

How the initial game works:

Challenges and Code I’m Particularly Proud of:

Among various aspects of my project, there’s one particular area that stands out – the locking mechanism.

Initially, the locking mechanism was designed to activate when the user entered all the codes correctly within a specific time frame. Subsequently, P5.js was supposed to send a signal to Arduino instructing it to rotate the servo motor to 90 degrees. However, I encountered challenges in implementing this functionality. Despite extensive debugging efforts, I struggled to achieve the desired outcome. It took numerous tutorial videos and multiple attempts, but eventually, I successfully resolved the issue.

// Check if the final number matches the correct code
  if (finalNumber === currentNumCode) {
    currentImage = congratsImg; // Display 'congrats.png'
    // Stop all other sounds and play win
    stopAllSounds();
    winSound.play();
    // Send signal to turn servo motor to 90 degrees
    serial.write('1');
  } else {
    currentImage = wrongImg; // Display 'wrong.png'
    // Stop all other sounds and play error
    stopAllSounds();
    errorSound.play();
  }

  // Reset values for the next round
  dashValues = [0, 0, 0, 0];
  currentDashIndex = 0;
  allowNumberSelection = false;
  clearInterval(timerInterval); // Stop the timer
}

Following the adjustment, I found that relying solely on correct numerical input wasn’t effective. Instead, I implemented a solution where upon displaying the “congrats.png” image in P5.js, the servo motor rotates 90 degrees, indicated by the code serial.write('1');. Conversely, if the “congrats.png” image is not displayed, the servo motor remains at 0 degrees, signified by serial.write('0');.

function serialEvent() {
  let message = serial.readLine(); // Read the incoming serial data

  if (message.includes("Button pressed!")) {
    // Toggle between images based on currentImage
    if (currentImage === welcomeImg) {
      serial.write('0');
      currentImage = instImg;
      // Stop all other sounds and play bgm
      stopAllSounds();
      bgmSound.play();
      // Reset the dashes to 0 when returning to welcomeImg
      dashValues = [0, 0, 0, 0];
      currentDashIndex = 0;
      allowNumberSelection = false;
      // Send signal to reset servo motor to 0 degrees
      
    } else if (currentImage === instImg) {
      allowNumberSelection = true; // Allow number selection

After successfully implementing this functionality, I extended its use beyond just locking mechanisms. I ensured that the system would automatically lock after the user restarted the game, enhancing the overall user experience.

Future Improvements and Comments  from Users:

1. As initially planned in the game development, I would like to introduce a concept of levels. This will give players a strong sense of achievement as they complete each level. This is what one of my friend suggested after playing the game after multiple times.

2. To enhance this project even more, I aim to create a compelling story that will engage players deeply in the crypto game and enhance their overall gaming experience. In addition I would also like to add the SFX, for the number selection and opening the box.

3. Finally, I plan to add more locks (servo motors) to the candy box to make it more challenging to open. This will further motivate players to experience the thrill of unlocking the box.

Overall, I would say this has been an incredible opportunity to test my hardware skills. Admittedly, I struggled at the beginning. However, as I delved deeper into the project, things gradually became more interesting. At one point, I even assembled the circuit without consulting any references, which I’m really proud of!

I would like to wholeheartedly thank my friends, professor, and everyone who played the Crypto Locker Game. The excitement people showed when unlocking the box under time constraints made me forget all the challenges I faced during the build. This experience has significantly heightened my interest in physical computing! Looking forward…

 

 

 

 

 

 

Week 12 Reading Response – Design Meets Disability

This week’s reading, “Design meets Disability,” offered a new perspective on combining design with accessibility, particularly emphasizing the role of aesthetics in functional products for individuals with disabilities. It made me reflect on products like glasses, which are not typically seen as disability aids. Could their widespread acceptance and fashionability be the key to changing how we perceive all assistive devices? Glasses challenge the old notion that assistive devices must sacrifice aesthetics for functionality, illustrating that you can have both. This concept resonates with me and aligns with previous readings (The Design of Everyday Things: The Psychopathology of Everyday Things; and A Brief Rant on the Future of Interaction Design.) that suggested attractive products enhance user experience and influence consumer choices more than technical features. For example, the iPhone, while not always the most technologically advanced, remains popular for its intuitive and appealing design. This revelation led me to reconsider how products that are both functional and good-looking could redefine societal standards and expectations around disability.

Further exploration into the role of artists and fashion designers in normalizing and destigmatizing disability aids underscores the transformative power of inclusive design. Why haven’t we involved more creative professionals in these discussions before? The article highlights the importance of a collaborative approach in design processes, integrating insights from various disciplines to achieve a balance between functionality and aesthetics. This approach not only widens the scope of what can be developed but also enhances the user experience for people with disabilities, offering them the luxury of choice and the pleasure of recognition—privileges often reserved for the able-bodied. This shifted my previous belief from advocating for universal design to recognizing the value of targeted, specialized designs that meet specific needs without adding unnecessary complexity. The discussion about linguistic changes—from “patients” to “wearers” and from “hearing aids” to “HearWear”—raised interesting questions about how language shapes our perceptions of technology and disability. This reading challenged me to rethink how inclusivity can be woven into the fabric of design, aiming not just to add it as an afterthought but to integrate it as a foundational principle that enhances the dignity and quality of life for all users.

Final Project Proposal Draft 1

Introduction Concept: The Crypto Locker Puzzle is an interactive project designed to challenge users with a series of code-cracking tasks under time constraints. The objective is to solve hints and enter correct codes using a custom-built interface to unlock a wooden box and win the prize inside. This game combines physical computing with digital elements to create an engaging and educational experience.


Objective:
The main goal of this project is to engage users in a fun and educational way by combining elements of cryptography and puzzle-solving. The game encourages critical thinking and problem-solving skills as players attempt to unlock the box within a specified time limit, providing an enjoyable and challenging experience.

Key Features

1) Dynamic Countdown Timer: A prominently displayed timer adds a sense of urgency and excitement to the gameplay. It counts down from a set time, pushing players to think and act quickly, which enhances the challenge and engagement of the puzzle.

2) Attempt Counter: This feature tracks the number of attempts a user makes to solve the puzzle. It’s great for adding a competitive edge, as players can challenge themselves or others to solve the puzzle in fewer attempts, promoting replayability.

3) Cryptic Hints Display: As players progress, cryptic hints are displayed on the screen to aid in decoding the puzzle. This feature helps to balance the difficulty level and ensures that the puzzle remains solvable while still challenging.

4) Thematic Interface Design: The interface’s design is sleek and modern, resembling a spy gadget, which aligns well with the thematic elements of the puzzle box. This integration of theme and function helps to immerse players in the game’s world.

5) Feedback on Input Accuracy: When players enter a code, the interface immediately provides feedback. If the code is incorrect, players are prompted to try again, and if correct, a success message is displayed, and the box unlocks. This immediate feedback loop keeps players engaged and informed.

6) Multiple Difficulty Levels: With the inclusion of three difficulty levels, the game can cater to a broad range of skill levels. Beginners can start with simpler, shorter codes and fewer hints, while advancing – the game takes the user tackle longer codes with cryptic hints.

Components

  • Arduino Uno: Serves as the main controller for input and output operations.
  • Servo Motor: Operates the locking mechanism of the box.
  • Potentiometer: Allows users to select digits for the code.
  • Button: Used for entering selected digits and navigating through the game.
  • P5.js: It acts like a digital interface that provides instructions, feedback, and manages the timer and attempt counter.

P5.js Sketch: The P5.js sketch handles the game logic and user interface. It displays hints, the countdown timer, and the number of attempts. It also receives digit inputs from the Arduino and checks them against the predetermined code. If the code is correct, it sends a command to unlock the box.

Arduino Sketch: The Arduino controls the hardware aspects of the project. It uses a servo motor to lock and unlock the box. A potentiometer is used for dialing in digits (0-9), and a button confirms the entry of each digit. The Arduino sends these inputs to the P5.js program, which processes them to determine if the entered code matches the required one.

How the Game Works

    1. Initialization: At the start of the game, the servo motor locks the box, and the Arduino awaits input from the potentiometer and button.
    2. User Interaction: Players turn the potentiometer to select digits and press the button to confirm each entry. The Arduino sends these inputs to the P5.js sketch.
    3. Feedback and Unlocking: The P5.js sketch evaluates the entered code. If incorrect, it prompts the user to try again; if correct, it sends a signal to unlock the box via the servo motor.
    4. Time and Attempts Management: The game includes a countdown timer and records the number of attempts. Players must solve the puzzle before the time runs out.

Week 12 – Serial Communication (Group Assignment)

Team Members: Yaakulya Sabbani and Muhammed Hazza

Exercise 1: ARDUINO TO P5 COMMUNICATION

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. So for this exercise we have used a potentiometer.

Arduino Code

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

//start the handshake
  while (Serial.available() <= 0) {
    //digitalWrite(LED_BUILTIN, HIGH);
    Serial.println("0,0"); // send a starting message
    delay(300);
    //digitalWrite(LED_BUILTIN, LOW);
    delay(50);

  }
}

void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
     //digitalWrite(LED_BUILTIN, HIGH);
    int isMoving = Serial.parseInt();
    if (Serial.read() == '\n') {
      int photoVal = analogRead(A0); 
      delay(5);
      Serial.println(photoVal);
   }
  }
  //digitalWrite(LED_BUILTIN, LOW);
}

P5 code

// Initialize variables to store values from Arduino
let rVal = 0; // Stores the received value from Arduino
let xPos = 0; // Stores the mapped x-position value
let rad = 50; // Radius of the ellipse to be drawn

// Setup function - runs once at the beginning
function setup() {
  // Create a canvas with dimensions 400x400
  createCanvas(400, 400);
  // Set text size to 18 pixels
  textSize(18);
}  

// Draw function - runs continuously
function draw() {
  // Set background color to white
  background(255);

  // Check if serial communication is active
  if (!serialActive) {
    // Display message to prompt user to press Space Bar to select Serial Port
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    // If serial communication is active, display "Connected" message
    text("Connected", 20, 30);
    
    // Map the received value (rVal) to the x-position within the canvas
    xPos = map(rVal, 0, 900, 0, 400);
    // Display the current received value (rVal)
    text('rVal = ' + str(rVal), 20, 50);
    // Draw an ellipse at the mapped x-position with fixed y-position (200) and radius (rad)
    ellipse(xPos, 200, rad, rad);
    // Display the mapped x-position (xPos)
    text('xPos = ' + str(xPos), 20, 70);
  }
}

// Function to handle key presses
function keyPressed() {
  // Check if Space Bar is pressed
  if (key == " ") {
    // Call setUpSerial() function to start serial connection
    setUpSerial();
  }
}

// Function to read data from Arduino
function readSerial(data) {
  // Check if data is not null
  if (data != null) {
    // Split the received data into an array using comma as delimiter
    let fromArduino = split(trim(data), ",");
    
    // Check if the array contains only one element
    if (fromArduino.length == 1) {
      // Update rVal with the received value from Arduino
      rVal = fromArduino[0];
    }
    
    // Send a handshake message to Arduino
    let sendToArduino = 1 + "\n";
    writeSerial(sendToArduino);
  }
}

Schematic

Video Demonstation

 

Exercise 2: P5 TO ARDUINO COMMUNICATION

Something that controls the LED brightness from p5. For this exercise we have created a slider to controll the brightness of the green led.

Arduino Code

//Ex-2 Arduino Code

const int ledPin =9;
int brightness = 0;
void setup() {
  Serial.begin(9600); // This will start serial communication at 9600 bps

  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(ledPin, OUTPUT);
// start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH); // on blink when waiting for serial data
    Serial.println("0,0"); // sending a starting message 
    delay(300);            // waiting for the delar
  }
}
void loop() 
{
  // wait for data from p5 before doing something
    while (Serial.available()) 
    {
    digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
    int brightness = Serial.parseInt(); //get slider value from p5
    Serial.println(brightness); //just to view the value
    
     if (Serial.read() == '\n') {
       analogWrite(ledPin, brightness); // will set brightness of LED
     
      }else
      {
        digitalWrite(LED_BUILTIN, HIGH);
      }
    }
}

P5 Code

//Exercise 2 - P5js Code
let slider;
function setup() {
   createCanvas(400, 400); // Creating canvas of 400x400 pixels
  slider = createSlider("0, 255, 0");
  slider.position(100, height/2); // Set the position of the slider
  slider.style('width', '80px'); // Set the width of the slider 
 
  
  noStroke(); // No stroke for the ellipse initially
}
function draw() {
  
  background(255); // Refresh background on each frame
  
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);}
}
function keyPressed() {
  if (key == " ") {
    // setting the serial connection!!
    setUpSerial();
  }   
}
// this callback function
function readSerial(data) {
    ////////////////////////////////////
    //READ FROM ARDUINO HERE
    ////////////////////////////////////
    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    console.log(slider.value());
    let sendToArduino = slider.value() + "\n";
    writeSerial(sendToArduino);
  
}

Video Demonstration

Schematic

Exercise 3: BI-DIRECTIONAL COMMUNICATION

Every time the ball bounces one led lights up and then turns off, potentiometer is used as the analog sensor to control the wind.

Arduino Code

//Exercise 3 Arduino Code

const int poten_pin = A0;
const int ledPin = 2;
void setup() {
 Serial.begin(9600); // Start serial communication at 9600 bps
 pinMode(LED_BUILTIN, OUTPUT);
 pinMode(ledPin, OUTPUT);
 pinMode(poten_pin, INPUT);
 // start the handshake
 while (Serial.available() <= 0) {
   digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
   Serial.println("0,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);
     digitalWrite(ledPin, LOW);
//read the position of ball from p5
     int position = Serial.parseInt();
  
     if (Serial.read() == '\n') {
       // Read potentiometer value
     int sensorValue = analogRead(poten_pin);
     //send value to p5
     Serial.println(sensorValue);
     }
//if ball is touching the ground i.e. height is zero, turn LED on
     if (position == 0)
     {
       digitalWrite(ledPin, HIGH);
     }
     else{
       digitalWrite(ledPin, LOW);
     }
   }
     digitalWrite(LED_BUILTIN, LOW);
   }

p5 Code

//Exercise 3 - P5js Code

let velocity;
let gravity;
let position;
let acceleration;
let breeze;
let drag = 0.99;
let mass = 50;
let heightOfBall = 0;
function setup() {
  createCanvas(640, 360); // Create a canvas of 800x400 pixels
 
  noFill();
  position = createVector(width/2, 0);
  velocity = createVector(0,0);
  acceleration = createVector(0,0);
  gravity = createVector(0, 0.5*mass);
  breeze = createVector(0,0); 
}
function draw() {
  background(215);
  fill(0);
  
  if (!serialActive) {
    text("Press the space bar to select the serial Port", 20, 30);
  }
  else 
  {
    text("Arduino is connected! Press b to jump.", 20, 30);
  
  applyForce(breeze);
  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;
    
    heightOfBall = 0;
    
    } 
    else {
      heightOfBall = 1;
    }
  }
}
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 == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }   
  else if (key=='b'){
    mass=random(15,80);
    position.y=-mass;
    velocity.mult(0);
  }
}
// this callback function
function readSerial(data) {
    ////////////////////////////////////
    //READ FROM ARDUINO HERE
    ////////////////////////////////////
  
     if (data != null) {
    // make sure there is actually a message
    
    let fromArduino = split(trim(data), ",");
    
       // if the right length, then proceed
    if (fromArduino.length == 1) {
//sensor value is the input from potentiometer
      let sensorVal = int(fromArduino[0]);
      
//potentiometer value ranges from 0 - 1023
//for values less than 400,wind blows to right
      if (sensorVal < 400){
        breeze.x=1
      }
//if value between 400 and 500, wind stops so ball stops
      else if(sensorVal >= 400 && sensorVal < 500){
        breeze.x = 0
      }
//if value greater than 500, wind blows to left
      else {
        breeze.x = -1
      }
          //////////////////////////////////
          //SEND TO ARDUINO HERE (handshake)
          //////////////////////////////////
    }
//height of ball sent to arduino to check if ball on floor or not
    let sendToArduino = heightOfBall  + "\n";
    writeSerial(sendToArduino);
  }
}

Schematic

Video Demonstration

Yaakulya Final Project Idea

Project Title: Interactive LineBot

Why a robot?
From childhood I’m always fascinated by robots. The inspiration for this project stems from a desire to create an engaging and interactive robotics experience just like Wall-E and DUM-E from Pixar and Marvel movies. I believe this project seeks to merge the worlds of hardware and software in a fun and accessible manner.

Objective: The objective of the Interactive LineBot project is to build a robot capable of autonomously following a black line on a white surface. By integrating an interactive p5.js interface, users can draw custom paths for the robot to navigate, providing a hands-on experience in robotics and programming. The project aims to foster curiosity, experimentation, and learning while exploring the principles of robotics, sensor integration, and graphical user interfaces.

Hardware Components:

1) Arduino board
2) Infrared (IR) sensors (typically two or more)
3) Motor driver
4) Motors and wheels for the robot chassis
5) Breadboard and jumper wires
6) Battery pack or power source

Steps I would like to proceed:

Building the Robot: Assemble the robot chassis and mount the motors, wheels, and IR sensors. Connect the IR sensors to the Arduino board and position them close to the ground in front of the robot. Connect the motors to the motor driver or shield, which will be controlled by the Arduino.

Programming: Write a program in the Arduino IDE to read data from the IR sensors and control the motors to follow the line. Implement logic or algorithms to interpret sensor readings and adjust motor speeds accordingly. Upload the Arduino code to the board and fine-tune parameters for optimal line following.

Creating the p5.js Interface: Develop a graphical user interface using p5.js where users can interactively draw custom lines representing the robot’s path. Implement functions to handle user input, such as mouse clicks or dragging, to draw lines on the canvas. Provide visual feedback to users as they draw lines and interact with the interface.

Integration: Establish communication between the Arduino board and the p5.js interface, typically via serial communication. Send commands from the p5.js interface to the Arduino to control the robot’s movements based on user-drawn trajectories.

 

(In a game it can be used to solve a maze)

Week #11: Yaakulya’s Reading Response

Reading 1: https://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

After reading “A Brief Rant on The Future of Interaction Design,” I find myself questioning the direction of future technology. The author’s firsthand experience in designing real prototypes brings credibility to their skepticism towards futuristic interaction concepts portrayed in videos. This makes me wonder about the reliability of visionary ideas depicted in media compared to practical implementation. For instance, the author emphasizes the importance of considering human capabilities in interface design, which resonates with my own experiences of struggling with certain digital interfaces that seem disconnected from natural human interactions.

Moreover the author talks about how current ideas for future technology don’t fully consider what humans are capable of. He mention that the way we interact with devices now, like touching screens, might not be the best way. The author thinks we should pay more attention to how we use our hands and bodies in everyday tasks, like making breakfast or tying shoelaces. This made me think about how we usually use technology and if there might be better ways to do things.

I wonder if the author is biased because they used to work in interaction design, so they might have strong opinions based on their experience. But it also seems like they have good reasons for their opinions, like their knowledge of how real prototypes work. Reading this made me realize that maybe we need to think more creatively about how we design technology. Instead of just sticking to what we know, we should consider what humans are naturally good at and how we can make technology work better with that. This raises questions for me about how we can encourage more innovative thinking in technology design and whether there are already ideas out there that we’re not paying enough attention to.

Reading 2: https://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/responses.html

After reading the responses to the author’s rant on the future of interaction design, I’m struck by the importance of acknowledging problems even without offering immediate solutions. In this reading, I agree with the author because the author makes it clear that identifying issues is the first step towards finding answers through research and innovation. This makes me think about how society often expects instant solutions without recognizing the complexity of the problems we face. It also raises questions about the role of patience and long-term thinking in addressing technological challenges.

One interesting point raised in the reading is the comparison between current technology like the iPad and historical innovations such as the Kodak camera. The author suggests that while these technologies are revolutionary in their own right, there’s still room for improvement and innovation. This made me reflect on the idea that just because something is good now doesn’t mean it can’t be better in the future. It prompts me to consider how we can continue to evolve and refine technology to better serve human needs and capabilities. This analogy also prompts me to consider how today’s revolutionary advancements, like the iPad, might be stepping stones towards even greater developments in the future. However, the warning against complacency and the call for dynamic, tangible interfaces remind me that progress should not stagnate. It also makes me wonder what steps we can take to ensure that future technology continues to evolve in ways that enhance human capabilities rather than limiting them.

Week 11: Our Musical Instrument “Turntable” – Yaakulya & Luke

Concept : This project is a creative exploration into the realm of music and interactivity. Inspired by the dynamic role of a DJ, we have created a turntable that allows users to listen  two globally popular songs: “Despacito” by Luis Fonsi and Daddy Yankee, and the “Mario Theme Song” by Koji Kondo for Nintendo. The project aims to provide a simple yet enjoyable experience, blending Western and Eastern musical influences.

Objective: The primary objective is to design an interactive turntable that allows the user to play and switch between two distinct songs using a digital switch and an analog potentiometer, emulating the experience of a DJ.

Components we used:
Arduino UNO
Potentiometer (Analog Sensor)
Push Button (Digital Sensor)
Miniature Speaker
10k Ohms Resistor

Implemented Code with comments:

#include "pitches.h"

#define BUZZER_PIN 9
#define POTENTIOMETER_PIN A0
#define BUTTON_PIN 7

// Melody for the first song
int melody1[] = {
  NOTE_D4, NOTE_CS4, NOTE_B3, NOTE_FS3, NOTE_FS3, NOTE_FS3, NOTE_FS3, NOTE_FS3,
  NOTE_FS3, NOTE_B3, NOTE_B3, NOTE_B3, NOTE_A3, NOTE_B3, NOTE_G3, NOTE_G3, NOTE_G3, NOTE_G3, NOTE_G3,
  NOTE_G3, NOTE_B3, NOTE_B3, NOTE_B3, NOTE_B3, NOTE_CS4, NOTE_D4, NOTE_A3, NOTE_A3, NOTE_A3, NOTE_A3, NOTE_A3,
  NOTE_A3, NOTE_D4, NOTE_D4, NOTE_D4, NOTE_D4, NOTE_E4, NOTE_E4, NOTE_CS4
};

// Note durations for the first song
int noteDurations1[] = {
  4,4,8,8,16,16,16,16,
  16,16,16,8,16,8,16/3,16,16,16,16,
  16,16,16,16,8,16,8,16/3,16,16,16,16,
  16,16,16,16,8,16,8,16/3
};

// Melody for the second song
int melody2[] = {
  NOTE_E4, NOTE_E4, NOTE_E4, NOTE_C4, NOTE_E4, NOTE_G4, NOTE_G3, NOTE_C4, NOTE_G3, NOTE_E3, NOTE_A3, NOTE_B3, NOTE_AS3, NOTE_A3,NOTE_G3,NOTE_E4,NOTE_G4,NOTE_A4,NOTE_F4,NOTE_G4,NOTE_E4,NOTE_C4,NOTE_D4,NOTE_B3,NOTE_C4
};

// Note durations for the second song
int noteDurations2[] = {
  16,8,8,16,8,4,4,16/3,16/3,16/3,8,8,16,8,32/3,32/3,32/3,8,16,8,8,16,16,16/3,8
};

// Flag to indicate if a song is currently playing
bool songPlaying = false;
// Variable to store the previous state of the button
bool lastButtonState = false;

// Setup function to initialize the pins
void setup() {
  // Set the buzzer pin as output
  pinMode(BUZZER_PIN, OUTPUT);
  // Set the button pin as input with internal pull-up resistor enabled
  pinMode(BUTTON_PIN, INPUT_PULLUP);
}

// Loop function to continuously check for button presses and play melodies
void loop() {
  // Read the current state of the button
  bool buttonState = digitalRead(BUTTON_PIN);

  // Check if the button is pressed and it was not pressed in the previous loop iteration
  if (buttonState == LOW && lastButtonState == HIGH) {
    // Toggle the song playing state
    songPlaying = !songPlaying;

    // Start or stop playing the selected song
    if (songPlaying) {
      // If the potentiometer value is less than 512, play the first melody; otherwise, play the second melody
      if (analogRead(POTENTIOMETER_PIN) < 512) {
        playMelody(melody1, noteDurations1, sizeof(melody1) / sizeof(int));
      } else {
        playMelody(melody2, noteDurations2, sizeof(melody2) / sizeof(int));
      }
    } else {
      // If the song was playing, stop playing it
      noTone(BUZZER_PIN);
    }
  }

  // Update the last button state for the next iteration
  lastButtonState = buttonState;
}

// Function to play a melody
void playMelody(int melody[], int noteDurations[], int size) {
  // Iterate over each note in the melody
  for (int thisNote = 0; thisNote < size; thisNote++) {
    // Calculate the duration of the current note
    int noteDuration = 1000 / noteDurations[thisNote];
    // Play the current note on the buzzer pin
    tone(BUZZER_PIN, melody[thisNote], noteDuration);
    // Wait for the duration of the note
    delay(noteDuration * 2);
    // Stop playing the note
    noTone(BUZZER_PIN);
    // Add a short pause between notes
    delay(noteDuration * 0.1);
  }
}

Code Logic:

The code begins by defining the pin numbers for the buzzer, potentiometer, and button. The buzzer pin is where the speaker is connected, the potentiometer pin is where the potentiometer (for selecting songs) is connected, and the button pin is where the push button (for controlling song playback) is connected.

  • In the setup() function, the buzzer pin is set as an output, and the button pin is set as an input with an internal pull-up resistor enabled. This configuration ensures that the button pin reads HIGH when the button is not pressed and LOW when it is pressed.  Moreover two melodies are defined (melody1 and melody2), each represented as an array of note frequencies. Corresponding to each melody, two arrays (noteDurations1 and noteDurations2) define the duration of each note in the melodies.
  • In the loop() function, the code continuously checks the state of the button. When the button transitions from HIGH to LOW (indicating a button press), the code toggles the songPlaying variable to start or stop playing the selected song. If songPlaying is true, the code reads the potentiometer value to determine which melody to play. If the potentiometer value is less than 512, it plays melody1; otherwise, it plays melody2. If songPlaying is false, it stops playing the melody by calling noTone() on the buzzer pin.
  • The playMelody() function is responsible for playing a melody. It takes as input the melody array, note duration array, and the size of the melody. Inside the function, it iterates over each note in the melody, calculates the duration of the note, plays the note using tone(), adds a short delay between notes, and then stops playing the note using noTone().

Video Demonstration:

Images of the circuit:

Schematics Sketch:

Circuit connections from above Schematics diagram.

1) Potentiometer Connections: The potentiometer is crucial for song selection and control. It has three pins: two for power and one for the signal. The outer pins are connected to the 5V and GND (ground) terminals on the Arduino to provide it with power. The middle pin, which is the wiper, is connected to the analog input A0 on the Arduino. As the user turns the knob of the potentiometer, the resistance changes, and the Arduino reads this as an analog value, allowing the user to blend between the two songs.

2) Button Connections: A push button is used to start or stop the song playback. One side of the button is connected to the digital pin 2 on the Arduino. The other side is connected to the GND terminal on the breadboard. A pull-up resistor is not necessary as the Arduino’s internal pull-up resistor is used in the code to avoid floating values when the button is not pressed.

3) Speaker Connections: The speaker, which outputs the sound, has two wires. The positive wire is connected to digital pin 8 on the Arduino. This pin is set up in the code to deliver a pulse-width modulation (PWM) signal that creates the audio tones for the songs. The negative wire from the speaker is connected directly to the GND terminal on the breadboard to complete the circuit.

4) Power Connections: The breadboard’s power rail is used to distribute the 5V and GND connections to the potentiometer and the button. Wires run from the 5V and GND pins on the Arduino to the power rail on the breadboard.

With this setup, the user interacts with the button and potentiometer to control the playback of “Despacito” and the “Mario Theme Song”. The code on the Arduino processes the input signals and triggers the speaker to play the appropriate song based on the state of the button and the value from the potentiometer.

What does the Analog and Digital Sensor do in this circuit? – Schematics:

The code and circuit are structured to respond to the interactions with the potentiometer and the push button:

1) Button Press: Initiates the playback of “Despacito” or stops the current song.

2) Potentiometer Rotation: Facilitates the blending from “Despacito” to the “Mario Theme Song.” and vice versa.

The user must press the button to start playing “Despacito.” They can then rotate the potentiometer to initiate the “Mario Theme Song” by pressing the button again. This interaction can be repeated to switch between the two songs.

Challenges & Reflections:

1) Connecting the buzzer, potentiometer, and push button to the Arduino board together proved to be trickier than anticipated. We encountered issues with loose connections, incorrect wiring, and misplacing the digital pin assignments. Later then, we carefully reviewed the circuit diagram and schematics to double-checked each wiring connection, additionally we also  referenced the Arduino documentation and class slides to ensure we understood the purpose and functionality of each sensor working nature.

2) When testing the circuit, we noticed inconsistencies in melody playback. Some notes were not playing correctly, and there were unexpected pauses between notes and some notes are repeating itself. To troubleshoot this issue, we reviewed the code related to melody playback and examined the arrays containing note pitches and durations. We  adjusted the timing parameters and experimented with different delay values to ensure smooth transitions between notes.

Future Improvements:

1) To create a vibrant atmosphere that mimics a mini club, we aim to incorporate LEDs that flash in sync with the music notes.

2) To provide a more DJ-like experience, we intend to program more songs and add a crossfade effect, allowing one song to ease into the other as the potentiometer is turned, instead of multiple switches.

 

Week 10: Reading Response

First Article: Physical Computing’s Greatest Hits (and misses)

After reading this article, I find myself reflecting on its crucial aspects. The author discusses various themes in physical computing and highlights recurring project ideas. One point raised is the versatility of these themes, allowing for originality despite their frequent use. I can see evidence of this in the examples provided, such as the theremin-like instruments and gloves used for musical interaction. However, I wonder if the author’s enthusiasm for these themes might overshadow potential limitations or drawbacks. While the projects are indeed versatile and popular, are there certain constraints or challenges that aren’t fully addressed? Additionally, the emphasis on creativity and variation might suggest a bias towards celebrating the potential of physical computing without thoroughly examining its limitations or pitfalls.

Reading this has not drastically changed my beliefs, but it has prompted me to consider the balance between creativity and practicality in project development. Are there instances where prioritizing creativity might hinder the functionality or effectiveness of a physical computing project Furthermore, the discussion of themes like “Remote Hugs” and “Meditation Helpers” raises questions about the effectiveness of technology in facilitating emotional experiences. Can machines truly simulate or enhance human connection and emotional well-being, or do they risk oversimplifying complex human experiences?

Overall, I think while the reading offers valuable insights into the world of physical computing, sententiously it also prompts critical thinking about the intersection of technology and human interaction.

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

After reading this article, I find the author’s perspective on interactive art thought-provoking. They emphasize the importance of not interpreting one’s own work in the context of interactive art. Instead, the author suggests setting the stage for interaction and then allowing the audience to interpret and respond to the artwork in their own way. I agree with the notion that providing interpretation alongside interactive art can limit the viewer’s experience by dictating how they should perceive and engage with the piece. By allowing space for individual interpretation, the artwork becomes a platform for dialogue between the artist and the audience.

The comparison made between planning interactive artwork and directing actors resonates with me. Just as a director guides actors without imposing specific interpretations, an artist should create opportunities for interaction without prescribing meaning. This approach allows for more authentic and varied responses from the audience. However, I wonder about the balance between providing context for interaction and leaving room for interpretation. How can an artist effectively guide the audience’s engagement without imposing their own biases or intentions?

Furthermore, the idea of interactive artwork as a performance highlights the dynamic nature of the audience’s role in completing the work. How can artists create environments or stimuli that encourage meaningful interaction and exploration without overshadowing the audience’s agency?Overall, I feel the article challenges traditional notions of authorship and interpretation in art, encouraging a more open and collaborative approach to creating interactive experiences.

Week 10: Dual Hybrid Sensor Lighting System

Concept: For this project, I need to use both digital and analog sensors along with indicators like LEDs to get creative. After thinking about different ideas, I realized my inspiration is:  I’ve always wanted to upgrade my Marvel’s Moon Knight action figure. Just like in the comics, I want his face and symbol on his chest to light up red when it’s dark, giving a warning to criminals. I also want some background lighting, like thunder effects. So, I thought of using some cool LEDs and sensors to recreate this scene. To achieve this, I’ll be using a photocell as the analog sensor and a push button as the digital sensor.

Materials I used:
1. Arduino Uno Board
2. Breadboard
3. Two Leds (Red and Green)
4. Three 220 Ohm Resistors
5. Push Button
6. Photo-resistor (Light Sensor)
7. Jumper Wires

So the final circuit include all of these items, as well as my Moon Knight Action Figure.

Implemented Code with comments:

int led = 11; // LED pin connected to an analog sensor
int buttonPin = 2; // Button pin, using pin 2 for example
int buttonState = 0; // Variable for reading the push button status
int secondLed = 12; // Second LED pin, using pin 12 for example
bool blinking = false; // State to control the blinking

void setup() {
  Serial.begin(9600); // Starts the serial communication
  pinMode(led, OUTPUT); // Sets the led as an output
  pinMode(buttonPin, INPUT_PULLUP); // Initialize the push button pin as an input with an internal pull-up resistor
  pinMode(secondLed, OUTPUT); // Sets the second led as an output
}

void loop() {
  int sensorValue = analogRead(A2); // Read the value from the analog sensor
  Serial.println(sensorValue); // Print the value to the serial monitor
  analogWrite(led, map(sensorValue, 0, 1023, 255, 0)); // Write the inverted analog value to the LED
  
  int currentButtonState = digitalRead(buttonPin); // Read the current state of the push button

  // Check if button state has changed from high to low (button press)
  if (currentButtonState != buttonState && currentButtonState == LOW) {
    blinking = !blinking; // Toggle blinking state
  }
  buttonState = currentButtonState; // Update the buttonState
  
  // If the button was pressed, start blinking
  if (blinking) {
    digitalWrite(secondLed, HIGH); // Turn on second LED
    delay(250); // Wait for 250ms
    digitalWrite(secondLed, LOW); // Turn off second LED
    delay(250); // Wait for 250ms
  } else {
    // Turn off second LED when sensor value reaches 200 or more
    if (sensorValue >= 200) {
      digitalWrite(led, LOW); // Turn off LED
    } else {
      digitalWrite(led, HIGH); // Turn on LED
    }
  }
  
}

Video Demonstation:

Images:

Figure 1.1: Closer View of the Circuit during Night time

Figure 1.2: Complete View of the Circuit, Including with Action Figure. (Night Time)

Figure 1.3: Top Angle View of the circuit during the Day time.

Sketch: Circuit Schematics

How circuit works:

LEDs and Resistors: There are two LEDs, a green and a red one. Each LED is connected to a digital pin on the Arduino (green to pin 11 and red to pin 12) through a resistor. The resistors limit the current to the LEDs to prevent them from burning out due to excessive current. The longer leg (anode) of the LEDs is connected to the resistor, and the other side of the resistor is connected to the Arduino pins. The shorter leg (cathode) of the LEDs is connected to the ground (GND) on the Arduino to complete the circuit.

PushButton:
The pushbutton has one side connected to 5V and the other side to both the ground (through a resistor) and to digital pin 2 of the Arduino. The resistor is a pull-down resistor that ensures the pin is at a known low signal when the button is not pressed. When the button is pressed, it connects the pin directly to 5V, giving a high signal. The internal pull-up resistor on the Arduino pin is activated in the code (INPUT_PULLUP), which means the pin is normally high, and pressing the button brings it to low. Moreover an analog sensor is connected to the analog pin A2 on the Arduino.

  • For the Green LED:  When the Arduino runs, it reads the value from the analog sensor connected to A2. This value is a measure of voltage that changes with the sensor’s readings. The Arduino then converts this reading to a corresponding brightness level for the green LED using analogWrite(), which uses pulse-width modulation (PWM) to simulate varying levels of brightness by quickly turning the LED on and off.
  • For the Red LED: The Arduino continuously reads the state of the pushbutton. When the button is detected as pressed (the signal on pin 2 goes from high to low due to the INPUT_PULLUP mode), it changes the blinking variable’s state. When blinking is true, the program  likely causes the red LED to turn on and off at certain intervals, simulating a blinking effect.

    Schematic Diagram Explanation:  Ultimately, the LEDs are represented by the symbols labeled ‘D1 GREEN’ and ‘D2 RED’. The resistors, labeled ‘R1’ and ‘R2’, are in series with the LEDs and connected to the digital pins on the Arduino symbol ‘U1’. The Arduino is central to the schematic and is labeled ‘U1’. All components are connected to it. It is shown with connections to power (5V and GND), the digital pins, and the analog pins. Hence the current flows from the 5V pin through the pushbutton when it is closed, and through the LEDs when they are enabled by the Arduino. Lastly this manages the flow by turning the pins to HIGH (5V) or LOW (0V) states and reading the voltage level from the analog sensor to determine the sensor’s readings.

Challenges and Reflection:
1) Connections of Jumper Wires: Connecting the wires to the action figure was a challenge because plastic tape doesn’t conduct electricity well. I had to ensure the ends of the jumper wires stayed firmly connected to the anode and cathode ends of the red LED without any loose connections. After some effort, I managed to secure the ends firmly with three to four pieces of tape.

2)  Push Button: The push button I used had a tendency to bounce (it has a loose connection with the bread board), causing unintended multiple presses. To solve this, first I implemented a delay in the code and they fixed the button with the help of screwdriver.

3) Photo-resistor Sensitivity and Range: The response of the photoresistor varied depending on the ambient light conditions. If the light levels fell outside the photo-resistor’s sensitive range, the LED wouldn’t respond as expected. To address this, initially I had to dim all the lights to make the room dark and I changed the range a bit limiting the sensor value from 400 to 250 then adjusted the code to accommodate my room lighting conditions, ensuring consistent LED performance.

Future Improvements:
a) I have an improvement in mind for the blinking green light in the background. Currently, it blinks manually with a delay of 250 ms. However, I want to integrate it with the background system so that when there’s a high pitch, the green background LED lights up brighter, and otherwise, it remains constantly low.

Overall, despite the hours spent on connections and coding, I’m satisfied with the outcome of the project. It feels completely worthwhile to recreate the scene of my favorite superhero from the comics! In the future, I’d love to enhance it further with more LEDs and sensors.

 

Week 9: Laptop Charging Switch

Concept: While browsing YouTube for ideas, I noticed that my friend’s old laptop lacks an indicator light for charging. Every time she plugs it in, she’s uncertain if it’s actually charging. So, for my Week 9 project, I’ve decided to help her by using an Arduino to create a simple input/output switch. This will make it easy for her to tell whether her laptop is charging.

Fig 1: This is laptop we will be using for making a switch.


Fig 2: A closer look of connection between laptop and charging cable.

So the ultimate goal of this project is to incorporate an LED that will serve as an indicator when the charging plug is connected to the laptop.

Process: First, I built a basic circuit that uses an Arduino to power a breadboard. I included a red led in the circuit to serve as an indicator of whether the circuit is complete.  So the red wire is supplying power (+5V from the Arduino) to the longer, positive leg of the LED. The shorter, negative leg of the LED is connected to one end of a resistor. The other end of the resistor is connected back to the Arduino board via the black wire, which completes the circuit to GND (ground), allowing the current to flow. When the circuit is closed, a red led turns on. If the circuit is interrupted or there is a break between two wires, then the red led turns off.

Fig 3: An Open or Broken Circuit, The Red Led is in “Off” state.

Fig 4: A Closed Circuit, The LED is in “ON” State.

Components I used:

1) Three jumper wires
2) A Red LED
3)  Arduino
4) A Resistor
5) A USB Cable for connecting Laptop with Arduino
6) A Breadboard
7) A Tape

Video Demonstration:

Link to this video.

Challenges and Future Improvements:

1) Working on this basic circuit board isn’t very challenging for me. However, I find it a bit tricky to attach the wires with tape in such a way that they make a complete connection when the charging cable is plugged in. Getting the angle right for this connection is the challenging part.

2) So for future improvements, I’m considering to use a sensor that can automatically detect whether the cable is connected or disconnected, and do so wirelessly. This would enhance the system’s functionality and user convenience.