Untitled

<html>

<head> </head>

<body>

<script src="https://www.desmos.com/api/v1.6/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"> </script>

<div id="calculator" style="width: 1920px; height: 1080px;"></div>

<script>
    var elt = document.getElementById('calculator');
    var calculator = Desmos.GraphingCalculator(elt);

    let n = 5; // <----- CHANGE THIS NUMBER TO WHATEVER YOU WANT THE SEQUENCE TO START AT
    while (n != 1) {
        let isEven = (n % 2 === 0);
        let next = isEven ? n / 2 : 3*n + 1;
        let h = (n + next)/2;
        let dist = Math.sqrt( Math.pow(h - n, 2) );

        calculator.setExpression({
            id : `graph${n}`,
            latex: `(x - ${h})^2 + y^2 = (${dist})^2 \\{ y ${isEven ? "<" : ">"} 0 \\}`,
            color: isEven ? Desmos.Colors.BLUE : Desmos.Colors.RED
        });
        n = next;
    }

    let h = (5)/2;
    // Add the 1 -4 loop manually
    let dist = Math.sqrt( Math.pow(h - 1, 2) );
    calculator.setExpression({
        id: 'graphend',
        latex: `(x - ${h})^2 + y^2 = (${dist})^2 \\{ y > 0 \\}`,
        color: Desmos.Colors.RED
    });


  </script>

</body>

</html>