Step 2: Add Click Detection

Now let's make the cookie interactive! We'll detect when the player clicks on it and increase the score.

Adding Click Detection

First, we need to add a new variable to track the cookie's size for animation:

let score = 0;
let cookieSize = 150;  // Add this new variable

What this does:

• cookieSize stores the current size of the cookie
• We'll change this value to create a "squeeze" effect when clicked
• Starting at 150 to match our original circle diameter

Detecting Mouse Clicks

p5.js has a built-in function called mousePressed() that runs automatically whenever the mouse is clicked:

function mousePressed() {
  // Check if the mouse is over the cookie
  let d = dist(mouseX, mouseY, width/2, height/2);
  
  if (d < 75) {  // 75 is half of 150 (the radius)
    score++;
    cookieSize = 135;  // Shrink the cookie
  }
}

Breaking it down:

Calculating Distance

let d = dist(mouseX, mouseY, width/2, height/2);

• dist() calculates the distance between two points
• mouseX, mouseY - where the mouse was clicked
• width/2, height/2 - the center of the cookie
• Result is stored in d (distance)

Checking if Click is Inside Cookie

if (d < 75) {
  score++;
  cookieSize = 135;
}

• d < 75 checks if the click was within the cookie's radius (150 ÷ 2 = 75)
• score++ increases the score by 1 (shorthand for score = score + 1)
• cookieSize = 135 shrinks the cookie from 150 to 135 for a bounce effect

tip

Why 75? The circle() function uses diameter (150), but dist() compares to the center, so we need the radius (half the diameter). Think of it like measuring from the center to the edge!

Animating the Cookie Back

To make the cookie smoothly return to normal size, update your draw() function:

function draw() {
  background(240);
  
  // Smoothly grow the cookie back to normal size
  if (cookieSize < 150) {
    cookieSize += 2;
  }
  
  // Draw the cookie with current size
  fill('#D2691E');
  circle(width/2, height/2, cookieSize);
  
  // Display score
  fill(0);
  textSize(32);
  textAlign(CENTER);
  text('Score: ' + score, width/2, 50);
}

Breaking it down:

Growing Animation

if (cookieSize < 150) {
  cookieSize += 2;
}

• Checks if cookie is smaller than normal (150)
• If it is, add 2 pixels to the size each frame
• This creates a smooth "bounce back" animation
• Stops automatically when it reaches 150

Drawing with Variable Size

circle(width/2, height/2, cookieSize);

• Now uses cookieSize variable instead of the fixed 150
• The cookie will shrink and grow based on cookieSize value

Complete Code

Here's everything working together:

let score = 0;
let cookieSize = 150;

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 with current size
  fill('#D2691E');
  circle(width/2, height/2, cookieSize);
  
  // Display score
  fill(0);
  textSize(32);
  textAlign(CENTER);
  text('Score: ' + score, width/2, 50);
}

function mousePressed() {
  // Check if the mouse is over the cookie
  let d = dist(mouseX, mouseY, width/2, height/2);
  
  if (d < 75) {  // 75 is the radius (half of diameter 150)
    score++;
    cookieSize = 135;  // Shrink the cookie
  }
}

Test It Out!

Run this code and try clicking on the cookie. You should see:

• ✅ Score increases when you click the cookie
• ✅ Cookie shrinks slightly when clicked
• ✅ Cookie smoothly grows back to normal size
• ✅ Clicking outside the cookie does nothing

How It Works - Frame by Frame

1. Frame 1: Cookie is drawn at size 150
2. User clicks: mousePressed() runs, checks distance, increases score, sets size to 135
3. Frame 2: Cookie draws at size 135 (smaller), then size increases to 137
4. Frame 3: Cookie draws at size 137, then size increases to 139
5. Frames 4-8: Size keeps increasing by 2 each frame
6. Frame 9: Size reaches 150, stops growing (condition cookieSize < 150 is false)

What You Learned

• How to use mousePressed() to detect clicks
• How to calculate distance between two points with dist()
• How to check if a click is inside a circle
• How to create smooth animations by incrementing values in draw()
• How to use variables to make objects responsive to user input