## Final Project: Mar’s Pie Shop

#### CONCPET:

I love baking, and I enjoy baking games. For my final project I decided to make a pie shop… Throughout my journey in Intro to IM, I made sure to always add a piece of me in every assignment and project. This final one is especially dear to me because I was able to finalize it after hard work. As well as being able to add my art in it (background and pie images). I think it goes well together and I’m proud of it.

FUN FACT: I have never had pie in my life!!!

#### HIGHLIGHT OF MY CODE IN P5.JS:

Entire Code: https://editor.p5js.org/mariamalkhoori/sketches/VUY94T9vh

-Function to check the correct match

```function submitAnswer() {
// Define the expected ranges for each statement
const rawRange = [0, 200];
const undercookedRange = [201, 400];
const perfectRange = [401, 600];
const overcookedRange = [601, 800];
const burntRange = [801, 1023];

let expectedRange;

// Determine the expected range based on the current sentence
switch (currentSentence) {
case "I would like a raw pie to bake at home.":
expectedRange = rawRange;
break;
case "I like my pie extremely soft.":
expectedRange = undercookedRange;
break;
case "I want a perfect pie!":
expectedRange = perfectRange;
break;
case "Crispy around the edges!!":
expectedRange = overcookedRange;
break;
case "BURNT IT >:D":
expectedRange = burntRange;
break;
}

// Check if the current image range matches the expected range
if (x >= expectedRange[0] && x <= expectedRange[1]) {
// Increment the score for a correct match
score++;

ding.play();```

-Different screen pages:

```if (gameState === "start") {
drawStartScreen();
} else if (gameState === "playing") {
displayFoodImage();
displayTimer();
textSize(24);
fill(255);
text("Score: " + score, width - 100, 30);
} else if (gameState === "end") {
// Display results in the end screen
textSize(210);
fill(255);
text("Your Score: " + score, width / 2, height / 2);
playAgainButton.show(); // Show the button on the end screen
}
else {
// Draw other game elements here
playAgainButton.hide(); // Hide the button if not in the end state
}```

-LED Button

-Potentiometer

#### CHALLENGES:

• Many challenges were faced with the coding part.
• Button wasn’t working to confirm answers and also change the requests of the order.
• Sometimes the images controlled by the potentiometer would not show, or not change.
• I also had some issues with serial connection because of the wirings

#### FUTURE IMPORVEMENTS:

• I hoped to be able to make the game restart without having to exit full screen.
• Make the prototype a little prettier
• Fine-tune the difficulty level based on user feedback. Adjust timer durations, scoring mechanisms, or image recognition ranges to make the game challenging yet enjoyable.
• Introduce new challenges or power-ups to add variety to the gameplay.
• Ensure that the game is responsive and looks good on various screen sizes.
• I wanted to add a leaderboard to display at the end

## Final Project Second Draft: Mar’s Pie Shop

#### Concpet:

I love baking, and I enjoy baking games. For my final project I decided to make a pie shop… Throughout my journey in Intro to IM, I made sure to always add a piece of me in every assignment and project. This final one is especially dear to me because I was able to finalize it after hard work. As well as being able to add my art in it (background and pie images). I think it goes well together and I’m proud of it.

FUN FACT: I have never had pie in my life!!!

#### Highlight OF MY Code in P5.js:

-Function to check the correct match

```function submitAnswer() {
// Define the expected ranges for each statement
const rawRange = [0, 200];
const undercookedRange = [201, 400];
const perfectRange = [401, 600];
const overcookedRange = [601, 800];
const burntRange = [801, 1023];

let expectedRange;

// Determine the expected range based on the current sentence
switch (currentSentence) {
case "I would like a raw pie to bake at home.":
expectedRange = rawRange;
break;
case "I like my pie extremely soft.":
expectedRange = undercookedRange;
break;
case "I want a perfect pie!":
expectedRange = perfectRange;
break;
case "Crispy around the edges!!":
expectedRange = overcookedRange;
break;
case "BURNT IT >:D":
expectedRange = burntRange;
break;
}

// Check if the current image range matches the expected range
if (x >= expectedRange[0] && x <= expectedRange[1]) {
// Increment the score for a correct match
score++;

ding.play();```

-Different screen pages:

```if (gameState === "start") {
drawStartScreen();
} else if (gameState === "playing") {
displayFoodImage();
displayTimer();
textSize(24);
fill(255);
text("Score: " + score, width - 100, 30);
} else if (gameState === "end") {
// Display results in the end screen
textSize(210);
fill(255);
text("Your Score: " + score, width / 2, height / 2);
playAgainButton.show(); // Show the button on the end screen
}
else {
// Draw other game elements here
playAgainButton.hide(); // Hide the button if not in the end state
}```

