Author: Sudiksha Kalepu

I collaborated with Aakif for these in-class exercises. And we tried to keep it as simple as possible.

Exercise 1

/* Week 11.2 bidi serial example
 * Originally by Aaron Sherwood
 * Modified by Mangtronix
 */

let rVal = 0;
let alpha = 255;
let left = 0; // True (1) if mouse is being clicked on left side of screen
let right = 0; // True (1) if mouse is being clicked on right side of screen

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

function draw() {
  // one value from Arduino controls the background's red color
  background(map(rVal, 0, 1023, 0, 255), 255, 255);
  
  ellipse(rVal +25,height/2, 50,55); // makes an ellipse that moves with resistor

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

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

    // Print the current values
    text('rVal = ' + str(rVal), 20, 50);
    text('alpha = ' + str(alpha), 20, 70);

  }


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

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

// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 2) {
      // only store values here
      // do everything with those values in the main draw loop
      
      // We take the string we get from Arduino and explicitly
      // convert it to a number by using int()
      // e.g. "103" becomes 103
      rVal = int(fromArduino[0]);
      alpha = int(fromArduino[1]);
    }

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

(Arduino Code Remains same as given in class)

Exercise 2

One of the LED’s brightness is changed by mouseX and the other’s by mouse Y.

/* Week 11.2 bidi serial example
 * Originally by Aaron Sherwood
 * Modified by Mangtronix
*/
let rVal = 0;
let alpha = 255;
let left = 0; // True (1) if mouse is being clicked on left side of screen
let right = 0; // True (1) if mouse is being clicked on right side of screen
function setup() {
  createCanvas(255, 255);
  textSize(18);
}
function draw() {
  // one value from Arduino controls the background's red color
  background(map(rVal, 0, 1023, 0, 255), 255, 255);
  // the other value controls the text's transparency value
  fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    
    // Print the current values
    text('rVal = ' + str(rVal), 20, 50);
    text('alpha = ' + str(alpha), 20, 70);
  }
  // click on one side of the screen, one LED will light up
  // click on the other side, the other LED will light up
  if (mouseIsPressed) {
    if (mouseX <= width / 2) {
      left = 1;
    } else {
      right = 1;
    }
  } else {
    left = right = 0;
  }
}
function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}
// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////
  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 2) {
      // only store values here
      // do everything with those values in the main draw loop
      
      // We take the string we get from Arduino and explicitly
      // convert it to a number by using int()
      // e.g. "103" becomes 103
      rVal = int(fromArduino[0]);
      alpha = int(fromArduino[1]);
    }
    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    
    let sendToArduino = mouseX + "," + mouseY + "\n";
    writeSerial(sendToArduino);
  }
}

int leftLedPin = 3;
int rightLedPin = 5;
void setup() {
  // Start serial communication so we can send data
  // over the USB connection to our p5js sketch
  Serial.begin(9600);
  // We'll use the builtin LED as a status output.
  // We can't use the serial monitor since the serial connection is
  // used to communicate to p5js and only one application on the computer
  // can use a serial port at once.
  pinMode(LED_BUILTIN, OUTPUT);
  // Outputs on these pins
  pinMode(leftLedPin, OUTPUT);
  pinMode(rightLedPin, OUTPUT);
  // Blink them so we can check the wiring
  digitalWrite(leftLedPin, HIGH);
  digitalWrite(rightLedPin, HIGH);
  delay(200);
  digitalWrite(leftLedPin, LOW);
  digitalWrite(rightLedPin, LOW);
  // 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); // led on while receiving data
    int xPos = Serial.parseInt();
    int yPos = Serial.parseInt();
    if (Serial.read() == '\n') {
      analogWrite(leftLedPin, xPos);
      analogWrite(rightLedPin, yPos);
      int sensor = analogRead(A0);
      delay(5);
      int sensor2 = analogRead(A1);
      delay(5);
      Serial.print(sensor);
      Serial.print(',');
      Serial.println(sensor2);
    }
  }
  digitalWrite(LED_BUILTIN, LOW);
}

Exercise 3

When dark, wind blows towards the left and when it is bright, wind blows towards the right.

