政治大學陳聖智設計思維課程與工作坊教材 by Cre@Taiwan

設計思維課程

學校 : 政治大學系所：傳播學院數位內容碩士學位學程老師：陳聖智教授 1

附件上課教材列舉部分課程: 理論課+技術課

設計思維 Design Thinking

Week3 20130307

1012設計思維

陳聖智

Design Thinking 國立政治大學傳播學院專任助理教授課程發展導向以數位內容之數位設計思考研究或設計創作為縱軸， from設計觀察to說故事溝通與企劃； from CAD to Cyberspace； from Physical to Virtual；from方法、操作流程to技術為橫軸。在這門課理論、技術、研究與應用的教授下，實際參與這一波新科技，並回應數位內容設計。

設計思維 Design Thinking

Design Method Design Process Design Strategies

新媒材視為一種技術、工具與方法，不同媒材如何轉換與應用？怎麼製作？當互動是一種行為狀態，可視為溝通傳播；可視為實體互動；可視為科技媒介互動方式，數位敘事如何發展？如何構成？電腦輔助設計模擬與探究，互動性研究與實務的關係與呈現趨勢為何？數位「互動科技」領域的教學與研究，包含電腦輔助設計與虛擬實境、互動科技、感測電子、社群網絡等新數位媒材(New Digital Media)相關之數位設計思考與實務，結合資訊、傳播、科技與社會等面向。本課程以感測實驗與空間向度結合研究探討作為數位內容傳播之途徑。由設計思考的角度，結合數位科技感測的實驗去呈現互動科技影響下的行為模式，透過應用與理論分析，以實際文化場域作為從實體空間到虛擬空間的感知互動。

當互動視為一種行為狀態；視為溝通傳播的方式；視為人與空間的介面，引發設計領域的再定義。數位內容或稱『數位「互動科技」設計領域』，包含電腦輔助設計與虛擬實境、互動科技、感測電子、社群網絡等新數位媒材(New Digital Media)相關之數位設計思考與實務，結合資訊、傳播、科技與社會等面向。新媒材可視為一種技術、工具與方法，不同媒材的轉換與應用，形塑新的空間體驗，因而，本研究探討以空間向度與互動感測結合實驗探討作為數位內容傳播之途徑；透過設計思考的角度，結合敘事、數位科技感測的實驗去呈現互動科技影響下的行為模式：

Design knowledge, problem-solving Design problem-solving Research and Application David Carson(2008)：「我始終認為我的作品即是我這個人的態度之總和，而非某種特定的風格。」。ppaper79: 59 David, march 21, 2008. kgb, front yard... foto: skip jones http://www.davidcarsondesign.com/

設計的創意：論述整合及現象觀察資訊科技

設計

社會傳播

後現代的各種文化出現了觀光凝視加速普遍化的現象，而且這種普遍化以一種風土性、文化性和主題性的方式，重塑了都會與鄉村的大半景緻。姚仁喜(2010)用12種石材規格對應12種音符，在建築物上依樂譜排列出韋瓦第(Antonio Vivaldi)的小提琴協奏曲〈四季〉的主旋律

巴黎的龐畢度中心「人民的博物館」 Renzo Piano and Richard Rogers, Pompidou Centre, Paris, 1971-7

溫肇東(2011)，城市，讓生活更美好了嗎？深層思考：美好生活的內涵(創新發現誌1月號) 嶄新的視覺感受模式的興起，這已經變成了在新興都會中心生活與參觀現代體驗的一部份

尋找你的幸福城市：你住的地方決定你的前途，人生幸福感的關鍵因子均與特定空間有關(site-specific or siteidiosyncratic) Richard Florida

Catherine Grout在”重返風景：當代藝術的地景再現” (p.14-15)，作品所描繪的地區充其量只是代表著有活動產生的地方。這些活動無論是真實或是想像的，常是出自於宗教故事、神話或是民間傳說。藝術家以圖文並茂的方式來呈現他們所看到的，這些風景畫作對於一個地方或一個故事影像呈現的關注更甚於對自然的描繪。

傳播者(communicator) 訊息(message) 媒介(media) 受播者(audience) 製造符號(encoding) 還原符號(decoding) 效果(effect) 回饋(feedback)

「風景／地景」一詞直到十五世紀才有相關的字眼出現。荷蘭語中的landscape意謂「一塊土地」Paysage一詞中譯為「風景」、「地景」。

傳播是訊息輸送的過程，任何新知識、新技術、新觀念及新消息，無不依賴傳播媒介加以擴散，並影響受播者(閱聽眾)。「風景／地景」的表現手法和如何看、如何思考這個世界的方式有關。透過每個風景／地景概念的了解方法，可以得知其中的文化屬性。「風景／地景」也表達了我們和世界、和他人、甚至是和我們自己的關係。

Allan G. Johnson 符號使得文化成為可能，因為符號我們才能夠賦予一些東西意義。 Joel Kotkin 城市一直是人類最偉大的作品。它呈現人類此物種發揮想像力創出的成品，並證明人類可自食其力，運用深奧、經得起時間考驗的方式重塑自然環境。城市濃縮並釋放了人類的創造力。

John Urry 凝視對象的建構仰賴符號(signs)，而且觀光旅遊也可以說是一種蒐集符號的過程。當觀光客在巴黎街頭看見兩人接吻時，他在這次的凝視行動中所捕捉到的是一個「永恆的浪漫巴黎」。 (p.23)

Robert Doisneau http://blog.roodo.com/syshen/archives/112677.html http://blog.udn.com/mooneyes/1532418

設計思維 Design Thinking

咖啡館甚至已經變成了「巴黎生活」(la vie parisienne)的象徵…從1860年代的印象派畫家開始，畫家、作家和攝影家，把這些咖啡館裡面的周遭的生活樣式再現出來(Berman, 1983; Clark, 1984)

「萬國博覽會」(Universal Exhibition) …這類的展覽會成了展示國家科技實力的舞台，讓各種假想的民族文化甚至是「國家品牌」都有表述的可能(Harvey, P., 1996: ch. 3) 花博~

設計與設計思考

Piano stairs - TheFunTheory.com http://www.youtube.com/watch?v=2lXh2n0aPyw

Opera House 案例分析

以Schon的圖書館空間尋路的過程探討設計

三種環境下的實驗過程

3D立體模型公車亭概念設計

a kid and mom are having a great time in this boy's adventure where everything is made out of orange and vitamins C

2D 平面設計創作

THE ORANGE DREAM

領事館3D素模與RP輸出對照

紅毛城3D虛擬互動設計

創作與實驗

Retrieval of Motion Capture Data Aids Efficient Digital Learning Sheng-Chih Chen *, Jui-I Hsu, Wei-Kuang Chen

A digital approach of formulating tectonic design studios with rapid prototyping

汪琪、鍾蔚文(1998)：如果「整合」是二十一世紀末傳播科技發展的趨勢，則在所有已經出現的各種新媒介當中，虛擬實境可能要算是整合了最多科技、同時也最「周全」的一種新媒介：它不但提供聲音、畫面，並且涵蓋到使用者的觸覺，形成一種接近真實的虛幻世界，帶給使用者一種完全不同於現實環境的體驗。(第二代媒介：傳播革命之後)

Chien- Jung, Lo and Sheng- Chih, Chen

The evaluation of tutorial lessons in difficult levels

The process of evaluation

創造力 Design sketches, Models, Construction

ethodology & step

創造的歷程專家的創造力

Introduction

The results of idea development:

Problem

The experts spent about 2 hours developing design ideas (Figure a, b). The time was measured as 0:53:17 for the first idea and 0:55:02 for the second.

Objective

The novices spent about 3 hours on the two ideas (Figure c, d). The time was 1:25:15 for the first and 1:11:08 for the second.

創造與資訊技術

Methodology Analysis Conclusions Limitations SIGNIFICANCE FUTURE STUDY

陳聖智(2001)。專家與生手設計者使用電腦媒材的認知差異: 一般性思考到創造性思考的歷程。國立交通大學應用藝術所碩士論文。

Introductio n

Problem&Objective

Methodology

Results&Discussion

Conclusions

Professional knowledge is a key component of the decision making process, as well as a major part of the thinking process.

Media

Strategy

Design Thinking

Introductio n

RESULTS & DISCUSSION

There has been no research into a strategy oriented towards professional knowledge and its relationship with design thinking.

Knowledge

Problem&Objective

Methodology

Results&Discussion

Conclusions

Results:

A Brief Workflow of the Expert Architectural Designer’s 3D Construction

A Brief Workflow of the Expert Industrial Designer’s 3D Construction

Aided design strategy under the professional knowledge-orientation

一心二葉 One bud two leaves

