Week 4: Generative Text Output

My Concept

This project is Barbie-themed quote generator  where the user can pick different moods and see a random quote associated with each mood. The mood options, such as “Empowered Barbie”, “Sassy Barbie” and “Sad Barbie” each trigger a quote that is supposed to motivate the user and uplift their mood.

Code Highlight

The most challenging part of this project was integrating randomly changing quotes based on user selection. To achieve this, I set up a function to handle button clicks, where each button is linked to a specific mood and quote. I also added hover effects and smooth transitions to create a more interactive experience.


// Quote Generator Page
function displayQuotePage() {
  tint(255, 180); // Makes background a little more subtle)
  image(bg, 0, 0);
  noTint();  

  // Title and text layout
  textAlign(CENTER); 
  textFont('Montserrat');
  textSize(36);
  fill('#ff3385');  
  text("Choose your mood:", width / 2, 50);

  // Mood options
  textFont('Open Sans');
  fill(0); 
  textSize(24);
  text("Empowered Barbie", width / 2, 110);
  text("Sassy Barbie", width / 2, 160);
  text("Sad Barbie", width / 2, 210);

  // Quote section
 if (quote !== "") {
    fill('#ff3399');  
    noStroke();
    rect(150, 280, 400, 80, 15);  
    fill('white');
    textSize(22); 
    text(quote, width / 2, 310);  
  }

Reflections

The concept for this project was inspired by the diversity of Barbie characters and the different moods they represent. Barbie has always reminded me of the kind of uplifting quotes I use in my projects, which makes me feel better and motivated.

Looking back, one area for improvement would be the design. Since I didn’t have much time this week, I focused more on the interactivity aspect. Ideally, i would add elements like animated transitions or colorful backgrounds that change based on the selected mood. I’d also love to add sound effects or background music to better the mood and make the experience even more immersive. I was also thinking about taking user’s name to make the experience feel more personal. Overall, I’m happy with the way it turned out as i used a lot of new elements.

Embedded Sketch