int leftLedPin = 2;
int rightLedPin = 5;

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

 // We'll use the builtin LED as a status output.
 // We can't use the serial monitor since the serial connection is
 // used to communicate to p5js and only one application on the computer
 // can use a serial port at once.
 pinMode(LED_BUILTIN, OUTPUT);

 // Outputs on these pins
 pinMode(leftLedPin, OUTPUT);
 pinMode(rightLedPin, OUTPUT);

 // Blink them so we can check the wiring
 digitalWrite(leftLedPin, HIGH);
 digitalWrite(rightLedPin, HIGH);
 delay(200);
 digitalWrite(leftLedPin, LOW);
 digitalWrite(rightLedPin, LOW);

 // 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);  // led on while receiving data

   int LED_STATE = Serial.parseInt();
   //int right = Serial.parseInt();
   if (Serial.read() == '\n') {
     digitalWrite(rightLedPin, LED_STATE);
     int sensor2 = analogRead(A1);
     delay(5);
     Serial.print(sensor2);
     Serial.print(',');
     Serial.println('Y');
   }
 }
 digitalWrite(LED_BUILTIN, LOW);
}

These exercises helped me better understand how Arduino and p5 communicate through signals and how the data is best interpreted by the handshake, splitting and trimming.

Final Project Proposal

I want to build a robot that can learn its way around a certain maze/place through its Reinforcement Learning algorithm. I would use a python module for it to train and collect data and then transfer it to the Arduino and track the best possible path it finds on p5.js. I intend to use IR Sensors and a Bluetooth Module booked from the IM lab, Drills, Hand Saw, Soldering Stations, etc.

Reading Reflection

In the reading, the author delves into the complex challenges of designing for disability under the concept of universal design. This approach, aimed at creating products and services that are accessible and usable by as many people as possible, regardless of their abilities or disabilities, is critically analyzed. The text presents a compelling argument about the tension between creating a universally inclusive product and the risk of it becoming overly complex and less effective. The example of James Leckey’s furniture design for children with cerebral palsy highlights this tension. Leckey’s shift from universal solutions to more focused, adaptable products suggests that universal design might sometimes compromise the effectiveness and aesthetic appeal of a product. This case supports the argument that a balance must be struck between universality and simplicity, emphasizing the importance of targeted, user-centric design over a one-size-fits-all approach.

Regarding bias, the author seems to approach the subject with a balanced perspective, acknowledging the merits of universal design while also highlighting its potential drawbacks. This balanced view suggests a lack of significant bias, as the author presents both sides of the argument fairly. The reading has reshaped my understanding of universal design, highlighting its complexity and the crucial need for balance in design decisions. It raises questions about how designers can effectively balance the diverse needs and preferences of users without compromising the functionality and aesthetics of a product. Additionally, it prompts a consideration of how businesses can economically justify producing more specialized products while still catering to a broad market. This reading has made me more aware of the nuanced challenges in designing for inclusivity and the importance of considering the diverse needs of all potential users.

DemiPiano

We wanted to use a distance sensor and a button to change either the timbre/pitch of note/note being played. So we made a contactless DemiPiano that would play musical notes depending on the distance of the user from the sensor. The user is guided through a cardboard piece letting them know which note would be played at a specific range of distance from the sensor. And the button would turn off the instrument when clicked.

Circuit:

Code:

#include "pitches.h"

// defines pins numbers
const int trigPin = A0;
const int echoPin = A1;
const int speakerPin = 8;
const int pushButton = A2;


// defines variables
long duration;
int distance;
void setup() {
  pinMode(trigPin, OUTPUT);  // Sets the trigPin as an Output
  pinMode(echoPin, INPUT);   // Sets the echoPin as an Input
  pinMode()
  Serial.begin(9600);  // Starts the serial communication
  
}
void loop() {

  int buttonState = digitalRead(pushButton);

  // print out the state of the button:
  Serial.println(buttonState);
  delay(1);  // delay in between reads for stability

  // 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
  Serial.print("Distance: ");
  Serial.println(distance);

  // Playing outside distance range or the instrument is turned off
  if (distance >= 40 || buttonState == 1) {
    noTone(speakerPin);
  }
  // Play C4 in first 10cm
  else if (distance >= 0 && distance <= 10) {
    tone(speakerPin, NOTE_C4, 1000 / 4);
  }
  // Play G4 in next 10cm
  else if (distance >= 11 && distance <= 20) {
    tone(speakerPin, NOTE_G4, 1000 / 4);
  }
  // Play A4 in next 10cm
  else if (distance >= 21 && distance <= 30) {
    tone(speakerPin, NOTE_A4, 1000 / 4);
  }
  // Play F4 in next 10cm
  else if (distance >= 31 && distance <= 40) {
    tone(speakerPin, NOTE_F4, 1000 / 4);
  }
}

