Step 3: Add Visual Feedback

Let's make the game more satisfying by adding floating "+1" text that appears when you click the cookie!

Understanding Arrays for Multiple Objects

We need to track multiple floating text messages at once (one for each click), so we'll use an array:

let score = 0;
let cookieSize = 150;
let floatingTexts = [];  // Add this new array

What this does:

• floatingTexts = [] creates an empty array
• Each time we click, we'll add a new text object to this array
• The array can hold many text messages at the same time

Creating Floating Text Objects

When the cookie is clicked, we'll create a new text object with properties:

function mousePressed() {
  let d = dist(mouseX, mouseY, width/2, height/2);
  
  if (d < 75) {
    score++;
    cookieSize = 135;
    
    // Create a new floating text object
    floatingTexts.push({
      x: mouseX,
      y: mouseY,
      alpha: 255,
      yOffset: 0
    });
  }
}

Breaking it down:

The Text Object

floatingTexts.push({
  x: mouseX,
  y: mouseY,
  alpha: 255,
  yOffset: 0
});

• push() adds a new item to the end of the array
• { } creates an object with multiple properties:
  • x: mouseX - horizontal position (where you clicked)
  • y: mouseY - vertical position (where you clicked)
  • alpha: 255 - opacity/transparency (255 = fully visible, 0 = invisible)
  • yOffset: 0 - how far the text has floated up (starts at 0)

info

This is called an object literal. It's a way to group related data together. Think of it like a container holding all the information about one floating text message.

Animating the Floating Text

Now we need to update and draw all the floating texts in our draw() function:

function draw() {
  background(240);
  
  // Smoothly grow the cookie back to normal size
  if (cookieSize < 150) {
    cookieSize += 2;
  }
  
  // Draw the cookie
  fill('#D2691E');
  circle(width/2, height/2, cookieSize);
  
  // Update and draw all floating texts
  for (let i = floatingTexts.length - 1; i >= 0; i--) {
    let txt = floatingTexts[i];
    
    // Move text up and fade out
    txt.yOffset += 2;
    txt.alpha -= 5;
    
    // Draw the text
    fill(50, 200, 50, txt.alpha);
    textSize(24);
    textAlign(CENTER);
    text('+1', txt.x, txt.y - txt.yOffset);
    
    // Remove text when fully faded
    if (txt.alpha <= 0) {
      floatingTexts.splice(i, 1);
    }
  }
  
  // Display score
  fill(0);
  textSize(32);
  textAlign(CENTER);
  text('Score: ' + score, width/2, 50);
}

Breaking it down:

Looping Through the Array (Backwards!)

for (let i = floatingTexts.length - 1; i >= 0; i--) {
  let txt = floatingTexts[i];

• floatingTexts.length - 1 starts at the last item
• i >= 0 continues until we reach the first item
• i-- counts backwards
• let txt = floatingTexts[i] gets the current text object

tip

Why loop backwards? We're removing items from the array as we go. If we looped forwards and removed an item, all the items after it would shift, causing us to skip items. Looping backwards avoids this problem!

Animating Each Text

txt.yOffset += 2;
txt.alpha -= 5;

• txt.yOffset += 2 increases the upward offset by 2 pixels each frame
• txt.alpha -= 5 decreases opacity by 5 each frame (makes it fade out)

Drawing the Text

fill(50, 200, 50, txt.alpha);
textSize(24);
textAlign(CENTER);
text('+1', txt.x, txt.y - txt.yOffset);

• fill(50, 200, 50, txt.alpha) sets color to green with variable transparency
  • First three numbers are RGB (red, green, blue)
  • Fourth number is alpha (transparency)
• text('+1', txt.x, txt.y - txt.yOffset) draws at:
  • Horizontal: txt.x (where you clicked)
  • Vertical: txt.y - txt.yOffset (starts at click position, moves up)

Removing Faded Text

if (txt.alpha <= 0) {
  floatingTexts.splice(i, 1);
}

• When alpha reaches 0 (invisible), remove it from the array
• splice(i, 1) removes 1 item at position i
• This prevents the array from growing forever and slowing down the game

Complete Code

Here's everything together:

let score = 0;
let cookieSize = 150;
let floatingTexts = [];

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(240);
  
  // Smoothly grow the cookie back to normal size
  if (cookieSize < 150) {
    cookieSize += 2;
  }
  
  // Draw the cookie
  fill('#D2691E');
  circle(width/2, height/2, cookieSize);
  
  // Update and draw all floating texts
  for (let i = floatingTexts.length - 1; i >= 0; i--) {
    let txt = floatingTexts[i];
    
    // Move text up and fade out
    txt.yOffset += 2;
    txt.alpha -= 5;
    
    // Draw the text
    fill(50, 200, 50, txt.alpha);
    textSize(24);
    textAlign(CENTER);
    text('+1', txt.x, txt.y - txt.yOffset);
    
    // Remove text when fully faded
    if (txt.alpha <= 0) {
      floatingTexts.splice(i, 1);
    }
  }
  
  // Display score
  fill(0);
  textSize(32);
  textAlign(CENTER);
  text('Score: ' + score, width/2, 50);
}

function mousePressed() {
  let d = dist(mouseX, mouseY, width/2, height/2);
  
  if (d < 75) {
    score++;
    cookieSize = 135;
    
    // Create a new floating text
    floatingTexts.push({
      x: mouseX,
      y: mouseY,
      alpha: 255,
      yOffset: 0
    });
  }
}

Test It Out!

Click the cookie multiple times rapidly. You should see:

• ✅ Green "+1" text appears where you click
• ✅ Text floats upward
• ✅ Text fades out as it rises
• ✅ Multiple texts can float at the same time
• ✅ Old texts disappear when fully faded

How One Text Animates - Frame by Frame

Let's say you clicked at position (400, 300):

1. Frame 1: Create object {x: 400, y: 300, alpha: 255, yOffset: 0}
   • Draws at (400, 300) with full opacity
2. Frame 2: yOffset = 2, alpha = 250
   • Draws at (400, 298) slightly faded
3. Frame 3: yOffset = 4, alpha = 245
   • Draws at (400, 296) more faded
4. Frames 4-51: Continues moving up and fading...
5. Frame 52: alpha = 0
   • Object is removed from array

Customization Ideas

Try changing these values to customize the effect:

• txt.yOffset += 2 - Change 2 to make text float faster/slower
• txt.alpha -= 5 - Change 5 to make text fade faster/slower
• fill(50, 200, 50, txt.alpha) - Change RGB values for different colors
• textSize(24) - Make the floating text bigger or smaller
• text('+1', ...) - Change to show different text like '🍪' or '+1 cookie!'

What You Learned

• How to use arrays to store multiple objects
• How to create objects with multiple properties using { }
• How to add items to an array with push()
• How to loop backwards through an array
• How to remove items from an array with splice()
• How to use the alpha channel for transparency
• How to create smooth animations by updating properties over time