數位媒材輔助設計表現

數位媒材輔助設計表現

國立交通大學建築研究所

碩士論文

數位媒材輔助設計表現

指導教授 劉育東

中 華 民 國 1 0 0 年 七 月

研究生 王靖雅

The performance of digital media-aided design

The performance of digital media-aided design

數位媒材輔助設計表現

數位媒材輔助設計表現

指導教授 : 劉育東

國立交通大學建築研究所碩士班

學生 : 王靖雅

i

MS數位組所學的兩年期間，在議題上的部分，探討資訊該如何的呈現以及

如何與使用者互動。但面對如此的議題，靜態的設計／作品的說明呈現，較

無法完全的表示設計者想完全表現的設計思維，故後製的數位媒材使用，

成了第二部分應該著重的重點。數位媒材的輔助設計的應用以及呈現（諸

如:FLASH、UDK、ADUINO互動設計等等)以上數位互動軟體，不但在視覺

方面可以與使用者進行互動，清楚表達設計者想傳達的設計過程及手法，更

可以將此延伸至實體的建築上，做出實體與模擬真實環境，讓使用者更能體

驗到空間的氛圍及互動性。故在此四大設計主題中，數為媒材的輔助，從一

開始的設計議題->設計->數位媒材輔助->設計後製呈現，數位媒材成了不

可或缺的一環。

摘要

The performance of digital media-aided design Thinking

Advisors : Yu-Tung Liu

Institute of Architecture

National Chiao Tung University

Student : Jing-Ya Wang

ii

MS digital studio study of how information present and how to interact

with the user . But faced with such this topic, description of the works of

de-sign/static rendering, cannot be fully expressed the designers’ thinking

, so digital media system will become very inportant . The application of

digital tools (such as: FLASH, and UDK, and ADUINO interactive design and

so on) above digital interactive software, not only interacted with users, but

also express designers’ design process and the manipulation, more can

extends to building, made entity and simulation, let user experienced aura

of space and interacted with each other . In this four main design theme,

digital medium, from the beginning of the design issues-> design-> digital

media Assistant->design fabrication, digital media is necessary for design.

i

ii

iii

1 11 23 33

iii

中文摘要

英文摘要

目 錄

INFORMATION PLATFORM

NEXT GENE

INFORMATION SPACE

WORKING SPACE

TABLE OF CONTENT

...

...

...

...

...

...

...

1-10

iii

INFORMATION TREE IMFORMATION SPACE NEXT GENE JELLYFISH 11-22 23-32 33-42 使用媒材工具:flash / AE 輔助網際建築，學習將設計作品的後製及視覺的想法/概念/方法/過程，動態的表達及解說 利用模擬工具virtualwind模擬物理環境，進行設計概念的延伸，最後再以CAD/CAM技術，將建築實體呈現出來 使用媒材工具:UDK呈現一般現實無法表現出來的空間氛圍及超越，將建築及抽像的感受視覺化，表現在數位平台之中 以工作空間為主題發想，延伸如何與使用者進行行為及感受的互動，並利用ARDUINO及感測零件建構互動的設計出來 STAGE 1 STAGE 2 STAGE 3 STAGE 4

INFORMATION TREE P1

In the rapid development of technology and efficiency trend, people are often too focused on the work and job, ignored social interaction with people. Currently prevalent form of communication, technology: Mobile, networking, messaging, and other, it seems as if shorten the communication distance, provides convenient and fast communications efficiency, but reduces the interactive exchange of people, and aliena-tion increased. This will indirectly affect people of self learning and growth opportunities. Applicaaliena-tion of sci-ence and technology should not be limited to this, along the fruits of technological advances, we should be use technology products to increase human interaction and the exchange of experience, building a mutual exchange and learning and development of space.

ISSUE

INFORMATION TREE