The

Role

Digital

Media

Creative

Thinking

博嘉里是文山區的交通樞紐之一，里民性格敦厚，也致力於使家園更加美好。里內有焚化爐、抽水站運動公園等設施，重視環境保護，里長對於改善博嘉里環境更是不遺餘力。而本公共藝術基地鄰近捷運木柵站，為公車路線的博嘉國小站，附近的學區還有木柵高工，為了讓孩童及學生們使用此處的便利性和安全性提升，將在設計中加以規劃細節。

E.F INDUTRIAL CO.LTD 義峰實業有限公司北部第二高速公路臺北聯絡道信義支線公共藝術D案設置案

脈絡導向此案的創作基地為北二高台北聯絡道信義支線，是連接信義及木柵區的道路。本團隊本著脈絡導向的策展原則，將場域的歷史、地理等人文、自然脈絡納入考量，規劃適合的藝術設置，以提升地區觀光價值和文化認知。本作品以茶文化及文山地景為概念，具體呈現此區人文特色，將人文、科技及生態脈絡結合，讓使用者能夠在都市中感受自然，回歸到最原本的生活中。葉子代表茶葉，葉脈的意象則是象徵四通八達的交通網絡。場所意識本團隊擁有與建築對話的豐富經驗，而公共藝術品如何結合既有的環境與地景空間，一直是參與公共空間之藝術創作的藝術家不斷思考的議題。針對特定場域（sitespecific）創作，是公共藝術強調的基本原則；然而，如何將一個場域變成一個可供辨識、有特殊性格的場所（place），並融入當地特色，成為當地特殊地標，是本計畫嘗試挑戰的課題。以本作品為例，葉狀的公車亭與如同山巒起伏的人行道護欄呼應背後的山脈，層疊的意象塑造地區的特殊性。

創作構想這次公共藝術設計的靈感來源是從童趣的心靈探索出發。想像孩童處在山巒連綿的文山地景中，等待公車的軌跡從遠處呼嘯而來。一會兒靜謐，一會兒喧囂，具有戲劇張力的各種聲音。就像宮崎駿動畫卡通中主角的奇遇記一般，充滿一幕幕令人期待的山中旅程。

宮崎駿的著名卡通「豆豆龍」主角等公車與同樂的場景。序曲的第一幕：公車駛入，等待上車的乘客成列進入公車。繼續等候的人們談笑說唱，大人、小孩有的坐著，有的站著，有的注意公車路線或遠方山巒。第二幕：狹長的人行道上路人步行著和慢跑的運動者，晨曦與傍晚時分八十米圍牆與公車站的地面，充滿引人入勝的燈光效果漸漸亮起，吸引人的目光與圍牆後的層層山巒對比，久久不能移開。第三幕：透過或透明或霧面的候車亭葉形屋頂，看到空氣中凝結的濕冷空氣與霧氣畫過葉面，沿著葉脈形成水珠滾滾自葉尖落下。

具有文山在地經濟作物色彩融合細胞生命體的地景細部有機的山稜紋理設計數位幾何的運算美學

設計與設計思考

Thank you *^_^*

Week5 20130321

設計的創意：論述整合及現象觀察 1012設計思維

陳聖智

Design Thinking 國立政治大學傳播學院專任助理教授

資訊科技

設計

社會傳播

數位天空之城―虛擬真實共構設計案台北市立美術館遠東建築展數位建築區

台北市立美術館明日建築展明日歷史虛擬實境設計行政院文化建設委員會

於台北市立美術館展出明日歷史空間：虛擬淡水新竹嘉義空間模擬器(劉育東陳聖智等，2007) Vi r t u a l F o r t S a n D o m i n g o : A P r e l i m i n a r y P r o c e s s o f D i g i t a l a n d Vi r t u a l P r e s e r v a t i o n

永續營運計劃：公共藝術設置計畫之總體目標係提升教學研究場地使用品質，本計劃將以體現人與造型的呼應，根據「知識傳遞意象」的特點，創造優質的生活空間。作品所選用之材質都是具有美觀、環保且容易維護之建材。例如，照明將安置適當亮度之LED燈，採取省能安全、樸實自然風格為照明原則。省能節約是朝永續經營的基本必備要求，本作品在照明上採用LED燈具，可符合省電耐用的優勢，對日積月累龐大的電費是一大福音，造型也加入化學實驗元素與方程式意象為考量。

Walt Disney Concert Hall, Los Angeles, California Frank Gehry

不同顏色高輝度的LED。

LED單元。

LED模組牆。

案例分析

公共藝術「跨學科領域的對話與操作」建議設置位置：「公共藝術與城鄉發展的關聯性」景觀草坡

「企業與人文關懷．藝術互動的可能性」

太陽能電池

INTERACTIVE DEVICE

藝術語言：採用現代藝術手法架構出與台鐵南科相會輝映之作品，而科技藝術的情節處理亦將作品導入普羅大眾的情感之中。

節/潔能美學：作品媒材上，形構出一發光彩色亮梭體，呈現作品透亮輕盈之感。由此增加與民眾的對話關係，在視覺的互動裡推行「節/潔能美學」。成為一個與民眾生活息息相關的互動藝術，一個具有生命的藝術作品。

數位內容與文化創意: 跨領域合作式設計的溝通介面

跨領域整合媒材運用之設計創作型式背景與課程理論思維

關鍵詞：跨領域合作式設計，數位設計，數位生產，環境互動藝術，文化創意產業

著重於跨領域設計結合的關係，跨領域包括了人文藝術、資訊科技、生產創作、和互動環境，透過這個計劃所實作的平台理解跨領域合作間組織下的原則。新的電腦輔助設計生產、模型製造、視覺化技術和數位演算方法，在這個設計和生產過程中被整合。為了探索創造性的形式和製造潛力，本計畫發展出一系列形態關係的研究。

實體的物件，一個介入公共空間的元素和事件。有些從形式的隱喻上看著它出現的意義；就設計而言，它啟發了透過快速成型方法，進行數位製造過程的實驗研究，並用不同尺度的模型整合各種領域的介入。

初始設計構想係以螺旋線(Helix)為發展雛型，對於空間曲線上，隨著時間T產生的變化，所生成的曲線圍繞出一螺旋體，想像這個曲線是一條繩子不斷地以逆時針方向沿著圓柱繞圈，因為高度(z 軸)隨著時間增加，所以曲線一邊繞圈一邊往上爬就，如同在傳統織機上作間斷式往復運動的梭子，時間參數就像是為了引導緯紗進入梭道的機件，參數方程如下：

參數化曲線方程示意圖

數位設計溝通整合流程

「梭─數位之旅」的建構始於對兩種不同尺度─縮尺模型和實體模型的理解。這些模型在設計生產上常被一般大學的設計教育和實驗室使用。這項物件的開發設計計畫為以科技、互動、環境、藝術跨領域研究開發為宗旨的I-Fun Team團隊所主導，將於西元2010年被展示於全台第一座太陽能車站─台鐵南科車站候車大廳。

Mignonneau與Sommerer（2005）提出互動電腦裝置創作，設計的是隱喻、情感、自然、直覺和多形態介面，所創作的互動經驗是藝術，也是設計，也是娛樂和教育娛樂（edutainment）。在創作其互動系統時，他們常會用嶄新的介面解決方法開發可以配合觀念和隱喻內容的新介面科技。 Iriyama與Sato（2009）開發「算術花園」（Arithmetik Garden）互動藝術裝置，用身體來表現算術。其分析展覽期間所蒐集的資料顯示，觀看者的行為與電腦所算出的最佳解不同，另外也顯示觀看者的情緒改變可以靠互動監視而察覺出來。

透過結合公共藝術、感測互動、數位形體的實驗性方法，跨領域溝通、新媒材、互動感測技術與數位形體共構等研究議題分析與設計，並定義新媒材與技術，將會以新的溝通傳播行為建構人的多重感知。數個感知器所形成的多重感知器是互動環境中最重要收集環境資訊的元件，此多重感知亦是本研究的研究所關注的議題，即運算如何可以對使用環境有所回應？感知科技如何可使運算系統對環境敏感，即便我們從這個實體或社會背景換到另一個背景時，我們的運算裝置也會跟著改變？這也牽涉到我們對於民眾參與計畫的設置與重視。

操作手法藉由電腦輔助設計，我們重新詮釋梭子的原本形態，以一種靜態的造型卻有動態的意向作為設計的發想。藉由參數化的演算特性，設計以非線性形態來呈現流動的美感。從 Frederick Kiesler 1930 年代到 John Lautner 1970 年代這些建築師提煉了以創新建築材料型塑的建築標準語彙，使用流體表面形狀及變化多端的柔滑造型來建造建築 (Rosa, 2003)。藉由非傳統斷面來源塑形來決定造型，以控制結構線技術輔助演算規則來完成形式創作，並藉著這種來回的演算，提出不同種類的演算結果，作為測試基本概念在美學形塑上的工具。