#### Arduino IDE Code:

```int potPin = A0;      // Potentiometer connected to analog pin A0
int buttonPin = 2;    // Digital button connected to digital pin 2

void setup() {
Serial.begin(9600); // Set the baud rate to the same value as in p5.js
pinMode(buttonPin, INPUT_PULLUP); // Set the digital button pin as input with internal pull-up resistor
}

void loop() {
Serial.print(potValue); // Send potentiometer value to p5.js
Serial.print(',');
Serial.println(buttonState); // Send button state to p5.js

delay(550);
}
```

-LED Button

-Potentiometer

#### Challenges:

• Many challenges were faced with the coding part.
• Button wasn’t working to confirm answers and also change the requests of the order.
• Sometimes the images controlled by the potentiometer would not show, or not change.
• I also had some issues with serial connection because of the wirings

#### Future Imporvements:

• I hoped to be able to make the game restart without having to exit full screen.
• Make the prototype a little prettier
• Fine-tune the difficulty level based on user feedback. Adjust timer durations, scoring mechanisms, or image recognition ranges to make the game challenging yet enjoyable.
• Introduce new challenges or power-ups to add variety to the gameplay.
• Ensure that the game is responsive and looks good on various screen sizes.

## Final Project Draft 1

My aim in this project was to try and make a game that allows the player to help sell pie.

Using the serial connectios the player should be able to use the potentiometer in order to get the wanted order. When one is chosen they press a button to confirm the choice.

The game goes for 2.5 minuts and the player must complete as many orders as possible.

So far I have this

P5.js sketch:

```let x = 0;

let backgroundImage;
let rawImage, undercookedImage, perfectImage, overcookedImage, burntImage;

// Load background image only for now
}

// Load images after the serial connection starts
}

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

function draw() {
// Display background image
image(backgroundImage, 0, 0, width, height);

// Display image based on the value of x
displayFoodImage();

// Display serial connection status
fill(0);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
}

function displayFoodImage() {
// Define the ranges for each image
const rawRange = [0, 200];
const undercookedRange = [201, 400];
const perfectRange = [401, 600];
const overcookedRange = [601, 800];
const burntRange = [801, 1023];

// Map x to the corresponding image based on the ranges
let currentImage;
if (x >= rawRange[0] && x <= rawRange[1]) {
currentImage = rawImage;
} else if (x >= undercookedRange[0] && x <= undercookedRange[1]) {
currentImage = undercookedImage;
} else if (x >= perfectRange[0] && x <= perfectRange[1]) {
currentImage = perfectImage;
} else if (x >= overcookedRange[0] && x <= overcookedRange[1]) {
currentImage = overcookedImage;
} else if (x >= burntRange[0] && x <= burntRange[1]) {
currentImage = burntImage;
}

// Display the current image
if (currentImage) {  // Check if the image is defined
image(currentImage, width / 2 - 50, height / 2 - 50, 100, 100);
}
}

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
////////////////////////////////////
////////////////////////////////////
if (data != null) {
x = int(trim(data));

// Load images only when the serial connection starts
if (serialActive) {
}
}
}
```

Arduino sketch:

```int sensorPin = A0;
int sensorValue;

void setup() {
Serial.begin(9600);
}

void loop() {

// Print the sensor value to the serial port
Serial.println(sensorValue);

delay(100);
}
```

Circuit:

My potineometer works just fine. I still need to

-Display the required image according the the divided readings of the potineometer

-work on the button as a submitted answer

-figure out how to add timer and end results (maybe a leadboard)

-Finalize Instructions

## Alien Intelligence w/Professor Leach

Attending professor’s Leach conference about his opinion about AI is certainly an interesting experience. He mostly spoke about how AI is this extremely smart web that connects all human minds and thoughts into one place, making it smarter than 5 people combined. Professor Leach praises the concept that AI is an extremely helpful tool that is open to all.

My thoughts were mostly concerned with ethics. Should we as a community come up with regulations and a set of requirements to not make others use AI for their advantage. As an artist who mostly uses digital art (tablet and pen) I think people need to realize how harmful it is to use AI tools without proper manners. In the end AI is made from people’s thoughts and work, if people get used to “creating” art whether it be a drawn piece or a song I personally would consider it theft. Because it uses copies of other artists to replicate what a person wants. It might be fine to have it for personal use, however publicly claiming their own hard work is a little shameful.