INFORMATION TREE P2 在科技快速發展及效率成長的趨勢下,人們往往過於專注在作業工作及勞務上的成果,忽略了與人與生活周遭的社交 互動。目前盛行的溝通方式,不外乎科技界面:手機、網路、訊息等,看似縮短的溝通的距離,提供了傳訊的便捷及快 速的效率,卻減少了人與人互動的交流,而疏離感加重。這種互動的沒落也會間接影響人的自我學習及成長機會。科 技的應用不應只侷限於此,順著科技日新月異的成果,應該更加去利用科技產物與人的互動,增加交流體驗,建構一個 相互交流及學習發展的空間。

INFORMATION PLATFORM

P3

集合五個感官於INFORMATION TREE ，同時為了 增加更多使用者的互動性，在虛擬網路平台發展 中，增加了網路遊戲吸引使用者對此平台的使用興 趣。如secend life 或一般的cosplay活動。此二者 案例都是因為在網路上的互動共鳴進而在真實生活 舉辦活動交流。 2010 NCTU 結合現有的科技技術及潮流,包括:(iphone app/線上 遊戲/網路部落格等資料庫)與現實的建築實體牆面 一體。進而引起使用者興趣產生互動。建構一個可 以相互交流互動平台,並跟科技做結合,借此人們可以 有更多元的互動,讓人與人之間互相影響及交流,成為 激勵自我發展的動力。 INFORMATION TREE SITE DESIGN DIRECTION INFORMATION TREE HEARING SYMBOL VISION FEELING OLFACTION 基地座落於交通大學學生活動中心，但學生活動及 社團活動在此區的使用頻率並沒有很熱絡。學生在 此的動機及興趣無法與活動中心產生共鳴。

INFORMATION PLATFORM

P4 INFORMATION TREE 設計包含三個層面:互動、空間及環境，分兩個方向發展，一個是在虛擬世界的 網路平台、一個是真實世界的交流平台，兩個方向同步發展，卻又相互影響著。 EX在虛擬平台上同時模擬著真實場景的視覺傳達，讓使用者使用網路的方式， 同時也可以知道及聯想到真實世界的場景及使用情況。而真實世界的場景對外的 感知，則可透過科技界面方式表達及同時傳達資訊及傳播置網路平台。 數位互動 建築空間 物理環境 DESIGN FUNCTION information knowledge impression sense 真實交流 網路交流

INFORMATION PLATFORM

P5 INFORMATION TREE

INTERACTIVE & SPACE

INFORMATION TREE 涉及 的範圍包括的網路作業及建 築設計作業還有互動作業， 但此三項又必須同時發展， 故靜態的圖片效果呈現還是 有限制，為了讓人更了解此 設計的操作方式，故必須以 動態flash做報告呈現。故在 此次報告中，脫離了傳統報 告的模式，而改用FLASH動 畫呈現。 而室內介面系統最主要是和 學校資訊資料庫做結合以及 學生個人社群網路資訊（諸 如：facebook、plunk、無 名等相關個人分享資訊)改 變平面電腦的使用模式，將 使用行為延伸至戶外，至建 築牆面上，引起使用者的興 趣，進而與其他使用者在建 築空間上有進一步的互動。 P6 INFORMATION TREE DESIGN FUNCTION

INFORMATION PLATFORM

P7 INFORMATION TREE

INTERACTIVE & ENVIRONMENT

將互動界面延伸至建築物的皮層與皮層結合成智慧皮層， 利用風動搖擺將資訊傳送給電腦運算並收集太陽能源，將 環境各種訊息給予燈號並傳導顯示在立面牆上。而室內的 白天是直接將陽光導入室內使用，晚上或陰天則是使用太 陽能驅動的室內照明。

INFORMATION PLATFORM

LED MOT OR

P8 INFORMATION TREE information Indoor (Daytime) Indoor (Night) LED computer operation INTERACTIVE WALL: 感應對外的物理環境然後反應機動 行為的皮層，在感應外在資訊的同 時，可以傳播，資訊至網路平台。 INTERACTIVE INTERFACE: 傳播資訊讓使用者接收的同時，可 以透過觸碰或是其他視覺的傳達， 讓使用方式增加樂趣，也可以增加 人與人之間的互動。 連動桿 連動桿 六角螺帽 移動軸 壓克力疊製