陳聖智＋「I-FUN設計團隊」 (2009. 09) 。台鐵南科車站站體新建工程公共藝術設置計畫競圖首獎得標金額 100萬，臺南縣政府工務處。

互動架構圖表一

「跨學科領域的對話與操作」「公共藝術與城鄉發展的關聯性」「企業與人文關懷．藝術互動的可能性」

梭數位之旅 Shuttle Digital travel IFUN TEAM

「科技能源．人文藝術」

背景：台鐵南科車站位於縱貫鐵路與西拉雅大道交接處陸橋下方南側，位居台鐵善化、新市車站間，是全台第一座太陽能車站，新市鎮以太陽能光學產業為主軸，南科火車站也設置太陽能光電板。配合南科科技形象及搭上節能減碳列車，規劃為太陽能車站，更是具有創意的規劃。

策略：企劃分「造型」、「互動與溝通」及「永續營運」三大主軸進行，希望提供專業及創意，共同擘畫台南縣與台鐵局的「希望工程」。

「科技能源．人文藝術」

本計畫在傳統公共藝術「美化建築物與環境」（文化藝術獎助條例第九條）的意義之外，本計畫承沿此特點並兼顧四個目標課題，台鐵局的人文形象伴隨台南科學園區全球化的文化策略架構，也在逐次同謀完成後累積、成長： (A)展現台鐵局安全、環保、省能、永續且多元的企業形象； (B)表達對區域、社區、土地、人的親善； (C)增加與民眾互動機會； (D)創造公共藝術永續經營的意念。

造型計劃：依照基地狀況，設計site-specific的作品，整合打造專屬且獨一無二的公共藝術。本企畫案將以當地藝文、環境形貌為出發點，完整呈現在地精神的投射，及台鐵局意欲傳遞、溝通的企業形象與訊息。「創設一個公共藝術」是造型設計的第一層使命；這個場域的設置不僅是一個地理學的存在，是一個符號學的形態，同時也具備傳播學的溝通！造型的本體除在美學與地景上獨立存在，也創造承載後續展演及民眾參與計劃的平台。溝通計劃：「溝通」係本規畫案的核心價值，對象多層次，手法綿密，針對不同目標對象採取差異策略方案。

地點觀眾（on site）： 1. 疾行而過的觀眾雖是過客，還是得以欣賞光影互動之微妙。 2. 等候列車的觀眾可在作品探索互動，並得感受或參與《梭—數位之旅》展演活動； 3. 光影互動除美學意義外，尚有感應列車時刻之提醒作用，作為台鐵局與大眾社會溝通的平台。非地點觀眾（non-site）： 1.《梭—數位之旅》指數成為旅客生活的一部分，台鐵局可藉由人文藝術手法宣傳企業形象； 2.由網路進行即時互動； 3.學童則以學習單為重要媒介，傳播鐵道與科技知識。

第一層意義：「台鐵南科車站」運用空中廣場串連車站站體空間，台鐵局擁有一百二十一年的歷史，在科技先進的南科園區設立太陽能車站，可謂古典與現代的結合。《梭—數位之旅》亦成為一個「活性的」、「無遠弗屆」的科技運輸溝通器與象徵，亦是本計劃案《梭—數位之旅》的概念設計之一。本公共藝術與民眾互動的機制設計，已超越傳統「民眾互動」概念僅以接觸性、身體性為界限的理解。

第二層意義：《梭—數位之旅》是台鐵局對民眾、環保、土地倫理以及新能源重視的一項具體行動。在我們的設計中，藉由記憶的是人的世界，憶起流動空間的「意像」，以及並非僅為創造一個地標，而是以實際的感受、具體行動，提醒群眾。梭的意象同時意喻川流生生不息，所有的移動傳遞都為生命無止息的繁衍，正如同台鐵局對廣大民眾的企業承諾。

INTERACTIVE DEVICE

第三層意義：《梭—數位之旅》是台鐵局以一種企業永續經營的承諾，結合科技太陽能與創設永續性公共藝術機制的創舉。為社區與整體場域搭起溝通的平台，也是公共藝術主要的核心價值。本團隊將提議一種永續性的參與，每年規畫設計發想創意計畫，透過設計師進行創作，定時集結成果發表，讓《梭—數位之旅》藝術與設計活動定時定點為台鐵局塑造親民且重視民眾的想法。

民眾參與計畫：

藝術語言：採用現代藝術手法架構出與台鐵南科相會輝映之作品，而科技藝術的情節處理亦將作品導入普羅大眾的情感之中。節/潔能美學：作品媒材上，形構出一發光彩色亮梭體，呈現作品透亮輕盈之感。由此增加與民眾的對話關係，在視覺的互動裡推行「節/潔能美學」。成為一個與民眾生活息息相關的互動藝術，一個具有生命的藝術作品。

陳聖智＋「I-FUN設計團隊」 (2009. 12) 。法務部調查局高雄市調查處公共藝術設置案競圖第二名，法務部高雄市調查處。智慧拼圖 SMART PUZZLE

法務部調查局高雄市調查處擴建工程公共藝術設置案 Ministry of Justice Investigation Bureau Kaohsiung City Investigation Branch Expansion Project Public Art Case Set

Innovation 創新

Interactive Green Energy 互動

綠能

科技與藝術的結合

城市與地景的藝術

創意的設計概念

我們想像在蒐集拼湊這些線索時，連結其事物的關聯性，形成最終的真相。這個過程便是拼圖的過程，因而本次公共藝術計畫一切的概念與形式便從「拼圖」開始。高雄市調處為調查局在高雄的分部，在這次的擴建工程公共藝術設置案中，團隊緊密組織、合作無間、使命必達的精神，為貫徹本計畫的策劃理念。精確、效率、分工合作的團隊精神，加上拼圖的完整概念，便形成「智慧拼圖」，為此計畫的宗旨與計畫名稱。

(一) 「跨學科領域的對話與操作」； (二) 「公共藝術、國際視野與公共建築發展的關聯性」； (三) 「科技與人文關懷．藝術互動的可能性」。

高雄市調查處擴建工程公共藝術設置點共兩處：第一處位於入口門廊迴車道中間，為增強調查處入口意象，以科技偵查、線索拼湊、團隊合作的意象為主要訴求；第二處位於周圍人行道旁圍牆，為表達資訊流動、攔截有用訊息意象為目的，與民眾互動，表達調查處的親善與服務宗旨。

公共藝術設置計畫之總體目標係提升公共空間廣場使用品質，本計劃將以體現人與造型的呼應，根據「資訊傳遞意象」的特點，創造優質的生活空間。作品所選用之材質都是具有美觀、環保且容易維護之建材。例如，照明將安置適當亮度之LED燈，採取省能安全、樸實自然風格為照明原則。省能節約是朝永續經營的基本必備要求，本作品在照明上採用LED燈具，可符合省電耐用的優勢，對日積月累龐大的電費是一大福音，造型也加入調查鑑識的元素與拼圖真相之意象為考量。在設計理念歸納為三層涵意：

(一) 展現高雄市調處人文、國際、科技、永續且多元的公共形象，以及精確、效率、合作的團隊精神； (二) 表達對區域、社區、環境的親善； (三) 增加與民眾互動機會； (四) 創造公共藝術與高雄前金區永續經營的意念。

本階段的計畫重點，著重在提升民眾對科技互動藝術的體驗與認識。法務部調查局高雄市調查處位於高雄市市區，對於這個位於「科技、節能、創新、整合」的公部門公共藝術，提供民眾了解互動藝術教育的意義，對於互動藝術的啟蒙，具有指標性的意義，並且對於科技藝術的播種是具有一定程度的啟發性。

新科技帶入互動藝術的領域應用。作品可提供平時駐足參觀的民眾，作為認識作品與了解互動藝術的媒介，透過告示牌與現場白天或夜間作品的感受，提供小卡寫下他們的心情，作為公共藝術數位之旅─智慧拼圖的回響，也分享不同參與民眾的觀點，成為此公共藝術互動精神的一部分。

(一) 造型計劃：

