Lesson Overview

In this lesson, Ollie will move beyond basic "on/off" coding to create a professional-grade interactive hover effect. Using TurboWarp (an enhanced version of Scratch), we will use division, fractions, and logic blocks to make a sprite grow smoothly when the mouse touches it and shrink back when it doesn't.

Materials Needed

• Computer or Tablet with internet access
• TurboWarp.org (Browser-based or Desktop version)
• A mouse or trackpad
• Optional: A piece of paper and pencil for "math sketching"

Learning Objectives

• Logic: Use if-else statements to detect mouse interaction.
• Mathematics: Apply division and fractions to create "easing" animations (smooth movement).
• Dimensions: Manipulate the size attribute of a sprite using variables.
• Efficiency: Use TurboWarp's high-performance features to ensure smooth frame rates.

1. Introduction: The "Pop" Factor (The Hook)

Think about your favorite video game menu. When you move your mouse over a button, does it just "blink" into a new size? Usually, no! It "swells" or grows smoothly, like it's breathing. This is called UI Animation. Today, we aren't just going to tell the computer to change size; we're going to use a math formula to make it look alive.

The Goal: Create a character that grows when hovered over and shrinks when left alone, using the "Smooth Scaling Formula."

2. Concept: The Secret Math of Smoothness (I Do)

In coding, if we say Set size to 150%, it happens instantly. To make it smooth, we use Fractions and Division. We calculate the "Gap" between where the sprite is and where it wants to be, then move it a fraction of that distance.

The Formula:
Change Size by ((Target Size - Current Size) / Speed)

• Target Size: Where we want to go (e.g., 150%).
• Current Size: Where we are right now.
• Speed: The divider. A bigger number makes the movement slower and smoother!

3. Guided Practice: Building the Logic (We Do)

Follow these steps in TurboWarp to build the "Brain" of your interactive object:

Step A: Setup the Logic

1. Open TurboWarp and choose a Sprite (like a button or a cool character).
2. Grab a forever loop and place an if-else block inside it.
3. In the if sensor, put touching mouse-pointer?.

Step B: Creating the Variables

1. Go to Variables and create a new variable called "Target Size".
2. Under the if (when touching mouse), set Target Size to 150.
3. Under the else (when NOT touching), set Target Size to 100.

Step C: The Math Block (The Advanced Part)

Now we apply our division formula. Build this string of blocks and place it underneath the if-else block (but still inside the forever loop):

1. Get a change size by () block.
2. Inside the bubble, drop a Division (/) operator.
3. In the left side of the division, drop a Subtraction (-) operator.
4. In the subtraction: (Target Size - size).
5. In the right side of the division, type the number 5.

Check-in: Your code should look like: Change size by ((Target Size - size) / 5).

4. Application: Interactive Challenge (You Do)

Now it's your turn to turn this into a game element! Choose one of the following challenges:

• The "Loot Box" Challenge: Create a treasure chest that grows slightly when you hover over it, and "jiggles" (rapidly changes size) if you click it.
• The "Shrinking Planet" Challenge: Reverse the logic! Make the sprite get smaller (Target Size 50) when you try to catch it with your mouse, making it look like it's running away into the distance.
• The Speed Experiment: Change the "Division" number. What happens if you divide by 2? What happens if you divide by 20? Find the "Sweet Spot" for the smoothest feeling.

5. Closure & Recap

Great work, Ollie! You just used advanced game design math. Let's recap:

• Why did we use division? To move the sprite by a fraction of the distance, which creates a smooth slowing-down effect (easing).
• What does the "If-Else" do? It acts as a switch, telling the code whether the Target Size should be "Big" or "Small."
• Real World Connection: This exact math is used in apps like Instagram and YouTube to make buttons and icons feel "bouncy" and responsive!

Assessment & Success Criteria

Success looks like:

• The sprite changes size based on the mouse position without clicking.
• The transition is smooth (not a sudden jump).
• The student can explain that a higher division number makes the animation slower.

Formative Check: Ask Ollie: "If I want the button to grow even bigger, which variable do I change?" (Answer: Target Size). "If I want it to grow faster, do I make the divider bigger or smaller?" (Answer: Smaller).

Differentiation & Extensions

• For more support: Use the "Change size by 10" and "Change size by -10" blocks first to understand the simple version before moving to the division formula.
• For a challenge: Add a ghost effect (transparency) that also uses the same division formula. When the mouse hovers, the sprite should become more or less transparent smoothly!