INFORMATION PLATFORM

P9 INFORMATION TREE

P10 INFORMATION TREE

MAGIC螞吉殼 _P11

NEXT GENE

Next generation of gene building is combine the assists of medium with design idea , and solid model of the entire design process to achieve results。 MA-GI-C is starting from the discussion on site-> environ-mental issues “wind”-> formicary concept->CFD fluid simulation->entity model results.

ISSUE

MAGIC螞吉殼 _P12

NEXT GENE

關於下一代基因建築NEXT GENE ARCHITECTURE是藉由各媒材的輔助,與設計想法上做結合,並且將整個設計過程 實現成實體模型的結果。螞吉殼便是從基地探討開始->環境議題＂風＂->蟻窩概念->CFD流體模擬->實體模型 的成果。

MAGIC螞吉殼 _P13

NEXT GENE

MAGIC螞吉殼 _P14

NEXT GENE

基地的位置坐落於澳底，關於當地氣候有幾個特色： 潮濕多雨 多強勁風量 自然景觀，自然視野 透過實地參訪基地，體驗到當地環境風勁強大，故決定在 基地特色上採用＂風＂的議題，做為探討，延伸設計概 念。而概念採取＂蟻丘＂的型態做為設計延伸。 “蟻丘”在非洲，尤其是南非高原，有大量的分布，是一 種生物地貌。其結構複雜，由地表堆疊高達１.5公尺，為 螞蟻的摩天大樓。其外圍多層的殼狀物可減少熱量及濕度 的流失。為了讓空氣在裡頭流通，其內部有許許多多個通 道，搭配外殼多數的孔洞，可以讓風量進入內部，由下將 多餘的熱往上帶至上層而排出，是天然通風的建築設計。 從概念至模型成型過程，以CFD流體模擬的方式進行螞吉 殼通風的測試。virtaulwind是模擬流體對模型接觸後的結 果，並將結果數據視覺化，以色塊來區分流體流速的大小 範圍及快慢。紅色表示速度快，綠色則代表宜人的風速， 以此區分。 測試初步先以最初的基地模型進行匯入的動作，由於基地 大部分的地形是平地模式，所以在基地上先加入一個量體 模進行流體模擬變化的測試，最後以最接近蛋型的自由形 體做為整個設計空間的大雛形。 從一開始的蛋型量體到之後的自由形體，然後在從這自由 形體上，進行建築空間的設計延伸，包括：多孔洞的位 置，管道空間，雙層殼的設計。最後再將正模放置ＣＦＤ 流體模擬重新檢視所得到的數據，從圖面上的顯示可以看 出，當流體＂風＂從外部進入螞吉殼內部然後擴散分布的 情況，顯示其內部風速的流動是緩和及適宜的微風。全部 剖面部分皆都測試完成後，根據數據最後的顯示，再進行 最後的模型微調，微調後再進行測試，確認理想的流體模 擬結果後，再坐空間格局的配置。 透過圖面的結果，可知道各種情況下的風量在此曲線的實 體中的分布情況，在各種情況下的風速，會影響其室內格 局的配置。若室內的風速是合適宜人的，可配置的室內格 局則會參考：臥房、書房等等，而室內較快的風速，則可 以配置較公共的場所諸如客廳、餐廳及適合通風的廁所衛 浴空間等等。 從平面圖的分布，通風的地方集中在中間大通道的部分， 所以中間的區塊配置：廚房以及二樓的衛浴部分，其他的 空間風量則是剛好及緩和的。

SITE

CONCEPT

流體模擬

virtualwind tool

MAGIC螞吉殼 _P15

NEXT GENE

Vent

Air Duct

Space

Double Wall

MAGIC螞吉殼 _P16

NEXT GENE

High Low Time 0 sec Time 0 sec

Time 25 sec Time 50 sec

Time 50 sec Site

Quantity Velocity (m/s)

Quantity V

MAGIC螞吉殼 _P17

NEXT GENE

First we create a volume frome and then use the software voronoi to divide it , After divided the volume into many small objects , Deleted the spare meshes .

MAGIC螞吉殼 _P18

NEXT GENE

MAGIC螞吉殼 _P19

MAGIC螞吉殼 _P20

MAGIC螞吉殼 _P21

待virtaulwind模擬及後微調後，確認風速數據

符合蟻丘之通風原則後，便開始進行模型的實

體化階段。

cad雷切採用的是水平雷切堆疊的手法，製作

１：５０的半剖模，以珍珠板0.5的厚度做堆

疊，最後再以補土的方式將表皮補平，細砂紙

將粗糙之處磨平，反覆的不斷填補在磨平至要

求的階段，便大功告成。

另一個方式則是採用rp成型，由於magic螞吉

殼是一體成型的設計，從第一層至樓梯還有空

間牆體都是同一體，在rp前只需檢查是否又無

破損情形既可。

NEXT GENE

CAD/CAM MODEL

MAGIC螞吉殼 _P22

SOUND SPACE P23

Sound space purposes to provide a music space, allowing users to interact in 3D space or to provide a place for music related messages. In the space containing the service centres, advertising, music listening, user evaluation, music collection and other functions, also created a game. Allow users to play the game way to send and receive messages in music.

Voice guidance is the important part of design directions, use properties of the sound in the present case (size, frequency, speed, style) classification, with the vision guidance, users can recognize the properties of musical information (such as popularity, downloads ... ... And so on).

ISSUE

SOUND SPACE

SOUND SPACE P24 sound space的目的是希望可以提供一個音樂空間，讓使用者可以在3D空間下互動或是提供相關音樂訊息的場 所。在空間下包含了服務中心、廣告、音樂試聽、使用者評價、音樂收藏等功能，也創造了遊戲角色。讓使用者 以玩遊戲的方式收發音樂訊息。 聲音的導引在設計中也占了重要的方向，本案利用聲音的屬性(大小、頻率、速率、風格)分類，配合視覺二者的 雙重導引，讓使用者可以自我分辨音樂資訊的屬性(如熱門程度、下載量...等)。

INFORMATION SPACE

SOUND SPACE P25

Music info

Server

Popular

Content

Connect

INFORMATION SPACE

音樂資訊的空間屬性分成:長度(代表熱門程度)、大小(代表使用者用量跟 評價)、連接粗細(代表連結持久度/日期),這些資訊量隨著使用者使用的程 度而改變接著就會影響參數設計的空間，利用資訊量控制參數的方式，設 計整個聲音空間。資訊量不同，空間也有所變化。

SOUND SPACE SATURATION

SOUND SPACE P26

INFORMATION SPACE

SOUND SPACE是以網路上的音樂平台做基準點，將資訊世界的連結關係，伺服 器－主頁－副頁的關係，轉成視覺空間的關係。（如上圖）再將這樣的關係連結 改成可用數據控制的空間模型。讓每一個改變及空間都賦予的意義。在此的數據 控制則是以DRASSHOPPER為參數化控制。

GRASSHOPPER

參數化 為了引起使用者的興趣，SOUND SPACE使用的模式以遊戲的方式進行，整個風 格色彩方面以卡通的效果呈現。在遊戲的界面中，使用者可以了解到自己有哪些 音樂的收藏，MAP功能可以讓自己知道身在哪一地區，還有及時聊天功能，可與 朋友分享音樂聊天產生互動。

SOUND SPACE P27

SOUND SPACE P28