I really think regulations should be set for AI, and people should be mindful of the type of work they do.

## Week 11- Reflection

“All design is subject to constrain. Constrains arise both from what the design is required to do (including yser needs or desires) and how this might be achieved (usually technical feasibility or business viability).

-Pullin

With the reading of this week’s Design Meets Disability  it is has been clear and clearly put how design is job that should be taken quite seriously in terms of serving others. He argues that designing for disability can invigorate design practices and inject different ways of thinking into the design community. Designing for disability encourages designers to consider a diverse range of perspectives and experiences. This can lead to innovative solutions that benefit not only individuals with disabilities but society as a whole. It challenges designers to think beyond traditional norms and consider a wider spectrum of user needs. This comes with the consideration of taking our time to think of others in order come up with something everyone can be satesfied with without disregarding anyone.

I do agree with the writer in this part, people who might think of themselves as different have the right the allow themselves to be included. A kids show called Bluey is an example of trying to include everyoneNot only being  a show for kids to enjoy, but also something for mothers AND dogs to watch. Many episodes are directed towards the appreciation of a mother’s hardwork by comforting her and telling her that her love is seen and she too deserves it. As for dogs, the show is desinged using specific colours that fits the vision of how the dogs view the world. Since dogs don’t see the colours we humans do, it was still applied for them to view and enjoy the colours too.

## Assignment 11 (w/ Rujul)

Assignment 1: ARDUINO TO P5 COMMUNICATION

While controlling the potentiometer the ellipse would move across the screen while changing the opacity of it.

P5.js Sketch:

```// variable to control x-coordinate
let x = 0;

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

function draw() {
// sets background
background(255);
stroke(0);

// draws ellipse on canvas
fill(0,255,0,map(x, 0, 1023, 0, 255))
ellipse(map(x, 0, 1023, 0, width), height / 2, 100, 100);

// checks if serial communication has been established
fill(0)
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}

}

// sets up serial connection
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
////////////////////////////////////
////////////////////////////////////
if (data != null) {
x = int(trim(data));
}

}```

Edit: https://editor.p5js.org/mariamalkhoori/sketches/f-MgfWbwx

Arduino Sketch:

```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..
pinMode(LED_BUILTIN, OUTPUT);

}

void loop() {

delay(5);

// indicates data transfer
digitalWrite(LED_BUILTIN, HIGH);

// sends data to p5
Serial.println(sensor);

// indicates data transfer
digitalWrite(LED_BUILTIN, LOW);

}```

Results:

assignment1

Assignment 2: P5 TO ARDUINO COMMUNICATION

Brightness of the LED changes when pressing the UP and DOWN key buttons

P5.js Sketch:

```let brightness=0;

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

function draw() {
background(255);
fill(0);

if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
fill(255,0,0,brightness)
square(width/2-150,height/2-30,50)
fill(0)
text("Brightness: "+str(brightness),width/2-50,height/2)
text("Use the UP and DOWN arrow keys to adjust the brightness. ",width/2-220,height/2+50)

if (keyIsPressed) {
if (keyCode==UP_ARROW) {
if (brightness<255){
brightness+=5;
}
} else if (keyCode==DOWN_ARROW) {
if (brightness>0){
brightness-=5;
}

}
}
}

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

if (data != null) {
writeSerial(brightness+"\n");
}
}
```

Edit: https://editor.p5js.org/mariamalkhoori/sketches/f7vn6lagB

Arduino Sketch:

```int LedPin = 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..
pinMode(LED_BUILTIN, OUTPUT);

// Outputs on this pin
pinMode(LedPin, OUTPUT);

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

// start the handshake
while (Serial.available() <= 0) {
digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
Serial.println("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()) {
Serial.println("0");
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data

int brightness = Serial.parseInt();
analogWrite(LedPin, brightness);
}
}
digitalWrite(LED_BUILTIN, LOW);
}```

Results:

assignment2

Assignment 3: BI-DIRECTIONAL COMMUNICATION

The LED glows up when the ball touches the ground. The ultrasonic sensor is used to change the direction of the wind.

P5.js Sketch

