Today I’m going to talk about Task 8 from last week’s assignment。I think it is really a super challenge. It took me more than an hour to finish.

As the discription suggests, Task 8 is a mix of Task 6 and Task 7. The goal is to make small balls appear when you click the mouse, and when they collide, their color should toggle — from red to white, or from white to red.

So at first, my idea was simple: just combine the code from Task 6 and Task 7 to make this happen.

Let’s start with Task 6. That one generates a grid of cells, and when you click a single cell, its color toggles. The logic is not hard. Basically, it’s using the same toggle logic we learned earlier, but applied to each cell. To do this, i made each cell an object, and each object has its own colorstate that stores its current color.

So, what is an object? I think of it as a big variable that can hold different types of information, and also has its own actions. Normally, when we define a simple variable, like let a = 100, it only holds one value. But an object can hold multiple values, and even functions that describe how it behaves. These properties and functions are all defined inside a class, which is a template for objects.

In my cell class, I had a function called mouseIsOver(). It checks whether the mouse is within the area of a cell. If it is, it returns true, and that lets me know which cell should toggle its color. When I click the mouse, the program loops through all the cells, finds the one my mouse is over, and toggles its color.

Then, Task 7 builds on a different idea — it lets the user click to create bouncing balls, and when the balls come near each other, they change color. My version was simple: I used the dist() function to calculate the distance between two balls. If the distance is smaller than the sum of their radius, that means they overlap, and then I changed their color using randomColor().

But, as you can see, the colors kept flickering very fast. That’s because when two balls overlap, randomColor() keeps getting triggered again and again. And that’s exactly the problem I tried to fix in Task 8.

Now, moving on to Task 8 — at first, I tried the same idea as Task 6: storing the toggle state inside each ball object. You can actually see the commented-out code here. But I soon realized that this approach didn’t work.

In Task 6, whether a cell toggles its color only depends on the mouse. It’s an external factor. But in Task 8, the color toggle depends on the relationship between two objects, that is whether two balls overlap. That’s very different. The overlap is not an individual property; it’s a shared one between two balls.

So, if I store that state inside each object, each ball has to check its relationship with every other ball in the array. That can easily create conflicts — like one ball thinking they overlap while the other thinks they don’t. And since color toggle depends directly on that overlap state, it causes the program to constantly switch between 0 and 1, which creates that flickering effect.

So I realized that the relationship between two objects should not belong to either one of them — it should be stored as a shared state.

To do that, I used a Map() function. it works kind of like a 2d array. In simple terms, it maps a key to a value. Here, my key is a pair of ball indices from the array, and the value is their shared overlap state.

When a pair of balls overlaps, the program only updates their shared overlap state. Each pair has its own state, so they don’t interfere with each other.

And that finally solved the problem. Now when the balls touch, the color toggles once — no more flickering. You can see the result here.