(二) 溝通計劃：「互動」係本規畫案的核心價值，對象多層次，手法綿密，針對不同目標對象採取差異策略方案。好的公共藝術除了可以與人互動，更可增進情感交流的機會。地點觀眾（on site）： 1. 疾行而過的民眾雖是匆匆一瞥，還是得以欣賞光影互動之微妙。 2. 活動使用時的觀眾可在作品探索互動，並得感受或參與《智慧拼圖》展演活動；光影互動除美學意義外，尚有感應「人之存在」之提醒作用，作為高雄市調查處與大眾社會溝通的平台。非地點觀眾（non-site）： 1.《智慧拼圖》互動指數成為群眾生活的一部分，高雄市調查處可藉由人文藝術手法宣傳教學、研究與服務形象； 2. 經由網路進行即時互動與國際經驗分享； 3. 民眾則以導覽手冊為重要媒介，了解鑑識科技知識與偵查技巧。

LIGHTING CONTAINER 光之容器

陳聖智＋「I-FUN設計團隊」 (2009. 12) 。國立臺中第一高級中學圖書資訊暨教學大樓興建工程公共藝術設置計畫競圖第三名，國立臺中第一高級中學。

IFUN TEAM

本公共藝術期望傳承先賢繼往開來的精神，以台中一中的自由、開明的校風，繼續注入於新生的學子中，如蒲公英般傳遞生命的知識，生生不息。

國立臺中第一高級中學圖書資訊暨教學大樓興建工程公共藝術設置計畫

知識蒲公英 Knowledge Dandelion IFUN TEAM

一、背景國立臺中第一高級中學圖書資訊暨教學大樓公共藝術設置點位於圖書資訊暨教學大樓興建工程前的景觀草坡，壁鄰景觀水池。基地原為慎思樓所在地，是本校重要的教學大樓，因建築體老舊不敷教學使用，改建為圖書資訊暨教學大樓。規劃的圖書與講堂空間，為全校提供更理想之知識學習傳播與服務，為頂尖的高中提升優質的學習環境與國際學術交流。在此脈絡之中，建立藝術創新、體現自由文風的精神，傳遞知識寶庫，凝聚師生之情，正是於此公共空間發揮無比的力量，也站著舉足輕重之角色。

從人文到科技的觀點上，本身就傳達一種相互結合與支持的訊息。在環境意識與環境倫理覺醒的當代生活中，圖書資訊是日常生活不可或缺的，本團隊期盼以《知識蒲公英》公共藝術構築出「知識傳承的公共廣場」，並建置藝術作品中的溝通與互動平台。除了回應當下迅速的社會變遷與流動的資訊，也顯現本策展執行團隊的現代化思維，也為「圖書資訊暨教學大樓」公共藝術設置計畫進行時代與國際化接軌，並合社區民眾參與，見證新科技化學空間的建築美學。 (一) 展現台中一中人文、國際、科技、永續且多元的學術形象，以及好奇、探索、進取的精神； (二) 表達對區域、社區、師生的親善； (三) 增加與民眾互動機會； (四) 創造公共藝術與師生校園空間永續經營的意念。

(一) 「跨學科領域的對話與操作」 (二) 「公共藝術、國際視野與校園發展的關聯性」 (三) 「學術與人文關懷．藝術互動的可能性」

「科技能源．人文藝術」策略：企劃分「造型」、「互動與溝通」及「永續營運」三大主軸進行，希望提供專業及創意，共同擘畫台中一中的「希望工程」。

「科技能源．人文藝術」造型計劃：溝通計劃：依照基地狀況，設計site-specific的作品，整合打造專屬且獨一無二的公共藝術。本企畫案將以當地藝文、環境形貌為出發點，完整呈現在地精神的投射，及台鐵局意欲傳遞、溝通的企業形象與訊息。「創設一個公共藝術」是造型設計的第一層使命；這個場域的設置不僅是一個地理學的存在，是一個符號學的形態，同時也具備傳播學的溝通！造型的本體除在美學與地景上獨立存在，也創造承載後續展演及民眾參與計劃的平台。

非地點觀眾（non-site）： 1.《知識蒲公英》互動指數成為群眾生活的一部分，台中一中可藉由人文藝術手法宣傳教學、研究與服務形象； 2. 經由網路進行即時互動與國際經驗分享； 3. 師生則以學習單為重要媒介，傳播圖書與科技知識。

不同顏色高輝度的LED。

LED單元。

太陽能電池

LED模組牆。

公共藝術「跨學科領域的對話與操作」建議設置位置：「公共藝術與城鄉發展的關聯性」景觀草坡

「企業與人文關懷．藝術互動的可能性」

高雄市調處公共藝術

台鐵南科車站

─ 智慧拼圖

公共藝術─ 梭數位之旅

一心二葉 One bud two leaves

E.F INDUTRIAL CO.LTD 義峰實業有限公司北部第二高速公路臺北聯絡道信義支線公共藝術D案設置案

具有文山在地經濟作物色彩融合細胞生命體的地景細部有機的山稜紋理設計數位幾何的運算美學

創意互動與科技實驗室 媒材與設計思考認知實驗室 文化創意與城市規劃實驗室 數位藝術創作與應用工作坊 數位典藏與出版工作坊數位「學習」做為數位內容的實踐。

形塑「數位內容」需要某個故事或論述想像（共同的記憶）、某個傳奇（符合當代需要的編撰），來突顯之所以與眾不同。不管是故事，還是傳奇，必須含有某項當地、在地的文化基因 (吳錫德，2004)。吳思華(2009)文化力是未來國力的成長關鍵，對外是國家形象的延伸，對內則是國民創造力與生活品質的基礎。文化力的本質，是一個城市或者地區的生活型態展現，在區域競爭中，形成獨特的競爭優勢。(打造台北城南文化產業生活園區計畫)

德國ZKM、荷蘭電子藝術節、林茲藝術中心、數位內容創意園區與虛擬空間等新的全球概念… 1.「設計系統」：從生產、市場化到消費等整體生產環節之經濟體系的連結，做一資源之結合與運用。 2. 「創新系統」：整合各個領域之技術。 3. 「互動學習系統」：提供同領域或跨領域之交流與互動空間，藉此激發出更寬廣的構思與科技。

數位化保存記憶空間，永續傳播文化產業命脈文化創意產業伴隨著科技的進步，逐漸成為生活文化中重要的產業項目

第一個層次孔子曰：「益者三友：友直，友諒，友多聞。」 (《論語·季氏第十六篇》)

同時具有科技（數位）、文化（內容）與商業（產業）的要素，形塑複合性的知識密集產業，並整合人對文化本身的掌握能力

第二個層次

有質、有量、有多文 (做研究、跨領域)

創造力就是將事物連結起來的能力。 Creativity is just connecting things. by Steve Jobs(p.133)

用科技說故事：空間的創新體驗與新媒介感知

SEE U ~

Thank you *^_^*

國立政治大學 1012 傳播學院

2013/03/21 星四 18:20-20:50

設計思維 Design Thinking

Week5

Dr. S. C. Chen

Instructor: 陳聖智 Sheng-Chih Chen 傳播學院數位內容碩士學位學程專任助理教授 scchen222@gmail.com 0932138477 研究室：傳院大樓 408 R 上課地點：大勇樓 315 傳院電腦教室 20130321 上課內容流程用科技說故事：空間的創新體驗與新媒介感知 The Right Tool at theRight Time: From Drawing to Sketch; From Pen to Computer(Visual Objects, Words,and Meaning)

數位敘事與影像集錦

彩色與黑白描圖 vs. photoshop 臨界值效果運用

Illustrator CS5 課程 LOGO 製作流程

文字與圖片點陣化效果

海報設計底圖快速成形

點陣化馬賽克應用(宣傳符號製作)

(一) 彩色與黑白描圖 vs photoshop 效果運用 ………………………………………………………………………………………………………

(二) LOGO 製作流程掃描器 / Photoshop 影像處理 / Illustrator 即時描圖 / 上色

………………………………………………………………………………………………………

(三) 文字與圖片點陣化效果 ………………………………………………………………………………………………………

(四) 海報設計底圖快速成形(光澤/漸變效果) 單位公厘 210x297(A4) 置中勾選畫板圖層背景(給予色彩) 做漸層背景圖案(先畫圓由小到大) 漸變工具 4 階各點一次旋轉 Alt(改變旋轉錨點的中心) 選擇 5 度 Ctrl+D(連續按自動複製) ※記得要無框線後層則複製幾組做透明度(不透明度)與大小及前後順序變化變化顏色 Ctrl shift +路、街合併為一層最上層 / 做剪裁遮色片 ………………………………………………………………………………………………………

