Author: Lukrecija Paulikaite

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

 

 

I was glad to read about the topic of design in the context of disability and how it has historically been approached with a focus on discretion rather than aesthetics or even functionality. I found the discussed collaboration between athlete and model Aimee Mullins and designer Alexander McQueen to be beautifully inspiring. It highlights the power of design and how it can be used to transform something that is considered a pitied disadvantage into an element of individual identity. It opens a completely new direction, one that values empowerment and personal expression rather than the wish to blend in and the strive for “normal”.

As we go deeper into this evolving conversation about design and disability, I’m left wondering about the potential effects on societal perceptions. How might a more widespread acceptance of visually expressive assistive devices lead to a more inclusive sense of beauty and ability? Can collaboration between designers and people with disabilities pave the way for a cultural shift towards celebrating uniqueness rather than conforming to preconceived norms? Storieslike the one of Aimee Mullins and Alexander McQueen invite to consider the transforming role of design not only in the lives of persons with disabilities, but also in constructing a more inclusive and welcoming society that celebrates the complexity of individual experiences.

Exercise 1:

To move the ellipse in the middle of the screen, I used the example from class with small changes. Here is the sketch:

The ellipse moving part:

let x = map(alpha, 0, 1023, 0, width);
  ellipse(x, height/2, 40, 40)

Exercise 2:

I wanted the brightness level of an LED to be matched with the falling of the ellipse on P5.js. The LED is the brightest when the ellipse is at the bottom of the canvas, thus making the LED brighter as the ellipse falls. Here is the sketch:

P5 code:

let y = 0;

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

function draw() {
  
  background(0);

  // the other value controls the text's transparency value
  fill(255);
  ellipse(width/2, y, 40, 40);
  y+=1;
  
  if (y>height){
    y=0
  }

  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);

  }
  
  print(y)
  

}

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 = y + "\n";
    writeSerial(sendToArduino);
  }
}

Arduino code:

int ledPin = 11;  // LED connected to pin 11

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

  // Blink the LED to indicate setup
  digitalWrite(ledPin, HIGH);
  delay(200);
  digitalWrite(ledPin, LOW);

  // Start the handshake
  while (!Serial.available()) {
    Serial.println("0");  // Send a starting message
    delay(300);
  }
}

void loop() {
  // Wait for data from p5.js before doing something
  while (Serial.available()) {
    int y = Serial.parseInt();
    if (Serial.read() == '\n') {
      // Map the y value to the LED brightness (0-255)
      int brightness = map(y, 0, 240, 0, 255);
      analogWrite(ledPin, brightness);

      // Print the received y value for debugging
      Serial.println(y);
    }
  }
}

Exercise 3:

I made the gravity weaker so that the LED blinking is more clearly visible.

P5 code:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let alpha = 0; // Initialize alpha

function setup() {
  createCanvas(640, 360);
  noFill();
  position = createVector(width / 2, 0);
  velocity = createVector(0, 0);
  acceleration = createVector(0, 0);
  gravity = createVector(0, 0.05 * mass);
  wind = createVector(0, 0);
}

function draw() {
  background(255);

  // Update wind based on alpha
  wind.x = alpha;

  applyForce(wind);
  applyForce(gravity);

  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);

  ellipse(position.x, position.y, mass, mass);

  if (position.y > height - mass / 2) {
    velocity.y *= -0.9; // A little dampening when hitting the bottom
    position.y = height - mass / 2;
  }

  print(int(position.y), alpha);
}

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 readSerial(data) {
  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
      alpha = int(fromArduino[1]);
    }

    //////////////////////////////////
    // SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = int(position.y) + "\n";
    writeSerial(sendToArduino);
  }
}

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

Arduino code:

const int potPin = A0;  
const int ledPin = 13;  

int potValue;  
int ballPosition;  
bool isBouncing = false;  

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);  
}

void loop() {
  // Read the value from the potentiometer
  potValue = analogRead(potPin);

  // Map the potentiometer value to the range of wind force
  int mappedWind = map(potValue, 0, 1023, -1, 1);

  // Send the mapped wind force value to the computer through serial
  Serial.print("0,");
  Serial.println(mappedWind);

  // Read the ball's position from p5.js
  if (Serial.available() > 0) {
    ballPosition = Serial.parseInt();
  }

  // Check if the ball bounces
  if (ballBouncesCondition()) {
    if (!isBouncing) {
      // Turn on the LED when the ball starts bouncing
      digitalWrite(ledPin, HIGH);
      isBouncing = true;
    }
  } else {
    // Turn off the LED if the ball is not bouncing
    digitalWrite(ledPin, LOW);
    isBouncing = false;
  }

  
}

bool ballBouncesCondition() {
  return ballPosition >= 320;
}

 

 

Concept:

Our idea for the musical instrument was drawn from the classic guitar mechanism. By integrating Light-Dependent Resistors (LDRs) as the sensory input and buzzers as the output, we’ve created a playful experience. Each LDR is strategically positioned to represent a distinct musical note, and when covered, it triggers a corresponding buzzer, simulating the act of plucking strings on a guitar. There’s also a digital switch, which, when pressed, records the notes being played. When the switch is released, the notes are played back.

