-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (117 loc) · 4.33 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
<!DOCTYPE html>
<html>
<head>
<title>Kinemagics</title>
<meta charset="utf-8" />
<style>
html {
background-color: beige;
}
canvas {
padding: 5px;
}
#flex-container {
display: flex;
flex-direction: row;
}
@media screen and (max-width: 1100px) {
#flex-container {
display: flex;
flex-direction: column;
}
#canvas-container {
text-align: center;
}
}
.graph-holder {
display: inline-block;
}
#graphs-container {
flex: 0.65;
text-align: center;
}
#graphs-container > canvas {
display: inline-block;
}
#canvas {
border: 1px solid grey;
}
#canvas-container {
flex: 0.35;
}
#name {
position: absolute;
font-style: italic;
font-size: 10px;
font-weight: normal;
}
#d-graph, #v-graph, #a-graph {
position: absolute;
z-index: -2;
}
#d-graph-mid, #v-graph-mid, #a-graph-mid {
position: absolute;
z-index: -1;
}
#canvas-back {
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<h2>
Kinematics simulator
<br />
<span id="name">Wilson Berkow</span>
</h2>
<p style="font-size: 14px; max-width: 800px;">
Here you can look at how each measure (d, v, a) changes over time
by looking at the red dots on the graphs on the right, for the
motion that we had on the sheet in class or for a graph that
you draw right here. You can also pause the motion to look at
a particular moment.
</p>
<div id="flex-container">
<div id="canvas-container">
<canvas id="canvas-back" width=400 height=443></canvas>
<canvas id="canvas" width=400 height=443></canvas>
</div>
<div id="graphs-container">
<div class="graph-holder">
<canvas id="d-graph" width=200 height=340></canvas>
<canvas id="d-graph-mid" width=200 height=340></canvas>
<canvas id="d-graph-front" width=200 height=340></canvas>
</div>
<div class="graph-holder">
<canvas id="v-graph" width=200 height=340></canvas>
<canvas id="v-graph-mid" width=200 height=340></canvas>
<canvas id="v-graph-front" width=200 height=340></canvas>
</div>
<div class="graph-holder">
<canvas id="a-graph-mid" width=200 height=340></canvas>
<canvas id="a-graph" width=200 height=340></canvas>
<canvas id="a-graph-front" width=200 height=340></canvas>
</div>
<div id="cusomizer">
<label style="font-size: 20px; font-weight: bold;"><input type="checkbox" id="paused" /> Pause?</label>
<div id="presets-container">
Use a different motion curve (e.g. from worksheet):
<select id="presets-pulldown">
<option value="13">No. 13</option>
<option value="14">No. 14</option>
<option value="15" selected>No. 15 -- Bouncing ball</option>
<option value="16">No. 16 -- Rocket ship</option>
</select>
</div>
<div id="diy-container">
Or <button id="diy-btn">draw your own</button>
<canvas id="diy-canvas" width=0 height=0></canvas>
<span id="diy-activate-container"></span>
</div>
</div>
</div>
</div>
<script src="out/main.js"></script>
</body>
</html>