Yi Shiuan He Portfolio & Works.
我得到了一張通往未來的紀念機票。
2013.08.15
A A flight flight ticket ticket to to the the future. future. 一張 機票 的省思 ...
才發現， 原來我早已經坐上了 這班飛機。
在花博二代夢想館得到的對於夢想的感動， 我要將它化為行動。
01
About
me
何宜軒 He Yi-Shiuan
02
求學歷程 Sep, 2014~ Aug, 2016 Sep, 2010~ Jun, 2014 Sep, 2007~ Jun, 2010
國立臺北科技大學 互動設計系碩士班 互動藝術實驗室 國立臺南大學 數位學習科技學系 數位藝術與互動設計實驗室 高雄市立前鎮高級中學
參賽經歷與得獎經驗 2011 及 2012 年度大專校院資安動畫金像獎 佳作及第三名 2012 第 17 屆全國大專院校資訊應用服務創新競賽 第三名 2012 中華電信創新應用大賽應用創意組入選獎 2013 年展示科技應用服務發展計畫 互動展示技術暨創意工作坊 優勝 2013 中華電信創新應用大賽 MOD 互動微電影創作 入選獎 2013 專題研究「畫筆上跳舞的音符」榮獲 ICDC 2013 國際研討會最佳論文獎 2014 專題創作「畫筆上跳舞的音符」榮獲南區大專資訊專題競賽 第一名 2015 放視大賞跨領域類「好石多磨」榮獲入選獎
03
有人問我
是否走過 ...
現實 到 夢想 之間的距離 ?
Content 01 04 06 10 16 22 26 32 42 46 54
About me 關於我
Content 目錄
Hao．Shi．Duo．Mo 互動裝置 — 好石多磨
Drawing With Dancing Visual And Auditory Effect 互動裝置 — 畫筆上跳舞的音符
The Dandelion's Protector 產學合作互動藝術展演 — 蒲公英的守護者 Industry Cooperation 產學合作互動藝術展演 —「和妹」共舞一首情詩
A Minute Knowledge Tube APP 製作 — 娜莉兔 - 一分鐘讓你學到知識
Animation And Modeling 動畫、建模
Maya Design Works 攝 Maya 設計製作
Photography 攝影
Drawing Works 繪圖作品
60 Micro Film 微電影
04
05
06
實體互動裝置 ---
好石多磨
Hao . Shi . Duo . Mo
07
好石多磨
Hao.Shi.Dua.Mo
2015 年放視大賞跨領域類 優選
Introduction 石磨是過去農村人家不可少的磨面、豆腐磨五穀雜糧的工 具，其背後所富含的文化價值，和那沉穩、刻苦耐勞的精神， 是多麼地偉大。「好石多磨」是一件互動式的遊戲裝置，針 對現代人主要追求的五個目標 - 健康、愛情、家庭、事業、 夢想，透過互動與遊戲的方式讓參與者體驗研磨食材的操作， 為自己的目標努力、奮鬥，將石磨的精神永存於心。 Health
Home
Career
Dream
Love
Team Arduino + Unity
負責項目 - 互動流程設計、裝置機構設計、互動程式設計
08 Interactive Design
好石多磨透過三個階段的互動關卡讓體 驗者體驗早期的人們使用石磨來研磨食材的 過程，並且透過這樣的互動方式體會人們刻 苦耐勞、努力不懈的精神，並將這樣的精神 透過好石多磨做一種世代傳承，帶到現代社 會中，與現代人努力追求人生中不同的目標 的情境做連結。 體驗步驟一開始需要先旋轉石磨實體裝置一 圈喚醒沉睡中的好石多磨，並且以前導動畫 作呈現，讓體驗者了解石磨在早期是甚麼樣 的一個器具及精神象徵。
選擇體驗者想要努力追尋的精神目標並模擬 放入食材的方式將其放入石磨洞口。
透過一個接取食材的小遊戲，讓使用者可以以 研磨食材的操作，一邊體驗與本作品互動。
前階段努力過關後可以在這個階段得到視覺的 動畫回饋以及實體的紀念小卡片。
09
10
互動裝置 --- 畫筆上跳舞的音符
rawing With With Dancing Dancing Drawing D Visual And And Auditory Auditory Effact Effect Visual
11
畫筆上跳舞的音符
2013 年展示科技應用服務發展計畫 互動展示技術暨創意工作坊 優勝
Introduction << 畫筆上跳舞的音符 >> 是我的畢業專題， 在 一 次 與 專 題 教 授 meeting 的 機 緣 下 得 到 了 Makey Makey 這個秘密武器，於是我們就發想利 用這個秘密武器創作一個藉由塗鴉 的方式產生視覺特效及音效， 科技與藝術結合的作品，除 了 視 覺 特 效 外， 同 時 也 會 產生音效造成音訊混成的 共鳴。
Idea
Makey Makey
我與畢專組員想要創造出一種情境，讓人 們在塗鴉的時候，能擁有類似魔法師般施魔法 的感受，而畫筆就像是魔法棒，揮舞魔法棒的 同時，在畫布上出現絢麗的魔法。
Unity4 AfterEffects Makey makey
成為魔法師是小時候懵懂的夢想， 下筆的剎那，夢想成真了。
12 Interactive Design
互動的秘密 : 特製畫板
我們在畫布下的塑膠紙板上，手工釘上將近 1000 根圖釘，並劃分 54 個控制鍵盤 key 的區域，接上電 線連接到三台 Makey Makey，讓它們成為水導電的媒 介，藉此讓微電流透由畫筆上的水到圖釘到連接電 線的 Makey Makey 最後達到電腦之中形成一個迴電 路，觸發程式控制。 從買材料、釘圖釘、佈線、製作 108 個視覺特效、 程式設計到測試，整個製作過程花了將近一整個暑 假的時間，有幾夜還夜未眠。
<< 製作過程照片 >>
13 << 畫筆上跳舞的音符 >> 概念構想於 102 年展示科技應用 服務發展計畫互動展示技術暨創意工作坊中獲得優勝，並在 舉辦於資策會民生科技服務大樓的展示科技應用服務發展國 際論壇進行作品展示，並於 2014 年榮獲南區大專資訊專題競 賽分組 第一名。 透過這樣的一個作品，我們希望可以吸引那些對於塗鴉 或者繪畫有恐懼感或者排斥感的人們發現繪畫塗鴉的樂趣， 未來展望可以做為兒童塗鴉教學或者教育應用上，對於商業 領域也可以做行銷廣告之結合。
Live Show
畫筆上跳舞的音符
組員：林萬翔 ( 左 )、何宜軒 ( 右二 )、陳紹軒 ( 右 ) 指導教授：林豪鏘教授 當你很努力想達成一件事時，還不到最後一刻就別急著放棄，全世界會動
來幫助你。
14
15
16
產學互動藝術展演 --- 蒲公英的守護
andelion's The D Dandelion's The
Protector Protector
17 Introduction << 蒲公英的守護者 >> 是 暑假時我在大學的專題實 驗 室 --- 數 位 藝 術 與 互 動 設計實驗室 (Digital Arts & Interactive Design Lab,DDLAB) 與 稻 草 人 現 代 舞 團 產 學 合 作 的 一 個 專 案。 負 責 產 學合作的單位中華民國數位發展協會希望我們 可以利用 Kinect 作為舞蹈與科技互動的一個媒 介，與稻草人舞團的成員溝通討論並共同創作 出一段舞蹈表演，最後我們決定以劇情的方式 作呈現。
Script 舞者扮演著蒲公英的守護精靈，守護著蒲 公英由落地生長到開花結果生命週期的循環。 蒲公英在生長的過程中，歷經了旱、雨、晴等 天氣的變化，舞者須依照天氣的變換，依照當 下的情境自由發揮編舞。 除了後製背景動畫之外，表演過程中我 們以 processing 做為開發平台並架設了一台 Kinect 偵測舞者的骨架，並抓取舞者右手的位 置，在適當的時機做撒金粉施魔法效果，我負 責的即是 kinect 互動程式的 部分。
蒲公英的守護 Technical platform Processing 是一個可以繪圖、建立動畫和互動 式圖形的應用程式開發平台。我利用 Processing 程 式語言在此專案中寫出噴灑魔法、雪花飛散的效果， 再將此效果套在 kinect 偵測到的舞者的右手上，達 到施魔法的效果。
Processing 2 Kinect
原本蒲公英打算以程式跑出來的圖形呈現， 但組內討論以 Adobe After Effects 製作更能 彰顯蒲公英飄散視覺上的效果。
18
19
未來 屬於 相信他們夢想之美麗的那些人。 The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt
Team 何宜軒、林萬翔、陳紹軒
蒲公英的守護
20
Other Processing Works 作品一 : 失序的時間 " 沒有手錶的日子， 時間在我周遭崩解。" Idea: 有 一 次 我 的 手 錶 不 見 了， 於 是 就 突 然 發 想， 並 用 processing 創作，化做數字圖樣 的時間，凌亂的崩解。
作品二 : 三千煩惱絲 " 把每個線索相連， 我總結了真相。" Idea: 這是意外產出的作品，我 試著將散開的雪花點，超過一定 距離的兩點以畫筆參數為 1 的線 相連，譜出的一幅花草圖。
Processing 2
21
Shiuan
22
互動藝術展演：安琪舞團 ---
Industry Industry Cooperation Cooperation
23 Introduction 透由系上教授介紹，與業界安琪舞團進行一次產學合作專案。舞團的 負責人安琪老師希望在這次的表演中 <<「和妹」共舞一首情詩 >> 可以 融入科技，讓在座的觀眾突破以往的靜態觀賞，也可與這場演出互動， 加強觀眾參與情境的感受。 於是安琪老師希望可以在表演中，加入手機互動 APP 以及 3D 動畫技 術，舞蹈結合科技，讓觀眾在台下搖動手機，使得舞台後投影幕上長滿 一朵朵的油桐花。 我則是負責撰寫手機互動程式的部分，以及負責製作每段舞蹈將投影 在布幕上的的故事簡介頁面。很開心公演兩天三場圓滿順利。
Processing 2
負責項目：互動程式設計
互動畫面
安琪舞團產學合作 Story 這場表演訴說著鍾理和的故事。 對鍾理和而言， 人生只有兩件大事：妻子鍾台妹與寫作， 因兩人的姓氏相同、貧富差距、女年長於男等因素， 父母、親人、整個社會都堅決反對他們在一起。 鍾理和堅持自己人生的理想， 秉持超越世俗的理念， 對傳統予與更新穎、更高尚的認知， 更合乎時宜的理性與感性結合 於是愛情與寫作， 就是他生命全部的投注。 他們如何相戀，如何遠離家鄉， 如何重新獲得肯定？ 這是一場表現鍾理和 勇敢的愛情、寫作、人生夢的表演。
彩排 APP 測試
你所有的夢想皆可以實現，
24
勇氣去追求它們。
All your dreams can come true if you have the courage to pursue them.
– Walt Disney
總彩主控台內測試
25
Shiuan
26
A Minute Minute A APP 製作 ---娜莉兔 - 一分鐘讓你學到知識 Knowledge Tube Tube Knowledge
27 等代是人生中無法避免的課題， 而等待的時間就只能這樣讓它一分一秒流逝 ?
錯！
等待是為了與美好的事物相遇 ! 娜莉兔 - 一分鐘讓你學到知識
Introduction << 娜莉兔 >> 是我大三下學期學習管理系統期末 分組專案報告。這是一款類似養成遊戲的學習系統， 我們以 " 世界之 最 " 作為知識傳達的內容主 題， 目 的 讓 使 用 者 可 以在閒暇時，讓他們 快速學習吸收知識。
自信的往你夢想的方向前進，過你所想像的生活。 Go confidently in the direction of your dreams. Live the life you have imagined. – Henry David Thoreau
娜莉兔 - 一分鐘讓你學到知識 28
Feature << 娜莉兔 >>APP 中提供兩個學習助教 ( 兔子、 蘿蔔 ) 讓使用者依喜好自行選擇。使用者以答題的 方式來餵養學習助教使牠成長，若使用者答對題目 到一定的數量則學習助教會成長成比較好看的型 態，反之則成長成比較難看。系統在一開始會通知 一個最終型態，並設定計時功能，使用者可以評估 自己每次任務達成所花的時間是否有進步，增加遊 戲的趣味性。
照射 QRcode 下載 APP
NPC Image
29 Agent design & Transform
娜莉兔 - 一分鐘讓你學到知識 30
才發覺，追求夢想的道路是沒有終點的。 一停下來就可能再也走不動了。
Teamwork 何宜軒 -- 美術設計、介面設計、簡報設計、報告人、副系統開發 張家均 -- 系統設計、後端系統開發、主系統開發
31
By Shiuan
32
動畫、建模
Animation And Modeling
33
2011 大專校院資安動畫金像獎 佳作
貂資與潘安
Character Design
Introduction 一年一度的大專院校資安動畫金像獎，我們 就報名參加了兩次，<< 貂資與潘安 >> 是我們在 大二第一次報名的作品，我們獲得了佳作。 資安金像獎是由資訊工業策進會與行政院合 辦的比賽，目的是為了提升大專校院學生對資訊 安全的重視藉由學生的創意結合資安時事，創造 出生動活潑的動畫影片，向一般大眾宣導在日常 生活中各項資訊安全的重要。
Flash
潘安
貂資
貂資與潘安 34
Plot 傳說中貂資與潘安兩位俠士默默的守護著以 CPU 主控球為能量來源的 IE 村。 某天小偷偷走了 CPU 主控球， 使得 IE 村陷入黑暗中… 貂資與潘安各自踏上了拯救 IE 村的道路。 途中分別遇到 NPC 雪怪、火龍及賽車 協助他們習得如何保護資訊安全的絕招 對付最終魔王—木馬哥。 貂資與潘安聯合打敗了木馬哥， 並取回 CPU 主控球， 成功的拯救了 IE 村。
Cooperation 何宜軒 -- 角色設計、火龍場景 張國興 -- 開頭、記者播報、 前言木馬王對決、結尾 楊青原 -- 雪怪場景、個資保護方法 方品純 -- 賽車場景
掃描連結至影片
35
3D 3D 五力全開 五力全開
2012 年度大專校院資安動畫金像獎 第三名
Introduction <<3D 五力全開 >> 是我們為前一年只得佳作雪 恥，第二次參與資安金像獎的作品，這次我們想要 融入新的技術，採用 3D 動畫作呈現，這次的比賽 對我們來說是一個新的挑戰，我們必須自學 3D 動 畫的技術，才能達到我們的目的。 進入決賽後，我們除了為此作品創建了 FB 粉絲 專頁，在上面記錄我們的幕後花絮之外，也製作了 模型公仔送給主辦單位作為紀念品。最後我們榮獲 第三名。
Maya 3Ds Max
隨：不隨意瀏覽不知名網站 護：保護個人資料 下：不任意下載 出：登出個人帳號 改：定期改密碼
3D 五力全開 36 Plot 平時 D 教授傳授五招 D 心秘技給武力，但武力 始終無法領悟其中的奧義。有一天，D 教授與武力 二人收到一封來自生活資安武林大會的邀請函， 對手是由禿教練所帶領的風靡全武林的選手 -- 毒 龍，於是雙方展開了集訓。 於對決前一天，毒龍因為投機心理，趁休息 時上網搜尋秘笈，因而習得網路失傳的絕世武功。
到底 .... 誰將奪得武林霸主的頭銜呢？ 掃描連結至影片
37 Character
禿教練
大賽評審
主角武力
教練
D
病毒 Teamwork
毒龍
何宜軒：角色設計、角色建模、場景建模、2D 平面設計、海報與公仔製做 張國興：角色建模、場景建模、特效製作、海報與公仔製作 方品淳：角色設計、角色建模、場景建模、骨架綁定 林萬翔：劇情構想、特效製作、影片剪輯、音效處理
3D 五力全開
38 Idea 1. 資訊安全的重要性雖然常被提及，但實際執行上卻往往被忽略 2. 資訊安全必須落實於生活中 3. 網路世界的豐富資訊及無限量免費下載資原常常引誘人們落入洩漏個資的陷阱 4. 藉由疏忽資安重要性而造成惡果的例子，凸顯資訊安全的重要性 5. 列舉五個維護資訊安全之口訣做為呼籲
感謝那些一 逐夢的夥伴們，因為有你們，路再多遠
不嫌累。
39
行不由徑 行不由徑
Wrong Wrong Way Way
Introduction << 行不由徑 >> 是在資安比賽之後由系上教授林 信志老師所指導的電腦動畫設計與製作課程的期末 動畫專案。 因為我們覺得資安的角色人物很可愛，所以沿 用 <<3D 五力全開 >> 的主角武力模型，換個名字重 出江湖，名為 Roger。 故事內容是在描述一個習武的小生為了習得更 高深的武功，上山求師的過程，途中遇到很多困難 費了好一番功夫才到山頂，結果發現有另外一條捷 徑可以上山。結局讓人會心一笑。
Maya 3Ds Max
掃描連結至影片
40 Storyboard 分鏡大約花了將近一個禮拜的繪製時 間，過程包括鉛筆手繪 + 原子筆描輪廓 + 彩色鉛筆上色，以及老師要求的 2D 預覽 片。 畫分鏡是一件很累但很有趣的事， 雖然分鏡搞事實上不用畫太細節的部分， 但我還是很努力並樂在其中的完成他。 總共花了 13 張分 77 格的 A4 紙張，這對 我來說是首次獨自完成完整的分鏡稿設 計，是寶貴的經驗以及 覺得很有成就感。
2D 預覽片
41 除了分鏡外，在製作動畫的過程中，我負責 建竹林場景、眺望遠山以及條吊橋場景角色的動 作。製作過程中，我遇到最難忘的挫折是熬夜趕 動畫，筆電卻在那時候突然硬碟壞掉沒有備份， 因此整個竹林借用組員的電腦重新再建一次。這 同樣也是一個很好的經驗，讓我之後做任何作品 都會記得備份。
每當我為課業、比賽或責任熬夜時我告訴自己， 再累也要堅持下去 ... 因為能夠揹著夢想前進， 是甜蜜的負荷。
Team 張國興、何宜軒、方品淳
42
Maya Maya 設計製作 設計製作 Maya Maya Design Design Works Works
43 Introduction 3D 動畫設計製作課程是大二時外修的美術系的課，上 學期的課程主要是以 3D 建模軟體 Maya 的空間建模，老 師要求我們建出任何一個空間，我越做越有興趣，於是 就建出了兩層樓的房子。 期末的時候老師教了基礎的攝影機鏡頭動 畫，並輸出成 tiff 檔匯入 After Effect 做成 影片上傳至 youtube.
Maya
掃描連結至影片
44
Maya
掃描連結至影片
Character Design
3D 動畫設計製作課程下學期的課程則是人物建 模。我建的人物角色是一個小武士，期末則要讓這 個角色做簡單的動作，第一次用 Maya 來建人物的 感覺很興奮，當完成的剎那，心中竟然產生像是當 了父母般的喜悅。 開心的事是，老師讚美我的小武士嘴巴部分做 得不錯，讓我對這個作品起了更大的責任心，還有 同學說他長得有點像我。
45
By Shiuan
46
攝影
Photography Photography
47
開心時，我仰天大笑， 傷心時，我望天療傷， 沮喪時，我也會看著天空。 天空是一張美麗的畫布， 你永遠不知道下一秒抬頭， 會遇見甚麼驚喜。 我很喜歡天空， 仰望天空， 常讓我產生勇氣， 繼續向前。 因為對我來說， 天空是夢想， 是未來的象徵。
48
I W A N T
T O
F L Y
I
N
T H E
S K Y
49
p
h o t o g r a p h y
50 一台 800 萬畫素的數位相機， 加上一台 300 萬畫素的手機相機， 讓我走到哪隨手拍到哪， 雖然我沒有單眼相機， 沒辦法拍出高級的景深效果， 我依然可以捕捉生活周遭， 那些美麗景致。 逐夢的途中， 我也不會忘了記錄自己的腳印。
51
52
K
e e p
G o i n g
掃描連結至 << 隨手。拍 >> 相簿
53
54
Drawing Works
繪圖作品
55
i l l u s t r a t e
56 畫圖是我平時的興趣， 有時候厭倦了課業的壓力， 我就會拿起紙筆， 在紙上勾勒出專屬我的理想世界。
57
比較擅長繪畫漫畫人物的我， 透過繪畫人物可以讓我去觀察人們較細微 的行為， 發現其實可以將這些對人們的觀察運用在 設計思考上。
58
你絕不會擁有一個夢想，卻沒被賦予實現它的能力。 You’re never given a dream without also being given the power to make it true. --Richard Bach
59
60
Micro Film
微電影
61 一場糾結的抉擇 一段跳脫性別的感情
To be or not to be 有你的未來就不是妄想。
導演 張國興 副導演 何宜軒 主角 楊青原
62 恐怖小品 -- 數縛 男廁 難測
在熟悉的行為裡 因為太熟悉而變得 難以猜測 ...
Make Sense 學長海外比賽委託製作宣傳片 導演：張國興 監製：何宜軒
63
現實與夢想之間的距離， 我想我正在途中， 希望我搭著的這班航機， 有一天能到達， 屬於自己的天空。
64
感謝一路走來陪在身邊的家人、朋友和老師， 因為你們的鼓勵與幫助我才有勇氣從現實開始走向夢想。
Thanks for your reading.
Yi Shiuan He