Items used:

• Arduino Uno
• 6 Light-Dependent Resistors (LDRs)
• 6 Buzzers (Speakers)
• Resistors (for LDRs )
• Jumper Wires (for connecting components)
• 2 Breadboards
• 1 Momentary Switch

Technical Implementation:

In our musical instrument, each Light-Dependent Resistor (LDR) is assigned to represent a specific musical note, creating a musical sequence reminiscent of a guitar tuning. The choice of notes – E, A, D, G, B, E – corresponds to the standard tuning of the six strings on a guitar. When an LDR is covered, it changes the resistance and triggers the Arduino to interpret this change as a command to play the designated note through the corresponding buzzer.

The Arduino continuously reads the analog values from the LDRs and, upon detecting a significant change, maps the input to trigger the corresponding buzzer connected to a digital output pin. The code is designed to be modular, allowing for easy adjustments to resistor values or the addition of more sensors and buzzers for expanded musical possibilities. 

When the digital switch is pressed, the notes which are played are recorded in an integer array. As soon as the switch is released, the notes in the array are played back using the regular tone() function. 

// check recording state
 if (digitalRead(SWITCH_PIN) == HIGH) {
   Serial.println("Recording");
   recordMode = true;


 } else if (digitalRead(SWITCH_PIN) == LOW) {
   if (noteCount > 0) {
     Serial.println("Playback");
     recordMode = false;
     for (int i = 0; i < noteCount; i++) {
       tone(playback_PIN, melody[i]);
       delay(200);
     }
     noTone(playback_PIN);
     noteCount = 0;
   }
 }

Future Improvements:

The array can only hold a maximum of 50 notes, and a future improvement could be adding some warning (LED flashing?) to indicate that the array capacity has been reached. There’s also no error handling at this stage, so there could be some unexpected errors if more than 50 notes are recorded.

Are we really going to accept an Interface Of The Future that is less expressive than a sandwich?

The warning about avoiding the body’s natural interfaces inspires reflection about the effects of immobile futures. Despite the simplicity and accessibility of touchscreens, the absence of tactile interactions raises concerns about the long-term impact on human development. Some of the consequences are already visible, such as an increase in bad posture, poor eyesight or decreased attention span. The rant invites to contemplate the depth of interaction design in the context of adult capabilities, expressing the notion that a fully-functioning adult human deserves interfaces that go beyond the simplicity of existing touch-based interactions. However, it is interesting to imagine the alternatives. As discussed in the second reading, many more expressive options are simply not optimal, such as voice or gestures. Even besides their limitations, just thinking about having to control the multiple windows on my laptop with a hand gesture in a cafe or another public space makes me uncomfortable, not to mention the discomfort associated with voice commands. I think this is where a lot of difficulties emerge as well – as a society we are already on a path to a screen-based future, and some deep habits have already been formed. This is where the challenge arises. We’re already heading towards a screen-centric future, and deep-rooted habits have taken hold. Transitioning to more expressive interactions would face resistance, as significant changes are often taken pessimistically and lack widespread support. This reluctance makes achieving a shift towards more expressive interfaces even more challenging.

For this week’s assignment, my goal was to get more comfortable with the different components of Arduino and making circuits. I decided to use a potentiometer for analog input and a button for the digital. With potentiometer, I aimed to control the dim level of a red LED, and with the button I wanted to control the yellow LED. Here is the result:

Here is my code:

#define LED_PIN_1 8
#define BUTTON_PIN 7

#define LED_PIN_2 11
#define POTENTIOMETER_PIN A1

void setup() {
  pinMode(LED_PIN_1, OUTPUT);
  pinMode(BUTTON_PIN, INPUT);

  pinMode(LED_PIN_2, OUTPUT);
}
void loop() {

  int potentiometerValue = analogRead(POTENTIOMETER_PIN);
  int brightness = potentiometerValue / 4;
  analogWrite(LED_PIN_2, brightness);

  if (digitalRead(BUTTON_PIN) == HIGH) {
    digitalWrite(LED_PIN_1, HIGH);
  }
  else {
    digitalWrite(LED_PIN_1, LOW);
  }
}

It was a simple setup but completing this assignment made me feel more comfortable with Arduino. Also, a big shoutout to the IM Lab assistants and their Saturday vibes💅🏻.

In his exploration of interactive art “Making Interactive Art: Set the Stage, Then Shut Up and Listen”, Tigoe suggests that meaningful interactive experiences emerge from a delicate combination of guidance and freedom of the participant. He offers an analogy of a director working with actors to illustrate the importance of subtly suggesting intentions without imposing rigid interpretations. Such comparison sparks a reflection about the setting and design of interactive artworks, which drives a question as to how much guidance is sufficient to provide a context without overshadowing individual interpretation? What is the role of physical space and how can an artist set up a design that encourages curiosity and discovery without the need of dictating the narrative? Furthermore, does the setup of the artwork influence the participant’s emotional connection as well as one’s interpretation of the artwork?