Future Work:

If I were to revisit this project, I would add a function that would help me move up an octave using the distance calculated in the Y direction for each of the 4 notes C, G, A, F and a button that would help shift to the specific note’s, say F4’s, sharp form. But we are proud of all the exploration of different kinds of distance sensors, trying to detect people at different distance and mapping those to notes, etc., that went behind the building of our current most feasible version.

A Brief Rant on the Future of Interaction Design

The author’s argument about the underutilization of human capabilities in current interaction design is supported by the fact that touchscreens primarily engage with our sense of touch in a very limited way – mostly through simple taps and swipes. This observation aligns with research in human-computer interaction that emphasizes the potential of multi-sensory interfaces, which could offer more immersive and intuitive experiences by engaging more of our senses and motor skills.

However, the author’s perspective might be seen as somewhat biased towards a specific vision of technological advancement, possibly overlooking the practical and economic aspects of technology adoption. Touchscreen technology’s widespread acceptance can be attributed to its simplicity, cost-effectiveness, and versatility. It’s also worth noting that touchscreens have significantly improved accessibility for people with certain disabilities, a point that the author doesn’t fully address.

This reading hasn’t fundamentally changed my beliefs but has expanded my perspective on the potential and limitations of current interaction designs. It raises questions about how we can balance the pursuit of more advanced, human-centric interfaces with the practical realities of technology development and adoption. How can we innovate in a way that’s both technologically feasible and economically viable? Additionally, it prompts consideration of how new interaction paradigms can be inclusive, ensuring they don’t alienate users who have adapted to or rely on existing technologies.

In summary, while the reading presents a compelling vision for the future of interaction design, it also highlights the need to consider a broader range of factors, including practicality, accessibility, and user adaptation, in the evolution of technology.

LED Play : FlexMe

Concept & Inspiration

My idea for the assignment this week was to visualize the short range of flexion of our index fingers. When my index finger is bent, one of the LEDs lights up only when the flexion is more than half the total flexion observed in this case and the other maps the total recorded flexion to the brightness of the light produced. This, however, would only work when the switch is turned on.

Circuit Diagram:

Code:

int flexPin = A0;  // flex pin
int flex;          // flex readings
int switchInPin = A2; // switch pin
int switchIn;         // switch readings
int led1 = 11;
int led2 = 10;

void setup() {
  // set LED pins as outputs
  pinMode(led1,OUTPUT);
  pinMode(led2,OUTPUT);
  Serial.begin(9600);
}

void loop() {
  // read input values
  sensor = analogRead(flexPin);
  switchin = digitalRead(switchInPin);
  // print input values
  Serial.println(flex " | " switchIn);
  // map flexion to voltage input for LED
  flex = map(flex, 990, 1020, 0, 255);
  if(switchIn == HIGH){
    analogWrite(led1, flex);
    if(flex > 127) { digitalWrite(led2,HIGH); }
    else { digitalWrite(led2,LOW); }
  }
  else{
    digitalWrite(led2, LOW);
    analogWrite(led1, 0);
  }
}

Physical Computing’s Greatest Hits and Misses

The text provides a comprehensive overview of various themes in physical computing projects, highlighting the diversity and creativity in the field. It’s interesting to see how some projects are recurring themes in physical computing classes, demonstrating their value in teaching physical interaction.

I am particularly fascinated by the “Gloves” and “Body-as-cursor” categories of physical computing projects. The gloves, especially the drum gloves, are a creative way to interact with music and rhythm. They provide a tangible connection to the music, making the experience more immersive and enjoyable. In healthcare, similar glove-based interfaces could be used for rehabilitation exercises, where patients can engage in rhythmic activities that are not only beneficial for their physical health but also enjoyable and motivating. In education, these gloves could be used to teach rhythm and music in a more interactive and engaging way, catering to different learning styles.

The “Body-as-cursor” projects, like the Digital Wheel Art designed for a patient with limited functionality in their arms and legs, are a testament to the potential of physical computing in improving the quality of life for people with disabilities. This technology could be further developed to create interactive educational content for children with disabilities, providing them with an opportunity to learn and engage with educational material in a way that is accessible and tailored to their needs. In fintech, body-as-cursor technology could be used to create more accessible and user-friendly interfaces for people with disabilities, ensuring that they can independently manage their finances and access financial services.

