-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (113 loc) · 7.05 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matter.js 물리 시뮬레이션 예제</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<section id="menu">
<h1>메뉴</h1>
<div id="info">
<p>속도: <span id="speed">0</span></p>
</div>
<div id="buttons">
<div>
<div>
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1"
viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
.st0 {
fill: #231F20;
}
</style>
<path class="st0"
d="M381,236H276V131c0-11-9-20-20-20s-20,9-20,20v105H131c-11,0-20,9-20,20s9,20,20,20h105v105c0,11,9,20,20,20 s20-9,20-20V276h105c11,0,20-9,20-20S392,236,381,236z" />
</svg>
<h2>요소추가</h2>
<select name="" id="objectType">
<option value="r">사각형</option>
<option value="c">원</option>
</select>
</div>
<button onclick="addObject()">추가</button>
</div>
<div>
</div>
<div>
<div>
<h2>요소선택</h2>
<select name="" id="objectSetting_ID">
</select>
</div>
<div>
<button style="background-color: #e62c1e; width: 50%;" onclick="deleteObject()">삭제</button>
<button style="background-color: #979797; width: 50%;" onclick="objectSetting()">설정</button>
</div>
<button onclick="checkSelectedObject()" style="margin-top: 5px; width: 100%; height: 70px; background-color: #fff; color: #4caf50; border: 1px solid #4caf50;">선택된 요소 움직이기 ‣</button>
</div>
</div>
<div id="bottom_buttons">
<?xml version="1.0" ?><svg
onclick="document.getElementById('windowModal').style.visibility = 'visible'; document.getElementById('myModalOverlay').style.visibility = 'visible';"
data-name="Livello 1" id="Livello_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<title />
<path d="M64,39A25,25,0,1,0,89,64,25,25,0,0,0,64,39Zm0,44A19,19,0,1,1,83,64,19,19,0,0,1,64,83Z" />
<path
d="M121,48h-8.93a1,1,0,0,1-.94-.68,49.9,49.9,0,0,0-2-4.85,1,1,0,0,1,.18-1.15L115.62,35a7,7,0,0,0,0-9.9L102.89,12.38a7,7,0,0,0-9.9,0l-6.31,6.31a1,1,0,0,1-1.15.18,49.76,49.76,0,0,0-4.85-2,1,1,0,0,1-.68-.94V7a7,7,0,0,0-7-7H55a7,7,0,0,0-7,7v8.93a1,1,0,0,1-.68.94,49.9,49.9,0,0,0-4.85,2,1,1,0,0,1-1.15-.18L35,12.38a7,7,0,0,0-9.9,0L12.38,25.11a7,7,0,0,0,0,9.9l6.31,6.31a1,1,0,0,1,.18,1.15,49.76,49.76,0,0,0-2,4.85,1,1,0,0,1-.94.68H7a7,7,0,0,0-7,7V73a7,7,0,0,0,7,7h8.93a1,1,0,0,1,.94.68,49.9,49.9,0,0,0,2,4.85,1,1,0,0,1-.18,1.15L12.38,93a7,7,0,0,0,0,9.9l12.73,12.73a7,7,0,0,0,9.9,0l6.31-6.31a1,1,0,0,1,1.15-.18,49.76,49.76,0,0,0,4.85,2,1,1,0,0,1,.68.94V121a7,7,0,0,0,7,7H73a7,7,0,0,0,7-7v-8.93a1,1,0,0,1,.68-.94,49.9,49.9,0,0,0,4.85-2,1,1,0,0,1,1.15.18L93,115.62a7,7,0,0,0,9.9,0l12.73-12.73a7,7,0,0,0,0-9.9l-6.31-6.31a1,1,0,0,1-.18-1.15,49.76,49.76,0,0,0,2-4.85,1,1,0,0,1,.94-.68H121a7,7,0,0,0,7-7V55A7,7,0,0,0,121,48Zm1,25a1,1,0,0,1-1,1h-8.93a7,7,0,0,0-6.6,4.69,43.9,43.9,0,0,1-1.76,4.26,7,7,0,0,0,1.35,8l6.31,6.31a1,1,0,0,1,0,1.41L98.65,111.38a1,1,0,0,1-1.41,0l-6.31-6.31a7,7,0,0,0-8-1.35,43.88,43.88,0,0,1-4.27,1.76,7,7,0,0,0-4.68,6.6V121a1,1,0,0,1-1,1H55a1,1,0,0,1-1-1v-8.93a7,7,0,0,0-4.69-6.6,43.9,43.9,0,0,1-4.26-1.76,7,7,0,0,0-8,1.35l-6.31,6.31a1,1,0,0,1-1.41,0L16.62,98.65a1,1,0,0,1,0-1.41l6.31-6.31a7,7,0,0,0,1.35-8,43.88,43.88,0,0,1-1.76-4.27A7,7,0,0,0,15.93,74H7a1,1,0,0,1-1-1V55a1,1,0,0,1,1-1h8.93a7,7,0,0,0,6.6-4.69,43.9,43.9,0,0,1,1.76-4.26,7,7,0,0,0-1.35-8l-6.31-6.31a1,1,0,0,1,0-1.41L29.35,16.62a1,1,0,0,1,1.41,0l6.31,6.31a7,7,0,0,0,8,1.35,43.88,43.88,0,0,1,4.27-1.76A7,7,0,0,0,54,15.93V7a1,1,0,0,1,1-1H73a1,1,0,0,1,1,1v8.93a7,7,0,0,0,4.69,6.6,43.9,43.9,0,0,1,4.26,1.76,7,7,0,0,0,8-1.35l6.31-6.31a1,1,0,0,1,1.41,0l12.73,12.73a1,1,0,0,1,0,1.41l-6.31,6.31a7,7,0,0,0-1.35,8,43.88,43.88,0,0,1,1.76,4.27,7,7,0,0,0,6.6,4.68H121a1,1,0,0,1,1,1Z" />
</svg>
<!-- 일시정지 버튼 -->
<button onclick="togglePauseResume(event)">Pause/Resume</button>
<button id="toggleVelocityDisplayButton">물체 속도 표시 시작</button>
<button onclick="exportChartImage();">그래프 추출</button>
</div>
</section>
<canvas id="myCanvas" width="100%" height="100%"></canvas>
</div>
<div id="myModalOverlay">
</div>
<div class="myModal" id="myModal">
<div>
<h1>요소 설정</h1>
<h3 id="item_id"></h3>
<div>
<h2>진행 방향 (각도):</h2>
<input onchange="rangeReset()" type="number" id="directionInput" min="0" max="359" step="1" value="0">
<p>(0~359사이의 정수)</p>
</div>
<div>
<h2>힘의 크기 조절:</h2>
<input onchange="rangeReset()" type="range" id="forceInputModal" min="0" max="0.1" step="0.01"
value="0.01">
<p>(0~0.1사이의 수)</p>
</div>
<div>
<h2>무게:</h2>
<input onchange="rangeReset()" type="number" id="weightInput" min="1" max="100" step="1" value="10">
<p>(1~100사이의 정수)</p>
</div>
</div>
<button onclick="updateObjectProperties()">설정 적용</button>
</div>
<div class="myModal" id="windowModal">
<div>
<h1>기본 설정</h1>
<div>
<h2>창 크기:</h2>
<input onchange="rangeReset()" type="number" id="width" min="100" step="1" value="800">
<h2> X </h2>
<input onchange="rangeReset()" type="number" id="height" min="100" step="1" value="600">
<p>(100이상의 정수)</p>
</div>
</div>
<button onclick="setWindow()">설정 적용</button>
</div>
<canvas id="velocityChart" width="4000" height="2000"></canvas>
<script src="script.js"></script>
</body>
</html>