This nicely ties in with the “Physical Computing’s Greatest Hits (and misses)” reading. The part about Theremin-like instruments caught my attention, where the author mentions the importance of gestures being meaningful when a participant interacts with the artwork (gesture of moving your hand over a sensor vs a glove where one taps his fingers to make a rhythm). It makes complete sense that less guidance is required when a setup matches with some kind of pre-existing mental model. It highlights the interconnected nature of physical computing and interactive art, emphasizing the importance of aligning design choices with participants’ intuitive understanding for a more seamless and engaging interactive experience.

Although Donald Norman’s ideas about emotion design and the role of aesthetics in design and Margaret Hamilton’s invention of the modern concept of software may seem unrelated at first glance, I found quite some connecting ideas between these readings, especially in the concepts of user-centered design, and its application in stressful situations.

Donald Norman and Margaret Hamilton both stressed the significance of developing products and software with the end user in mind. Norman’s work on emotional design emphasizes the importance of developing products that elicit good emotional reactions from users. Similarly, Hamilton’s work in software engineering was centered on making software more user-friendly and stable, as well as ensuring that it fits the demands of its users. Although Hamilton was a programmer and her job circled around functionality rather than anything else, she knew that failure might occur not because of mistakes in the system, but because of human mistakes when interacting with it. The story of the prelaunch program called P01 stuck in my mind, when an astronaut accidentally launched it at a wrong time and that almost cost the whole mission. Hamilton was aware that users are not perfect even in using systems that they were well trained on using, and even if they are astronauts themselves: “We had been told many times that astronauts would not make any mistakes,” she says. “They were trained to be perfect.” For me, this story defines what is user-centered design: it is the assumption that users are not perfect and the stress on importance of considering the human element in design and engineering, ultimately leading to more effective and user-friendly products and software.

This has been further backed up by Norman in his discussion on designs for low and high stress environments. I think it is not highly disputable that something like an Apollo mission is quite a stressful situation, which, according to Norman, makes good human-centered design “especially important”. Stressful environments and circumstances increase the chances of human error, and Hamilton was right in her idea to take that into account and to prevent as many misuses due to human error as possible in her design of Apollo software.

Sketch:

Link to full screen: https://editor.p5js.org/llluka/full/EZEndFCFm

https://editor.p5js.org/llluka/sketches/EZEndFCFm

Concept:

The game, titled “Designer Chair Plunge,” is a fun and interactive experience that puts players’ reflexes and decision-making skills to the test while exploring the world of designer chairs. The goal is for the player to save a designer from a risky fall, guided by a humorous story in which the chairs are personified as fighters. As the player, you select your “fighter” from a range of well-known designer chairs including Barcelona, Eames, Panton and Wassily chairs, and the classic white plastic chair is added for the humorous effect. When the game begins, you must manipulate your chosen chair in order to capture a falling designer.  Your score rises with each successful rescue. However, be careful not to let a designer plunge to the ground, as this will result in an offensive game over. “Designer Chair Plunge” combines design appreciation and gaming components, creating a novel and enjoyable way to interact with the world of furniture design.

Technical Implementation:

The game is built on the p5.js framework utilizing object-oriented programming. There are various screens in the game for the introduction, chair selection, gaming, and ending. PNG images and sounds are used in the technological implementation to create an immersive experience. Chairs and designers are represented by images, and interactions are managed through mouse input, where the player selects their chair and attempts to catch designers falling from the top of the screen. The game keeps track of the player’s score and ends the game if a designer hits the ground. The “restart” function not only resets the game state but also ensures the music restarts from the beginning, creating a consistent and enjoyable audio experience for the players. Here is the code for the restart function:

function restart() {
  screen = 0; // switch to intro screen
  score = 0;
  designer.reset();
  designer.speed = 2; // reset the speed of the fall
  mozart.stop(); // stop currently playing sound
  mozart.play(); // start the sound from the beggining
}

Moreover, the falling designer figures are randomized from 3 distinct images. Here is a function inside my Designer class that handles that:

display() {
    if (this.r < 0.3) {
      image(subject_1, this.x, this.y, this.width, this.height);
    } else if (this.r < 0.6) {
      image(subject_2, this.x, this.y, this.width, this.height);
    } else {
      image(subject_3, this.x, this.y, this.width, this.height);
    }
  }

Nevertheless, an important part of the game’s look and feel is not in the code. At first, I experimented with different images of the chairs found online, however, nothing really seemed to match my vision for the game. Therefore, I decided to draw the chairs myself to give the experience a unified aesthetic. Here are my PNG images (I used Adobe Fresco on my iPad to produce them):

 

 

 

 

 

Reflection:

I am very happy about the final look and feel of the project. It turned out  exactly as I imagined it to be (refer back to the moodboard in Midterm Progress #1). I am especially satisfied with the concept and design of the game, and how I managed to create and maintain a unified feel of the mid-century modern aesthetic with the tiny details such as my own drawings, sounds, and the two graphic images. I also applaud myself for the humorous aspect of the game – there is no way to “win” the game, and thus the designer is never going to be satisfied, just like in the real life.