Overall, the text highlights the potential of physical computing projects to not only provide creative and engaging experiences but also make a significant impact in various fields, including healthcare, education, and fintech.

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

The text talks about the need for interactive designs to be user-friendly and open to interpretation. It’s like when a director gives actors the basics but lets them add their own flair. As a UI/UX designer, this means creating layouts and features that are easy to use and let users figure things out in their own way. It’s about making sure the design is clear enough so users get what they need to do, but also flexible enough so they can use it in ways that make sense to them. The key is to make sure that while the design guides them, it doesn’t limit them. How do we, as designers, get our point across without boxing users into a single way of thinking or interacting?

Unusual Switch: “Put Your Phone Away!”

Concept & Inspiration

My idea for the unusual switch was an incentive for me to put my phone away while working. The concept was that my phone, when put away in a cardboard case, would power my study lamp and ensure I work only when my phone was away.

Circuit Diagram:

Highlights

These are the main components of my switch—

Cardboard Case:

Phone:

I used a case made of cardboard and held together by a non-adhesive elastic tape. As for the circuit, I pierced a 5V jumper wire through one side and a corresponding red wire that connects to a resistor end, and a ground wire through the other side and a corresponding black wire that connects to the negative end of the LED. These gaps in the circuit are filled by the conducting fabric lining my phone cover, when the phone is put in its cardboard case.

The biggest challenges I faced were holding the wires and fabric in place, the design of the cardboard case and making sure the circuit had no loose ends when the phone was put in the case to light the LED. While testing a non-secure version of my switch, more often than not, my LED would not light up despite putting the phone in the case. Then I realized it would be smart to use an elastic tape tied around the cardboard piece— a) it looks cute, b) the phone can easily slide and out and the jumper wires on the side would definitely be in contact with the conducting fabric on the phone cover.

Reflections and Future Work

If I were to revisit this assignment, I would improve its aesthetics and take more user feedback to suit their needs better.  But as of now, I love the little MVP version I have come up with. And it was definitely a fun exploratory exercise!

Norman’s:

The reading gives us a clear picture of how important it is to balance usability and aesthetics in design. The author’s teapot collection is a great example of this. Each teapot represents a different aspect of design—usability, aesthetics, or practicality. The author’s experience with color displays in the early days of personal computers also supports the idea that aesthetics can enhance the user’s experience and satisfaction, even if it doesn’t necessarily improve functionality.

Don Norman, the author, doesn’t seem biased in this reading. He values usability and functionality but also understands the need for beauty and pleasure in design. This balanced view is important because it shows that human interaction with products is complex and needs a holistic approach to design.

The reading has reinforced my belief in the importance of aesthetics in design. While functionality and usability are crucial, the aesthetic appeal of a product can significantly enhance the user’s experience and satisfaction. This is especially true today, where there are so many options available, and a product’s aesthetic appeal can really make it stand out.

2 quotes from the reading really stood out to me. The first quote, “The hidden danger is to neglect areas that are not easily addressed in the framework of science and engineering,” highlights the importance of considering the human aspect in design. Science and engineering can provide us with functional and efficient products, but they might lack the emotional connection that makes a product truly satisfying to use. This emotional connection can come from aesthetics, the pleasure of using the product, or how the product makes the user feel. These aspects are not always easily quantifiable or analyzable in the same way that the technical aspects of a product are, but they are just as important in creating a successful product. The second quote, “To be truly beautiful, wondrous, and pleasurable, the product has to fulfill a useful function, work well, and be usable and understandable,” emphasizes the need for a holistic approach to design. A product can be aesthetically pleasing, but if it doesn’t function well or is difficult to use, it won’t be satisfying to the user. Conversely, a product that is highly functional but lacks aesthetic appeal might not attract users in the first place. This quote encapsulates the essence of good design – it’s not just about how a product looks or works, but how it makes the user feel and how it fits into their life.

The reading also raises several questions for me. How can designers find the right balance between usability and aesthetics? Are there specific guidelines or best practices that can help achieve this balance? Additionally, how does the cultural background of the user affect their perception of a product’s aesthetics and usability? These are important questions that need to be addressed to create products that are not only functional and usable but also beautiful and pleasurable.

Hamilton’s:

The text provides a fascinating insight into the early days of software engineering and the significant contributions made by Margaret Hamilton to the Apollo space program. It is interesting to see how Hamilton’s work laid the groundwork for the development of modern software engineering and how her innovations continue to impact the field today

The evidence in the text supports the points made about the importance of Hamilton’s work. The fact that she was responsible for developing the onboard flight software for the Apollo computers is a testament to her skill and ingenuity. Additionally, the incident with her daughter crashing the simulator and the subsequent error during the Apollo 8 flight highlights the importance of robust error-checking mechanisms, which Hamilton advocated for.

The reading has not necessarily changed any of my beliefs, but it has certainly deepened my appreciation for the contributions made by early software engineers like Hamilton. It is easy to take for granted the sophisticated software that we have today, but it is important to remember the pioneers who laid the groundwork for these advancements.

Concept & Inspiration

After hopping from one idea to the next for 2 weeks, I finally decided that my midterm project should display a part of my past experiences and culture known to a select few. So, after an emotion detection algorithm, a pinball game in the dark, and an Around the World in 5 Minutes experience— here is my final idea.

Nritya Smriti literally translating to ‘Dance Memoir’ or ‘Dance to Remember’ is a memory game introducing users to the different dance forms of India through visuals and music. On finding a match, the matched dance form’s music starts to play. The user can either choose to continue to enjoy the music or continue flipping the cards to go on with the game. Although it is recommended that they continue the game only after the music stops to make the most of the artistic experience.

I was inspired to make this game given my long lost love for Indian Classical Dance, specifically Kuchipudi, that I was trained in as a child. I realized after coming to university how little the world knows about Indian Art and Culture that making a pinball game, almost 80% of it, didn’t seem to gratify me as much as spotlighting these art forms to the world would.

Highlights (“Proud of-“)

// Function to shuffle the array for random placement of tiles
function shuffleArray(array) {
  let counter = array.length;
  while (counter > 0) {
    let index = Math.floor(Math.random() * counter);
    counter--;
    let temp = array[counter];
    array[counter] = array[index];
    array[index] = temp;
  }
}

