電腦圖學這個辭彙最早在1960年代由波音公司的圖像設計師提出來,到了1970年代由Ivan Suterland領軍的猶他州立大學電腦圖學研究室在電腦圖學領域得到突破性的發展,猶他電腦圖學研究室在1970年代做出著名的擬真影像「猶他茶壺(Utah teapot)」,已經建立了3D立體模型以及光影彩現的處理。當時學生後來都成為電腦業界翹楚,像是Edwin Catmull後來成為動畫龍頭公司Pixar的創辨人,John Warnock則是Adobe的創辨人,他們開發的Adobe Photoshop是電腦圖像處理的知名軟體。在這一章裡我們利用黃金角度的演算法來複製梵谷的向日葵名畫。
數學關鍵字: 黃金角度、費氏數列。
數學家:圖靈。
程式關鍵字:電腦圖學。
Scratch程式:
花瓣的數目
在前面我們研究過了用Scratch來畫向日葵的種子,現在準備要用Scratch來畫向日葵的花瓣。
首先我們先來觀察一下大自然中花朶的花瓣。不同品種的花有不同的花瓣數目。海芋只有一片花瓣包覆著花蕊,櫻花有五瓣,常見的菊花花瓣數目有13、21、24瓣。
仔細研究花瓣的瓣數會發現其中暗藏著黃金角度的資訊。
上面圖片的八種花有不同的花瓣數目,如果將這些花瓣數目排成一列,就會產生像下面這樣的數列,
1, 2, 3, 5, 8, 13, 21, 34
這個數列有很特別的地方,也就是相鄰兩個數字相加會等於後面第三個數字。舉例來說,第一個數字1加上第二個數字2就等於第三個數字3,第六個數字13加上第七個數字21就等於第八個數字34。
具有這樣特性的數列叫做「費氏數列(Fibonacci sequence)」,在現代數學裡我們通常將0列為第費氏數列的第一個數字。下面這個表格就列出了費氏數列的前20項。
花瓣的一項重要功能是保護花蕊,所以會均勻分佈在花蕊的四周。如果我們想畫出一朶21瓣的花,可以利用黃金角度(137.5度)旋轉,得到花瓣均勻分佈的效果。
下圖中我們可以清楚觀察到如果以137.5度旋轉依次畫出花瓣,每一片花瓣會交錯開來而形成花朶的形狀。
向日葵種子排列和費氏數列
還記得在本章一開始我們有手繪向日葵種子排列的斜列線數目嗎?圖例中的向日葵花種子順時針數可以數出13條斜列線,逆時針數出21條斜列線。13和21也是費氏數列中的兩個數。
被視為電腦科學和人工智慧之父的英國電腦科學家圖靈(Alan Turing)最後兩年的研究興趣就在於以數學推導植物莖、葉和種子圖形,試圖解釋諸如向日葵種子排列的問題(Fibonacci phyllotaxis),但研究完成前圖靈便已去世。
2012年英國一位教授Jonathan Swinton重新檢視向日葵種子的排列,並且透過網路發起一項叫做「圖靈的向日葵計劃」(Turing’s sunflowers project)的活動,鼓勵民眾種植向日葵,再寄回照片給實驗室,以期蒐集到大量的向日葵資料做為研究的真實樣本。
Swinton的研究報告在2016年5月發表,證實了絕大多數的向日葵樣本符合費氏數列的種子排列,為費氏數列與大自然中種子排列關係提供了實證。
動手做6–3 畫出一朶21瓣的花
[程式設計需求規格]
在動手做6–3中我們要用Scratch畫出一朶有21瓣的花。
[程式設計角色和舞台]
在角色中選取畫新角色,畫出一瓣長形的花瓣。舞台背景改為全黑即可。
以畫新角色的方法繪製花瓣,大略畫出一條長形的花瓣,稍加著色和修飾。下圖是畫出的花瓣可供參考。
[程式設計解決方案]
[程式檢視]
程式執行的結果在下面左圖,當花瓣的旋轉角度為137.5度時,花瓣呈現不同層次但是均勻的排列。和真實21瓣的雛菊相比,花瓣的排列是不是真的有點神似呢?
動手做6–4 畫出漂亮的向日葵
我們在動手做6–1畫出了向日葵種子排列,再用程式6–3畫出了環形的花瓣。在動手做6–4中我們將結合這兩段小程式來畫出漂亮的向日葵。
[程式設計角色和舞台]
在下面的程式範例中我們畫出三個角色,分別是花瓣、種子和葉子。舞台背景是一片向日葵花田的圖片。
以畫新角色的方法繪製花瓣、種子和葉子的兩種造型。Scratch提供了類似小畫家的工具,主要用畫筆和填滿顏色就可以畫出像下面的參考圖。
背景的向日葵花田可以由網路尋找,下面的圖例是從維基百科取得。
[程式設計解決方案]
向日葵花主要分為花瓣、種子和葉子三個部分。花瓣的畫法和動手做6–3相似,只是花瓣數改為34瓣。種子的畫法和動手做6–1相似,為了更真實的呈現向日葵花中心部分,將種子分為三層著色。
[程式檢視]
在本章一開始我們先仔細觀察向日葵花朶的特徵,包括「排列成圓形」、「重覆」和「旋轉」,然後練習用手畫向日葵。現在我們用簡單的程式也可以畫出漂亮的向日葵,如果稍微對程式裡的變數做調整,還可以控制向日葵的數目、顏色和大小。電腦繪圖和手繪各有各的趣味,但電腦繪圖具有快速和容易複製的特點。
十九世紀的荷蘭畫家梵谷畫了一系列的向日葵花,利用程式[花瓣6–4.1]和[種子6–4.2]可以將梵谷名畫小改一下,看看下面兩張圖,可以辨識出那一朶是電腦畫的向日葵花嗎?
觀念平台:電腦圖學(Computer graphics)電腦的強大運算能力很適合做複雜圖形影像處理,今天的電影裡有大量幾近真實的電腦繪圖動畫,提供了高娛樂效果,甚至顛覆觀眾的視覺想像。電腦圖學這個辭彙最早在1960年代由波音公司的圖像設計師提出來,到了1970年代由Ivan Suterland領軍的猶他州立大學電腦圖學研究室在電腦圖學領域得到突破性的發展,當時學生後來都成為電腦業界翹楚,像是Edwin Catmull後來成為動畫龍頭公司Pixar的創辨人,John Warnock則是Adobe的創辨人,他們開發的Adobe Photoshop是電腦圖像處理的知名軟體。下圖是猶他電腦圖學研究室在1970年代做出的擬真影像,被稱做「猶他茶壺(Utah teapot)」,可以看到當時已經建立了3D立體模型以及光影彩現的處理。
電腦圖學的發展在軟體和硬體都不斷演進,1995年首部使用電腦製作的動畫長片「玩具總動員」上映,類似的技術也被廣泛應用在電玩產品。電腦圖學常常會運用大量的數學運算,包括幾何、三角函數、向量矩陣等等技巧,來實現二維或三維的幾何圖形描繪、光影彩現或是動畫的效果。Scratch對於繪圖提供了許多支援:「畫筆」類的指令控制描線的顏色和粗細,「外觀」類的指令可以控制角色的大小和特效,「運算」類的指令提供了各種數學運算功能。善用Scratch的指令已經足夠繪製各式各樣的二維和三維圖形。
延伸閱讀:
Scratch & Math: 天花板上的蜘蛛(一) Scratch & Math: 天花板上的蜘蛛(二)
Scratch & Math: 直線裡的宇宙觀(一) Scratch & Math: 直線裡的宇宙觀(二)
Scratch & Math: 不能說的祕密(一) Scratch & Math: 不能說的祕密(二)
Scratch & Math: 無理的道理(一) Scratch & Math: 無理的道理(二) Scratch & Math: 無理的道理(三)
Scratch & Math: 歡樂派(一) Scratch & Math: 歡樂派(二)