JSFiddle - React, Tailwind, and code Playground

by Animesh Shaw

HTML

<title>Lorenz System</title>
<body style="background-color: #2e2e2e;">
    <p style="text-align: justify;">
        <h2 style="color: #db1e1e;">Lorenz system</h2>
        <br /> <em style="color: #ffffff;">For the values rho = 28, sigma = 10, and beta = 8 / 3; the System shows chaotic behaviour. The illustartion below shows Chaotic nature of Lorenze System for the X-Z Plane.</em>

    </p>
    <svg id="lorenz_attractor" width="800" height="600" class="object_center" style="background-color: #1e1e1e;">
        <linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgba(215, 40, 40, 0.9);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgba(215, 40, 40, 0.9);stop-opacity:1" />
        </linearGradient>
    </svg>
</body>

JavaScript

var xt = 0.1,
    yt = 0,
    zt = 0;
var t = 0.01;
var sigma = 10.0;
var rho = 28.0;
var beta = 8.0 / 3.0;
var count = 0;

function iterate() {
    var x = xt + t * sigma * (yt - xt);
    var y = yt + t * (xt * (rho - zt) - yt);
    var z = zt + t * (xt * yt - beta * zt);
    xt = x;
    yt = y;
    zt = z;
    count++;
}

function update() {

    var svg = document.getElementById("lorenz_attractor");

    if (count > 10000) {
        while (svg.lastChild && svg.lastChild.tagName == "circle") {
            svg.removeChild(svg.lastChild);
        }
        count = 0;
        xt = 0.1;
        yt = zt = 0;
    }

    iterate();

    var cir = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    cir.setAttribute("cx", 350 + 10 * xt);
    cir.setAttribute("cy", 40 + 10 * zt);
    cir.setAttribute("r", 1);
    cir.setAttribute("fill", "url(#lg)");
    cir.setAttribute("stroke", "lightgreen");
    cir.setAttribute("stroke-width", "1");
    svg.appendChild(cir);
}

var windowInterval = window.setInterval(update, 5);