SOUND SPACE P29 SOUND SPACE主要是以音樂為主的設計，故如何 將資訊視覺化及用聲音帶領使用者進入空間，便 是強調的重點。這是一般靜態及平面圖上所讀不 到的資訊及感受。而UDK的渲染引擎，效果也十 分的好，可以做為設計表現的新環節，還可以編輯 FLASH，一邊建模的同時就可以將劇情寫入，用 UDK的方式表達也可以在此及時與人做互動 。

INFORMATION SPACE

聲音的導引在設計中也占了重要的方向，本案利用 聲音的屬性(大小、頻率、速率、風格)分類，配合視 覺二者的雙重導引，讓使用者可以自我分辨音樂資 訊的屬性(如熱門程度、下載量...等)。 在動線上分別放置間格不同的聲音來原來引導使用者。間 格短的聲音急驟，表示來到較熱門的空間，急驟的聲響越 多，表示越多人到這空間瀏覽 聲音大小的範圍設定跟熱門程度有關連，音量越大，容 易受到注意，也可吸引使用者的停留。利用參數化數據 控制可以有效的成現如此關聯的空間。 音樂的複雜性所代表上載的資訊量就更多所代表上 載的資訊量就更多，每當創建一個資訊時，就會創 建一個會發音的音源球，每次都會有不一樣的顏色 變化，顏色變化越多，有的資訊更多。 每個空間又不同的音源點分布，其音源點的大小、顏色 又分別代表音量的範圍及聲量。而分布的點可以依使用 者的喜好做調整。 一但音樂空間的伺服器達到飽和地步，便可以再另 創新的伺服器，資訊越多，空間就越大，最後將會 成為一個音樂網路銀河系，而使用族群也會越龐 大，音樂也越豐富。

RULES

RULES

DESIGN PROCESS

SOUND SPACE P30

INFORMATION SPACE

（左圖）在各個伺服器內的地圖，說明著各音樂的屬 性、範圍及大小。(上圖)為了增加使用者使用興趣， 此方案已遊戲模式遞一人稱的方式，創力遊戲角色， 令使用者有身如其境的感受。

SOUND SPACE 的方案是以UDK跟遊戲結合的方式呈現，在遊戲方面的互動，便是與FLASH動畫做結合，除了動畫 的部分以外，也設置的可互動的遊戲介面，讓初步新手可以點選畫面->進入說明->進行操作。所有相關的資訊都會 出現在操作手續內，供使用者無線閱覽，而最新的更新資訊也會即時公布在遊戲介面方便閱讀。

ROLES

MAP

SOUND SPACE P31

INFORMATION SPACE

THE INTERF

ACER OF SOUND SP

SOUND SPACE P32

JELLYFISH P33

Jellyfish take working space as starting point and imagine how interact with users in the work space. So start from the Studio lights. Due to the problem of pull the electric wire , whenever you want to turn on a light in the area, often even in other parts of the lights are turned on. Jellyfish want to use the inductive senser . To let small current controls high current switch, then users will have lighting , With the bio-like appearance of agency actions , users interacted with jellyfish , will made a lot of interesting experience in space.

ISSUE

JELLYFISH

JELLYFISH P34 Jellyfish以工作室為出發點，設想如何在工作空間中與使用者有所互動。於是從工作室的電燈著手。由於牽線的 問題，每當要開啟一區的燈光，往往會連其他地方的燈光也開啟。所以本案想以感應的方式，讓小電流控制大電 流開關，有使用者使用的地區，才會有燈光照明，再加上仿生物外表的機構動作，與使用者產生互動，增添趣味 性，有趣的水母外型，在空間中製造出許多有趣的視覺感受。

WORKING SPACE

