Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive lorenz #3151

Merged
merged 7 commits into from
Mar 6, 2024
Merged

Interactive lorenz #3151

merged 7 commits into from
Mar 6, 2024

Conversation

dvd101x
Copy link
Sponsor Collaborator

@dvd101x dvd101x commented Feb 9, 2024

Hi, this is an interactive Lorenz Attractor example according to #3147

The code for the interactivity seems complicated, so I think it was a good idea to separate the example.

@josdejong
Copy link
Owner

O wow, nice!

I see that the actual 3d chart is not using all screen space but is relatively small. That is already the case in the lorentz.html example too. Would it be possible to make it a more fullscreen experience?

@josdejong
Copy link
Owner

Can you change lorenz.html to the following contents? That makes it really fullscreen and responsive. I can do something similar to lorenz_interactcive.html, putting the sliders in a floating box bottom left or top left for example.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>math.js | Lorenz Attractor</title>
    <script src="../../lib/browser/math.js"></script>

    <script src="https://cdn.plot.ly/plotly-2.25.2.min.js" charset="utf-8"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
        }

        #LorenzGraph {
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="LorenzGraph"></div>
</body>
<script defer>

    // define the constants for the Lorenz attractor
    const sigma = 10
    const beta = 2.7
    const rho = 28

    // solve the Lorenz attractor
    const sol = math.solveODE(lorenz, [0, 100], [1, 1, 1])

    // make colors that represents time differences in the solution
    const diff = math.diff(sol.t)
    const color = [diff[0], ...diff]

    // render the plot using plotly
    Plotly.newPlot('LorenzGraph',
        [{
            x: sol.y.map(u => u[0]),
            y: sol.y.map(u => u[1]),
            z: sol.y.map(u => u[2]),
            line: { color, colorscale: 'Jet' },
            type: "scatter3d",
            mode: "lines"
        }],
        {
            margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
        },
        {
            responsive: true
        }
    )
    // define the lorenz attractor
    function lorenz(t, u) {
        const [x, y, z] = u
        return [
            sigma * (y - x),
            x * (rho - z) - y,
            x * y - beta * z
        ]
    }
</script>

</html>

@dvd101x
Copy link
Sponsor Collaborator Author

dvd101x commented Feb 14, 2024

O wow! That looks really nice!

@josdejong
Copy link
Owner

Yeah :)

Shall I do something similar for lorenz_interactcive.html, or would you like to that yourself?

@dvd101x
Copy link
Sponsor Collaborator Author

dvd101x commented Feb 14, 2024

I would like to give it a try on the weekend.

@josdejong
Copy link
Owner

Okido👌

@josdejong
Copy link
Owner

Nice, thanks!

@josdejong josdejong merged commit 3661138 into josdejong:develop Mar 6, 2024
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants