For the final project of this class, I have a lot of vague ideas but need to decide on one based on its practicality! I know what I want to use for the project but I’m trying to figure out if I want to make that in an interactive game form or an art form. Either an interactive art that takes input from the arduino through different body movements or a game that works on the same mechanism.
Things that I’m sure of:
Including the whole body as a part of this as after the readings from this class, one of my biggest takeaways has been using the entire body or atleast just more than hands for creating an immersive experience.
I want to try to use flex and force sensors since I’ve never had a chance to use them for the weekly assignments yet
I’m a person who has the shortest attention span and loses interest very quickly so I want to make something that is long lasting fun and not something that looses it charm after 2 minutes.
make something that uses only one sensor on Arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on arduino is controlled by p5For this exercise, I modified the p5js code using a potentiometer on the arduino. Different values of the potentiometer are mapped to the x coordinates of the ellipse. This makes it move across the horizontal axis in the middle of the screen. The arduino code remains the same as the example code.
let y=height/2;
let x = 0;
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() {
background(255);
// one value from Arduino controls the background's red color
fill(255, 0, 255, map(x, 0, 1023, 0, 255));
ellipse(map(x, 0, 1023, 0, width), 30, 30);
// the other value controls the text's transparency value
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
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
y = int(fromArduino[0]);
x = int(fromArduino[1]);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = left + "," + right + "\n";
writeSerial(sendToArduino);
}
}
2. make something that controls the LED brightness from p5
again tweaking the previous p5js and arduino codes, for this one, Pressing the up or down arrow key on the keyboard, run through p5js, increases or decreases the brightness of the leds on the arduino respectively. this was done using the concept of pulse width modulation.
p5js code:
let rVal = 0;
let alpha = 255;
let brightness = 0;
function setup() {
createCanvas(640, 480);
textSize(18);
}
function draw() {
background(map(rVal, 0, 1023, 0, 255), 255, 255);
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);
text('rVal = ' + str(rVal), 20, 50);
text('alpha = ' + str(alpha), 20, 70);
}
}
function keyPressed() {
if (key == " ") {
setUpSerial();
} else if (keyCode === UP_ARROW) {
brightness = constrain(brightness + 20, 0, 255);
sendToArduino();
} else if (keyCode === DOWN_ARROW) {
brightness = constrain(brightness - 20, 0, 255);
sendToArduino();
}
}
function sendToArduino() {
let sendToArduino = brightness + "\n";
writeSerial(sendToArduino);
}
function readSerial(data) {
if (data != null) {
let fromArduino = split(trim(data), ",");
if (fromArduino.length == 2) {
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
let sendToArduino = brightness + "," + brightness + "\n";
writeSerial(sendToArduino);
}
}
arduino code:
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 left = Serial.parseInt();
int right = Serial.parseInt();
if (Serial.read() == '\n') {
Serial.print("Left: ");
Serial.print(left);
Serial.print(", Right: ");
Serial.println(right);
analogWrite(leftLedPin, left);
analogWrite(rightLedPin, right);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
3. take the gravity wind example (https://editor.p5js.org/aaronsherwood/sketches/I7iQrNCul) and make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor
I found this one to be a little challenging but eventually made it work. the ball bounces with the same logic and physics from the example. Each time it touches the ground, using a boolean variable ballOnGround, it is equated to 1 or 0. this is then sent to the arduino where the LED turns on if it is 1. For the sensor contrilling wind, Im using a photoresitor whose values are mapped to the x coordinate of the wind vector. The ball moves faster when the value is larger. MouseClicking restarts the movement of the ellipse. The issue I face is slight delay in the led lighting up.
video:
p5.js Code:
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 20;
let ballOnGround=1;
function setup() {
createCanvas(640, 360);
noFill();
position = createVector(width/2, 0);
velocity = createVector(0,0);
acceleration = createVector(0,0);
gravity = createVector(0, 0.5*mass);
wind = createVector(0,0);
}
function draw() {
background(255);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
applyForce(wind);
applyForce(gravity);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
fill(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;
ballOnGround = 1;
let sendToArduino = ballOnGround + "\n";
writeSerial(sendToArduino);
ballOnGround = 0;
sendToArduino = ballOnGround + "\n";
writeSerial(sendToArduino);
} else {
ballOnGround = 0;
}
}
if (mouseIsPressed) {
restartSketch();
}
}
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();
}
}
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 == 1) {
// only store values here
// do everything with those values in the main draw loop
let photoresistor = int(fromArduino[0]);
//change the wind based on the photoresistor readings
wind.x = map(photoresistor, 0, 1000, -5, 5);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
// let sendToArduino = ballOnGround + "\n";
// writeSerial(sendToArduino);
}
}
function restartSketch() {
// Reset relevant variables to their initial values
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
wind = createVector(0, 0);
mass = 50;
ballOnGround = 0;
}
arduino code:
int ledPin = 2;
const int photoresistorPin = A0;
void setup() {
Serial.begin(9600);
pinMode(LED_BUILTIN, OUTPUT);
pinMode(ledPin, OUTPUT);
pinMode(photoresistorPin, 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); // led on while receiving data
int ballOnGround = Serial.parseInt();
if (Serial.read() == '\n') {
int photoresistorValue = analogRead(photoresistorPin);
// Send photoresistor value to p5.js
Serial.println(photoresistorValue);
digitalWrite(ledPin, HIGH);
digitalWrite(ledPin, LOW);
// Control the LED based on the bouncing state.
if (ballOnGround == 1) {
digitalWrite(ledPin, HIGH);
} else {
digitalWrite(ledPin, LOW);
}
}
}
digitalWrite(LED_BUILTIN, LOW);
}
After this thought-provoking read, I wholeheartedly feel that a design should be universally accessible, catering to everyone’s needs. Imagine the convenience of a singular product that eliminates the need for individuals to ponder, “Will this suit my requirements?” or “Is this tailored for a specific group?” Although implementing such universality might pose challenges for designers, the benefits could be substantial.
This approach would eradicate the apprehension associated with designing for differently-abled individuals, as it wouldn’t be perceived as mediocre or subpar when designed for a broader audience. The return of a sense of ‘delight’ in everyday products could be achieved through a more inclusive design, fostering unity rather than segregation. While certain disabilities may require specialized technology, there are aspects we can universalize for everyone.
What particularly intrigued me is the question of whether we should project a positive image or refrain from projecting an image altogether. Striking a balance that avoids exclusion and encourages accommodation is crucial. Examples related to fashion, discretion, and simplicity prompted me to contemplate how, as someone pursuing interactive media, I can contribute to bridging the gap between realism and functionalism. The oldest ipod nano that my father owned used to be my favorite device. The familiarity of the tracker wheel mentioned in the text resonates with me.
Reflecting on my five-year-old self effortlessly navigating it, I realize the design and feedback were exceptionally well-executed. It serves as a possibility of achieving a harmonious intersection of simplicity, functionality, and aesthetics—providing inspiration for designers and me, particularly to aim to strike that delicate balance.The idea of embracing cultural differences in embracing fashion and technology did sound a little strange at first but I agree that it would definitely be a call to action for more innovative and accessible design.
Concept:
Our musical is sort of a 3 note piano with 3 octaves. There are three buttons that each play a specific note (A, B and C), and an ultrasonic sensor to measure the distance which in turn specifies the octave the user wants to play the notes in (3,4,5). The nearest interval plays the notes in the third octave, the next plays the notes in the fourth interval which sounds higher than the first interval and the last interval plays the notes in the fifth interval which sound higher than the middle interval. The buttons are controlled by switches that act as our main digital input and trigger specific notes depending on the secondary input which is the analog input from the ultrasonic sensor that specifies the octave to play the notes. We have also included an LED light that blinks when the instrument is first started and when the user has exceeded the range of the input from the ultrasonic sensor.
Notes played: A3, A4, A5, B3, B4, B5, C3, C4, C5.
Process & Highlights:
It was an interesting process trying to figure out how to connect everything together the right way and to get the ultrasonic sensor to work as expected, but once we figured everything out it was pretty easy to follow through the code. It helped to work as a team because we brainstormed the idea together and worked on the logic of the code and implemented it together which was more fun than working individually. I would say the highlight was finally getting it to work the way we wanted it to.
Here is a video demo of our instrument:
Code:
const int trigPin = 9;
const int echoPin = 10;
const int ledPin = 13;
const int buzzerPin = 8;
const int switchPin1 = 2; // Pin for the first switch
const int switchPin2 = 3; // Pin for the second switch
const int switchPin3 = 4; // Pin for the third switch
float duration, distance;
// Melodies
#include "pitches.h"
int melody11 = NOTE_C3;
int melody12 = NOTE_C4;
int melody13 = NOTE_C5;
int melody21 = NOTE_A3;
int melody22 = NOTE_A4;
int melody23 = NOTE_A5;
int melody31 = NOTE_B3;
int melody32 = NOTE_B4;
int melody33 = NOTE_B5;
void playNote(int melody){
tone(buzzerPin, melody, 800);
delay(1000);
}
void setup() {
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
pinMode(ledPin, OUTPUT);
pinMode(buzzerPin, OUTPUT);
pinMode(switchPin1, INPUT_PULLUP);
pinMode(switchPin2, INPUT_PULLUP);
pinMode(switchPin3, INPUT_PULLUP);
Serial.begin(9600);
}
void loop() {
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
duration = pulseIn(echoPin, HIGH);
distance = (duration * 0.0343) / 2;
if (distance < 10) {
Serial.println("Distance: 1");
digitalWrite(ledPin, HIGH); // Turn on the LED
if (digitalRead(switchPin1) == LOW) {
playNote(melody11);
} else if (digitalRead(switchPin2) == LOW) {
playNote(melody21);
} else if (digitalRead(switchPin3) == LOW) {
playNote(melody31);
}
} else if (distance < 20) {
Serial.println("Distance: 2");
digitalWrite(ledPin, HIGH); // Turn on the LED
if (digitalRead(switchPin1) == LOW) {
playNote(melody12);
} else if (digitalRead(switchPin2) == LOW) {
playNote(melody22);
} else if (digitalRead(switchPin3) == LOW) {
playNote(melody32);
}
} else if (distance < 30) {
Serial.println("Distance: 3");
digitalWrite(ledPin, HIGH); // Turn on the LED
digitalWrite(ledPin, LOW);
digitalWrite(ledPin, HIGH);
if (digitalRead(switchPin1) == LOW) {
playNote(melody13);
} else if (digitalRead(switchPin2) == LOW) {
playNote(melody23);
} else if (digitalRead(switchPin3) == LOW) {
playNote(melody33);
}
} else {
Serial.println("Distance: 4");
//Blink
digitalWrite(ledPin, LOW); // Blink the LED
digitalWrite(ledPin, HIGH);
digitalWrite(ledPin, LOW);
digitalWrite(ledPin, HIGH);
digitalWrite(ledPin, LOW);
digitalWrite(ledPin, HIGH);
digitalWrite(ledPin, LOW);
noTone(buzzerPin); // Turn off the buzzer
}
}
Reflections:
We found this exercise a bit harder than the previous one but it was more fun to implement. If we could change one thing about our instrument, it would be to maybe have a screen display the note being played as well as more buttons to replicate an actual piano with more octaves.Additionally, we would love to find a way to incorporate more creativity within.
“The only reason your mind doesn’t explode every morning from the sheer awesomeness of your balletic achievement is that everyone else in the world can do this as well.” I think this reading made so much sense after the previous reading, Physical computing greatest hits(and misses). After seeing pieces like video mirrors and the body-as-a-cursor, or after actively using facial recognition on phones where our body is at command and not just our fingers, I definitely think the future of interaction goes way beyond the capacities of our hands.
The first in-class assignment we had for the physical computing part of the class, where we had to make a creative switch that did not use hands, it was very hard to think of something to make. This does highlight the challenge that we need to break away from established norms and thinking beyond the limitations of familiar interaction methods.
A question that stuck with me was how do we manipulate things? But how I perceive his explanation on this and think about it is, how do we manipulate them into a way that they are intuitive? Will the dynamic mediums Bret Victor talks about, be intuitive right from the start or will they take years of trials, feedbacks and usage to finally be called familiar and usable by ‘common sense’. I also appreciate the follow up article with his responses to the comments. His reply to the brain interfaces comment is quite nice and reassuring in a world where people believe automating all the work is way more efficient since humans are way more prone to making errors. I also like the insight on the psychological and cognitive aspects but not fully clear on the Matti Bergstrom quote about finger blindness.
My takeaway from this reading would be that our interaction with digital media and devices should not have consequences to our physical body and the idea of everything we do mediated by a computer might not be a good one.
Making Interactive Art: Set the Stage, Then Shut Up and Listen
I found this reading quite interesting. The natural instinct of wanting to help and make things easier for us sometimes makes us forget the fact that we might be oversharing or spoiling the experience. My takeaway from this reading would be the point Tigoe made about listening. Oftentimes in the excitement or nervousness of showing something to others, it’s easy to forget to actually see how they feel about it while interacting with it. When I’m showing my friends and family the weekly assignments from this class, I do expect their encouragement and feedback but I don’t think I fully listen or focus on their reactions, only because I’m so focused that the project is delivered exactly the way I want it to be. For my midterm project, I had an interactive Christmas tree designing component. I remember telling someone where exactly to place the lights because I had imagined it that way, forgetting that that’s for them to decide. I would definitely introspect more on this, shut up and listen after I’ve set the stage for people.
Physical Computing’s Greatest Hits (and misses)
I liked the idea of ‘meditation helpers’. While I know that it cannot fully capture the human state of mind and the machine may just be making educated guesses about how to do so by looking at heart and breath rates, the very intent of using physical computing for something like this to get you to a calmer and meditative state interests me. It left me thinking for a solid fifteen minutes on ways that we could actually make this work with more accuracy. This complements the purpose of the reading and the idea that even though themes may be recurring they allow a lot of room for originality. I also really appreciate having a blog for this class that lets us view and take inspiration from others’ works. Sometimes I feel like my ideas would be repetitive of the previously done ones but after this reading I fully agree that all pieces, even if they use the exact same materials, are completely different renditions and convey unique and individual thoughts.
For this week’s assignment, I drew inspiration from Mood Lamps. Mood Lighting helps create a calming and soothing atmosphere and can invoke different moods depending on the colors you set it at. I’ve tried to create a very basic version of this.
Process
My idea was to use an RGB Led, a digital switch for digital input and a potentiometer for analog input for this. However, certain values of potentiometer readings did not work and hence I added separate green and yellow LEDs that would light up instead. There is a circular ring of moods around the potentiometer. You can move the arrow towards the mood you’d like to set it up at. The potentiometer values are mapped to rgb values that are then displayed on the RGB Led. If the digital switch is pressed, alot of colors get displayed automatically. In this case the mapping is between time and the rgb values
I had some trouble figuring out the working of the digital switch but with some references and trial and errors, I eventually figured it out to work somewhat like desired.
code:
void setup() {
pinMode(RGB_RED_PIN, OUTPUT);
pinMode(RGB_BLUE_PIN, OUTPUT);
pinMode(RGB_GREEN_PIN, OUTPUT);
pinMode(GREEN_LED_PIN, OUTPUT);
pinMode(YELLOW_LED_PIN, OUTPUT);
pinMode(SWITCH_PIN, INPUT);
Serial.begin(9600);
}
void loop() {
int switchState = digitalRead(SWITCH_PIN);
Serial.print("Switch State: ");
Serial.println(switchState);
if (switchState == HIGH) {
int currentTime = millis();
int period = 3;
int rgbValue = map(currentTime % period, 0, period, 0, 1535);
// convert the RGB value to individual color components
int red, green, blue;
if (rgbValue < 256) {
red = 255;
blue = rgbValue;
green = 0;
} else if (rgbValue < 512) {
red = 511 - rgbValue;
blue = 255;
green = 0;
} else if (rgbValue < 768) {
red = 0;
blue = 255;
green = rgbValue - 512;
} else if (rgbValue < 1024) {
red = 0;
blue = 1023 - rgbValue;
green = 255;
} else if (rgbValue < 1280) {
red = rgbValue - 1024;
blue = 0;
green = 255;
} else {
red = 255;
blue = 0;
green = 1535 - rgbValue;
}
// setting RGB LED colors
analogWrite(RGB_RED_PIN, red);
analogWrite(RGB_BLUE_PIN, blue);
analogWrite(RGB_GREEN_PIN, green);
// separate green LED
digitalWrite(GREEN_LED_PIN, HIGH);
//separate yellow LED
digitalWrite(YELLOW_LED_PIN, LOW);
} else {
int potentiometerValue = analogRead(POTENTIOMETER_PIN);
int rgbValue = map(potentiometerValue, 0, 1023, 0, 1535);
// potentiometer value to the serial monitor
Serial.print("Potentiometer Value: ");
Serial.println(potentiometerValue);
int red;
int blue;
int green;
if (rgbValue < 256) {
red = 255;
blue = rgbValue;
green = 0;
}
else if (rgbValue < 512) {
red = 511 - rgbValue;
blue = 255;
green = 0;
}
else if (rgbValue < 768) {
red = 0;
blue = 255;
green = rgbValue - 512;
}
else if (rgbValue < 1024) {
red = 0;
blue = 1023 - rgbValue;
green = 255;
}
else if (rgbValue < 1280) {
red = rgbValue - 1024;
blue = 0;
green = 255;
}
else {
red = 255;
blue = 0;
green = 1535 - rgbValue;
}
analogWrite(RGB_RED_PIN, red);
analogWrite(RGB_BLUE_PIN, blue);
analogWrite(RGB_GREEN_PIN, green);
// separate green and yellow LEDs based on potentiometer value
if (potentiometerValue >= 340 && potentiometerValue <= 510) {
digitalWrite(GREEN_LED_PIN, HIGH); // Turn on green LED
digitalWrite(YELLOW_LED_PIN, LOW); // Turn off yellow LED
} else if (potentiometerValue >= 165 && potentiometerValue <= 342) {
digitalWrite(GREEN_LED_PIN, LOW); // Turn off green LED
digitalWrite(YELLOW_LED_PIN, HIGH); // Turn on yellow LED
} else {
digitalWrite(GREEN_LED_PIN, LOW); // Turn off green LED
digitalWrite(YELLOW_LED_PIN, LOW); // Turn off yellow LED
}
delay(100);
}
// delay to avoid flooding the serial monitor with data
delay(100);
}
Reflections
I really enjoyed this and was able to explore different sensors as I tried out the ultrasonic resistor, potentiometer and photoresistor before deciding which one to go forward with. I did have some issues while coding but managed to make something similar to what I had expected. For future improvements, I could maybe use something transparent/translucent to cover the leds and make the light intensify more like in usual lamps.
This attempt to create an unusual switch was inspired by my unhealthy obsession with led light shoes as a kid. With so many lights and colors on my shoes that changed depending on each step and pressure, I have blurred memories of randomly walking and jumping around just for those lights. Since this assignment required us to not use our hands, I thought it would be perfect to try creating something similar to those shoes.
Process & Highlights
Visualizing the circuit was relatively straightforward. It consists of a simple series circuit with two LEDs and a 330-ohm resistor.I experimented with various methods to create a switch using two aluminum foil sheets and settled on the following design. I attached one sheet to the back of a sandal and the other to the floor. When stepped on the second sheet, both pieces of foil come in contact and the circuit closes, allowing the LEDs to glow.
One significant challenge I encountered was positioning the lights on the shoes instead of using a breadboard. To make this work, I used a combination of jumper wires, aluminum foil, and tape. I also intended to use three LEDs: yellow, green, and blue. While the yellow and green LEDs worked when connected in series, the blue LED did not. I suspected it was due to insufficient current, as the bulb wasnt faulty. I tried various resistor combinations but they did not work.
Reflections:
I am content with the outcome of this assignment. While the wiring may not be aesthetically pleasing, I believe that with better resources and materials such as conductive fabric and alligator clips, this project could be further enhanced. During the assignment, I contemplated changing my idea several times but realized that it needed to be hands-free, which limited my options. This project made me realize and appreciate our dependence on our hands. Overall, physical computing seems fun and I’m excited to learn more.
“Her Code Got Humans on the Moon—And Invented Software Itself”
Moved by both, Hamilton being an ‘outlier’ as a woman in tech and engineering in the 60s and her as a pioneer of software engineering, “Her Code Got Humans on the Moon—And Invented Software Itself”, was one of my favorite readings for this class so far.
In an era when software was still in its infancy, she and her colleagues were pioneering new ideas and techniques that would shape the future of computing.The pressure and responsibility that Hamilton felt during the Apollo missions serve as a reminder of the importance of attention to detail and the consequences of errors in complex systems. Her commitment to ensuring the software’s reliability, reminds me of the dedication and alertness that I should have, striving to pursue a career in a similar field.
Emotion and Design
I often find myself irritated by misaligned elements and clashing color combinations and end up being called ‘picky’ by some of my friends who think that as long as a message is conveyed, aesthetics can take a backseat. I liked most of Norman’s ideas as they resonated with my thoughts. However, I realized that it’s all about the balance between beauty and usability. This also makes sense in the aspect of many choices that we make. For example, if I were to purchase a drawer, I would choose the push-to-open drawer for its aesthetic over a drawer with a big handle that’s easier to use, because the former too, is user-friendly and also looks better.When he talks about affect and behavior, the cognitive aspects of negative and positive affect make a lot of sense to me but when he mentions pleasing designs can make users more tolerant of minor design flaws. I think it’s true that aesthetics can mask some issues temporarily, users are likely to become more discerning over time. Pleasing aesthetics may initially captivate users, but if underlying usability problems persist, users may eventually become frustrated and abandon the product or service.
One thing this reading leaves me thinking about is, it claims that attractive things work better. However, attractiveness is highly subjective and culturally influenced. What if what one finds attractive might not resonate with another? And how do we take into consideration a diverse target audience?
As we approach the festive months of the year, all I can think about is winter break, my favorite holiday. The warmth, comfort, excitement, and simple joys that this season brings are what I eagerly anticipate for months. When considering ideas for this open-ended and creative project, I wondered if there were others like me who simply can’t wait for the Christmas season and New Year. Thus, I decided to create an Early Christmas Experience as an ode to one of my favorite festivals. The candy canes from school, the joy of exchanging gifts during Secret Santa, and the delight of decorating the Christmas tree are just a few things that make this season special, and I aimed to incorporate them into my project. From the reading ‘Making Art is like setting a trap’, my takeaways were to focus on and convey the simpler things and the feelings behind it
My project aimed to encapsulate the essence of Christmas, focusing on two central elements: decorating a Christmas tree and the excitement of hunting for hidden presents around a cozy house—both cherished traditions in my family. Having spent my entire life in a region where snowfalls are rare, I yearn for snowy vacations. For this project, I wanted to create a visually captivating experience, making it heavily reliant on graphics rather than physical and mechanical elements.
How It Works:
The experience begins with a screen featuring a play button. Upon clicking this button, users are transported to the experience screen—the screen of magic. Santa himself makes an appearance, offering brief instructions on how to navigate the experience. Users can click on the Christmas tree and decorate it by dragging and dropping ornaments. These decorations are saved for later viewing. Clicking on the house triggers a mini Christmas-themed hidden object game. The objective is to find a minimum of 5 presents to win. Throughout the experience, a snowy backdrop adds to the festive atmosphere, and users can navigate through the various parts of the experience using marked buttons in the form of presents with a carol playing in the background and end with a real – time countdown to Christmas.
The Christmas tree was a major highlight of my project. While the drag-and-drop functionality for ornaments was easy with the reference shared in class, a significant challenge was saving the positions of these ornaments and placing them exactly on the experience screen tree as the user had arranged them on the tree screen. After multiple experiments with vectors in p5.js and other coordinate system functions, I chose to calculate the relative positions of X and Y coordinates of the ornaments and confirm if they were correctly placed on the tree. To add a more realistic touch, I included a layer of snow with gradually decreasing velocity, simulating the accumulation of snow on the tree. This was a personal favorite effect that enhanced the overall experience.
if (decorated == true) {
for (let draggableObject of draggableObjects) {
if (draggableObject.onTree) {
draggableObject.x = draggableObject.relativeX + treeX;
draggableObject.y = draggableObject.relativeY + treeY;
draggableObject.show();
}
}
}
// Check if snowflakes2 touch the tree
for (let snowflake of snowflakes2) {
const distanceToTreeCenter = dist(snowflake.x, snowflake.y, treeX + christmasTree.width / 2, treeY + christmasTree.height / 2);
if (distanceToTreeCenter < 70) {
snowflake.speed = 0;
}
snowflake.update();
snowflake.display();
}
The usage of OOP and arrays is at the core of this project. It simplified tasks and made the project more organized. Creating Santa’s movement using sprites was a more significant challenge than anticipated. To enhance the visual appeal, I incorporated images from Shutterstock and designed some of my own using PicMonkey and Canva, opting for efficiency over drawing everything directly in p5.js.
Areas for Improvement
While I’m pleased with the project’s overall outcome, there are many other areas that I can improve and add to. Adding more challenging elements to the hidden objects game, such as a timer, or refining Santa’s movement for smoother animation, could make the project better.
In conclusion, creating this Christmas-themed interactive project for my midterm assignment was a delightful experience. I tried to work more on my creative skills instead of just coding like I would for other classes. I tried to incorporate most of the concepts learnt over the past few weeks and am already excited to see what the second half of the semester in this class holds for me to learn!
