-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
437 lines (420 loc) · 23.5 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<!doctype html>
<html lang="zh-Hant-TW">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>作品集 Portfolio</title>
<!-- D3, jquery -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="utf-8"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Oxanium:[email protected]&display=swap" rel="stylesheet">
<link rel="icon" href="./cross_purple.png"/>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div>
<h2 class="title">電腦動畫 113-1 作品集</h2>
<!-- 動態捕捉與虛擬網紅 -->
</div>
<div class="intro">
<img src="./me.jpg">
<div class="intro-text">
<h1 class="intro-title">× Kassus ×</h1>
<div class="intro-content">
× × × 半人類半惡魔少女，現正逃亡中 × × ×
</div>
<div class="intro-button">
<a class="button" href="https://character.ai/chat/YgI5rT2p1xPfDUe8Ugn1LmHbBXDcpTsAGLgzWSczROI" style="margin-left: 0;">Chat!</a>
<a class="button" href="https://github.com/Kiri487/ca2024f">GitHub</a>
<a class="button" href="https://booth.pm/zh-tw/items/6175539">Live2D</a>
</div>
</div>
<div class="total-score">
<h2>作品集總分</h2>
<span id="myTotal"></span><span>/80</span>
</div>
</div>
<div class="intro-button intro-button-media">
<a class="button" href="https://character.ai/chat/YgI5rT2p1xPfDUe8Ugn1LmHbBXDcpTsAGLgzWSczROI" style="margin-left: 0;">Chat!</a>
<a class="button" href="https://github.com/Kiri487/ca2024f">GitHub</a>
<a class="button" href="https://booth.pm/zh-tw/items/6175539">Live2D</a>
</div>
<hr>
<div class="homework">
<div class="homework-title">
<h2 class="title">× HW1 ×</h2>
<input type="radio" id="videoButton1" name="media1" checked>
<label for="videoButton1" class="button" style="font-size: 1rem;">影片</label>
<input type="radio" id="liveButton1" name="media1">
<label for="liveButton1" class="button" style="font-size: 1rem;">直播</label>
</div>
<div class="homework-content">
<div class="left-content">
<div class="video">
<iframe id="video1" width="100%" height="100%" src="https://www.youtube.com/embed/cGOVcye4kK8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe id="live1" width="100%" height="100%" src="https://www.youtube.com/embed/NmcJgLtOZzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
這個作業是角色的自我介紹，我姑且配合了角色的外型，根據故事七步驟，以第一人稱視角寫了基本的人物背景故事。 但由於她的外觀並不是常見的設定，不管我跟 Copilot 強調多少次她的特徵，它都還是畫不出我理想中的圖，而且有時候還會跳針，一直給我重複的圖片，有點可惜。
</div>
<div class="right-content">
<div class="check-list">
<div class="score">總分 <span id="myTotal1"></span>/10</div>
<p class="baseline">Simple baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox11" checked>
<label for="myCheckbox11">(<span id='m11'>2</span>) 一分鐘 (60 ~ 120 秒)</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox12" checked>
<label for="myCheckbox12">(<span id='m12'>2</span>) 影片加上字幕</label>
</div>
<p class="baseline">Medium baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox13" checked>
<label for="myCheckbox13">(<span id='m13'>2</span>) 七步驟 (Copilot 插圖)</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox14" checked>
<label for="myCheckbox14">(<span id='m14'>2</span>) 插圖符合 Booth 模型</label>
</div>
<p class="baseline">Strong baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox15" checked>
<label for="myCheckbox15">(<span id='m15'>2</span>) OBS 直播到 YouTube</label>
</div>
</div>
<div class="homework-button">
<div class="cross-line cross-line-media"> × × × × × </div>
<a class="button" href="https://github.com/Kiri487/ca2024f/blob/main/hw01.pptx">投影片</a>
<div class="cross-line"> × × × × × </div>
</div>
</div>
</div>
</div>
<hr>
<div class="homework">
<div class="homework-title">
<h2 class="title">× HW2 ×</h2>
<input type="radio" id="videoButton2" name="media2" checked>
<label for="videoButton2" class="button" style="font-size: 1rem;">影片</label>
<input type="radio" id="liveButton2" name="media2">
<label for="liveButton2" class="button" style="font-size: 1rem;">直播</label>
</div>
<div class="homework-content">
<div class="left-content">
<div class="video">
<iframe id="video2" width="100%" height="100%" src="https://www.youtube.com/embed/9o56QaHGGBU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe id="live2" width="100%" height="100%" src="https://www.youtube.com/embed/bFbJmLhmiqk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
這次的故事是描述少女從家裡逃出來後的遭遇，由於故事中出現了配角，因此我讓 Copilot 畫了幾張同時有兩個角色的圖，我嘗試讓它不要一直畫主角的正面圖，但它看起來還是不太會畫背面，總會出現身體是背面，但身上的衣服看起來卻像正面的情形。
</div>
<div class="right-content">
<div class="check-list">
<div class="score">總分 <span id="myTotal2"></span>/10</div>
<p class="baseline">Simple baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox21" checked>
<label for="myCheckbox21">(<span id='m21'>2</span>) 三分鐘 (120 ~ 180 秒)</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox22" checked>
<label for="myCheckbox22">(<span id='m22'>2</span>) 影片加上字幕</label>
</div>
<p class="baseline">Medium baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox23" checked>
<label for="myCheckbox23">(<span id='m23'>2</span>) 七步驟 (Copilot 插圖) + 轉化</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox24" checked>
<label for="myCheckbox24">(<span id='m24'>2</span>) 插圖符合 Booth 模型</label>
</div>
<p class="baseline">Strong baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox25" checked>
<label for="myCheckbox25">(<span id='m25'>2</span>) OBS 直播到 YouTube</label>
</div>
</div>
<div class="homework-button">
<div class="cross-line cross-line-media"> × × × × × </div>
<a class="button" href="https://github.com/Kiri487/ca2024f/blob/main/hw02.pptx">投影片</a>
<div class="cross-line"> × × × × × </div>
</div>
</div>
</div>
</div>
<hr>
<div class="homework">
<div class="homework-title">
<h2 class="title">× HW3 ×</h2>
<input type="radio" id="videoButton3" name="media3" checked>
<label for="videoButton3" class="button" style="font-size: 1rem;">影片</label>
<input type="radio" id="liveButton3" name="media3">
<label for="liveButton3" class="button" style="font-size: 1rem;">直播</label>
</div>
<div class="homework-content">
<div class="left-content">
<div class="video">
<iframe id="video3" width="100%" height="100%" src="https://www.youtube.com/embed/P5s0iTYbAV4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe id="live3" width="100%" height="100%" src="https://www.youtube.com/embed/gzQr1trfmb8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
這次的故事是關於少女剛到魔藥舖，開始進行「培訓」後的經歷。由於整個故事是走奇幻路線，我花了不少時間、換了很多不同的關鍵字，才找到勉強符合劇情的 CC0 照片，同時這也是課程中最後一次使用 Live2D 模型講故事，整體來說蠻有趣的。
</div>
<div class="right-content">
<div class="check-list">
<div class="score">總分 <span id="myTotal3"></span>/10</div>
<p class="baseline">Simple baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox31" checked>
<label for="myCheckbox31">(<span id='m31'>2</span>) 三分鐘 (120 ~ 180 秒)</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox32" checked>
<label for="myCheckbox32">(<span id='m32'>2</span>) 影片加上字幕</label>
</div>
<p class="baseline">Medium baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox33" checked>
<label for="myCheckbox33">(<span id='m33'>2</span>) 七步驟 (CC0 照片)</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox34" checked>
<label for="myCheckbox34">(<span id='m34'>2</span>) 每一頁標明步驟</label>
</div>
<p class="baseline">Strong baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox35" checked>
<label for="myCheckbox35">(<span id='m35'>2</span>) OBS 直播到 YouTube</label>
</div>
</div>
<div class="homework-button">
<div class="cross-line cross-line-media"> × × × × × </div>
<a class="button" href="https://github.com/Kiri487/ca2024f/blob/main/hw03.pptx">投影片</a>
<div class="cross-line"> × × × × × </div>
</div>
</div>
</div>
</div>
<hr>
<div class="homework">
<div class="homework-title">
<h2 class="title">× HW4 ×</h2>
<input type="radio" id="videoButton4" name="media4" checked>
<label for="videoButton4" class="button" style="font-size: 1rem;">影片</label>
<input type="radio" id="liveButton4" name="media4">
<label for="liveButton4" class="button" style="font-size: 1rem;">直播</label>
</div>
<div class="homework-content">
<div class="left-content">
<div class="video">
<iframe id="video4" width="100%" height="100%" src="https://www.youtube.com/embed/1zR_ycSSbgc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe id="live4" width="100%" height="100%" src="https://www.youtube.com/embed/u66RP_tuV7A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
這次的故事是講述少女第一次執行任務的過程，作業要求要搭配 CC0 的影片，但我下載的影片檔案大小都蠻大的，加上我的筆電效能沒有到非常好，導致我錄影片時，3D 人物的動作會看起來有點卡，因此我必須額外把那些影片素材都先壓縮一遍，狀況才有改善。
</div>
<div class="right-content">
<div class="check-list">
<div class="score">總分 <span id="myTotal4"></span>/10</div>
<p class="baseline">Simple baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox41" checked>
<label for="myCheckbox41">(<span id='m41'>2</span>) 三分鐘 (120 ~ 180 秒)</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox42" checked>
<label for="myCheckbox42">(<span id='m42'>2</span>) 影片加上字幕</label>
</div>
<p class="baseline">Medium baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox43" checked>
<label for="myCheckbox43">(<span id='m43'>2</span>) 七步驟 (CC0 影片)</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox44" checked>
<label for="myCheckbox44">(<span id='m44'>2</span>) 每一頁標明步驟</label>
</div>
<p class="baseline">Strong baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox45" checked>
<label for="myCheckbox45">(<span id='m45'>2</span>) OBS 直播到 YouTube</label>
</div>
</div>
<div class="homework-button">
<div class="cross-line cross-line-media"> × × × × × </div>
<a class="button" href="https://github.com/Kiri487/ca2024f/blob/main/hw04.pptx">投影片</a>
<div class="cross-line"> × × × × × </div>
</div>
</div>
</div>
</div>
<hr>
<div class="homework">
<div class="homework-title">
<h2 class="title">× HW5 ×</h2>
</div>
<div class="homework-content">
<div class="left-content">
<div class="video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/fWGwy5t2H1A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
原曲：KING/Kanaria<br>
因為個人的強迫症，有把整體的版面都修改的更符合角色一點，使用的素材基本上都是從 BOOTH 上找到的免費素材，在此感謝製作素材的大好人們。<br>
背景音樂的部分是使用他人製作的無人聲版本（有將來源附於影片下方說明欄），不過有另外再降 key。
</div>
<div class="right-content">
<div class="check-list">
<div class="score">總分 <span id="myTotal5"></span>/20</div>
<p class="baseline">Simple baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox51" checked>
<label for="myCheckbox51">(<span id='m51'>4</span>) Donate 功能</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox52" checked>
<label for="myCheckbox52">(<span id='m52'>4</span>) 動作選單</label>
</div>
<p class="baseline">Medium baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox53" checked>
<label for="myCheckbox53">(<span id='m53'>4</span>) 歌曲演唱</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox54" checked>
<label for="myCheckbox54">(<span id='m54'>4</span>) 背景音樂</label>
</div>
<p class="baseline">Strong baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox55" checked>
<label for="myCheckbox55">(<span id='m55'>4</span>) 替換角色模型</label>
</div>
</div>
<div class="homework-button">
<div class="cross-line cross-line-media"> × × × × × </div>
<a class="button" href="https://github.com/Kiri487/ca2024fhw05">GitHub</a>
<div class="cross-line"> × × × × × </div>
</div>
</div>
</div>
</div>
<hr>
<div class="homework">
<div class="homework-title">
<h2 class="title">× HW6 ×</h2>
</div>
<div class="homework-content">
<div class="left-content">
<div class="video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/REHaWSvWkF0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
原曲：KING/Kanaria<br>
這作業真好玩，就是有點費肝 ( ° ཫ ° )<br>
原本找到的場景素材只有一間牢房，但是我不想在切鏡頭時露出破綻，因此用同個素材把場景擴充成一個小型地牢，而牆上的火把及火焰則作為 Medium baseline 中要求的可動場景物件。<br>
大部分的製作時間都花在運鏡上，幸好 Virtual Camera 不用錢，不然我要破產了笑死。
</div>
<div class="right-content">
<div class="check-list">
<div class="score">總分 <span id="myTotal6"></span>/20</div>
<p class="baseline">Simple baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox61" checked>
<label for="myCheckbox61">(<span id='m61'>4</span>) VRoid VRM 匯入 Unity</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox62" checked>
<label for="myCheckbox62">(<span id='m62'>4</span>) 動作 FBX 匯入 Unity</label>
</div>
<p class="baseline">Medium baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox63" checked>
<label for="myCheckbox63">(<span id='m63'>4</span>) Unity 場景搭建</label>
</div>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox64" checked>
<label for="myCheckbox64">(<span id='m64'>4</span>) 加入至少三個分鏡</label>
</div>
<p class="baseline">Strong baseline</p>
<div class="baseline-content">
<input type="checkbox" id="myCheckbox65" checked>
<label for="myCheckbox65">(<span id='m65'>4</span>) 背景音樂 bgm & 唱歌</label>
</div>
</div>
<div class="homework-button">
<div class="cross-line cross-line-media"> × × × × × </div>
<a class="button" href="https://github.com/Kiri487/ca2024fhw06">GitHub</a>
<div class="cross-line"> × × × × × </div>
</div>
</div>
</div>
</div>
<footer>
Copyright © 2024 Kiri487
</footer>
<!-- ----------------------------------------------------------------------------------------------- -->
<script>
var hw = 6; // number of homeworks
for (var i = 1; i <= hw; i++) {
for (var j = 1; j <= 5; j++) {
var myC = "#myCheckbox" + i + j ;
d3.select(myC).on("change", updateScore);
}
d3.select("#videoButton" + i).on("change", updateMedia);
d3.select("#liveButton" + i).on("change", updateMedia);
}
updateScore();
updateMedia();
function updateScore() {
var scoreTotal = 0;
for (var i = 1; i <= hw; i++) {
var score = 0;
for (var j = 1; j <= 5; j++) {
var myC = "#myCheckbox" + i + j;
var myM = "#m" + i + j;
var label = document.querySelector(`label[for="myCheckbox${i}${j}"]`);
if (d3.select(myC).property("checked")) {
var value = parseInt(d3.select(myM).html()) || 0;
score += value;
label.classList.add("strikethrough");
}
else {
label.classList.remove("strikethrough");
}
}
var myT = "#myTotal" + i;
d3.select(myT).html(score);
scoreTotal += score;
}
d3.select("#myTotal").html(scoreTotal);
}
function updateMedia() {
for (var i = 1; i <= hw; i++) {
var videoBtn = "#videoButton" + i;
var liveBtn = "#liveButton" + i;
var videoBtnLabel = document.querySelector(`label[for="videoButton${i}"]`);
var liveBtnLabel = document.querySelector(`label[for="liveButton${i}"]`);
var video = "#video" + i;
var live = "#live" + i;
if (d3.select(videoBtn).property("checked")) {
d3.select(video).style("display", "block");
d3.select(live).style("display", "none");
d3.select(videoBtnLabel).style("background-color", "var(--purple)");
d3.select(videoBtnLabel).style("color", "var(--black)");
d3.select(liveBtnLabel).style("background-color", "var(--black)");
d3.select(liveBtnLabel).style("color", "var(--purple)");
}
else if (d3.select(liveBtn).property("checked")) {
d3.select(video).style("display", "none");
d3.select(live).style("display", "block");
d3.select(liveBtnLabel).style("background-color", "var(--purple)");
d3.select(liveBtnLabel).style("color", "var(--black)");
d3.select(videoBtnLabel).style("background-color", "var(--black)");
d3.select(videoBtnLabel).style("color", "var(--purple)");
}
}
}
</script>
</body>
</html>