Ford Circles

File: Screen Shot 2017-08-06 at 12.21.22.png (89KB, 817x421px) Image search: [Google]

89KB, 817x421px

Hi, I'm trying to render some scrolling ford circles however I seem to have gotten this result. Any idea where my error is? Here is the render loop:

    var yScale = new Fraction(1, 2);
    var xOffset = 0.3;

    function renderFordCircles() {
        //var circleI = new Fraction(-1, 2); // + offset
        var smallestD = Math.floor(Math.sqrt(renderSpace.canvas.height * 2 / yScale.value())); //-> smallest radius = 1;
        var renderRange = yScale.value() * (renderSpace.canvas.width / renderSpace.canvas.height) + 1;

        var startOffset = xOffset - 1/2;
        var endOffset = startOffset + renderRange;

        for (var i = smallestD; i > 0; i--) {
            var startN = i * Math.round(startOffset) + Math.round((startOffset - Math.round(startOffset)) * i);
            var endN = i * Math.round(endOffset) + Math.round((endOffset - Math.round(endOffset)) * i);
            var circleF = new Fraction(startN, i);

            while(circleF.n <= endN) {
                if (circleF.GCD() == 1) {
                    var radius = (renderSpace.canvas.height * 2 / yScale.value()) / (circleF.d * circleF.d);
                    var x = renderSpace.canvas.width * (circleF.value() - xOffset);
                    var y = renderSpace.canvas.height - radius;
                    renderSpace.ellipse(x, y, radius);
                }
                circleF.n++;
            }
        }
    }

[Attached image is the output]