Reason for flickering

By console logging hover() and inRange() of just one tomato, I could see that flickering happens when inRange() is flipping between true and false. So what happens is:

<aside>

in range —> follow mouse —> just out of range —> bounce back —> in range again

</aside>

1. console log conditions.mov

Looking behind the curtain

I still don’t know why that happens. To see it more clearly, I drew just one tomato, and overlaid the range on top of it.

2. draw range.mov

It is stable inside the range, and flickers the moment it leaves the rectangle, until it reaches another “boundary” and bounces back. What is this boundary?

I then printed the distance between x and original x on screen, to see where is the furtherest point it could get to.

3. Log distX.mov

Oddly enough, even when my mouse is way beyond the range, the distance value is rarely over 80.

Theoretically, when it goes out of range by 1 pixel, inRange() becomes false; it should bounce back. And when it bounces back by just 1 pixel, it… follows mouse… because now it’s in range and mouse is still hovering on it.

I have a theory…

If I make the range larger than the size of the tomato, would it make hover() false when inRange() is false? Let’s test it out.

4. larger range.mov

I realized three things:

1. Range doesn’t matter
2. The “boundary” I saw is the boundary of hover().
3. In the previous step, I mistakenly compared mouseX to range, when in fact the x position of the tomato rarely goes that far