Details
本課程將教您使用 TouchDesigner 創建互動式內容的基礎知識。
體驗如何透過實驗性和動態設計讓您的作品集脫穎而出!
什麼是“TouchDesigner”和“p5js”?
基於節點的TouchDesigner
TouchDesigner 是一種基於節點的視覺化程式語言,用於建立即時互動多媒體內容。它是最近在設計行業中備受矚目的工具,因為它在實踐中與其他工具具有良好的兼容性。
p5js指令輸入法
p5js 是字體用於在 Web/App 上實作互動內容的命令輸入字體JavaScript 函式庫,透過 Web 編輯器無需複雜的 HTML 和 CSS 處理即可輕鬆操作。
專家編碼員 Jeonghyo 的個人資料和作品集
30+課程練習
第 01 部分:練習
使用運算符
應用亮度模糊
應用時間機器
應用鏡面效果
創造對聲音做出反應的動作
從 3D 模型產生粒子
渲染圖章
創建跟隨遊標的繪圖
創造對聲音做出反應的動作
從 3D 模型產生粒子
渲染圖章
創建跟隨遊標的繪圖
第 02 部分:藝術作品練習
創造搖擺的鏡子效果
創造泡沫粒子效果
建立噴漆效果
創造一個看著遊標的角色
遙控藝術品
*這些是示例圖像,以便更好地理解。
創意編碼員
Jeonghyo
大家好,我是Jeonghyo,一個自由創意程式設計師。
我目前正在經營一個名為「Nest」的文化空間,並致力於一種不同於經典媒體藝術品的新互動風格。
我通常從事基於網路的遠端表演,這些表演可以即時回應或重新解釋現有介面以實現與角色和插畫的互動。我參與了從當代藝術表演到媒體藝術展覽的計畫。
由於專業程式語言迫在眉睫的威脅,許多人放棄了創作媒體藝術或互動藝術品的夢想。
所以,在這課程上,我盡力降低設計師的編碼門檻。希望您能感受到互動藝術的魅力,它不僅創新,而且高效,具有無限的可能性。

