︎   ︎   ︎   ︎  


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