I intend to make a pizza making game using P5.js and arduino. The aim is to use analog sensors to control placing the toping on a certain place and also cook it at the right time.
inspo:
Good Pizza, Great Pizza
Papa’s Pizzeria
Author: Mariam Al Khoori
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 everyone. Not 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
function readSerial(data) {
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
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() {
// gets sensor reading
int sensor = analogRead(A0);
delay(5);
// indicates data transfer
digitalWrite(LED_BUILTIN, HIGH);
// sends data to p5
Serial.println(sensor);
// indicates data transfer
digitalWrite(LED_BUILTIN, LOW);
}
Results:
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();
}
}
function readSerial(data) {
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();
if (Serial.read() == '\n') {
analogWrite(LedPin, brightness);
}
}
digitalWrite(LED_BUILTIN, LOW);
}
Results:
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.add(acceleration);
velocity.mult(drag);
position.add(velocity);
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);
acceleration.add(f);
}
function keyPressed(){
if (key==' '){
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
if (keyCode==RIGHT_ARROW){
setUpSerial();
}
}
function readSerial(data) {
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
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();
if (Serial.read() == '\n') {
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:
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
Assignment 9
Week 9- Reflection
Assignment 5: Anyone there??
Concept:
With this assignment I was a little hesitant on how far I can go just to make an LED light up without heating up or burning my circuit. So for now, I kept it fairly simple. Using a disconnected telephone and making the LED light up whenever “a call” isn’t happening, and off when a person is on the line.
Circuit:
Result:
Week 8- Reflection
After reading this week’s readings, a section of the book Emotion & Attractive and the article “Her Code Got Humans on the Moon–And Invented Software Herself”, I can feel a beautiful correlation between the two texts that allows me to have a deep sense of how I may do my work one day. It is inspiring from both texts to see how a simple idea can someday go beyond the point and objective it was made for. Margaret Hamilton’s invention that had a single objective is now a $400 billion industry. I would like to think it is mostly her love and passion for what she does that encourages her to take a few extra steps even after ensuring everything is going to be perfect. Her project reached the moon and came back to earth to fulfill more objectives. Relating this to the book Emotions & Attractive, I think it is very much okay to go above and beyond what the main purpose could be if someone decided to just do it. It serves as some kind of motive to include what makes me happy and not be afraid of the limits cause there really are no limits to begin with. The author collects pots with different shapes, he thinks they are beautiful, but some of them don’t serve the objectives they’re supposed to. This still does not stop him from collecting them simply because he wants to. It is comforting to allow ourselves to do or collect random interests without needing to explain why. However, it is also a good idea to implement aesthetics into the design of an object in order to help people perform the required objective with minimal effort. For example, moments of hazards or anxiety could limit the view of surroundings to someone, so coming up with an ideal psychological design can be extremely helpful to help get out of danger safely and quickly.
Midterm Project: I’m Not/Too Bored
Concept:
Boredom is a state of mind that craves some type of change. I ask myself sometimes when was the last time I have gotten bored. My answer would be is that I do not remember. While discussing other’s people state or level of boredom, I can see a glimpse of the different life each one of us has. As well as the pace humans like to take for themselves.
In my game I’m Not/Too Bored I wanted to create a dialogue between characters that experince different life pace than others. Each holds a unique lifestyle that changes how they decide to go on with their way of living. While engaging in a conversation with three people, I want to gain data, that shouldn’t be too seriously taken, to showcase the level of boredom the player might experince in life. I could also add a little input that could help them as I myself never get bored.
Process:
I started with the type of questions I wanted to ask, but I also didn’t want to make them way too deep; mostly because the results are not serious.
I started by coming up with NPC designs both in a small miniture version and the speaking version.
Drawing the background was fun as it was the first time drawing in pixels.
Code:
Coding could be said as the most diffecult and least enjoyable part. However I did manege to add my images, sound, and font to my likings.
In the code below is how I made my characters clickable so they could answer the questions.
// Check if a character is clicked and handle interactions
if (
mouseX > 50 &&
mouseX < 50 + hugo.width &&
mouseY > 135 &&
mouseY < 135 + hugo.height
) {
// Handle interactions for Hugo character
// Display questions for Hugo and handle answers
} else if (
mouseX > 280 &&
mouseX < 280 + rene.width &&
mouseY > 162 &&
mouseY < 162 + rene.height
) {
// Handle interactions for Rene character
// Display questions for Rene and handle answers
} else if (
mouseX > 0 &&
mouseX < fuLi.width &&
mouseY > 0 &&
mouseY < fuLi.height
) {
// Handle interactions for Fuli character
// Display questions for Fuli and handle answers
}
}
}
This is the class where the questions were saved:
class Questions {
constructor() {
this.characterQuestions = {
hugo: [
{ question: "Is it easy for you to concentrate on your activities?", options: ["Yes", "No", "Maybe/Sometimes"] },
{ question: "Frequently when you're working do you find yourself worrying about other things?", options: ["Yes", "No", "Maybe/Sometimes"] },
{ question: "Does time always seem to be passing slowly?", options: ["Yes", "No", "Maybe/Sometimes"] },
],
rene: [
{ question: "Do you often find yourself at 'loose ends,' not knowing what to do?", options: ["Yes", "No", "Maybe/Sometimes"] },
{ question: "Do you often get trapped in situations where you find yourself doing meaningless things?", options: ["Yes", "No", "Maybe/Sometimes"] },
{ question: "Does having to look at someone's home movies or travel pics bore you tremendously?", options: ["Yes", "No", "Maybe/Sometimes"] },
],
fuli: [
{ question: "Do you find it easy to entertain yourself?", options: ["Yes", "No", "Maybe/Sometimes"] },
{ question: "In any situation, you can usually find something to do or see to keep yourself interested.", options: ["Yes", "No", "Maybe/Sometimes"] },
{ question: "Much of the time you just sit around doing nothing, and you are very good at being patient.", options: ["Yes", "No", "Maybe/Sometimes"] },
],
};
}
getQuestion(character, questionIndex) {
return this.characterQuestions[character][questionIndex];
}
calculateResults(answers) {
const counts = { Yes: 0, No: 0, 'Maybe/Sometimes': 0 };
answers.forEach(answer => {
counts[answer]++;
});
const maxCount = Math.max(...Object.values(counts));
const majorityAnswer = Object.keys(counts).find(key => counts[key] === maxCount);
return majorityAnswer;
}
}
// Export the Questions class for use in sketch.js
module.exports = Questions;
Possible Improvement:
I wish I could go around the local server issues when it comes to displaying my images.
I want only for certain keys to play the sound not all of them.
I wanted to showcase the results in a different way.
Edit: https://editor.p5js.org/mariamalkhoori/sketches/L-i2O01PV