physim/ball.html at main · undeadevs/physim · 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
<!doctype html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="./index.css" rel="stylesheet" />
</head>

<body>
    <a href="./" class="home-btn">
        <svg width="94" height="82" viewBox="0 0 94 82" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M49.3088 0.690256C47.9095 -0.230087 46.0905 -0.230085 44.6912 0.690259L1.87557 28.8519C-1.57225 31.1196 0.0469255 36.4444 4.18433 36.4444H12.1945V77.8586C12.1945 80.1458 14.0644 82 16.3711 82H30.2933C32.6001 82 34.47 80.1458 34.47 77.8586V57.1515C34.47 54.8643 36.34 53.0101 38.6467 53.0101H56.7455C59.0523 53.0101 60.9222 54.8643 60.9222 57.1515V77.8586C60.9222 80.1458 62.7922 82 65.0989 82H79.0211C81.3278 82 83.1977 80.1458 83.1977 77.8586V36.4444H89.8157C93.9531 36.4444 95.5722 31.1196 92.1244 28.8518L49.3088 0.690256Z"
                fill="white" />
        </svg>
    </a>
    <main id="ball-main">
        <ul class="toolbar">
            <li>
                <input type="checkbox" id="play" hidden />
                <label for="play">
                    <button id="play-btn">
                        <svg width="100" height="100" viewBox="0 0 100 100" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M75.75 46.342C78.4167 47.8816 78.4167 51.7306 75.75 53.2702L24 83.1481C21.3333 84.6877 18 82.7632 18 79.684L18 19.9282C18 16.849 21.3333 14.9245 24 16.4641L75.75 46.342Z"
                                fill="white" />
                        </svg>
                    </button>
                    <button id="pause-btn">
                        <svg width="100" height="100" viewBox="0 0 100 100" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M59 21C59 18.7909 60.7909 17 63 17H67C69.2091 17 71 18.7909 71 21V79C71 81.2091 69.2091 83 67 83H63C60.7909 83 59 81.2091 59 79V21Z"
                                fill="white" />
                            <path
                                d="M28 21C28 18.7909 29.7909 17 32 17H36C38.2091 17 40 18.7909 40 21V79C40 81.2091 38.2091 83 36 83H32C29.7909 83 28 81.2091 28 79V21Z"
                                fill="white" />
                        </svg>
                    </button>
                </label>
            </li>
            <li>
                <button id="add-btn">
                    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M44 21C44 18.7909 45.7909 17 48 17H52C54.2091 17 56 18.7909 56 21V44H79C81.2091 44 83 45.7909 83 48V52C83 54.2091 81.2091 56 79 56H56V79C56 81.2091 54.2091 83 52 83H48C45.7909 83 44 81.2091 44 79V56H21C18.7909 56 17 54.2091 17 52V48C17 45.7909 18.7909 44 21 44H44V21Z"
                            fill="white" />
                    </svg>
                </button>
            </li>
            <li>
                <button id="remove-btn">
                    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M83 48C83 45.7909 81.2091 44 79 44L21 44C18.7909 44 17 45.7909 17 48L17 52C17 54.2091 18.7909 56 21 56L79 56C81.2091 56 83 54.2091 83 52L83 48Z"
                            fill="white" />
                    </svg>
                </button>
            </li>
        </ul>
        <canvas id="cv-ball"></canvas>
        <input type="checkbox" id="controls-toggle" hidden />
        <div class="controls">
            <div class="control-form">
                <label for="gravity">Gravity</label>
                <input type="range" name="gravity" id="gravity" min="0" max="28" step="0.05">
                <label for="restitution">Restitution</label>
                <input type="range" name="restitution" id="restitution" min="0" max="1" step="0.01">
                <label for="vmode">Input Mode</label>
                <select name="vmode" id="vmode">
                    <option value="cartesian" selected>Cartesian</option>
                    <option value="polar">Polar</option>
                </select>
                <div class="ball-input-cartesian">
                    <label for="velx">v.x</label>
                    <input type="number" name="velx" id="velx" step="0.01" />
                    <label for="vely">v.y</label>
                    <input type="number" name="vely" id="vely" step="0.01" />
                </div>
                <div class="ball-input-polar">
                    <label for="vela">v.&theta;</label>
                    <input type="number" name="vela" id="vela" step="0.01" />
                    <label for="vell">||v||</label>
                    <input type="number" name="vela" id="vell" step="0.01" />
                </div>
            </div>
            <label for="controls-toggle" class="action-btn"></button>
        </div>
    </main>
    <script src="./js/utils/vector.js" type="module"></script>
    <script src="./js/utils/shapes.js" type="module"></script>
    <script src="./js/main/ball.js" type="module"></script>
</body>

</html>