9.7.4 Leash
Have you ever watched a dog happily follow its owner, connected by a simple leash?
That gentle connection—always together yet free to move—is exactly what happens inside the 9.7.4 leash program.
I remember sitting down with my own computer last Tuesday evening, coffee in hand, trying to figure out why my ball refused to follow my mouse.
It took me three tries and one very patient friend to finally understand the magic behind those few lines of code.
What looked like a simple exercise turned out to be my first real taste of how event-driven programming actually works.
The moment that little yellow ball started chasing my cursor across the screen, leash trailing behind, I actually laughed out loud.
It felt less like coding and more like teaching a tiny digital puppy a new trick.
That feeling of connection—between you, your mouse, and the object on screen—is what makes the 9.7.4 leash program so special.
It is not just about passing a quiz.
It is about understanding how your computer listens to you and responds instantly.
What Exactly Is the 9.7.4 Leash Program?
The 9.7.4 leash exercise is one of the most beloved challenges in the CodeHS Animation and Games module.
At its heart, this program creates a bright yellow ball that follows your mouse cursor wherever it moves.
But here is the really clever part: a thin black line connects the ball back to the exact center of the screen.
That line is the leash.
Every time you glide your mouse across the canvas, the ball snaps to your cursor position, and the leash stretches, twists, and adjusts instantly.
It feels alive.
Students often tell me this is the moment coding clicks for them.
Suddenly, variables are not just abstract containers. They hold real things.
Functions are not just instructions. They are conversations between you and the machine.
The 9.7.4 leash program teaches you about mouse events, coordinate systems, and object positioning all inside one tidy little package.
And once you understand it, you will never look at your computer mouse the same way again.
Breaking Down the 9.7.4 Leash Code Step by Step
Let me walk you through the actual code of the 9.7.4 leash program the way I wish someone had explained it to me.
We start with two constants and two global variables.
The BALL_RADIUS is set to 30 pixels. That is the size of our friendly yellow ball.
Then we declare ball and line at the very top.
This is important because both the start function and the endPoint function need to talk to the same ball and the same line.
If you accidentally declare a new var ball inside a function later, you will create two separate balls and nothing will work correctly.
I made that mistake once and spent twenty minutes staring at a blank screen.
The start function builds our scene.
It places a black line starting at the exact center of the screen, but here is the trick: both the start point and the endpoint are the same coordinates at first.
So the line is invisible, just a tiny dot.
Then we add the yellow ball right on top of that same center point.
Finally, we tell the computer: every single time the mouse moves, run the function called endPoint.
That is the leash.
That is the magic.
How Mouse Movement Controls the Ball and Line
The real genius of the 9.7.4 leash program lives inside the endPoint function.
This function receives one special guest: the event object, which we usually name e.
This tiny object carries a treasure chest of information.
It knows exactly where your mouse is sitting at this exact millisecond.
When you call e.getX() and e.getY(), you are essentially asking the mouse for its current coordinates.
The function then does two simple things.
First, it teleports the ball directly to those coordinates.
Second, it tells the black line to stretch its endpoint to those same coordinates.
The starting point of the line never moves. It stays nailed to the center of the screen forever.
So the line becomes a dynamic rubber band, always connecting the fixed center to your moving cursor, with the ball sitting obediently at your mouse tip.
Every frame, every tiny mouse wiggle, the leash updates.
It is responsive. It is immediate. And it is beautiful in its simplicity.
Why Global Variables Matter in the 9.7.4 Leash
One of the most common traps students fall into with the 9.7.4 leash program is variable scope.
I want you to really understand this because it will save you hours of debugging later.
When you declare a variable using var at the very top of your program, outside any function, that variable is global.
Every function in your entire program can see it, touch it, and change it.
But if you accidentally write var ball = new Circle(30) inside your start function, you have just created a brand new local variable that also happens to be named ball.
Your global ball variable still exists, but it is empty.
Your functions will be talking to different balls, and nothing will connect.
The 9.7.4 leash program works perfectly because we declare ball and line globally, then we assign them values inside start without using var again.
We simply say ball = new Circle(BALL_RADIUS).
This tells JavaScript: remember that global ball we promised at the top? Here is its actual value.
This tiny distinction separates working code from frustrating silence.
What Happens When You Click or Drag?
The 9.7.4 leash program specifically uses mouseMoveMethod, which triggers constantly as you glide your mouse.
But what if you wanted to modify it?
Imagine changing the leash to only move when you hold the mouse button down.
You would swap mouseMoveMethod for mouseDragMethod.
Or imagine clicking to drop the ball somewhere new and having the leash snap back to center only when you click again.
You would use mouseClickMethod.
The beautiful thing about understanding 9.7.4 leash is that you are really understanding event-driven programming.
The computer is not constantly guessing what you want. It is simply waiting.
It listens patiently.
And the moment you move, click, drag, or type, it springs into action and runs exactly the function you told it to run.
This is the same pattern used in video games, drawing apps, and interactive websites.
You are not just learning a leash. You are learning how modern software listens.
| Component | Code | Purpose | Technical | Mistake | Experiment |
|---|---|---|---|---|---|
| Ball Radius | var BALL_RADIUS = 30; | Ball size 30px | Constant, all caps. Used for radius. | Hardcode different number | Set to 50 → giant ball |
| Global Ball | var ball; (top) | Shared ball variable | Global scope, placeholder. | var ball inside start() | Add ball2 |
| Global Line | var line; (top) | Shared line variable | Global, same line used everywhere. | Second var line | Third leash variable |
| Start Function | function start(){...} | Runs once, setup | Entry point, runs automatically. | Code outside start | Move to custom function |
| Create Line | new Line(w/2,h/2,w/2,h/2); | Invisible leash at center | Both ends same → zero length. | Random start point | Start at bottom-left |
| Line Color | line.setColor(Color.black); | Black leash | Default black, but explicit. | No color set | Red leash |
| Add Line | add(line); | Show line on canvas | Without add, invisible. | Forgot add(line) | Add after ball |
| Create Ball | ball = new Circle(30); | Yellow ball instance | Uses BALL_RADIUS constant. | Hardcoded 30 | Rectangle instead |
| Ball Position | ball.setPosition(w/2,h/2); | Center ball | Dynamic screen size. | Fixed coords (200,200) | Top-left (0,0) |
| Ball Color | ball.setColor(Color.yellow); | Bright yellow | Built-in color. | Default black | Random color on move |
| Add Ball | add(ball); | Show ball | Must add to canvas. | Missing add(ball) | Add two balls |
| Mouse Move | mouseMoveMethod(endPoint); | Follow every move | Event handler, callback. | mouseClickMethod | mouseDragMethod |
| Event Param | function endPoint(e) | Receives mouse data | Object with coordinates. | Forget e | println(e) |
| Mouse X | e.getX() | Cursor column | 0 → width. | e.x (invalid) | Store and print |
| Mouse Y | e.getY() | Cursor row | 0 → height. | Confuse X/Y | Offset by radius |
| Move Ball | ball.setPosition(e.getX(), e.getY()); | Teleport to mouse | Core leash action. | setPosition(e) | +20px below cursor |
| Stretch Leash | line.setEndpoint(e.getX(), e.getY()); | Pull leash end | Only endpoint changes. | setPosition on line | Move start point |
| Fixed Start | Implicit in constructor | Anchor at center | Start never changes. | Move start in endPoint | setStartPoint(0,0) |
| Scope Bug | Using var inside | Local vs global | Second var creates local. | var ball = ... in start | Break it on purpose |
| Event Driven | Whole pattern | Waits for mouse | No loop, only callbacks. | Thinking it loops | Add click reset |
| Drag Only | mouseDragMethod(endPoint); | Follow only when dragging | Requires button press. | Expect drag from move | Trail on drag |
| Click Teleport | mouseClickMethod(teleport); | Jump on click | Ball stays until click. | Mix move + click | Change color on click |
| Leash Thickness | line.setLineWidth(3); | Bolder leash | Default = 1px. | Set after add (still ok) | Animate thickness |
| Leash Color | line.setColor(Color.blue); | Custom color | Any built‑in or RGB. | Same as background | Match ball color |
| Multiple Leashes | var ball2, line2; | Two followers | Declare, create, add, move. | Forget to add | Delayed follow |
| Keep on Screen | Boundary checks | Ball never leaves | Constrain X,Y with radius. | Ball vanishes | Rectangle cage |
| Console Log | println("x: "+e.getX()); | Debug coordinates | CodeHS version of log. | console.log | Print both coords |
| 9.5.5 Teleport | mouseClickMethod | Click to teleport | Similar but click‑only. | Confuse exercises | Add teleport + follow |
| 9.6.6 Target | mouseMoveMethod | Draw crosshair | Two lines follow mouse. | Think unrelated | Plus sign at cursor |
| Real‑World | Dog & owner | Leash analogy | Anchor = home, ball = dog. | Overthink | Name vars puppy/leash |
Common Mistakes Students Make with 9.7.4 Leash
I have watched hundreds of students tackle the 9.7.4 leash program, and almost everyone stumbles in the same few places.
The first mistake is forgetting to add the ball and line to the canvas.
You can create the most beautiful circle in the world, but if you never say add(ball), it will exist only in the computer’s imagination.
You will stare at an empty white rectangle wondering why nothing appears.
The second mistake is using the wrong event method.
Sometimes students type mouseClickMethod(endPoint) by accident.
Then they move their mouse all around the screen and the ball just sits there stubbornly.
They click once and suddenly the ball jumps to that spot and stays there.
That is actually a fun variation, but it is not the leash behavior the exercise asks for.
The third mistake is forgetting that screen coordinates start at zero in the top left corner.
If you accidentally set the ball’s position to negative numbers or numbers larger than the screen width, your ball will vanish into the digital void.
How the 9.7.4 Leash Relates to Real Game Programming
You might be thinking: this is cute, but will I ever use this again?
Absolutely yes.
The 9.7.4 leash program is essentially a simplified version of how aiming works in countless video games.
Think about a game where you control a turret and your crosshairs follow your mouse. That is the leash.
Think about a drawing program where a pencil icon follows your stylus.
That is also the leash.
Think about a strategy game where a colored circle shows you exactly where your unit will move before you click.
That is still the leash.
The only difference is scale and complexity.
Instead of one ball and one line, real games might track hundreds of objects simultaneously.
But the fundamental principle is identical: listen for an event, grab the mouse coordinates, and move something to that location.
When you master 9.7.4 leash, you are building the mental muscles you will use to create much larger, more impressive projects.
Practicing Beyond the Basic 9.7.4 Leash
Once you have the basic 9.7.4 leash working correctly, I strongly encourage you to experiment.
Change the ball color to randomize every time you move the mouse.
Use Randomizer.nextColor() inside your endPoint function.
Make the leash change thickness based on how fast you move the cursor.
Create two balls on two separate leashes and have them both chase your mouse.
Add a second line that connects the ball back to your actual mouse cursor instead of the screen center.
These little experiments will teach you far more than just completing the exercise.
You will start to feel genuinely creative.
The computer becomes your collaborator rather than your adversary.
And when you finally build something that surprises even you, that is when you know you have truly learned.
Frequently Asked Questions About the 9.7.4 Leash
Why does my ball move to the mouse but the leash does not show up?
You most likely forgot to add the line to the canvas. Check your start function and make sure you wrote add(line) after creating the line object. The line exists in memory, but it is invisible until you add it to the screen.
Can I make the leash a different color or thicker?
Yes. Before adding the line, type line.setLineWidth(3) for a thicker leash or line.setColor(Color.red) for a different color. You can experiment with any color the library supports.
What is the difference between mouseMoveMethod and mouseDragMethod?
MouseMoveMethod triggers every time the mouse moves at all. MouseDragMethod only triggers when the mouse moves while a button is pressed down. For the classic 9.7.4 leash, you want mouseMoveMethod.
Why does my ball sometimes go off the screen edge?
Because nothing in the 9.7.4 leash program prevents that. The ball obediently follows your mouse even if your mouse leaves the canvas area. You can add boundary checking if you want to keep the ball always visible.
Do I need to understand all this for the CodeHS exam?
Yes. The 9.7.4 leash exercise teaches event handling, object positioning, and variable scope. These three topics appear consistently in quizzes and the final exam.
How do I stop the program once it is running?
There is no stop button in the code itself, but the CodeHS environment usually has a red stop button in the runner window. You can also refresh the page or close the tab.
Your Next Steps with the 9.7.4 Leash
The 9.7.4 leash program is a small doorway into a much larger room.
You have seen how a few lines of code can create responsive, interactive experiences.
You understand now that your mouse is not just a pointing device.
It is an instrument, and your program is the musician.
I encourage you to open your CodeHS workspace right now.
Delete everything except the basic 9.7.4 leash code.
Then change one small thing.
Make the ball shrink and grow as it follows you.
Add a second leash connected to a different corner.
Turn the ball into a square or a star.
Break things on purpose and then fix them.
That is how real learning happens.
You already have everything you need.
Your computer is ready. Your mouse is waiting.
