第三章 程式演算應用於視覺創作的可能性
在數位藝術領域中歷史最悠久、規模最浩大的年度盛事,當屬於奧地利林 茲市 (Linz) 舉行的林茲電子藝術節 (Ars Electronica)。該電子藝術節自 1979 年創 立以來融合藝術、科技、媒體與社會政經等跨領域脈絡的論述,配合系列演講、
研討會、展覽、表演、電子音樂會及實驗性作品,交織成這場盛會。而 2003 年 的主題為「程式碼一現今世代的語言」(Code-The Language of Our Time)。
近十年來,媒體與數位藝術的快速發展,不斷督促有心人士去思考並發展 其專屬的理論架構、美學論述及形式表現等,然而藝術是不是真的可以用程式 去寫?軟體的本身也是藝術嗎?在此屆藝術節中,大膽提出了「程式碼等於法 律」、「程式碼等於生活」、「程式碼等於藝術」的新世代預言,宣告程式碼早已 滲透至現代資訊社會的各個層面,也預定了未來發展的方向。。
由前述文獻資料的了解,我們可以預見以「程式碼」為設計導向的軟體,
將在未來的數位藝術中佔有一席之地。而其關聯於碎形幾何與解構思維的關聯 性為何?如何運用現有的軟體程式進行創作?程式語言是個龐大又複雜的專業 知識,運用開放性的語法來源(Open Source),藉由改變基礎參數及物件(Object)
來進行視覺藝術創作,重新審視基礎物件在程式語言的運算下所產生出的變化 及物件自我衍生運算的數位美感。
第一節 碎形與程式運算的關聯性
我們由碎形的產生背景可以得知,碎形起源於對大自然不可測的動態過程 所做的程式運算結果,若對碎形程式中的某些運算的參數作改變,就會形成結 果完全不同的數位圖像。大部分的碎形程式所採用的軟體設計方法,也多採開 放性的設計,也就是直接將程式內碼予以公佈提供給其他使用者共同進行研 究,以眾人之力開發新的程式設定規則。這樣的軟體開發模式也正漸漸在網路 世界中,成為一股新興的力量。
其原因除了可以結合各方面的人才投入相同的研究主題外,也更容易使得 初學者有踏入學習的基礎,這點我們可由 MIT 媒體實驗室所開發的 DBN(Design By Numbers)及 Processing 兩套運用 JAVA 語言所設計的軟體,以及 Flash 軟體 中所使用的 Action Script 中可以得知。這些軟體除了 Flash 外均採免費下載的方 式,同時建構龐大的教學資料庫及程式碼供使用者使用,而 Action Script 也有 相當龐大的網路社群提供完整的程式語法與教學檔案。而藉由交換心得的方式 使軟體能力與可能性得到極大的發展。
由此方式開發成功的例子如前文所提的「Linux」,就是藉由網際網路的通 訊力量,結合不同專業領域的人才所集合而成的優良軟體,其運算操作能力甚 至更勝於微軟所開發的視窗作業系統(Windows)。而上述的幾種軟體均有一個 特色,即是需要透過程式碼及少數程式介面即可完成複雜的運算工作,也因此 使得許多用慣了視覺圖形介面的軟體使用者望而卻步。因為程式語言對於非相 關科系的使用者來說是極其困難的課程,當初微軟開發視窗系統也正是為解決 此一問題而發展的,結果也證明其策略造就了電腦快速普及也加速了許多產業 的數位革命。
若是軟體工程如此發展可造就如此的成果,又為何要重新回到生澀難懂的 程式語言?其關鍵在於「限制性」,從現有的套裝軟體中無論是 2D 或 3D 的繪 圖軟體,有相當多的創作者可以非常熟練且創意十足的運用軟體進行創作,然 而這樣的的方式真的是創作?還是仍受限於軟體程式中的「選項」?從過去操 作軟體的經驗中我們常需要記憶許多按鍵、選項,而且在新版軟體更新後系統 通常跟著越來越龐大,使用者的負擔也無形加重。程式語法的優點則可由此對 比出來,而其最大的優勢即是擁有無窮盡的可能性與實驗性格,而且新近的程 式語法也朝向簡單化、模組化的方向發展,企圖在圖形選項與程式語言中找到 一個較佳的平衡點。
本研究將程式語法的運用放於「物件自我衍生」的焦點上,藉由單一或少 數物件結合軟體的程式語法進行運算,在運算的過程中引用碎形理論的「自我 形似」及隨機的不可測性加入運算中,甚至運用其它輸入訊號的介面捕捉操作 者的操作訊息做為「亂數」計算的依據而達成互動。其中的內涵即是回歸視覺 設計的最原始狀態,運用軟體的活性設計重新體驗來自有機數學體系下的新視 覺境界;學習有別於傳統歐氏幾何數學造型領域的新型態;這樣的學習型態將 是一種結合運算美學的視覺理論;也可能成為未來跨領域數位學習的典範。
國內許多運用數位科技或軟體從事視覺創作的研究相當多,而就使用程式 碼的研究,其中多數還是以應用碎形程式所產生的圖形為主。對於延伸其開放 性程式碼的程式語言內涵,以及推動所謂「碎形導向程式設計」的概念則少有 人提及,目前國內僅有吳鼎武老師在其《飆碎形,2003》一書中有直接提及,
當注意程式碼應用的論述。書中,將碎形的美學價值、開放性程式碼、碎形導 向軟體設計、碎形軟體的操作等等做了說明。雖然近年來在視覺傳達領域中有
關於程式碼的文章介紹或論述,相較於過去已得到較多的重視與應用,然而相 對於國外與國內理工學界或資訊工程師的重視和發展,仍有相當大的差距。
一、程式語法在數位創作中的重要性
回顧整個數位藝術的發展,其藝術性格與理論似乎一直是延續著裝置藝術 而來(請參閱附錄-1),其整體的發展從過去器物的利用,因著科技的進步逐漸 走向數位化的運用。正因為其挾帶的「科技性格」往往讓人很難分辨「數位藝 術」(Digital Art)與「電腦藝術」(Computer Art)之間的差異性,而許多的 數位藝術家往往有可能也是電腦藝術家。尤其到了近代數位科技的發展快速,
許許多多的技術被直接應用在各種藝術型態的表達上,而這兩種風格往往使用 相同的軟體或是硬體來做為表現媒材。其中較大的的區別是電腦藝術較趨近於 數位圖像與數位影片的創作,而數位藝術則趨向於硬體的運用並且結合部分裝 置藝術的風格,其具有的互動機制是其主要特色;數位藝術的互動機制往往令 人驚訝,或許只是一些日常週遭常被用到的資源在經過創作著的巧思下,成為 良好的溝通媒介。雖然如此,兩者在某些發展上還是互為表裡的關係。
觀察最近的數位藝術作品可以發現,創作者在運用各式各樣的數位媒材進 行創作時,常可發現許多的作品已經開始運用程式語法在創作之中,當純粹器 材應用已經無法滿足創作上的需求時,就開始將想法藉由程式語法來達成。主 要的優點在於較能突破既有的軟體限制,且能依需求搭配硬體來進行互動,整 合所需的系統。同樣的情形也發生在電腦藝術上面,當應用軟體逐漸成熟而創 作出的作品逐漸開始相似時,就有人提出應該重新檢視過去軟體中最基礎的構 成元素--程式語法。
如以目前網路上最為熱門的公用軟體 Processing 為例;Processing 是一個 公開計劃,主要是使用 JAVA 語言來進行程式設計。這個運動的始創人為 Ben Fry 及 Casey Reas , 由 MIT( 麻 省 理 工 學 院 Massachusetts Institute of Technology)和依菲亞互動設計學院(Interaction Design Institute Ivrea)所聯 合推動的程式碼開發計畫。透過網際網路的方式免費提供軟體語開放性的原始 碼(Source Code)中,藉以激發出不同的運算方式與視覺表現。目的在期望 以後的電子媒介的藝術家或設計工作者,不只會使用軟體,更要能自行寫作程 式。,主要目的是希望能夠了解並善用電子媒體的本質,才能和它作全面性的 溝通。
從 1999 年奧地利林茲的電子藝術大獎的評審將「網路」這個項目,頒給電 腦作業系統「Linus」的這個決定來看,意味著制定程式是真正的藝術,藝術家 怎樣利用它反而是次要的。這應證了基特勒(Friedrich Kittler)的說法:「只有無 知才會令我們把媒體的產品認為是藝術」。或許有許多人並不能同意這個看法,
但從藝術的發展歷史而言,這個角度也可視為追求藝術與科技不可分的時代訴 求(Dieter Daniels、2000)。
圖-23:2004 年國際數位藝術大展於國立美術館展出,預計將會帶動國內數位藝術的大幅發展
(圖片來源:本研究攝於台中/國立美術館)
圖-24:2004 年於台北市當代藝術館所舉辦的「媒體城市」數位藝術展
(圖片來源:本研究攝於台北當代藝術館)
圖-25:Ross COOPER + Jussi ÄNGELSLEVÄ 的作品,運用程式與科技媒材的混合創作,
將是未來數位藝術的一股洪流(圖片來源:國立美術館)
圖-26:作品將觀者的影像輸入並且處理後即時投射於觀者眼前
二 、 碎 形 理 論 與 程 式 語 法 的 關 聯 性
由 前 章 文 獻 探 討 中 我 們 可 以 了 解 到 , 碎 形 其 基 本 要 素 為 組成碎形 的三要素為形狀(Form)、機率(Chance)與維度(Dimension)等三部分,將 其運用於程式語法的結構中則可轉換為元件、參數及座標三個部分來討論,並 且依據其相互關係運用於程式語法的結構之中,元件部份所包含的程式語法如 同生命體所具有的「基因」,也就是以下實驗中所提及的「起始元」;而運用 不同性質的參數所產的新生物件,也就是所謂的「生成元」,將自我形似的概 念,藉由不斷地將起始元(initiator)替代以生成元(generator),生成結果自然 而然地出現,符合碎形的定義:「碎形是以某種方式與整體相似的部份所組成 的」。
表-6:碎形的基本特徵與程式語法的關聯性
碎形的基本特徵與程式語法的關聯性
形狀(Form) 元件或元素
機率(Chance) 隨機亂數或控制參數(碎形分類依據)
維度(Dimension) 座標及分數維度(與歐氏幾合最大不同處)
而且若依碎形的型態特徵來做區分,則可將參數的程式類別區分為「定率」
與「序率」兩種,運用其相結合所產生的程式運算後的結果,正如同本研究所 研究的主題可為具有人工生命型態的程式語法,以碎形理論為其提出解釋並且 提供了一個較容易理解論述架構。從而關於其運用於程式與法的過程,以及自 我衍生、自我複製及運用其它輸入參數設備使其產生互動的方式,將由後敘的 實驗中提出驗證。
表-7:由碎形的特徵及種類探討發展相關論述並與程式語法中的結構互相印證之說明
「碎形幾何」
具有的特徵 碎形的種類 「自我衍生」
運算的特徵 轉化為程式語法的概念 運算結果
1. 形狀
2. 機率
3. 維度
種類:
1.「定率」:規則 碎形嚴格的自 相似形在程式 語法中可解釋 為—可控制參 數
2.「序率」隨機碎 形自然界中的 碎形在程式語 法中可解釋 為—有範圍之 亂數
1. 有少數基本元所 構成的複雜系統 2. 狀態只有少數幾
種
3. 隨週邊環境而改 變
1.在程式語法中轉化為基 本形基礎結構—元件 2.藉由參數改變形成變
化—參數
3.生成元因座標參數或起 始參數而改變—互動資 訊輸入
1. 複寫系統:生 成元不斷的取 代起始元 2. 圖形生成:不
斷的疊代運算 3. 因參數不斷
改變產生結果 變化
三 、 相 關 於 程 式 演 算 藝 術 的 論 述
關於程式演算藝術的論述,由於目前國內仍較少有人論述,而在國外有有 許多的專書或網站社群專門在討論或交換心得,期能運用網路無遠弗屆的力量 共同建構新的數位創作的表現方式。
Boris Müller(德國設計工作者)認為科學和藝術自古以來一直被看成是兩 個壁壘分明的知識系統,隨著兩者問的交互影響日趨頻繁,在未來會有更多這 方面的創新浮現。作為一個程式設計師和藝術家的混合體,最棒的地方在能以 不同的角度看事惰。人們習於忽視其他領域的重要性,凡事以自己的角度看事 惰,而錯失許多新的發展方向(X'Funs,2004/1)。
Jared Tarbel(美國數位藝術工作者),其主要研究在物件的自我演化行為
(Emergent Behavior)、演算式動作(Computational Locomotion),認為開放式程 式碼就像在地上灑種,運用網路的環境讓它成長,在經過一段時間整理大家對 於這個程式碼的看法,常有意外的所得。而程式一但被寫出來,就註定走向衰 亡,科技的精進一日千里,被鎖在黑暗裡的程式,只會更迅速的凋零,開放性
的程式結構可以幫助更多人了解語言(X'Funs,2004/1)。
Marius Watz(挪威數位藝術工作者);提出一個日漸形成的概念叫做「軟體 識別率」(Software Literacy)也就是創作者對於軟體的使用及撰寫能力的熟悉 度。期望以後的數位媒體的藝術家或設計工作者,不只會使用軟體,更要能自 行寫作程式。主要目的是希望能夠了解並善用電子媒體的本質,才能和它作全 面性的溝通(X'Funs,2004/1)。
圖-28:
圖 29:
圖 28 - 29 :Jared Tarbell 運用程式語法所完成的作品創作。(圖片來源:http://levitated.net/bones/boneForm/)
四 、 小 結
從 2003 林茲數位藝術節的宣言:「程式碼等於法律」、「程式碼等於生活」、
「程式碼等於藝術」來看,數位藝術工作目前首要的認知課題,就是需要從軟 體的「使用者」提升為「設計者」,當然這並非要每個人都能夠寫出像 Photoshop、
Maya 等等的應用軟體。而是希望從事數位藝術或設計的工作者,能夠更加深入 了解電腦的運作方式與理念,方能跳脫軟體選項所帶來的限制。從事程式內碼 的創作而言,會讓我們更親近物件的本源與基礎發展的機制。
圖-30:兒玉幸子+竹野美奈子(日)「突起與流動」;利用液態磁鐵,當環境中有觀眾發出聲音時,
盤中的磁鐵就會因聲響的大小,做出不同的反應。強調了互動藝術中的環境融合。
(圖片來源:作者攝於國立美術館 2004/7)
第 二 節 相 關 軟 體 實 驗
「活性」軟體的觀念目前正由各程式設計公司陸續開發中,主要針對自訂 功能的部分,提供使用者更多的自主性。由原先的工具選項,逐步以使用者指 定的程式碼取代讓使用者可以有較多的發展空間及未來性。目前「碎形導向式 程式碼」的軟體,即是屬於完全開放且程式短小簡潔的程式結構。操作者可自 行運用程式語法開發軟體潛力,延展軟體的最大可能性;而要發揮出此類軟體 的功能也必須對軟體的全盤功能有所了解,因此未來的數位學習者必備的專業 知識必須視跨領域且全面的(吳鼎武,2003)。以下針對目前有關於本研究的相 關開放程式碼軟體做一介紹。
一、Ultra Fractal 3
本軟體對於目前碎形藝術的創作者來說,是一個最方便也最富變化性的工 具軟體。由該公司的首頁 http://www.ultrafractal.com/進入以後即可發現由該軟體 所製作出的碎形藝術品,在質感及創意上均有極高視覺價值。該網站更提供由 各國碎形藝術家,所共同開發的公用程式,免費提供使用者下載。讓使用者可 以極容易的製作出一流的的碎形創作。
圖31:碎形作品具有強烈的後現代風格(圖片來源:http://www.chaoscopia.com/indexen.htm)
節慶 風雪 烈焱
藍色的靜默 炫麗 民俗風
圖 32:由Ultra Fractal 3 所製作的實驗作品(圖片來源:本研究製作,2003)
表-8:在Ultra Fractal 3Magnet1Mandelbrot 集合的程式碼結構(資料來源:軟體內之程式碼)
Magnet1Mandelbrot {
;
; Magnetic Mandelbrot set type 1. Use Switch Mode to select a
; magnetic Julia set.
; init:
z = p1 loop:
z = sqr( (z^2 + pixel - 1) / (2*z + pixel - 2) ) bailout:
|z| < @bailout && |z - 1| > 0.00005 default:
title = "Magnet 1 (Mandelbrot)"
helpfile = "Uf3.chm"
helptopic = "Html\formulas\standard\magnet.html"
magn = 0.5 maxiter = 100 param p1
caption = "Perturbation"
default = (0, 0) endparam param bailout
caption = "Bailout value"
default = 100.0 min = 1 endparam switch:
type = "Magnet1Julia"
p1 = pixel bailout = bailout }
碎形的所有結構,都可以藉由上圖的 Magnet1Mandelbrot 集合變化發展而 出,藉著改變其中程式碼的變數,產生不同的演化過程,其結果往往是令人驚 訝的。而計算出的圖形,經由個人不同的美感經驗而會呈現出不同的視覺效果。
相同的操作過程,往往會得到不同的結果,幾乎不可能產生重複相同的作品。
碎形藝術的數位創作,在教學過程中相當容易,而學生也較容易獲得成就。
雖然,軟體的操作相當容易,但是要建立出具有美感的作品,尚須具有傳統的 美學概念,這樣的美學基礎在隨機性的數位創作過程中,仍顯得相當重要。
對於開放式的程式碼的教學過程,也可以考慮以此軟體做為起始課程。在 科技與傳統美學的相互運用下,將可使學生學習其中的權衡概念。在運用數理 的觀念介入視覺作品的創作中,可改變對於程式與法的恐懼感。設計者也可在 創作的過程中,暫時脫離具像的約束,將注意力集中在色彩、畫面結構的整體 美感上,重新定義美感經驗,接受另類的設計表現,讓設計風格能獲得新意與 時代性。
二 、 關 於 Processing 的 起 源
由 Ben Fry 和 Casey ReasProcessing 所發起的的一項運用網路通訊的程 式碼開發計畫,主要是使用 JAVA 語言來進行程式設計;在 2003 年林茲電子藝 術節中更以這套軟體的現場展示,並預言程式碼的時代來臨。主要研究單位是 MIT(麻省理工學院)和依菲亞(Ivrea)互動設計學院所領導的,由免費提供開放 性的原始碼(Source Code)中,激發出不同的運算方式與視覺表現。其簡易、
明瞭的程式碼透過即時視覺化的實驗修正,已為數位互動藝術帶來新的影響。
Ban Fry 在其專屬網站上提出對於這樣的研究看法方向,他認為整個生命的 系統是一個我們缺乏深刻理解且高度複雜的空間;但我們可利用少量程式語法 技術,將這樣連續變動資料的結構和內容進行圖像化的工作。而他的研究焦點 便在於將這樣資料表達出最接近的表現方式,特別是對於人的基因結構的表現 方式。
圖-33:Ban Fry 的作品,<genome valence 基因結構>運用軟體的運算能力將物件繞行畫 面中心的動態作品(圖片來源:http://acg.media.mit.edu/people/fry/genomevalence/)
另一位計畫的發起人 Casey Reas 描述這個計畫的內容;在 1999 年 6 月到 2001 年 7 月期間,他服務與求學於麻省理工學院媒體實驗室的「美學和計算小組」。
在這期間內主要實驗有關於「介面和資訊設計運作於計算運動」的研究。由兩台 高階電腦運算由 C 和 Java 所建立語言的電腦程式,並開始設計可以支援
Screen-based 的程式,讓電腦可以接受和處理,從滑鼠、鍵盤或是照相機、話筒, 和生波探側器等等的感測器輸入訊號,並進行運算反應改變輸入參數而引起和修 改視覺構成手段動態反應的系統的研究
(http://acg.media.mit.edu/people/creas/info/)。
圖-34:Casey Reas 的作品運用程式語法的運算能力,真實的模擬毛髮的生長質感(圖片來源:
http://www.groupc.net/)
上述的兩位軟體發展者,其研究目的都是在於運用數據或程式的輸入,
形成新的動態演變或產生互動,與碎形程式因參數改變產生新的型態變化與追 求生命形式有著相同的探討概念,同樣是在隨機的概念中尋求新的視覺型態;
由於這個軟體建構在 Java 語言之上,而且又是屬於開放式程式碼的方式供人下 載,因此得到許多回響;眾人的注意力開始發現經由程式碼所運算出的圖形,
具有自我生命、隨機運算的能力,更能經過程式寫作達到互動,很快的就被運 用在新的數位媒體藝術之上。也因這個程式所寫出的程式碼相當清楚、簡潔所 占的記憶空間很小,未來在各種小型個人數位產品,如行動電話、PDA 等等的 發展上,有著極佳的發展空間。
圖-35:由 Processing 運用 Java 語法所運算出的圖形
(圖片來源:本研究製作 by open souce)
表-9:Processing 的 JAVA 語法結構
int NUM_PARTICLES = 10000;
int NUM_ATTRACTORS = 8;
int SPRITE_SIZE = 2;
Particle[] particle;
Attractor[] attractor;
float damp = 0.0002;
float accel = 10000;
BImage part;
class Particle { float x,y,vx,vy;
Particle() {
x = random(width);
y = random(height);
vx = random(-accel/2,accel/2);
vy = random(-accel/2,accel/2);
}
void step() {
for (int i = 0; i < attractor.length; i++) {
float d2 = sq(attractor[i].x-x) + sq(attractor[i].y-y);
if (d2 > 0.1) {
vx += accel * (attractor[i].x-x) / d2;
vy += accel * (attractor[i].y-y) / d2;
} } x += vx;
y += vy;
vx *= damp;
vy *= damp;
} }
class Attractor { float x,y;
Attractor() {
x = random(width);
y = random(height);
} }
void setup() { size(1024,768);
part = new BImage(SPRITE_SIZE,SPRITE_SIZE);
attractor = new Attractor[NUM_ATTRACTORS];
particle = new Particle[NUM_PARTICLES];
scatter();
float md = 0.5*sqrt(sq(part.width/2)+sq(part.height/2));
for (int x = 0; x < part.width; x++) { for (int y = 0; y < part.height; y++) {
float d = sqrt(sq(x-part.width/2)+sq(y-part.height/2));
float r = 255-(255*d/md);
float g = 128-(128*d/md);
float b = 32-(32*d/md);
part.set(x,y,color(r,g,b,8-8*d/md));
} }
imageMode(CENTER_DIAMETER);
}
void loop() {
for (int j = 0; j < particle.length; j++) { particle[j].step();
blend(part,0,0,part.width,part.height,(int)particle[j].x-part.width/2,(int)particl e[j].y-part.height/2,(int)particle[j].x+part.width/2,(int)particle[j].y+part.height /2,ADD);
} }
void scatter() { background(0);
for (int i = 0; i < attractor.length; i++) { attractor[i] = new Attractor();
}
for (int i = 0; i < particle.length; i++) { particle[i] = new Particle();
} }
void mousePressed() { scatter();
}
三、關於 Action Script 的起源
Action Script 是 用於 Macromedia Flash MX 的程式編寫語言,可供製作 符合創作者需求的作品或影片。軟體中將許多 Action Script 元素組件化,可以 用簡單的動作建立程式。也可以自行加入新的語言元素,同時將它們包含在程 式中以便完成更複雜的工作。
和其他的程式語言一樣,Action Script 有屬於自己本身的語法規則、保留 關鍵字、提供運算子,包括內建物件和函數能讓設計者使用變數來儲存和擷取 資訊。操作者也可以自行建立物件和函數。
Action Script 的語法和風格與 JavaScript 非常相像。而 Flash MX 可以 辨識在前版 Flash 版本中編寫的 Action Script。 Action Script 是具有物件導 向概念的 Action Script 語言,提供相當多的 Action Script 術語和基本程式設 計概念的概觀,如函數、變數、陳述式、運算子、條件和迴圈。也可以解構範 例程式,簡化設計時間。
目前國內外使用 Action Script 語法搭配 Flash 軟體進行創作工作的人口 相當龐大。除了所提供強的視覺圖像的發展環境之外,每次更新版本後,就會 加入更多新的支援語法與指令。最令多媒體設計者心動的,應該是該軟體撥放 程式的安裝率,是目前所有撥放軟體中最高的,帯給作品的是無遠弗屆的普及 性。
本程式除了提供豐富有趣的網路動畫及互動式的網頁設計功能外,運用其 強大的程式語言計算能力,結合容易使用的互動介面功能,讓許多數位藝術工 作者開始注意的這項軟體。而此程式也在國外許多藝術工作者及軟體設計師的 努力下,已經開發出許多公用程式提供下載,前景十分看好。
表-10:ActionScript 和 JavaScript 之間差異(資料來源:Macromedia Flash MX)
1 ActionScript 不支援瀏覽器專用的物件,如文件、視窗和錨點。
2 ActionScript 不完全支援所有的 JavaScript 內建物件。
3
ActionScript 支援 JavaScript 中不允許的語法建構 (例如,tellTarget 及 ifFrameLoaded 動作和斜線語法)。
但最好使用類似 JavaScript 元素的 ActionScript 元素 (例如,with、_framesloaded 和點式語法)。
4 ActionScript 不支援某些 JavaScript 語法建構,
如 try、catch、throw 和陳述式標籤。
5 ActionScript 不支援 JavaScript Function 建構函式。
6 在 ActionScript 中,eval 動作只能執行變數參考。
7
在 JavaScript 中,undefined 的 toString 值是 undefined。
在 Flash 5 和 Flash MX 中,為了 Flash 4 的相容性,undefined 的 toString 值 是 ""。
8
在 JavaScript 中,在數值內容中評估 undefined 的結果為 NaN。
在 Flash 5 和 Flash MX 中,為了 Flash 4 的相容性,評估 undefined 的結果為 0。
在 JavaScript 中,在布林內容中評估字串,而且字串長度非零時,結果為 true;
如
果字串沒有非零長度,結果為 false。
9
在 ActionScript 中,字串會被轉換成數字。如果數字不是零,結果為 true;否則結 果為 false。
第三節 自我形似與自我衍生在語法上關聯性 與運作概念
一、 碎 形 特 徵 與 定率、序率在程式語法中的意義與 關 係
碎形幾何理論與本研究最大的關聯性,在於其「自我形似」及「開放性程 式碼」的部分,碎形幾何對於「初始值」有極大的敏感性,任何的參數變化都 有可能會造成整個視覺效果與結構的改變。其產生的圖形的過程與亂數設定所 衍生的意義,若能將其過程或結果運用於解構風格的創作之上,將有助於學生 在進行解構思維的創作時,更能了解掌握「隨機」的意義。
隨著電腦程式語法的應用範圍越來越廣,所設計出的作品也因隨機亂數的 座標計算,擁有類生物的活動效果。可用來模擬低等生物移動,增生;相同的,
也可利用相關的程式語法,轉置新的視覺符號,改變些微座標或參數,就可以 得到意想不到的作品。
主要控制物件增生與活動方式的語法結構,還是與碎形組成的基本要素:
形狀(物件)、機率(隨機參數)、維度(座標)有關,以這三者為發展主軸,
配合不同的狀況而做程式上的調整。運用電腦計算的方式,將原有的基本形透 過程式語法所賦予的起始座標開始運算,隨之開始帶入因隨機參數改變而有可 以有替換元件,或自我複製、自我增生的效果。看起來會有衍生的生命效果。
例如:
onClipEvent (mouseDown) { //設定觸發事件 for (i=0; i<120; i++) { //設定迴圈 nm = "petal"+i; //設定新物件名稱
duplicateMovieClip(_root.petal, nm, i); //將petal物件拷貝成新物件,
_root[nm]._xscale = _root[nm]._yscale=Math.random()*_root.petal._xscale+20; // 重設 新物件 nm 的長寬
} }
上述的語法,可由滑鼠觸動開始,經過 I 的變數加上標的物件的本身數值,
加上亂數參照經過迴圈複製新的物件,重新又再一次…,基本運作概念就是如 此,若是需要互動,則再加上滑鼠的座標,予以計算。
也因為不斷改變的亂數及座標,恰好也符合了碎形的另一個特色-不可測 性。如此的特性也造就了運算式數位藝術特殊且有趣的畫面結構,所有的物件 狀況不斷的改變,呈現出非線性的運動狀態,看似雜亂卻又有著一種無序中的 有序,是一種高級且複雜的有序性,是一種交錯鑲嵌著各種無序與有序的自我 近似性。
二 、 程 式 語 法 以 「 定 率 」 為 例 的 運 作 概 念
本實驗以 L-system 所提供的程式語法架構為基礎,轉換運用到 Flash 所 使用的 Action Script 語法中,以期說明其中的關聯性與程式編寫的邏輯性;先 從具有人工生命特質的程式語法中,所具有的基本三個特徵來做說明:
1、複雜系統有許多基本單元(稱之爲細胞)組成--「物件」
2、每個細胞的狀態只有極少數幾種--「自我形似」
3、每個細胞的狀態隨時間的演變只隨其鄰居的細胞狀態決定--「機率」
電腦就是根據上述三個條件,加上定率(起始值)與序率觀念(隨機率的變數 觀念)類比出複雜的繁衍系統。這些變數的加入,讓我們可以辨別這些變化,
可能是出由相似程式所完成的,但我們找不到兩件長的一模一樣的作品來,如
同自然界中找不到兩棵一樣的樹,這就是隨機的概念。
將自我形似的概念,藉由不斷地將起始元(initiator)替代以生成元
(generator),生成結果自然而然地出現,符合碎形的定義:「碎形是以某種 方式與整體相似的部份所組成的
舉例來說在 Flash 中以 Action Script 應用此概念做一顆自我長的樹:
(// 為程式說明符號,不納入計算值中)
OnClipEvent (enterFrame) { // 觸發事件(該影片實物命名為 Stick)
if (destr < -180) { // if 為各參數標的參考值 destr += 360;
}
if (180 < destr) { destr -= 360;
}
if (_rotation < -180) {
_rotation = (_rotation + 360);
}
if (180 < _rotation) {
_rotation = (_rotation - 360);
}
if (destr < _rotation) { _rotation = _rotation;
}
if (_rotation < destr) { _rotation = _rotation;
}
_rotation = Math.floor(_rotation); // 計算 floor 的參數=旋轉角度 if ((_rotation == destr && _root.numsticks < _root.maxsticks) && dead != true) { nm = "st" + _root.numsticks;
duplicateMovieClip(_root.stick, nm, (16384 + _root.numsticks++)); // 複製影格 ra = _rotation * 0.017453292519943295; // 設 ra 為旋轉角度的變數 dx = Math.cos(ra) * 20; //dx=ra的cosin值成以20 dy = Math.sin(ra) * 20; // dy = ra 的 sin 值成以 20
_root[nm]._x = _x - dx; // 新物件的座標值等於原物件的減掉 dx 值
_root[nm]._y = _y - dy; // 同上
_root[nm]._rotation = _rotation; // 新物件的旋轉同原物件 _root[nm].destr = _rotation - _root.da; //等於原物件的旋轉角度減掉這次的旋轉率 nm = "st" + _root.numsticks; // 物件命名
duplicateMovieClip(_root.stick, nm, (16384 + _root.numsticks++));
// 再複製一次物件影格 _root[nm]._x = _x - dx;
_root[nm]._y = _y - dy;
_root[nm]._rotation = _rotation;
_root[nm].destr = _rotation + _root.da;
dead = true; // 結束運算 }
}
可得:
圖-36:第一次運算出的結果
(圖片來源:本研究製作)
依上面的結果,再加入複製計算(疊代生成)的程式:
stick.destr = 90; // stick物件的destr初始值 stick._rotation = 90;// stick物件的旋選角度出使值 numsticks = 0; //編號
maxsticks = 200; //複製最大值 da = 20; // 旋轉率
可得:
圖-37:最後生成結果(圖片來源:本研究製作)
圖38-39: 自然界中的植物也具有相同的分枝結構與其序率
三、以「序率」概念運用Action Script語法的基本架構實驗
以下,以植物生長模式為實驗基礎在語法中加入序率觀念,以自身元件在 迴圈運算過程中帶入隨機亂數,使得每次運算均能得到不同的結果。並且對於 不同參數的反應與變換元件後所呈現的反應做為實驗說明,由此討論在Flash中 運用程式語法的結構,並實驗經由數據改變後對於自然物生成的模擬反應。(程 式碼來源:Flash Math Creativity,2000,pp76-78)
(一)程式語法部分:
此部分分為兩個主要的命令格式,首先是對於物件自身的行為(也可解釋 為類似「基因」的觀念)命令程式;第二部分則為對於整體的生長密度的 控制選項命令。其語法說明如下:
1.外部控制選項:(在場景的第一個影格中)(表-11)
branches = 10; //分枝數量
xcenter = 275; //x軸中心點
xoffset = 225; //x變量
for (i=0; i<branches; i++){ //i迴圈由 0 到 branch 數量10, 每一 迴圈i自動相加
mybranches.dupulicateMovieClip("mybranch"+i, i); //每一迴圈複製一組mybranch影片, 名稱叫做 mybranch0, mybranch1,mybranch2...
this.["mybranch"+i]._x = xcenter+random(2*xoffset)-xoffset; //定義mybranch0的x軸=原中心 點+以亂數產生的變量
this.["mybranch"+i]._y = 400; //定義mybranch0的y軸固定為400 }
mybranch._visible = 0; //原mybranch影片隱藏
stop(); //本影格停止運作
(// 此記號以後的的敘述為說明參考)
基本元件:(圖-40)
myleaf myline mybranch
2.元件自身的程式語法:(在 mybranch 元件中)
這組程式碼的功能在於創造單獨的各棵植物。它包含二個迴圈, 一個為組成樹 枝的結構與數量數量, 另一組則為葉子在各棵植物上的總量。這些迴圈所包含資 訊包括了樹葉色彩、位置及疊代生成的物件命名。
表-12元件自身的程式語法:(在 mybranch 元件中)
points = 30 + random(40); //點的起始值, 每次執行不一樣 leaves = 13; //葉子數
y = []; //y
x = []; //x
dy = 5; //
offset = 0.007 //變量
y[0] = 0; //y[0]起始值
x[0] = 0; //x[0]起始值
for (i=1; i<points; i++){ //迴圈由 1 到 points 數量, 每一迴圈i自動相加
y[i] = -dy*i; //y[1]值
x[i] = x[i-1]+i*offset*(random(21)-10); //x[1]值 }
for (i=0; i<points; i++){ //迴圈由 0 到 points 數量, 每一迴圈i自動相加 myline.duplicateMovieClip("myline"+i, i); //每一迴圈複製一組myline影片, 名稱叫做
myline0, myline1,myline2...
this.["myline"+i]._x = x[i]; //設定 myline0...的x軸點 this.["myline"+i]._y = y[i]; //設定 myline0...的y軸點 this.["myline"+i]._xscale = x[i+1]-x[i]; //設定 myline0...的x大小 this.["myline"+i]._yscale = y[i+1]-y[i]; //設定 myline0...的y大小 }
for (i=0; i<leaves; i++){ //迴圈由 0 到 leaves 數量, 每一迴圈i自動相加 myleaf.duplicateMovieClip ("myleaf"+i, i+1000); //每一迴圈複製一組myleaf影片, 名稱叫做
myleaf0, myleaf1,myleaf2...
myColor = new color(this["myleaf"+i]); //定義顏色 myColorTrandform = new object(); //透明度陣列 myColorTransform.ga = 70+random(30); //定義透明度ga值 myColorTransform.ba = 0; //定義透明度ba值 myColorTransform.ra = 0; //定義透明度ra值 myColor.setTransform(myColorTransform); //定義透明度
this.["myleaf"+i]._x = x[points-2*i]; //設定 myleaf0...的x軸點 this.["myleaf"+i]._y = y[points-2*i]; //設定 myleaf0...的y軸點 this.["myleaf"+i]._xscale = 30+1*i; //設定 myleaf0...的x大小 this.["myleaf"+i]._yscale = 10+1*i; //設定 myleaf0...的y大小 this.["myleaf"+i]._rotation = random(180)-180; //設定 myleaf0...的旋轉角度 }
myline._visible = 0; //原myline影片隱藏 myleaf._visible = 0; //原myleaf影片隱藏
stop(); //本元件停止運作
上述程式第一次執行後的結果:
圖-41:上述程式第一次執行後的結果
實驗程式中可變參數的命名及功能說明:
branches = 植物分枝的數量
xcenter = 以螢幕的水平中心計算基準
xoffset =以中心計算的最大距離,為各分枝的安排位置參數 points =各個樹枝的每段數量參數
leaves =葉子在各個分支的總量量參數
dy =以點之間距離, 做為各段的長度的參數值 offset =計算總合寬度的參數值
以上述命名的各參數值經修改的實驗(圖-42):
branches =30 branches =60
branches =30 offset =50
offset =100
leaves=5 leaves=30
points = random(70);
this[("myleaf" + i)]._xscale = 15 + 1 * i;
leaves = 13;
this[("myleaf" + i)]._yscale = 45 + 1 * i;
this[("myleaf" + i)]._yscale = 40 + 1 * i;
由上述實驗結果可以看出在更改過座標起始值或參數值時都會引起結果完 全不同的變化,包含疏密度也可由參數中直接改變,對於自然物的分佈與生長 描述有著相當擬真的效果;接著將同樣的程式碼修改藉由原來分佈生長的概 念,更換視覺元件並將色彩轉換的指令取消,重新進形亂數分佈實驗。
更換的元件(以單純的基本形取代原有樹葉造型):
(圖-43)mybranch
參數值改為:
branches = 8;
xcenter = 275;
xoffset = 600;
points = 10 + random(40);
leaves = 5;
取消作用的部分:
myColor = new color(this["myleaf"+i]); //定義顏色 myColorTrandform = new object(); //透明度陣列 myColorTransform.ga = 70+random(30); //定義透明度ga值 myColorTransform.ba = 0; //定義透明度ba值 myColorTransform.ra = 0; //定義透明度ra值 myColor.setTransform(myColorTransform); //定義透明度
實驗結果:(圖-44)
上述修改後的結果 points = 10 + random(90) 位置的亂數值加大
將預設座標值修改為亂數取得
this[("myleaf" + i)]._xscale = (random(9) - 10) * i;
this[("myleaf" + i)]._yscale = (random(21) - 5) * i;
將生成物件的座標及生成物的尺寸全設為亂數 branches = 40;
this[("myleaf" + i)]._xscale = (random(-5) - 10) * i;
this[("myleaf" + i)]._yscale = (random(35) - 5) * i;
points = 10 + random(50);
leaves = 7;
上述實驗的主要目的在於利用相同的程式碼,但給予不同的元件與參數設 定狀況,交予電腦以隨機運算的方式產生新的畫面效果:由產生出的畫面中可 以看出以隨機所產生的自然分佈的效果,且可以快速的更新畫面重新運算,整 體的運算若控制得宜,可以從中得到相當多具有解構風格的平面影像。若能將 其結果或視覺影像的意想轉換到視覺傳達設計的作品應用,也可以讓學生能夠 在學習程式語法的同時也能對於種種不同的設計風格進行了解。
圖-45: 以起始元(initiator)疊代並產生 生成元(generator),自然生成模擬 物件(圖片來源:本研究製作 by open souce)
圖-46:任意連接的二進位制連結實驗;以自我組織(self-organization)的方式。
在進化的過程中,以增長或隨機的方式被連接互相。(圖片來源:
http://www.levitated.net/daily/levBinaryNetworkv.html)
圖-47:以 Plant Studio2 模擬植物生長的過程(圖片來源:本研究製作)
圖-48:Jared Tarbell 運用 Processing 所創作出的作品充滿互動與生機
(圖片來源:http://www.levitated.net/p5/chamber/gallery.html)
圖 50:豐富的工作程式碼提供下載應用 圖-49、51:由作品轉化而成應用於平面設
計之上 圖片來源:
http://www.levitated.net/p5/chamber/gallery.html)
(圖片來源:
http://www.levitated.net/p5/chamber/gallery.html)
第四節 小結
運用程式語法創作數位作品,在國外已行之有年。所累積的經驗與開發的 程式,是國內學習數位藝術的寶庫;由 2003 年的林茲電子藝術節的宣言中,再 一次強調程式語法在數位藝術中的重要性。透過國際交流中,我們不斷的受到 衝擊,不論在視覺、聽覺或是觸覺,都在數位媒體特殊的展演方式中,重新得 到新的認知態度。
國內近幾年來,由於電腦的普及在數位藝術的推動與發展亦相當快速,互 動式的裝置藝術、多媒體電子藝術的作品也有國際級的水準。但對於程式碼的 運用、隨機亂數圖形的描述與應用,則較少人提及。大多朝向多媒體聲光科技 方向發展。而運用開放性的程式碼,改變其參數設定得到新的成果,就有如過 去運用水彩、油畫等傳統媒材,實驗不同的表現方式而得到新的詮釋,其概念 是相同的。目前的電腦教育,绝大多數的教育目標,都朝向實用為主,現成已 有的影像繪圖程式如 Photoshop、Illustrator、Painter、MAYA…等等,大家耳 熟能詳的軟體。許多人的工作就是熟練的操作軟體選項,當然其中不乏有優秀 的作品發表;但若是能再往數位知識前進的話,語法的認知將是重大的關鍵。
程式語法對於慣用套裝程式的我們來說,就如嚼蠟般難以了解接受。若能將此 種數位教育提早發展,不僅可以激發創意,更能發展出更多的可能。