(五) 點陣化馬賽克效果應用圓：雲霧(以圓來做) 視窗 / 路徑管理員相加 / 展開 →相減 / 上減下 / 展開 / 調整位置大小在圖層上改名以區分圖層作用複製五層改名稱淺色基本大點中點小點改變雲霧大小大點：用框線加粗 8 點(記得點物件) 中點： 15 點小點： 25 點 1. 大點圖層物件 / 點陣化物件 / 馬賽克寬度 50 按使用比例解散 / 選黑 / 反轉圓角.5. 變形 / 個別變形 / 縮小 / 120 2. 中點圖層：(完整順序如大點步驟) 點陣化馬賽克解散選取相同 / 填色 / 反轉 / 刪除 / 風格化 / 圓角變形 / 個別變形 / 縮小 / 80 3. 小點圖層：(完整順序如大點步驟) 變形 / 個別變形 / 縮小 / 40 三個重疊會有點狀 Ex. 可個別刪除大點，中點也是可全選把印刷黑改成全黑

4. 淺色圖層：點陣化馬賽克選取圓角淺色用淺灰縮放 70% (用錨點會破壞路徑) 用淺灰做圖形灰色減掉底下/ 展開做勾邊的效果選灰點陣馬賽克… 變形 70% 組合五個圖層 ctrl+A ctrl+G(重新群組) 先全關留一 CtrlA 全選 CtrlX 剪下 CtrlF 貼至上層最後大群組一次製作「禁止」符號「禁止」符號水平垂直置中製作「菸」的造型

國立政治大學 1012 數位內容學士學位學程

2013/04/11 星四 18:20-20:50

設計思維 Design Thinking

Dr. S. C. Chen

Instructor: 陳聖智 Sheng-Chih Chen 傳播學院數位內容碩士學位學程專任助理教授 scchen222@gmail.com 0932138477 研究室：傳院大樓 408 R 上課地點：大勇樓 315 傳院電腦教室整合行銷傳播：微電影、紀錄片與微廣告影像系統之賞析與分析微電影指運用在網路或者行動裝置上播放，具有完整故事情節，完整拍攝劇組的企劃製作，5-10 分鐘內以說一則完整的故事為主，再適當的把想傳達的理念或產品、品牌包裝整合置入廣告行銷的「微廣告」手法。「微電影」、「微廣告」從產品行銷、品牌代言到城市行銷，因製作成本低，從原創劇本、拍攝製作、傳輸擴散到影音平台播放；成本小、時間短，經由網路、智慧型手機、平板電腦等新媒體平台播放引發產業鏈解構，並重新建構「微商機」。個人化、移動性與社交性的新傳播科技影響下，因此，感動行銷是致勝關鍵。紀錄片 1.田野調查：資料的收集與調查。開始拍攝前的準備構思，傳達真實世界，例如網路資料收集，或是實地勘查。 2.採訪、攝影：拍攝內容的規劃，選擇重點採訪及拍攝。 3.旁白、剪接、配樂：對於拍攝內容的詮釋與觀點，將採訪、攝影的內容，透過剪接、旁白與配樂，拍攝者詮釋其觀點，並將其觀點呈現在觀影者面前，並表達自己的詮釋與觀點。拍攝紀錄片時，攝影機應主動幫觀影者去發現事情、指出作者想表達的是什麼？事件特殊點在何處？紀錄片協助受聽眾者平時所不容易意識到的事物或想法，帶些主動發掘與探索。影像系統影像系統可解讀電影的多層意涵，藉由分析影像、剪接模式、攝影構圖及導演的意識形態，建構一套系統化的影像知識。

案例百事可樂 - 把樂帶回家親情 http://www.wememap.com/node/1609 國泰 50 週年發現幸福 MV http://www.youtube.com/watch?v=73LwTqq8T3o&feature=2_2_1&list=PLlzkSQoG Cqe1C8iUdkA4pf2Ktu699w4DU&index=0 FORTE 微電影【尋找。愛】完整版生醫 http://www.youtube.com/watch?v=4ts3TTVxIx0 學生作品(光碟中)