創意編碼員Jeonghyo
[現職的]
自由程式設計師
巢代表,
致力於創意編碼的文化空間
主要作品 得獎經歷
【參與專案】
雪花秀文化計畫活動影像2022
DMZ冒險網頁遊戲<無名之地>2021
2021 年Converse全明星促銷網站
世界腳本研討會 2017 網站 2017
[展覽]
金忠邑建築博物館特集
[媒體建築:金正業的建築藝術之路]
小手群展<連續流>
[表現]
JSCONF KOREA 2020閉幕表演
<TRACERS 2.5>當代藝術表演
富川藝術地堡 B39
課程亮點
比較和分析創意編碼工具
學習基於節點和基於命令輸入的編碼,以創建即時移動的藝術品。您將比較和分析每種方法的特點,並培養眼光來選擇適合您選擇的媒體的方法。
互動和想法的基礎知識
了解處理輸入資料(例如滑鼠、鍵盤、聲音、網路攝影機影片和函數值)的多個範例,以提高您對互動基礎知識的理解。之後,我們將練習靈活的思維,將數據轉化為內容。
透過 30 多個迷你練習創作 5 幅互動藝術作品
透過 30 多個小練習,您將能夠增強根據自己的想法創建內容的能力,甚至初學者也能輕鬆掌握。在此過程中,您可以完成五幅屬於您自己的互動藝術作品。
課程詳情
你會學到
-
TD - 透過輸入/輸出的概念來理解節點程式設計的過程使用輸入和輸出的概念學習節點程式設計的基本流程,並了解連接到每種資料字體的特徵。 -
TD - 學習二維空間的表達方法學習在 0 到 1 的範圍內控制所需的效果量,甚至透過 Luma Map 將其表達在二維區域中。 -
TD - 渲染您的 3D 藝術了解 3D 渲染的三個元件:物件、相機和光源,並了解它們與 3D繪圖的關係,以在渲染的 2D 結果中反映您想要的感覺。
-
p5js - 透過基本形狀理解數字數據輸入數字數據,以二維像素渲染基本形狀,並學習互動式藝術作品所需的數位感覺。 -
p5js - 透過指定值建立動畫呈現隨時間或輸入裝置的資料值發生的變化的視覺化表示,並了解它們與互動和動畫的關係。 -
p5js - 從遠端通訊內容渲染到其使用了解每個工具中呈現遠端通訊的方法以及使用它們所需的適當介面和互動形式。
- Unlimited Access
- Best Price
Buy now, get unlimited access.
12/31 (Sat) (UTC-7) Special offer ends soon.
This special offer ends soon.
Buy now and save!
課程
深入觀察
第 01 節:Touchdesigner 入門:2D繪圖與交互
01.序:互動作品的多種表現形式與媒介
- 講師介紹及作品集介紹
- 取決於不同媒體的互動類型和範例
- 如何選擇適合您情況的工具
02. TouchDesigner:介面與節點編碼
- TouchDesigner UI 說明
- 如何操作滑鼠和快捷鍵
- 節點 - 運算子和組件的解釋
- 連接電影檔案輸入/等級/變換運算符
03. TouchDesigner:使用TOP操作符
- 使用複合運算符創建影像
- 矩形/圓形運算子和複合運算選項的基礎知識
- 使用 Luma Map 遮蔽視頻
04. TouchDesigner:與網路攝影機的交互
- 使用亮度模糊運算子和亮度貼圖
- 使用置換運算子和亮度貼圖
- 使用時間機器/紋理 3D 運算子和亮度貼圖
05. TouchDesigner:使用 TOP 操作符建立您的作品
- 3 渲染3D場景的元件
- 製作一個搖擺的球體
- 應用亮度模糊/置換來創造效果
- 透過改變參數值創造不同的效果
第 02 節:使用 TouchDesigner:3D繪圖和交互
06. TouchDesigner:使用SOP操作符
- 各種 3D 形狀運算子和頂點的基礎知識
- 應用幾何
- 使用相機/燈光
- Mat 運算子和渲染紋理
07. TouchDesigner:使用 CHOP 操作符和聲音輸入
- 使用速度操作器建立變化的值
- 使用 LFO 運算子建立重複值
- 使用聲音輸入來變更繪圖
08. TouchDesigner:使用SOP操作符創建藝術品
- 使用粒子運算符
- 使用實例化複製對象
- 建立 3D 模型形狀的粒子效果
- 透過改變參數值創造不同的效果
09. TouchDesigner:與DAT操作員的溝通
- 使用 Touch In-Out Operator 進行通信
- 與連接到同一 Wifi 的不同電腦進行通信
- 不同通訊方式的優缺點
第 03 節:p5js 基礎:使用基本形狀創作互動藝術作品
10. P5js:Web 編輯器介面與編碼入門
- p5js簡介
- Web編輯器介面說明
- 如何建立畫布,使用背景函數繪製背景顏色,並輸入顏色值
11. p5js:繪製基本形狀
- 使用 rect/circle 函數繪製矩形和圓形
- 使用填滿/描邊功能為形狀新增樣式
- 固定頂點並繪製點/線/三角形
- 使用推/彈出/平移對形狀進行分層
12. p5js:函數呼叫和交互
- 與滑鼠互動相關的函數調用
- 與鍵盤及互動相關的函數調用
- 了解繪圖函數呼叫和創建動畫
- 使用frameCount / mouseX / mouseY系統變數
13. p5js:創造互動藝術品
- 創建隨幀數不斷變化的圖形
- 創建跟隨遊標的圖形
- 互動創意以及如何進行良好的互動
第 04 節:中級 p5js:改變價值觀和交互
14. p5js:變數和條件語句
- 儲存隨互動而變化的值
- 使用繪圖創建變化值的視覺表示
- 使用條件語句進行動態更改
15. p5js:建立根據狀態變化的繪圖
- 設計隨條件逐漸變化的繪圖
- 設定最大值限制
- 透過值初始化重複交互
16. p5js:使用向量的複雜交互
- 使用 dist 函數進行交互
- 向量的概念和createVector函數
- 使用 Vector 進行簡單計算
- 使用 limit 方法限制移動
17. p5js:創作互動藝術作品
- 設計角色的臉部
- 創建跟隨遊標的運動
- 透過調整物件範圍來創建3D外觀
- 對每次互動進行額外更改
第 05 節:使用遠端控制的互動藝術作品
18. 渲染 Web伺服器
- 故障簡介
- 將您的 p5js 專案上傳到網頁上
- 根據互動應用溝通
- 改變圖形的頻率會根據通訊值而變化
19. 使用 p5js 建立 Web 應用程式
- 渲染按鈕
- 渲染滑桿
- 使用控制器與 p5js 專案交互
20.使用p5js Mobile進行TouchDesigner控制
- 將 socket.io 操作器連接到 TouchDesigner 圖稿
- 根據參數應用不同的交互
- 遠端控制互動思路與實例
訪談
創意編碼員Jeonghyo
當我從事互動式或動態繪圖工作時,我會將創建繪圖和動態的規則模組化。這些模組可以即時修改或與其他模組組合。因此,我認為我的優勢在於我的工作方式,因為我可以用一套set渲染各種應用程序,從而能夠在短時間內產生許多動態結果。 。
在本課程中,學生將透過課程中的不同練習,結合各種功能模組來呈現形式、運動和互動。您還將學習如何組合許多模組並控制它們的設置以渲染各種風格的繪圖和運動。例如,在粒子練習中,調整重力值的方向和湍流值的大小將使升起的火焰和傾倒的礫石等對比紋理成為可能。
對傳統設計工具無法實現的高維度、非常規繪圖的需求不斷增長。由於藝術博物館和廣告的頻繁訪問,公眾已經習慣了互動媒體。因此,不要將互動設計視為一種困難的程式語言並放棄。希望您透過這課程輕鬆體驗各種互動藝術作品。
所需軟體
課程使用 TouchDesigner(2021.16410 非商業)和 p5js (1.4.0)。為了獲得最佳的學習體驗,請安裝相同版本的軟體。
*您也可以使用 TouchDesigner(2021.10330 非商業)之後發布的版本來參加課程。
*您也可以使用 p5js (0.9.0) 之後發布的版本來課程。
*TouchDesigner 需要額外購買才能使用 1280x1280 像素或更高的解析度。
*這些軟體和/或材料不會隨課程一起提供。
推薦課程
喜歡這課程嗎?
然後看看這些!
