nbody/index.html at master · kkatrio/nbody · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>nbody</title>
        <style>
            html, body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                background: black;
            }
            #root {
                display: flex;
                /* anchor the canvas to the top */
                align-items: flex-start;
            }
            #widget {
                position: fixed;
                top: 16px;
                right: 16px;
                width: 160px;
                background: rgba(30, 30, 30, 0.75);
                backdrop-filter: blur(6px);
                border: 1px solid rgba(255,255,255,0.15);
                padding: 10px;
                display: flex;
                flex-direction: column;
                gap: 8px;
                z-index: 100;
                color: gray;
                font-family: sans-serif;
                font-size: 13px;
            }
            @media (max-width: 600px) {
                #widget {
                    top: auto;
                    bottom: 16px;
                    right: 50%;
                    transform: translateX(50%);
                    width: calc(100% - 48px);
                    max-width: 320px;
                }
            }
            #widget input {
                width: 100%;
                padding: 5px;
                border: 1px solid rgba(255,255,255,0.2);
                background: rgba(255,255,255,0.1);
                color: gray;
                box-sizing: border-box;
            }
            #widget button {
                padding: 6px;
                border: none;
                background: rgba(200, 160, 100, 0.7);
                color: black;
                cursor: pointer;
                font-size: 13px;
            }
            #widget button:hover {
                background: rgba(200, 160, 100, 0.8);
            }
            #widget-links {
                border-top: 1px solid rgba(255,255,255,0.15);
                padding-top: 4px;
                margin-top: 4px;
            }
            #widget-links a {
                color: rgba(180, 210, 255, 0.85);
                text-decoration: none;
                font-size: 12px;
            }
            #widget-links a:hover {
                color: rgba(180, 210, 255, 1);
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div id="widget">
            <div class="item">
                <label for="nbodies">number of bodies</label>
                <input type="number" id="nbodies" value="1400" />
            </div>
            <div class="item">
                <label for="nclusters">number of clusters</label>
                <input type="number" id="nclusters" value="3" />
            </div>
            <button id="reload">reload</button>
            <div id="widget-links">
                <a id="link" style="float: right;" href="https://github.com/kkatrio/nbody" target="_blank">info</a>
            </div>
        </div>

        <div id="root">
            <canvas id="canvas2"></canvas>
        </div>

        <script type="module">
            function resizeCanvas() {
                const canvas = document.getElementById("canvas2");
                const dpr = window.devicePixelRatio || 1;
                const vw = window.innerWidth;
                const vh = window.innerHeight;
                const size = window.innerWidth <= 600
                    ? Math.min(vw, vh)
                    : Math.max(vw, vh);
                canvas.style.width  = size + "px";
                canvas.style.height = size + "px";
                canvas.width  = Math.floor(size * dpr);
                canvas.height = Math.floor(size * dpr);
            }
            import init from './pkg/nbody.js';
            async function run() {
                resizeCanvas();
                window.addEventListener("resize", resizeCanvas);
                await init();
            }
            run();
            const reloadBtn = document.getElementById('reload');
            reloadBtn.addEventListener('click', () => {
                location.reload();
            });
        </script>
    </body>
</html>