WEEK 5
Midterm - What Is your Mood? (Updated)
For the midterm, I went back to re-code the assignment I did for week 3, which was making patterns using functions in p5js.
I focused on cleaning up my codes before and using some new tools and ideas we learned for p5.
First, I cleaned up the unnecessary codes I declared before, such as circles with x,y, and d pieces of information and the hover-over motion so that people can see a simple circle (good), a square (bad), and a flower for random mood.
Also, I defined the function of the flower, so I could make it reusable in the sketch. The petals are called four times with three arguments: x location, y location, and diameter.

Codes / Library
let moodGood = 0;
let moodBad = 0;
let moodFlower = 0;
let good = "Good";
let bad = "Bad";
let flower = "?";
let question = "What is your mood today?";
let x, y;
function setup() {
createCanvas(400, 400);
background(100, random(255), random(255));
x = width;
y = height;
}
function draw() {
fill(255);
textSize(20);
//good
text(good, x / 8, y * 0.8);
//bad
text(bad, x / 2.3, y * 0.8);
//?
text(flower, x / 1.3, y * 0.8);
//'what is your mood today?'
text(question, x / 5, y / 5);
//left circle
fill(moodGood); // showing black because I declared "moodGood" as = 0
circle(x / 6, y * 0.5, 80); //location of the left circle
//middle square
fill(moodBad);// showing black because I declared "moodBad" as = 0
rect(150, y * 0.4, 80);
randomMood(320, 200, 40);
//hover button for Good(circle)
if (mouseX > 20 && mouseX < 110 && mouseY > 150 && mouseY < 250) {
moodGood = 255;
} else {
moodGood = 0;
}
//hover button for Bad(Square)
if (mouseX > 150 && mouseX < 230 && mouseY > 150 && mouseY < 250) {
moodBad = 255;
} else {
moodBad = 0;
}
//hover button for ?(flower)
if (mouseX > 300 && mouseX < 300 && mouseY > 150 && mouseY < 250) {
moodRandom = 200;
} else {
moodRandom = 200;
}
}
//right flower (defining function);
//this randomMood function with parameters 320, 200, 40
function randomMood(flowerX, flowerY, petalSize) {
let petalDistance = petalSize / 3;
fill(255);
if (mouseIsPressed) fill(random(255), random(255), random(255));
//the petals are called 4 times with 3 arguments which are x location, y location, and diameter.
circle(flowerX - petalDistance, flowerY - petalDistance, petalSize*1.2);
// upper right petal
circle(flowerX + petalDistance, flowerY - petalDistance, petalSize*1.2);
// lower left petal
circle(flowerX - petalDistance, flowerY + petalDistance, petalSize*1.2);
// lower right petal
circle(flowerX + petalDistance, flowerY + petalDistance, petalSize*1.2);
// center circle
fill(255, 60, 100);
circle(flowerX, flowerY, petalSize*1.2);
}