```let velocity;
let gravity;
let posit5
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let LED=0;
let wind_speed=0;

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

function draw() {
background(255);
fill(0)
if (!serialActive) {
text("Press RIGHT key to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
applyForce(wind);
applyForce(gravity);
velocity.mult(drag);
acceleration.mult(0);
fill(205,104,219);
ellipse(position.x,position.y,mass,mass);
if (position.y > height-mass/2) {
velocity.y *= -0.9;  // A little dampening when hitting the bottom
position.y = height-mass/2;
}

if (position.y==height-mass/2){
LED=1
}
else{
LED=0
}

if (position.x>=width || position.x<=0){
position.x=width/2
}

}

function applyForce(force){
// Newton's 2nd law: F = M * A
// or A = F / M
let f = p5.Vector.div(force, mass);
}

function keyPressed(){
if (key==' '){

mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
if (keyCode==RIGHT_ARROW){
setUpSerial();
}
}

////////////////////////////////////
////////////////////////////////////

if (data != null) {
let fromArduino = trim(data);
distance= int(fromArduino);
if (distance>10){
wind.x=2
}
else{
wind.x=-2
}

let sendToArduino = LED+"\n";
writeSerial(sendToArduino);
}
}```

EDIT: https://editor.p5js.org/mariamalkhoori/sketches/MvolZDB7W

Arduino Sketch:

```int LedPin = 2;
int trigPin = 9;
int echoPin = 10;
long duration;
int distance;

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

// Outputs on these pins
pinMode(LedPin, OUTPUT);

// Blink them so we can check the wiring
digitalWrite(LedPin, HIGH);
delay(200);
digitalWrite(LedPin, 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 = Serial.parseInt();
digitalWrite(LedPin, LED);
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
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;
Serial.println(distance);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
```

Results:

assignment3LED

assignment3WIND

## Assignment 10: Travelling music. (w/ Minjae Kim)

Concept:

Our Arduino project combines an ultrasonic distance measurement sensor, a switch button, and a buzzer to create an interactive music instrument. The ultrasonic sensor, consisting of a trig pin (connected to pin 10) and an echo pin (connected to pin 11), is utilized to measure the distance between the sensor and an object. The setup initializes the pins and sets up serial communication. In the loop function, the sensor is triggered to emit ultrasonic waves, and the duration of the wave’s round trip is measured. The distance is then calculated in centimeters based on the speed of sound. Additionally, a switch button connected to analog pin A0 turns on the music when I press the switch button.

Code:

```int trig = 10;
int echo = 11;
long duration;
long distance;
int force;

void setup() {
pinMode(echo, INPUT);

pinMode(trig, OUTPUT);

Serial.begin(9600);
}

void loop() {
digitalWrite(trig, LOW); //triggers on/off and then reads data
delayMicroseconds(2);
digitalWrite(trig, HIGH);
delayMicroseconds(10);
digitalWrite(trig, LOW);
duration = pulseIn(echo, HIGH);
distance = (duration / 2) * .0344;    //344 m/s = speed of sound. We're converting into cm

int notes[7] = {261, 294, 329, 349, 392, 440, 494}; //Putting several notes in an array
//          mid C  D   E   F   G   A   B

force = analogRead(A0); //defining force as FSR data

if (distance < 0 || distance > 50 || force < 100) { //if not presed and not in front

noTone(12); //dont play music

}

else if ((force > 100)) {  //if pressed

int sound = map(distance, 0, 50, 0, 6);  //map distance to the array of notes
tone(12, notes[sound]);  //call a certain note depending on distance

}

}```

Circuit:

We used this video to properly correct out codes and build the circuit:

Watch how we did it here: MusicInsturment

## Week 10- Reflection

The author, who used to design cool future stuff, isn’t really feeling the video about the future of how we interact with things. They’ve got hands-on experience, not just theory, so when they say they’re a bit skeptical about some things in the video, you gotta listen.  This vision of the future isn’t all that visionary. It’s like a tiny step from what we’ve got now.What the author really cares about is hands. They’re all about how our hands feel things and mess with stuff. But the video seems to be all about sacrificing that cool touchy-feely action for a flashy visual show.  They argue that real-world interactions, like opening a jar or making a sandwich, are way more expressive than what we do with touchscreens. They’re not on board with the idea that the future of how we interact should be less exciting than putting together a sandwich! Be inspired by what humans can do; it is just a reminder that big ideas come from people who dared to dream big. They’re pushing for more people to get on board with exploring what we can really do instead of settling for small improvements. the moral of it all is “Hey, let’s not be boring with the future. Let’s make it cool and interactive, using all our awesome human abilities!” It’s a call to think big and not settle for the same old stuff.

I also agree with old people when they complain about touch-screen. Buttons are not only fun, but they are right there. Remote controls are very usuful becuase of the clear button that are clearly visible. Unlike touch screen where it was made for the object to just look advanced and cool with unclear objective.