else if (gameState == "beingSet") {
   // To set up the game board
   faceIDs = [
     "bhangra",
     "bharatnatyam",
     "garba",
     "kathak",
     "kathakali",
     "kuchipudi",
     "manipuri",
     "mohiniyattam",
     "odissi",
     "sattriya",
   ]; 
   possibleFaces = faceIDs.slice(0);
   for (let i = 0; i < (NUM_COLS * NUM_ROWS) / 2; i++) {
     let randI = floor(random(possibleFaces.length));
     let faceID = possibleFaces[randI];
     selected.push(faceID);
     selected.push(faceID);
     possibleFaces.splice(randI, 1);
   }
   shuffleArray(selected); 

// Mapping dance forms to their images and sounds
  music["bhangra"] = bhangraS;
  music["bharatnatyam"] = bharatnatyamS;
  music["garba"] = garbaS;
  music["kathak"] = kathakS;
  music["kathakali"] = kathakaliS;
  music["kuchipudi"] = kuchipudiS;
  music["manipuri"] = manipuriS;
  music["mohiniyattam"] = mohiniyattamS;
  music["odissi"] = odissiS;
  music["sattriya"] = sattriyaS;

After a week of experimenting with the ML5 library and trying to figure out a way in which the user’s emotions could be detected and interpreted to give a certain interesting outcome, I realized that there was no specific experience/game I had in mind to be able to salvage this project into a presentable midterm project. However, during a short break in my brainstorming session, I played the classic 3D Pinball game online. And there it was— my final midterm project idea: A 2D Pinball in the Dark game.

It starts off with a complete view of the screen. That would be inspired by the above layout. The aim of the game is to stop the ball from falling off the screen using the right and left flippers at the bottom of the screen and win points by bouncing off of these obstacles. The points a collision with each of these obstacles and information on how to control the flippers is to be provided before the game begins. As the game goes on, the regions farther away from the ball start to get dark. The circle of light around the ball comes closer and closer to the ball as the game progresses.

I think the most frightening part is to get the collision detection with the obstacles and the first initial launch of the ball right. I have explored the Matter.js library and have also understood how it can be used for this project in TheCodingTrain’s playlist for the same. I have 60% of my code design ready and I hope to add more features to the game- like a disappearing ball at higher scores, or a timed special obstacle that if bounced to would give you 2x the points usually allotted for it. Although this might seem simple to the biased user who has been playing this classic since they were a child, getting the physics and collisions right has been quite challenging. I would be very proud of all the Math and Physics involved in the making of this project.

My undergraduate experience so far has undoubtedly brought me face to face with the design mysteries that Donald Norman so eloquently elucidates in “The Psychopathology of Everyday Things.” Norman’s views coincide with my personal experiences, providing real proof of his arguments in his work. For example, the blinds in my dorm room exemplify the heart of Norman’s thesis about the lack of affordances in design. Each evening, I am perplexed by the decision of whether to pull the rope to the left or right and whether to pull the part of the string away from me or closer to me to attain the required light and privacy. This everyday struggle, which is eerily similar to Norman’s scenarios, begs the question of whether the designers of these blinds addressed the end user’s perspective. This supports Norman’s claim that badly designed items frequently lead users to incorrectly ascribe challenges to their own shortcomings.

possible UX fix to my blinds frustration^^

Nevertheless, not all my encounters with everyday objects are marked by design frustration. The Heinz squeezy ketchup bottle, an exemplar of intuitive design, reinforces Norman’s argument in favor of user-centered functionality. This simple yet ingenious design ensures mess-free dispensation and the extraction of every last drop of ketchup, illustrating that user-friendliness and aesthetics can harmoniously coexist.

While Norman appears to have a bias toward showcasing faulty designs, I’ve come to realize that his concentration is on illuminating design nuances that may go overlooked. My thoughts on his work have changed my perspective on design. I’ve learned to realize the deep impact of design choices on our daily experiences, and I now wonder if innovation and beauty should ever be sacrificed for usability. Furthermore, Norman’s discoveries piqued my interest in the broader implications of design in our technologically driven world, as well as its ethical elements.

In light of Norman’s chapter, I find myself pondering how the delicate balance between innovative novelty and straightforward intuitiveness can be achieved by designers. These questions, stimulated by Norman’s observations and reinforced by my own experiences, have opened a new intellectual avenue for me as I continue to explore the complex realm of design.

Concept & Inspiration

What’s better than generating art using text or data? Generating art using text AND data. Ever since my first international flight, I had started to associate cities to the IATA code that their respective international airports use. Although I had no idea that they were even called that or that there even was a body called the International Air Transport Association that assigns these codes to international airports, I always found them interesting. This assignment helped me explore so many of these through a simple data visualization of the locations and details of the airports of the world.

[open in full screen for best results]

Highlights

Initially, I wanted to solve the issue of how slow a similar code ran during class. So I changed the architecture of my code a little bit to be able to go over the file lesser times than we did in class. So, initially, that was a success. At this stage, my visualization of the world map through airport codes was static, providing little to no information about these airports that formed our map. Then, I decided to add a tiny bit of interactivity to show the specific airport’s details on the bottom of the screen as this seemed to be the only bit of canvas that was empty throughout.

This, however, did not tell me what the IATA code of this specific airport is as in most places on the map there is a lot of overlapping codes, which looks aesthetically pleasing in an artwork but wasn’t as informative as I’d like it to be. Then, I made a new variable to check if a particular airport is being hovered on to display the airport’s IATA code and contribution to the map in white.

if (hoverAirport) {
    // If an airport is hovered, draw it prominently
    hoverAirport.drawAirport(true);  // true indicates hovered
      // print(hoverAirport.iata); // printed the iata codes to check why a hovered iata code is not highlighted in white at its location
    // Set text properties
    noStroke();
    fill(255);
    // Adjust text alignment based on cursor position
    if (mouseX <= width / 3) textAlign(LEFT, BOTTOM);
    else if (mouseX >= (2 * width) / 3) textAlign(RIGHT, BOTTOM);
    else textAlign(CENTER, BOTTOM);
    textStyle(BOLD);
    textSize(20);
    // Display airport details if it has a valid IATA code
    if (hoverAirport.iata && hoverAirport.iata[0] !== "\\") {
      text(
        `${hoverAirport.name}, ${hoverAirport.city}, ${hoverAirport.country}`,
        mouseX,
        height - 20
      );
    }
    textStyle(NORMAL);
    textSize(12);
}

  drawAirport(isHovered) {
    // Draw the airport IATA code on the canvas
    if (isHovered) {
      textStyle(BOLD);
      fill(255);  // Use white color for hovered airport
    } else {
      textStyle(NORMAL);
      fill(this.iata[0].charCodeAt(0));  // Original fill for non-hovered airports
    }
    noStroke();
    textAlign(CENTER, CENTER);
    if (this.iata && this.iata[0] !== "\\") {
      text(this.iata, this.long, this.lat);
    }
  }
}

