{"id":"a02","course":"beginners-class","section":"basics","order":2,"code":"A02","title":"TOP 基礎圖像處理與合成","kind":"video","durationSec":2464,"duration":"41:04","freePreview":false,"families":["TOP"],"loopwiseLectureId":"75666c19","hasNotes":true,"notes":{"toc":[{"id":"s-1","text":"這個單元在做什麼","level":2},{"id":"s-2","text":"拆解這隻魚","level":2},{"id":"s-3","text":"找一條魚放進來","level":2},{"id":"s-4","text":"Over：把魚放進水族缸","level":2},{"id":"s-5","text":"用 LFO 讓魚轉動","level":2},{"id":"s-6","text":"Noise 與 Mouse In：讓魚游起來","level":2},{"id":"s-7","text":"Ramp 與 Noise：一片會流動的水","level":2},{"id":"s-8","text":"Level、材質疊合與 Displace","level":2},{"id":"s-9","text":"Switch：在素材之間切換","level":2},{"id":"s-10","text":"Feedback：留下殘影","level":2},{"id":"s-11","text":"合成攝影機的畫面","level":2},{"id":"s-12","text":"工作流程與 Feedback 的重置","level":2},{"id":"s-13","text":"用滑桿控制魚的大小","level":2},{"id":"s-14","text":"模糊與文字","level":2},{"id":"s-15","text":"Edge 勾線與兩個畫面的切換","level":2},{"id":"s-16","text":"整理節點","level":2},{"id":"s-17","text":"常見問題","level":2},{"id":"s-18","text":"卡住的時候","level":2}],"segments":[{"html":"<h2 id=\"s-1\">這個單元在做什麼</h2>\n<p class=\"has-ts\"><span class=\"tsg\"><a class=\"ts\" href=\"#t=7\" data-t=\"7\" title=\"播放錄影 00:07\">00:07</a></span>這個單元要做一隻奇怪的魚。背景是用噪聲做出來、一直往前流動的水，再合成不同的圖片素材。魚用數據控制，包括滑鼠的位置和噪聲產生的亂數，讓牠在畫面裡游來游去。</p>\n<p class=\"has-ts\"><span class=\"tsg\"><a class=\"ts\" href=\"#t=41\" data-t=\"41\" title=\"播放錄影 00:41\">00:41</a></span>一路做下來，會用到 TOP 最常用的幾件事：用 <code>Over</code> 和 <code>Composite</code> 疊圖，用 <code>Ramp</code> 和 <code>Noise</code> 做背景，用 <code>Displace</code> 扭曲，用 <code>Switch</code> 切換素材，用 <code>Feedback</code> 留下殘影，最後加上模糊、文字和勾線，再做一個控制魚大小的滑桿。哲宇說，學完這個單元，可以想像「你學會了 Premiere 加 Photoshop」，把很多不同格式的影音材料混在一起，做出屬於自己的獨特拼貼動畫。</p>\n<p class=\"has-ts\"><span class=\"tsg\"><a class=\"ts\" href=\"#t=488\" data-t=\"488\" title=\"播放錄影 08:08\">08:08</a></span>做的過程中，哲宇提醒一個原則：「我們在寫 TD 的時候有一個原則，我們希望每個步驟盡可能清楚、明確的出現在畫面上面。」所以數字不藏在輸入框裡，用 <code><span class=\"tok-v\">Math</span></code> 換範圍，用 Rename 幫頻道取看得懂的名字。</p>\n<aside class=\"callout callout-key\" aria-label=\"這個單元帶走\"><p class=\"callout-title\">這個單元帶走</p><ol>\n<li><code>Movie File In</code> 引入圖片和影片，<code>Composite</code> 把兩個以上的素材疊在一起。疊合模式跟 Photoshop 的圖層疊合模式很像，多玩玩看。</li>\n<li>要控制魚的位置和大小，用 <code>Over</code>：第一個輸入放到第二個上面，<code>Fixed Layer</code> 選 Input 2，就像把魚放進水族缸，以水族缸為基準。</li>\n<li>數據先整理好再綁上去：<code>LFO</code>、<code>Noise</code>、<code>Mouse In</code> 後面接 <code><span class=\"tok-v\">Math</span></code> 換範圍，再 Rename 取名字。兩個訊號要相加，頻道名稱要一樣。</li>\n<li><code>Feedback</code> 是過去的擷取器。過去和現在的畫面混在一起，就留下殘影，再用 <code>Level</code> 降低過去畫面的透明度，讓殘影慢慢消失。</li>\n<li>常見的工作流程：先把圖像做出來混合，再決定什麼要跟著數據移動，最後全部加起來，做光暈、Feedback 這些後處理。</li>\n</ol>\n</aside>"},{"locked":true,"id":"s-2","title":"拆解這隻魚"},{"locked":true,"id":"s-3","title":"找一條魚放進來"},{"locked":true,"id":"s-4","title":"Over：把魚放進水族缸"},{"locked":true,"id":"s-5","title":"用 LFO 讓魚轉動"},{"locked":true,"id":"s-6","title":"Noise 與 Mouse In：讓魚游起來"},{"locked":true,"id":"s-7","title":"Ramp 與 Noise：一片會流動的水"},{"locked":true,"id":"s-8","title":"Level、材質疊合與 Displace"},{"locked":true,"id":"s-9","title":"Switch：在素材之間切換"},{"locked":true,"id":"s-10","title":"Feedback：留下殘影"},{"locked":true,"id":"s-11","title":"合成攝影機的畫面"},{"locked":true,"id":"s-12","title":"工作流程與 Feedback 的重置"},{"locked":true,"id":"s-13","title":"用滑桿控制魚的大小"},{"locked":true,"id":"s-14","title":"模糊與文字"},{"locked":true,"id":"s-15","title":"Edge 勾線與兩個畫面的切換"},{"locked":true,"id":"s-16","title":"整理節點"},{"locked":true,"id":"s-17","title":"常見問題"},{"locked":true,"id":"s-18","title":"卡住的時候"}],"sections":18},"courseName":"TouchDesigner 入門必修課","buyUrl":"https://education.monolab.world/courses/beginners-class","sectionTitle":"基礎知識","prev":{"id":"a01","course":"beginners-class","section":"basics","order":1,"code":"A01","title":"基礎介面操作與節點結構","kind":"video","durationSec":2337,"duration":"38:57","freePreview":false,"families":["COMP","TOP"]},"next":{"id":"a03","course":"beginners-class","section":"basics","order":3,"code":"A03","title":"CHOP 時間動畫、參數控制","kind":"video","durationSec":2509,"duration":"41:49","freePreview":true,"families":["CHOP","TOP"]}}