P5 loader not working properly

Question

I made a loader using p5, works fine but there are glitches after some certain time, causing some circle to randomly form for no reason

https://code.sololearn.com/W7RWTOBvp3sp/?ref=app

Hatsy Rei Help

Answer 1

What I noticed was that the full circle blinks into existence only when the end of arc is aligned horizontally, at 0 degrees. What I suspect happening is reaching 0 degrees with floating point values may cause some kind of angle overflow, e.g. -0.001 degrees, resulting in the program drawing a full circle (but in the opposite direction). By forcing some margin, this allows the values drawn to never get too close to 0, hence eliminating the issue.

https://code.sololearn.com/Wbx9XKQHn5iZ/?ref=app

Answer 2

I believe it is not an issue with p5. I tried locating the crossover point where the full circle is drawn, but was unable to do so with conditional statements. That said, I'm fairly sure this is what happened. You can try out the following:

arc(0,0,r,r,PI,PI); arc(0,0,r,r,PI+0.000000000000001,PI);

Not sure if it is universally reproducible, but the first command does not draw anything, while the second line should draw a full circle. I further narrowed down the issue to the second arc (seems like the first arc did not cause any issues for some reason), which means at some point the program thinks -phase2 > PI, even by a very, very small margin.

This also means that by rounding the decimals off to a more manageable amount, we can also eliminate the error:

arc(0,0,r,r,-phase2.toFixed(2),PI);

Answer 3

Hatsy Rei
So, the problem was, the p5 Library (or the whole js programming language) not properly processing the numbers to calculate the pixels to sketch in canvas??

And btw, what happens for the limit of functions like Math.tan? Because tan(89.999) is almost Infinity and tan(90.0001) is almost negative infinity? even though the function was not used in current code