But then, I realized that although I highlighted the IATA code only if the airports had a valid IATA code, I made airport objects and added them to the airports array long before I checked if they had a valid IATA code. This meant that all airports would have a specific point on the canvas assigned to them. Thus, when I hovered on an airport with no IATA code, I would still get its information, which intuitively felt unnecessary to me. Thus, I decided to then check if the airport had a valid IATA code before printing the airports details on the bottom of the screen as well. I am glad I could reach a level of interactivity I am proud of.

Reflections & Future Work

If I were to revisit this piece of art I would think more about the aesthetics of the map and change the architecture a lil bit to only make objects of those airports that have a valid IATA code. And add a more robust dataset that would tell the program in real-time where all the flights in the world are on their way to their current destination. So there would be a lot of interesting parabolic paths and cute little airplane doodles for the same.

References

Airport Data

Concept & Inspiration

Crawford’s reading made me think about one of my first interactions with electronic gadgets – a Samsung Tab and how my experience with tablets has been improved over the years. My tab had this wallpaper on its lock screen since the very beginning and there was something captivating about it that made me wonder “What next?” Where do these seeds fly to? Can I blow into my screen or tap it to make them move? My work this week is to gratify my 7-year old curious self- to touch the screen and watch as the seeds drift away.

Highlights

I used vectors for the first time and found it an important aspect of p5.js. So after spending a few hours on the references page, finally got a hang of it. I really enjoyed trying out different ways to blow away the seeds using the applyForce() function and calling these functions in conditional statements in the draw() function. Then, I finally decided to essentially rotate the seeds in the direction opposite the mouse click and randomizing their velocities and accelerations, to move away from the mouse click which is intended to symbolize a pleasant breeze blowing on a bright morning.

applyForce(f, mousePos) {
    // Calculate the direction from the particle to the mouse click
    let directionToMouse = p5.Vector.sub(mousePos, this.pos);

    // Calculate the angle between the wind force and the direction to the mouse
    let angleToMouse = this.vel.angleBetween(directionToMouse);

    // Check if the angle is within a threshold (e.g., particles pointing towards the mouse)
    if (abs(angleToMouse) < PI / 4) { // Adjust the threshold angle as needed
      // Apply rotational force to the particle
      this.angularVel += random(-0.02, 0.02); // Adjust these values for rotation speed

      // Apply a forward force in the direction of the wind
      let forwardForce = this.vel.copy();
      forwardForce.normalize(); // Ensure the force is in the direction of velocity
      forwardForce.mult(0.1); // Adjust the strength of the forward force
      this.acc.add(forwardForce);
    } else {
      // Apply the original force (without forward force)
      this.acc.add(f);
    }
  }

wind.x = map(sin(frameCount * 0.02), -1, 1, -0.5, 0.5);

for (let particle of particles) {
  if (isBlowing && millis() - particle.startBlowTime > particle.blowDelay) {
    let windDirection = createVector(
      width / 2 - mouseX,
      (height * 2) / 3 - mouseY
    );
    windDirection.setMag(0.05);
    particle.applyForce(windDirection, clickPos);
    particle.update();
  }
  particle.display();
}

I also learned about the lerpColor() method to create a gradient in the background to make it look more realistic. Initially, I struggled to think of a way to make the colours seamless but then figured a simple for() loop would do the trick.

// Gradient for the sky
  for(let i = 0; i <= height; i++) {
    let inter = map(i, 0, 3 * height/4, 0, 1);
    let c = lerpColor(color(255, 250, 205), color(135, 206, 245), inter);
    stroke(c);
    line(0, i, width, i);
  }

Reflections & Future Work

If I were to revisit this work I would employ a more realistic approach to making the seeds fly out in layers and change speed depending on the amount of time the mousePressed() is true. However, I am also proud of what I have achieved so far with regards to the movement of the seeds. I would also include a natural swaying effect to the Dandelion stem and seeds. And for the lack of a better song idea, would add ‘Dandelions’ by Ruth B in the background- just for fun’s sake XD

References

All references have been linked above.