 # Javascript floating point is getting complicated

Hello,

I got inspiration from the “Animating Many Things on a Canvas” tutorial of this website and wanted to create a canvas animation of similar sorts but which looks like a single line tracing the path of the fibonacci arc.

This is the actual code i used-

``````function drawCircle() {
//mainContext.clearRect(0, 0, canvasWidth, canvasHeight);

// color in the background
mainContext.fillStyle = "#EEEEEE";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);

// draw the circle
//mainContext.beginPath();

mainContext.arc(xPos, yPos, 2, 0, Math.PI*2, true);
mainContext.closePath();

// color in the circle
mainContext.fillStyle = "#006699";
mainContext.fill();

angle += Math.PI/128;
//console.log(angle % (Math.PI/2) === 0);

if(angle % (Math.PI/2) === 0){  // This is where i am having a problem
}

requestAnimationFrame(drawCircle);
}
drawCircle();
``````

i actually got this code by manipulating the code from ‘Creating a Simple HTML5 Canvas Animation’ tutorial… I am extremely grateful to you for that!
This code tries to multiply the radius(of the Fibonacci arc) by 2 everytime the angle becomes a multiple of Math.PI/2 but since everything is a floating point in JS that if statement always returns false and the radius remains the same. Hence instead of a fibonacci arc i just got this -

Is there any way to handle floating point manipulation.
I tried Math.floor() but that rounds off to the nearest integer and it will not be useful for this animation.

remove the Math.PI and multiply by 2

``````angle += 1/64
if (Number.isInteger(angle))
``````
1 Like

You can also consider rounding your numbers to whatever level of precision you want: https://www.kirupa.com/html5/rounding_numbers_in_javascript.htm 1 Like

will implement this and get back

Wow missed this tutorial.
will check this out.
Indeed! It is surprising to see how long it took JavaScript to get this far on this area 