Henon Map

henon.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"> </script>
<script src="henon.js"> </script>

<ul>
    <li> <a href="javascript:setValues(1.4,0.2);"> Chaotic (1.4, 0.3)</a> </li>
    <li> <a href="javascript:setValues(0.5,0.2);">Period 2 (0.5,0.2)</a> </li>
    <li> <a href="javascript:setValues(1.01,0.3);">Period 4 (1.01,0.3)</a> </li>
    <li> <a href="javascript:setValues(0.97,0.5);"> Period 7 (0.97, 0.5)</a> </li>
</ul>

<form>
    <!-- <button  type="button" onclick="javascript:runProj();">Run</button > <br/> -->
    <label>a=</label>
    <input type="range" min="1" max="100" value="70" class="slider" id="henonA" onchange="setA(this.value)" style="width:18em">
    <input type="text" id="lbla" value="1.4" onchange="setA2(this.value)"></input>
    <br/>
    <label>b=</label><input type="range" min="1" max="100" value="30" class="slider" id="henonB" onchange="setB(this.value)"  style="width:18em">
    <input type="text" id="lblb" value="0.3" onchange="setB2(this.value)"></input><br/>
</form>

<div id="Warn" style="color:red"> &nbsp; </div>
<canvas id="plot" style="width:600px; "></canvas>


<script>

</script>

henon.js

    var a = 1.4;
    var b = 0.3; 
    const aMult = 0.02;
    const bMult = 0.005;
    var thechart = 0;

    function setValues(a1,b1) {
        setA2(a1);
        setB2(b1);

        document.getElementById("lbla").value = a1;
        document.getElementById("lblb").value = b1;
    }

    function isNumber(value) {
    return typeof value === 'number';
    }

    function setA(v) {
        a = v * aMult;
        document.getElementById("lbla").value = a;
        runProj();
    }

    function setB(v) {
        b = v * bMult;
        document.getElementById("lblb").value = b;
        runProj();
    }

    function setA2(v) {
        a = v;
        document.getElementById("henonA").value = a / aMult;
        runProj();
    }

    function setB2(v) {
        b = v;
        document.getElementById("henonB").value = b / bMult;
        runProj();
    }    


    function projectHenon(a,b) {
        var xx = Math.random() / 100.0;
        var yy = Math.random() / 100.0;
        var ret = [];

        var i;
        var tmp
        // run for a bit to approach the attractor
        for(i=1;i<5000;i++) {
            tmp = 1.0 - a * xx*xx + yy;
            yy = b * xx;
            xx = tmp;
        }

        var pt;
        for(i=1;i<1000;i++) {
            tmp = 1.0 - a * xx*xx + yy;
            yy = b * xx;
            xx = tmp;

            pt = {x: xx, y: yy};
            ret.push(pt);
        }

        if (Math.abs(xx) > 100) {
            document.getElementById("Warn").innerHTML = "Projection goes to infinity";
            //Warn
        } else {
            document.getElementById("Warn").innerHTML = "&nbsp;";
        }

        return ret;

    }


    function runProj() {
        var chrt  = document.getElementById("plot").getContext("2d");
        var mapdat = projectHenon(a,b);
        const data = {
            datasets: [{
                data: mapdat,
                backgroundColor: 'rgb(0,0,220)'
                , radius: 1
                , color: 'rgb(255,255,255)'
            }],
        };        
        var config = {
            type: 'scatter',
            data: data,
            options: {
                tooltips: {enabled: false},
                hover: {mode: null},
                responsive: true,
                maintainAspectRatio: true,     
                aspectRatio: 1.0,           
                scales: {
                    yAxes : [{
                        ticks : {
                            max : 1.5,    
                            min : -1.5
                        }
                    }],
                    xAxes : [{
                        ticks : {
                            max : 1.5,    
                            min : -1.5
                        }
                    }],

                },                

                radius:1,
                legend: {
                    display:false
                }
            }
        };
        if (thechart) {
            thechart.destroy();
            chrt.width  = 600; // window.innerWidth;
            chrt.height = 600; //window.innerHeight;

        }
        thechart = new Chart(chrt , config);
    }



    setValues(1.4,0.3);