Premiere Pro CS6 環境介紹 and 指令素材面板/時間軸面板/視訊格式/圖片格式/音訊格式擷取>{數位>{1394tdv、檔案類比(錄製) 編輯>{in/out 點順序特效>{轉場覆疊濾鏡聲音>{匯入、錄製匯出匯出>{dvd/vcd ,AVI / mov, mpeg… 影像解析度 Standard Definition 標準解析度(一般簡稱 SD)及 High Definition 高解析度(一般簡稱 HD）； HD 又區分有 HD ready、HD、Full HD (1920×1080，水平畫素為 1920，垂直像素為 1080)等規格 i 是指交錯掃描（interlace），p 是指循序掃描（progressive） 1080i，i 是指交錯(圖場)( CRT 螢幕為 i) 1080p，p 是指倍頻 1080 是指高，寬是 1920 720 是指高，寬是 1280 480 是指高，寬是 720 Dv 帶>轉出是 avi，一小時約要 13gb HD 硬碟式 DV>轉出是 MPEG DVD 式的 DV>轉出是 MPEG 要畫面跑的順最好是 AVI 檔，MPEG 跑 PRE 畫面會不順 OPEN New Project Taiwan / NTSC 台美日本 PAL 大陸(東歐或大陸 25.00 fps 影格) 差異： 1. NTSC 1 秒 29.97 / 720x480 25 影格 / 720x576 寬高 2. 畫面大小 Fps(frame per second)每秒

影格 frame 標準 32KHZ 音質兆赫 48KHZ (檔案大) Premiere Pro CS3 介面介紹課程教授 CS6

素材資訊素材面板清單特效面板時間軸工具箱下拉式功能列時間軸螢幕素材螢幕聲音面板

素材面板：可匯入影片 avi、mov、wmv、mpg… 圖片 psd、jpg、png、gif、tif、tga… 聲音 mp3、wma、wav、aif… 破壞性的格式壓縮過聲音檔最好的 cd 音質環境指令說明匯入圖片 / 在空白處雙響面板可人性化調整素材資訊影片有四個值 00 : 00 : 00 : 00 小時分秒影格 1 30 NTSC 720x480 1 25 PAL 720x576 DV 拍直接為 avi(專業用，畫質好，母帶不壓縮) 清單搜尋

磁頭往前一影格(不是一秒喔) 磁頭 Mark 做記號(也許待會要剪掉) 到上一個記號循環安全框圖片、影片安全框文字安全框可清除 in、out

磁頭到 in 點選 Out 點只播放 in、out 點之間飛梭(按住不放) 滑鼠移動預設 3 軌可增加右鍵 / add track 折疊打開放大縮小時間軸的單位磁頭目前所在的單位視訊軌上蓋下鎖住即無法編輯磁吸的感覺 Insert 插入不覆蓋插入有覆蓋 ………………………………………………………………………………………… 音軌 Mono 單聲道 Stereo 雙聲道 5.1 5.1 聲道檢視音軌視訊軌通常用雙聲道 Sequence01 時間軸如同一個容器可開許多 sequence Sequence 中可放 sequence 可增加 sequence02 崁套(大陸) 在 sequence02 中置入已做好的 sequence01

文字 title 文字打在內部(安全框)中下方有樣式(版)可直接套用 Title: transform Properties Fill: solid 最普通 Linear Grdi 線性漸層放射性漸層 4 色漸層 Strokes: inner 內線 Outer 外線 shadow 線條也可做漸層文字做完可關掉成為一種素材認識文字介面可對齊 align Center Distribute 置入圖 Ex. 4 張同時置入如電子相片自動轉場三點編輯 Insert 插入不覆蓋 Overlay 插入覆蓋影音分離三招： 1. 右鍵 unlink 影音分離就可錯開殺掉聲音 2. Clip / unlink 3. Alt 鍵按著算圖的標誌：可移動、可雙響磁吸：磁頭按 shift 輔助可準確到某一時間點。此讓素材有磁吸效應基本動畫：effects controls Premiere 同一素材的動態要素 z 位置 z 大小

z 顏色 z 角度 z 形狀(非同一素材)

練習圖跑進來碼錶 position 按碼錶一下，出現一個關鍵影格 -500 拉動到 1 秒時再給一個 (打 0)再拉

關鍵影格

在 1 秒時出現 scale Tools 工具箱選取 / 移動 / 裁切工具軌道選取工具：只有右邊的素材才會選中鋼筆工具調整關鍵影格 ripple：裁切不影響其他素材，素材總長有影響 rolling：裁切影響相鄰素材，素材總長無影響變速工具裁切工具時間軸縮放工具時間軸移動工具

技術課 class3_20130509

Design thinking x iPad Interactive Guiding Book 2013.05.09

Todayâ&#x20AC;&#x2122;s topic - iBooks v.s. iPad/iPhone app - iBook Author + iAd Producer - openFrameworks - OF introduction - getting started - create your first OF application

iTunes iBookstore

iTunes App Store

iBook Author eBook iAd Producer

openFrameworks

iPhone App Android App

iAd Producer create

ibook widget import

iBook Author

http://bookry.com

Openframeworks

http://www.openframeworks.cc/

openFrameworks is an open source C++ toolkit for creative coding.

http://www.delicious.com/stacks/view/Fuhl88

Level

OF root folder

workspaces

projects

3 a project

source files

Android app OSX/Win desktop app

iOS app

main.cpp

main.mm

testApp.h

testApp.cpp

testApp.mm

iPhone/iPad application using OF using c++ iPhone/iPad app main.mm testApp.h testApp.mm

declaration (parameter, method) implementation

#Declaration #pragma once #include "ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp{ ! public: void setup(); void update(); void draw(); void exit(); ! void touchDown(ofTouchEventArgs & touch); void touchMoved(ofTouchEventArgs & touch); void touchUp(ofTouchEventArgs & touch); void touchDoubleTap(ofTouchEventArgs & touch); void touchCancelled(ofTouchEventArgs & touch); void void void void };

lostFocus(); gotFocus(); gotMemoryWarning(); deviceOrientationChanged(int newOrientation);

#Implementation #include "testApp.h" //-------------------------------------------------------------void testApp::setup(){! ! // initialize the accelerometer ! ofxAccelerometer.setup(); ! ! //If you want a landscape oreintation ! //iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT); ! ! ofBackground(127,127,127); } execute only one

#初始值

//-------------------------------------------------------------void testApp::update(){

#變數

}

update

loop

//-------------------------------------------------------------void testApp::draw(){ ! } loop

#視覺元素

//-------------------------------------------------------------void testApp::exit(){ }

setup

draw

//-------------------------------------------------------------void testApp::touchDown(ofTouchEventArgs & touch){ } //-------------------------------------------------------------void testApp::touchMoved(ofTouchEventArgs & touch){ } //-------------------------------------------------------------void testApp::touchUp(ofTouchEventArgs & touch){ } //-------------------------------------------------------------void testApp::touchDoubleTap(ofTouchEventArgs & touch){ } //-------------------------------------------------------------void testApp::touchCancelled(ofTouchEventArgs & touch){ } //-------------------------------------------------------------void testApp::lostFocus(){ } //-------------------------------------------------------------void testApp::gotFocus(){ } //-------------------------------------------------------------void testApp::gotMemoryWarning(){ } //-------------------------------------------------------------void testApp::deviceOrientationChanged(int newOrientation){ }

#include "ofMain.h" #include "testApp.h" int main(){ ! ofSetupOpenGL(1024,768, OF_FULLSCREEN);!! ! }

ofRunApp(new testApp);

// <-------- setup the GL context

Take a Tour of the Examples

OF root folder

All examples

Output-related Graphics Image Fonts

Audio Video

Input-related Camera

Location

Touch + Accelerator

Native iOS-related OF + Native iOS iPhone GUI

Xcode Environment

Toolbar

Status

View Settings

Navigator

Editor

Debugger

Inspector

Library

Try to build and run an emptyExample

application targets information

src

addons libs

Build and Run

emptyExample

Your First OF Application

How to start? 1. create a copy of emptyExample in apps folder 2. rename the folder and .xcodeproj file 3. open the project 4. rename target 5. make sure it builds and runs

put your project in the right position

Rename

setup

Write code in testApp.mm

update draw

Play it!!

i. Draw a circle void testApp::draw(){ ! ofCircle(100, 100, 50); }

ii. Add color void testApp::draw(){ ofSetColor(200, 0, 0); ! ofCircle(100, 100, 50); }

iii. Add another circle void testApp::draw(){ ofSetColor(200, 0, 0); ! ofCircle(100, 100, 50); ofSetColor(200, 200, 0); ! ofCircle(150, 200, 20); }

iv. Set background color void testApp::setup(){! ! ofBackground(0,0,0); }

openFrameworks Documentation

http://www.openframeworks.cc/documentation/

技術課 class4_20130516

Design thinking x iPad Interactive Guiding Book 2013.05.16

Todayâ&#x20AC;&#x2122;s topic - show an image - change image on touch event - create animation with multiple images

iPad screenshots iPad screen size: 1024x768 resolution: 72 ppi icon size: 72x72 px

Portrait

Upside Down

Landscape Left

Landscape Right

Show an image

1024

(0,0) 768

(100,100)

image height

image width

1. show an image testApp.h ofImage myImage; testApp.mm

setup()

myImage.loadImage("images/meow1.png"); ofEnableAlphaBlending(); myImage.draw(100, 100);

draw()

image type: PNG, JPEG, TIFF, BMP, GIF position: [project]/bin/data/ http://www.openframeworks.cc/documentation/graphics/ofImage_.html

image #1

image #2

image #3

Change images on touch event

touch event

change image

2. change images on touch event ofImage imageA, imageB; void testApp::draw(){ ... touched = false; imageA.loadImage("images/map.png"); imageB.loadImage("images/map2.png"); }

checking flag setup()

void testApp::draw(){ ! if(touched) imageA.draw(100,100); else imageB.draw(100,100); } void testApp::touchDown(ofTouchEventArgs &touch){ touched = true; } void testApp::touchUp(ofTouchEventArgs &touch){ touched = false; }

Create animation with multiple images

animation

multiple images

loop

meow1.png

meow2.png

meow3.png

Array

index

x[0] x[1] x[2] x[3] x[4]

value

int x[5]; declare a array x x[0] = 4 assign value into array x x[1] = 2 x[2] = 13 x[3] = 1 x[4] = 5

1 OR

int x[5] = {4, 2, 13, 1, 5};

John

Amy

Mike

Cindy

David

For-loop initial

condition

addendum

for (int i = 0; i < 10; i++) { printf("Hi: %i", i); }

print array x for (int i = 0; i < 5; i++) { printf("print x[%i]= %i", x[i]); }

3. create animations using multiple images x[0] x[1] x[2] x[3] x[4]

image1

image2

#define FRAMENUM 5

image3

image4

image5

number of images

ofImage animationImage[FRAMENUM];

for (int i = 0; i < FRAMENUM; i++) { char filename[32];

setup()

sprintf(filename, "images/meow%d.png", i+1); animationImage[i].loadImage(filename); }

void testApp::draw(){ ! ofEnableAlphaBlending(); animationImage[currentFrame].draw(0, 0); currentFrame++; if (currentFrame > FRAMENUM - 1) currentFrame = 0; }

draw()

技術課 class5_20130523

Design thinking x iPad Interactive Guiding Book 2013.05.23

Topic - review openframeworks basic architecture - review basic programming language - press buttons - handle multiple views - change views by pressing buttons

How to study? - example code graphicsExample, advancedGraphics, soundPlayerExample, ...etc

- online document http://www.openframeworks.cc/documentation/

Level

OF root folder

workspaces

projects

a project

Project folder

Project file

source files

Android app OSX/Win desktop app

iOS app

main.cpp

main.mm

testApp.h

testApp.cpp

testApp.mm

iPhone/iPad application using OF using c++ iPhone/iPad app main.mm testApp.h testApp.mm

declaration (parameter, method) implementation

Basic programming language data type - int: 1,4, 3 ...etc - float: 0.24, 0.33, ...etc - string: “hello world”, “byebye!!”...etc - bool: true, false - char: ‘a’, ‘b’, ‘c’, ...etc

array - int iarr[3] - float farr[5] - char carr[2]

Basic programming language If-else int a = 3; if (a > 0){ cout<< "YES! a=" << a << endl; }else{ cout << "NO! a=" << a <<endl; }

For-loop for(int i=0; i< 5; i++){ printf("%d\n", i); }

Basic programming language Switch switch (stage) { case 1: //code here break; case 2: //code here break; case 3: //code here break; default: break; }

Basic programming language

Function void testFunction(){ char c[32]; sprintf(c, "%s, welcome here!", "Janet"); printf("%s", c); }

1024

(0,0) 768

(70,50)

image height

image.draw(70,50) image width

Press buttons (touch.x, touch.y) (150, 120)

(0, 0)

pressed ! (bt1.pos.x+bt1.width, bt1.pos.y)

(100, 100) 200 50

Button 1

(300, 100)

(500, 122)

(100, 150)

100 <= touch.x <=300 100 <= touch.y <=150 pressed condition bt1.pos.x <= touch.x <= bt1.pos.x+bt1.width bt1.pos.y <= touch.y <= bt1.pos.y+bt1.height

Press buttons bool testApp::isInsideImage(ofImage img, float pos_x, float pos_y, ofTouchEventArgs &touch){ if ((pos_x <= int(touch.x)) && (int(touch.x) <= (pos_x+img.width))) { if ((pos_y <= int(touch.y)) && (int(touch.y) <= (pos_y +img.height))) { return true; } } return false; } void testApp::touchDown(ofTouchEventArgs &touch){ //add some touchDown effect }

void testApp::touchUp(ofTouchEventArgs &touch){ if (isInsideImage(btImg[0], 200, 100, touch)) { stage = 2; } }

How to handle multiple view?

view #1

view #2

view #3

switch (stage) case 1: //draw break; case 2: //draw break; case 3: //draw break; default: break; }

{ view #1 here

stage = 1

view #2 here

stage = 2

view #3 here

stage = 3

view #1

view #2

view #3

Background

map1.png

map2.png

map1.png

Foreground

checkin.png

cancel.png

path.png

pin.png

circle.png

meow1~4.png

back.png

stage 1

stage 2

stage 3

Background

map1.png

map2.png

map1.png

Foreground

checkin.png

cancel.png

path.png

pin.png

circle.png

meow1~4.png

back.png

button: clickable image animation

press button + go to another view stage =1

stage =2 200

trigger button event

Button 1

view #1

stage =2

view #2

stage =2

stage =1

touchUp Event

view #1

view #2

#pragma once #include "ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" #define ANIMATIONNUM 4 class testApp : public ofxiPhoneApp { ! public: void setup(); void update(); void draw(); void exit(); ! void touchDown(ofTouchEventArgs &touch); void touchMoved(ofTouchEventArgs &touch); void touchUp(ofTouchEventArgs &touch); void touchDoubleTap(ofTouchEventArgs &touch); void touchCancelled(ofTouchEventArgs &touch); void void void void

lostFocus(); gotFocus(); gotMemoryWarning(); deviceOrientationChanged(int newOrientation);

function declaration

bool isInsideImage(ofImage img, float pos_x, float pos_y, ofTouchEventArgs &touch); ofImage ofImage ofImage ofImage ofImage ofImage ofImage

mapImg[2]; btImg[2]; aniImg[ANIMATIONNUM]; circleImg; pathImg; pinImg; backImg;

bool playAnimation; int currFrame; int stage; };

parameter declaration

testApp.h

void testApp::setup(){! ! // register touch events ! ofRegisterTouchEvents(this); ! // initialize the accelerometer ! ofxAccelerometer.setup(); ! //iPhoneAlerts will be sent to this. ! ofxiPhoneAlerts.addListener(this); ! //If you want a landscape oreintation ! iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT); ! ! ofBackground(0,0,0);

initialization

mapImg[0].loadImage("images/map1.png"); mapImg[1].loadImage("images/map2.png"); btImg[0].loadImage("images/checkin.png"); btImg[1].loadImage("images/cancel.png"); circleImg.loadImage("images/circle.png"); pathImg.loadImage("images/path.png"); pinImg.loadImage("images/pin.png"); backImg.loadImage("images/back.png"); for (int i=0; i<ANIMATIONNUM; i++) { char char1[32]; sprintf(char1, "images/meow%d.png", i+1); aniImg[i].loadImage(char1); } currFrame = 0; stage =1; playAnimation = false; }

testApp.m

void testApp::draw(){ ofEnableAlphaBlending(); cout << "stage " << stage << endl; switch (stage) { case 1: mapImg[0].draw(0, 0); btImg[0].draw(200, 100); pinImg.draw(930, 30);

draw view #1

if (playAnimation) currFrame = (currFrame+1) % ANIMATIONNUM; aniImg[currFrame].draw(800,450); break; case 2: mapImg[1].draw(0,0); btImg[1].draw(930, 20); break; case 3: mapImg[0].draw(0, 0); pathImg.draw(0, 220); circleImg.draw(100, 220); backImg.draw(30, 30); break; default: break;

draw view #2 draw view #3

} }

testApp.m

void testApp::touchUp(ofTouchEventArgs &touch){ switch (stage) { case 1: if (isInsideImage(btImg[0], 200, 100, touch)) { stage = 2; } if (isInsideImage(pinImg, 930, 30, touch)) { stage = 3; } if (isInsideImage(aniImg[0], 800,450, touch)) { playAnimation = !playAnimation; } break; case 2: if (isInsideImage(btImg[1], 930, 20, touch)) { stage = 1; } break; case 3: if (isInsideImage(pinImg, 30, 30, touch)) { stage = 1; } break; default: break;

view #1 --> view #2 view #1 --> view #3 play animation on/off

view #2 --> view #1

view #3 --> view #1

} }

testApp.m

技術課 class6_20130530

Design thinking x iPad Interactive Guiding Book 2013.05.30

Todayâ&#x20AC;&#x2122;s Topic - Play sound - Touch polygon

Play sounds

Play sounds - sound type - .wav, .aif, .mp3, .mp2, .ogg or .raw format. - .caf (Core Audio Format) afconvert -f caff -d LEI16@44100 -c 1 sound.wav sound.caf afconvert -f caff -d LEI16@22050 -c 1 sound.wav sound.caf sample rate

- put them into “project/bin/data/”

Play sounds #pragma once #include "ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { ! public: ! void setup(); ! void update(); ! void draw(); ! void exit(); ! ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void touchCancelled(ofTouchEventArgs &touch); ! ! !

void void void void

lostFocus(); gotFocus(); gotMemoryWarning(); deviceOrientationChanged(int newOrientation);

ofSoundPlayer mySound; };

testApp.h

Play sounds #include "testApp.h" void testApp::setup(){! ! // register touch events ! ofRegisterTouchEvents(this); ! ! // initialize the accelerometer ofxAccelerometer.setup(); ! ! //iPhoneAlerts will be sent to this. ! ofxiPhoneAlerts.addListener(this); ! ! //If you want a landscape oreintation ! //iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT); ! ! ofBackground(0, 0, 0); mySound.loadSound("cat.wav"); mySound.setVolume(0.75f); mySound.setMultiPlay(true); } void testApp::touchDown(ofTouchEventArgs &touch){ mySound.play(); }

testApp.mm

Touch polygon

Touch polygon ofInsidePoly() ofInsidePoly(...) bool ofInsidePoly(float x, float y, const vector< ofPoint > &poly)

1 (x,y) 2 3 14

13 12 11

10 9

6 8

Touch polygon #pragma once #include "ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { ! public: void setup(); ! void update(); ! void draw(); ! void exit(); ! ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void touchCancelled(ofTouchEventArgs &touch); ! ! ! !

void void void void

lostFocus(); gotFocus(); gotMemoryWarning(); deviceOrientationChanged(int newOrientation);

ofPolyline line; };

testApp.h

#include "testApp.h"

Touch polygon

void testApp::setup(){! ! ofRegisterTouchEvents(this); ! ofxAccelerometer.setup(); ! ofxiPhoneAlerts.addListener(this); ! iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT); ! ! ofBackground(0,0,0); ofSetColor(255, 0, 0); float i = 0; while (i < TWO_PI) { // make a heart float r = (2-2*sin(i) + sin(i)*sqrt(abs(cos(i))) / (sin(i)+1.4)) * -80; float x = ofGetWidth()/2 + cos(i) * r; float y = ofGetHeight()/2 + sin(i) * r - 100; line.addVertex(ofVec2f(x,y)); i+=0.005*HALF_PI*0.5; } line.close(); // close the shape } void testApp::draw(){ line.draw(); } void testApp::touchDown(ofTouchEventArgs &touch){ if (ofInsidePoly(touch.x, touch.y, line.getVertices())) { ofSetColor(255, 255, 0); } } void testApp::touchUp(ofTouchEventArgs &touch){ ofSetColor(255, 0, 0); }

testApp.mm

Next - Use sensors in iPhone/iPad - GPS data - Accelerometer - Design integration

附件工作坊教材列舉部分課程: 理論課+技術課

http://www.jumpscan.com/

Monday, April 8, 13

什麼是QRcode？

QR code • •

二維條碼的⼀一種 1994年日本DENSO WAVE公司發明，屬開放示的標準，現為日本最流行的二維條碼

手機對準QRcode

http://en.wikipedia.org/wiki/QR_code Monday, April 8, 13

(Quick Response Code)

拍照

解碼

獲得內容(開啟連結)

什麼是QRcode？

（版本訊息）（格式訊息）（數據與容錯密鑰）（數據所需模式）（定位標示）（校正標示）（定時標示）

Monday, April 8, 13

QRcode的應用

QRcode應用範圍相當廣：

• • • • • • • • • • • Monday, April 8, 13

倉儲&物流管理文件管理資產管理門禁＆差勤管理醫療管理郵件＆運輸管理生產管理折價券身分認證票券系統儲值系統

特性

Monday, April 8, 13

QRcode的特性

•

資料儲存量大以「012345678901234567890123456789」為例若是使用傳統的⼀一維條碼(barcode)，長度約為下：

若使用QRcode則可以縮減空間：

Monday, April 8, 13

QRcode的特性

•

資料儲存量大 QR code資料儲存容量

Monday, April 8, 13

數字

最多7,089字元

字母

最多4,296字元

二進位 (8 bit)

最多2,953 位元組

日文漢字/片假名 (Shift JIS)

最多1,817字元

中文 (UTF-8)

最多984字元

中文 (BIG-5)

最多1,800字元

QRcode的特性

•

資料帶著走以折價券為例，可以將原本的傳單、雜誌上的內容，轉成以電子形式儲存於手機中。

Monday, April 8, 13

QRcode的特性

•

複製客製化成本低由於QRcode可以印刷於各種材質上，所以適合各種平面媒體、室內廣告、戶外廣告，甚至各種動態多媒體上。

Monday, April 8, 13

QRcode的特性

•

抗污損＆具錯誤糾正能力 QRcode在設計上具有錯誤修正的能力，在製作的時候可以設定： L (7%)、M (15%)、Q (25%)、H (30%)的容錯率，讓條碼可以在部分毀損的狀況下還能被讀取成功的機會。需注意容錯範圍不包括條碼的定位點。而QRcode越來越多的特殊造型出現也是因為此特性而生。

√ Monday, April 8, 13

√

QRcode的特性

•

提供立即訊息

•

連結多媒體內容

•

方便購物或訂位

•

提供優惠折扣

•

舉辦促銷活動

•

個人內容記錄

Monday, April 8, 13

Create Your QR-Code

Monday, April 8, 13

Create Your QR-Code What you need to make this work？

Monday, April 8, 13

‣

A Smartphone, or Computer with Webcam, tablet computer

‣ ‣ ‣

QR-Code Generation QR-Code Reader Your Imagination

QR-Code Generation

Monday, April 8, 13

Create Your QR-Code

http://qrcode.kaywa.com/

Monday, April 8, 13

最簡易

Create Your QR-Code

http://zxing.appspot.com/generator/

Monday, April 8, 13

提供額外的Lib可以做開發

Create Your QR-Code

http://www.qrstuff.com/

Monday, April 8, 13

數據資料型態較多

Create Your QR-Code

http://www.quickmark.com.tw

Monday, April 8, 13

有中文，輸出設定可以微調

善用短網址減少QR-Code複雜度，讓手機能更容易去辨識

http://goo.gl/

Monday, April 8, 13

QR-Code Reader

Monday, April 8, 13

•

QR code 視力表

http://www.quickmark.com.tw/DownMobs/QRCode_LensCapabilityTest.pdf Monday, April 8, 13

QRcode實作技巧

•

Monday, April 8, 13

每個QR Code限定⼀一種功能 - 網址 - 書籤 - 聯絡人(vCard) - 聯絡人(meCard) - 電話號碼 - 簡訊傳送 - 電子郵件功能 - 加密功能 - 文字功能 - 地理資訊

QRcode實作技巧

四大QR Code操作技巧

Monday, April 8, 13

•

釐清活動目標與對象

•

創造動機，提供獎勵

•

事前進行條碼測試

•

成效追蹤，深度整合

•

智慧型手機使用者對QRcode認知度根據調查數據顯示，有93%的智慧型手機使用者知道QR-code，其中男性(95%)的認知程度略高於女性(90%)

EOLembrain東方快線2012-03「QR-code大調查」 Monday, April 8, 13

•

智慧型手機使用者對QRcode認知度近七成使用過QR code

EOLembrain東方快線2012-03「QR-code大調查」 Monday, April 8, 13

•

智慧型手機使用者對QRcode認知度 42%對QR-Code傳遞之商品興趣度高

EOLembrain東方快線2012-03「QR-code大調查」 Monday, April 8, 13

Case

Monday, April 8, 13

[ information ]

Monday, April 8, 13

只是方便連上網址？善用QRcode來加值

Monday, April 8, 13

Just a creative way to use QR codes on a intern resume.

https://vimeo.com/21228618 Monday, April 8, 13

Monday, April 8, 13

golfstromen : QR cloud project

http://golfstromen.nl/

Monday, April 8, 13

The Random Tatoo http://www.therandomtattoo.com/

Monday, April 8, 13

Business

Monday, April 8, 13

咀嚼好書

廣告商Grey Group最近結合電子書公司『四方創意』在香港執行了QR code的餅乾行銷策略，免費發送餅乾在當地知名的咖啡廳。當消費者以智慧型手機掃描時可獲得電子書的試用機會。名為" 咀嚼好書 "的活動在⼀一週內發送了8000個QR code 餅乾，就獲得網站點閱率增加45%，也占了總數12% 的銷售比率，居然僅在當地花了5000元港幣的活動預算。

Monday, April 8, 13

https://www.youtube.com/watch?v=10FrTyrhToM Monday, April 8, 13

Monday, April 8, 13

Coupons

Monday, April 8, 13

Social

Monday, April 8, 13

7-ELEVEN光合農場

Monday, April 8, 13

Line 的電腦版，可以透過QRcode來進行登入

Monday, April 8, 13

日本的QR Code墓碑

Monday, April 8, 13

City Hacking

Monday, April 8, 13

Gangnam Style QR Codes

http://2d-code.co.uk/gangnam-style-qr-codes/ Monday, April 8, 13

Time Magazine Designer Codes

http://www.setjapan.com/portfolio_category/qrcodes/ Monday, April 8, 13

Tokyo N Building Monday, April 8, 13

Monday, April 8, 13

Calvin Klein Jeans Monday, April 8, 13

Victoria’s Secret “Sexier than Skin” Monday, April 8, 13

進階玩法

Monday, April 8, 13

â&#x20AC;˘

Create your customize QR-code http://www.unitaglive.com/

http://www.qrhacker.com/

Monday, April 8, 13

http://nerdindustries.com/archives/project/qrmovie Monday, April 8, 13

Monday, April 8, 13

設計師設計的QRcode

Monday, April 8, 13

QRcoder造型實作技巧

Monday, April 8, 13

QRcoder造型實作技巧

•

造型QRcode要如何設計才容易讀

顆粒要大

顆粒要大是為了讓手機鏡頭能清楚的 "看" 到條碼，畢竟不是所有手機都有自動對焦鏡頭。如果活動希望越多人參加越好，那麼還是建議在可用範圍內讓條碼顆粒越大越好。而條碼裡的網址也不建議太長，反而可以多利用短網址來節省空間。

http://quickmarkapp.blogspot.tw/2012/11/qr-code-how-to-design.html Monday, April 8, 13

QRcoder造型實作技巧

•

對比要夠

⼀一般 QR Code 會使用黑字白底是這樣的組合顏色對比最清楚，避免對比度低的顏色組合 (例如：黃字白底)。如果設計師希望做白字黑底： 1) 少部份 QR Code reader app 還不支援解讀這種配色模式 2) 黑字白底或白字黑底只能擇⼀一！

http://quickmarkapp.blogspot.tw/2012/11/qr-code-how-to-design.html Monday, April 8, 13

QRcoder造型實作技巧

•

白邊要留

在 QR Code 的國際標準裡面，⼀一個完整的 QR Code 是必須在每⼀一邊都留有四個模組 ("顆粒") 寬的白邊。以星巴克條碼為例，上下左右用綠色線框起來的地方都應該屬於白邊範圍，但是它卻在部分區塊作了造型上的運用，因此可能會沒有平常的好讀。實務上，有些 QR Code reader app 會將條件放寬⼀一點，不會嚴格要求⼀一定要留足 100% 的白邊。星巴克的 QR 也還沒到毫無白邊的地步，所以還能被多數 reader 所讀取。不過大家在設計上最好還是能留則多留⼀一點白邊。

http://quickmarkapp.blogspot.tw/2012/11/qr-code-how-to-design.html Monday, April 8, 13

QRcoder造型實作技巧

•

定位點不能破壞

QR Code 之所以能夠 360 度都被讀取是因為它有定位點的設計。而這些定位點看起來像個 "回" 字 (常被我們戲稱是眼睛)，非常重要；眼睛戳瞎可就什麼都看不到啦。在設計上我們也常看到 QR Code 的眼睛被做成各式造型，這邊要注意的是您設計的圖案要與原來的眼睛在比例、顏色深淺上越相近越好。 http://quickmarkapp.blogspot.tw/2012/11/qr-code-how-to-design.html Monday, April 8, 13

information

Monday, April 8, 13

政治大學 陳聖智 設計思維課程與工作坊教材

政治大學陳聖智設計思維課程與工作坊教材