-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (155 loc) · 5.79 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="title">Yifei Chen</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945200/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/a1fb0b5b/examples/js/controls/DragControls.js"></script>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
/>
</head>
<body>
<div class="wrapper">
<div class="section">
<div class="top_navbar">
<div class="hamburger">
<a href="#">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
<div class="container" id="maincanvas">
<h1>Introduction</h1>
<p>
This is my assignment page for course S1S2-0510029 computer graphics
in University of Tokyo.
</p>
<p>
My page contains various three.js implementation of different
parametric curve methods including Bezier curve, Catmull-Rom,
B-Spline, K-Curve and C<sup>2</sup> splines.
</p>
<p>
No built-in function is called. All parametric curves are
implemented by myself using the mathematic formulas.
</p>
<p>
You can switch the tab by clicking the button on the left sidebar.
</p>
<p>
<b>
<a href="https://github.com/tomcatmew/cg_m1"
>Github Source Code</a
></b
>
</p>
<br />
<p>
このページは、東京大学S1S2-0510029コンピュータグラフィックスコースの私の課題ページです。
</p>
<p>
Bezier curve, Catmull-Rom, B-Spline, K-Curve and C<sup>2</sup>
splines.などのパラメトリック曲線のthree.jsの実装を紹介しています。
</p>
<p>
ビルトイン関数は呼び出されていません。すべてのパラメトリック曲線は、数学的な数式を使って私自身が実装したものである。
</p>
<p>
左サイドバーのボタンをクリックすると、タブを切り替えることができます。
</p>
<p>
<b>
<a href="https://github.com/tomcatmew/cg_m1"
>ソースコード こちら</a
>
</b>
</p>
<br />
<br />
<h1>説明-考察-感想</h1>
<br />
<p>左サイドバーをクリックすると、私の実装を見ることができます。</p>
<p>
等長セグメント(同じサンプル距離)でベジェ曲線を作るために、Loop-Up-Tableを使って等長セグメントのおおよその時間スケールを求めました。
</p>
<p>
同じサンプル距離の点を繰り返し、近傍の点を見つけ、「Loop-Up-Table」を使ってt値をremapする。
</p>
<p>
重要なのは、t値更新中にオリジナルt値テーブルを変更してはいけないということです。そのため、更新時にt値テーブルをコピーする必要があります。
</p>
<p class="cp-text">
© Copyright 2022 Yifei Chen - University of Tokyo
</p>
</div>
</div>
<div class="sidebar">
<div class="profile">
<h3>Yifei Chen</h3>
<p>University of Tokyo</p>
<p>CG homework M1</p>
<p>基本課題M1</p>
</div>
<ul>
<li>
<a href="index.html" class="active">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">Introduction</span>
</a>
</li>
<li>
<a href="bezier.html">
<span class="icon"><i class="fas fa-bezier-curve"></i></span>
<span class="item">Bezier Curve</span>
</a>
</li>
<li>
<a href="adaptive.html">
<span class="icon"><i class="fas fa-vector-square"></i></span>
<span class="item">Adaptive Bezier</span>
</a>
</li>
<li>
<a href="3Dbezier.html">
<span class="icon"><i class="fas fa-cube"></i></span>
<span class="item">3D Bezier Curve</span>
</a>
</li>
<li>
<a href="catmull.html">
<span class="icon"><i class="fas fa-bezier-curve"></i></span>
<span class="item">Catmull-Rom</span>
</a>
</li>
<!-- <li>
<a href="#">
<span class="icon"><i class="fas fa-bezier-curve"></i></span>
<span class="item">B-Spline</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-bezier-curve"></i></span>
<span class="item">K-curves</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-bezier-curve"></i></span>
<span class="item">C<sup>2</sup> Splines</span>
</a>
</li> -->
</ul>
<div class="profile">
<h3></h3>
<p></p>
</div>
</div>
</div>
<script src="script.js" defer></script>
</body>
</html>