The problem

Hello! I am creating a graphing application. Now I am creating the gridlines for the graphing calculator.

To manage to zoom, I have two variables; scale_x for the X-axis, and scale_y for the Y-axis. When I am zooming the gridlines has to change accordingly to the scaling.

I am trying to accomplish something like https://www.geogebra.org/calculator 's gridlines.

Their gridlines always space with a number that is either, a*10^b where a∈{1,2,5} and b is just which "step" you're at. Just try zooming out and look at the gridlines.

What I got

I am currently spacing the gridlines relative to the grids coordinate system, NOT the width and height of the screen.

var distance_x = 100 / (2**Math.floor((getBaseLog(2, scale_x))));
var distance_y = 100 / (2**Math.floor((getBaseLog(2, scale_y))));

This bit of code spaces the gridlines nicely but only with 2^something.

I'm not even sure why this is working, but I need it to work as GeoGebra's gridlines.

Anyone got an idea?