JELLYFISH P35 為了像水母般可以自然飄動的感覺，在研究機構的部 分嘗試了很多方法，但主要是以關節蛇為案例，做構 件的參考，從左右捲動無方向性至固定方向捲動，卡 榫及材料大小輕重，如何牽動構件，媒材的限制成為 了困難的環節。 在案例中的關節蛇本身是無方向性的左右搖擺構件， 但為了方便控制構件的釣魚線，所以決定將變動的方 向改成單向。決定方向性的重點在於構件與構件的接 合處，為一個山字形的接合構件，然後再以最小單位 的螺絲（長約1cm)，來將所有構件組合起來。由於牽 動水母腳的是極細的釣魚線，整體重量也影響牽動的 順暢度，水母腳的構件不能太過厚重，所以最後則是 以0.1的壓克力+螺絲及螺帽卡接+平滑釣魚線＋增加 滑順度潤滑劑，牽動整體構件。 支撐架 固定線板 固定骨架 單位構件 LED

WORKING SPACE

MODELING

JELLYFISH P36 1mm壓克力 中間夾線層 10mm螺絲 1mm壓克力

WORKING SPACE

MODELING PROCESS

JELLYFISH P37 構件之後的階段，便是寫ARDUINO好讓整個構件透過 感應器轉動。ADUINO是透過外部的感應器感應之後 將感應的數據傳至電腦，再由電腦發布命令及資訊， 傳送只可變構的構件。而JELLFISH便是要將外部的紅 外線感應物件雨遮蔽物的關係，再藉由此一數據觸動 JELLFISH變動以及LED燈開啟。觸發過程如下： 主要控制水母驅動為直流馬達，但馬達的電流方向為 單一的方向，這時便需要H-BRIDGE來轉變電流方向。 如果選擇5V以上的馬達，便需要繼電器來控制及另外 銜接5V以上的電壓。而ARDUINO只需供電給IR紅外線 模組既可。

IR紅外線 ARDUINO(ON) LED(ON) MOTOR (ON)

CODING

const int irReceiver = 2; const int irLed = 3; // 紅外線發射器

const unsigned int frequency = 38000; // 發射頻率(單位: Hz) const int button1Pin = 6;

const int button2Pin = 7;

const int motor1Pin = 4; // H-bridge leg 1 (pin 2, 1A) const int motor2Pin = 5; // H-bridge leg 2 (pin 7, 2A) const int enablePin = 9; // H-bridge enable pin const int relayPin = 13; // 繼電器(Relay) int button1State = 0; int button2State = 0; int relayState = 0; // 繼電器狀態 void loop() { if (ir_status == 0) if (digitalRead(irReceiver) == HIGH) { if (button1State == 0){

digitalWrite(motor1Pin, LOW); // set leg 1 of the H-bridge low digitalWrite(motor2Pin, LOW); // set leg 2 of the H-bridge high }else {

digitalWrite(motor1Pin, LOW); // set leg 1 of the H-bridge low digitalWrite(motor2Pin, HIGH); // set leg 2 of the H-bridge high }

switchRelay(); // 切換繼電器開關 } else {

if (button2State == 0){

digitalWrite(motor1Pin, LOW); // set leg 1 of the H-bridge low digitalWrite(motor2Pin, LOW); // set leg 2 of the H-bridge high }else {

digitalWrite(motor1Pin, HIGH); // set leg 1 of the H-bridge low digitalWrite(motor2Pin, LOW); // set leg 2 of the H-bridge high } } } void switchRelay() { if (relayState == 0) relayState = 1; // 把繼電器狀態改為 ON else relayState = 0; // 把繼電器狀態改為 OFF digitalWrite(relayPin, relayState); // 讓繼電器作動, 切換開關 //Serial.print(“Relay status: “); // 把繼電器的狀態印到 Serial Port //Serial.println(relayState);

}

H-BRIDGE 繼電器 _{MOTOR IR模組}

WORKING SPACE

JELLYFISH P38

WORKING SPACE

JELLYFISH P39

WORKING SPACE

JELLYFISH P40

JELLYFISH P41

JELLYFISH P42

數

位

媒

材

輔

助

設

計

思

維

交 通 大 學

王

靖

雅

建 築 研 究 所 人 社 學 院

碩

士

論

文

99