課程回顧

　　很快就到了學期的尾聲，開學時的光景還歷歷在目如今就到了期末，

縱觀這學期的多媒體課程所學，從無到有的過程，覺得自己真的成長了許

多。

　　老師安排的課程很緊湊、扎實，課程上老師先詳細的講解，之後由同

學各自做練習，若有遇到問題，網路硬碟上的講義電子檔絕對是解惑的首

選，還有坐在身邊周遭的同學們，有困難互相研究、解答，彼此幫助、相

互交流，也是促成進步的原因之一，經過教學、實作、查閱講義、同儕討

論，實力不斷的累積，在加上適量的作業當作練習，這樣穩扎穩打的從基

礎建立，造就了今天還算熟悉processing的我。而所有的作業之中，最讓

我喜愛也是印象深刻的，是要我們用processing讀取一張圖檔，並且做一

些擁有簡單功能的按鈕，例如讓圖片上下左右彈跳、圖片放大縮小、淡出

淡入等，一開始覺得似乎有些複雜，但是實際操作之後，即使遇到了不少

困難，最後成功時非常的令人興奮雀躍，而且學會了這樣的技巧，就能應

用在很多地方上面，是個非常實用且有趣的作業，回想當時還為了將介面

做到盡善盡美花了不少時間。

　　以前從未想過能用一串串的程式碼，畫出一幅圖、甚至動畫，多媒體

設計這門課讓我開了眼界，第一堂課光是學會上色畫方畫圓就興奮不已，

經過了一學期的洗禮，圖片處理、聲音效果、簡易動畫、滑鼠游標、按鈕

設計、小型賭博電玩....等，只要不是太過於複雜的曲線圖形，原則上都是

能用processing呈現出來，期末的團隊專案，我和我的夥伴將整學期的所學

全部應用融合成一個休閒小遊戲，看到班上的同學們玩的不亦悅乎，自己

也很有成就感，因為這就是我從小的夢想，撰寫遊戲程式、帶給大家歡樂。

　　從學期初到現在，我真的成長了很多，除了學會了程式方面的知識之

外，自己也養成了不少好習慣，遇到問題查閱講義或是和同儕討論，老師

的責任是授課，真正吸收、融會貫通並運用才是自己的責任，興趣使然以

及勤加練習，我很慶幸自己能夠跟得上課程的腳步並且進入狀況，上過這

門課程之後，我又多了一項有利的工具，我能夠用processing撰寫一些簡

易的圖形動畫，除此之外，養成良好的學習態度和心態才是最難能可貴的。

HW10

HW09

HW09

圖片特殊處理效果練習



上方為功能欄

MOVE:點擊左鍵一下後，圖片會開始自己左右或上下移動，而當

圖片觸碰到牆壁時，會反方向彈回

BIG:將圖片放大，直到圖片碰觸到牆壁

SMALL:將圖片縮小，直至圖片大小小於等於2.65*2

BLACK:使圖片淡出

WHITE:使圖片淡入

點選滑鼠右鍵能夠讓目前的效果停止




心得:

MOVE:點擊左鍵一下後，圖片會開始自己左右或上下移動，而當

這次的作業感覺讓我實力大增了不少，學會了這些處理效果，對

日後的專案一定相當有幫助，腦中浮現了許多靈感，回到這次的

作業，因為功能性是確立且固定的，能夠調整的，就是將使用介

面用的更好看，於是我大部分的時間都是在畫介面，現在在來說

說我在撰寫功能時所遇到的狀況，在功能觸發方面，我宣告了好

幾個全域變數來當作按鈕的開關，例如說點擊了一下A按鈕，則

開啟其按鈕的功能，點選B按鈕時，A按鈕功能停止，改為執行B

按鈕之對應功能，以此類推延伸至數個按鈕，一開始覺得有點複

雜，但是實際撰寫過後覺得還好，只要了解其原理並且注意有無

語法上的錯誤，其實不難，然後再撰寫的過程中，也常會去思考

怎麼樣的介面和功能，會讓使用者操作起來最方便並且人性化，

朝這方向不斷的新增修改，最後的作品總能令人滿意有成就感，

Processing真的是越寫越有興趣，時間過的好快，不知不覺就要

開始製作期末專案並且面臨期末考試，期盼能珍惜所剩不多的時

間增進自己的實力。

HW08

HW08

圖畫配對練習





首先，展示一下我的毛毛蟲

準備分屍囉

經過一番器官移植，發現了兩組絕妙配對







眼睛雪亮亮水汪汪的蟲蟲搭配有鼻子嘴巴的小精靈

實在是太搭了

再來換蟲蟲的身體







哇，倒立小人的眼睛剛好跟我的蟲蟲對起來

小人的嘴巴就像點在蟲蟲額頭的印記一樣

小人灰色的身體就是重重的觸角~


http://ss24.mcu.edu.tw/~s8360746/HW7/applet/



心得:

真的是太有趣了，這次作業的程式並不困難，而且很好理解

只要稍微注意一下圖片的個數，再換取下一張圖片時，如果

超過了總個數，要回到第一張，然後將按鈕及存檔區做好之

後，就開始進行配對了，雖然有許多圖是真的牛頭不對馬嘴

但是就是非常逗趣，很好玩，找到和自己圖片很合的時候，

很興奮!!!然而這項作業又讓我想到了，先前曾經玩過某個網

頁遊戲，他能夠讓使用者自行選擇主角頭和身體的樣貌，選

擇的方式也和這個一樣，是用按鈕，點一下左鍵就換下一個

配對，直至找到自己喜歡的樣式，現在我也會了，只要預先

將所有配件都準備好，就能夠做出這樣的功能囉，經過了幾

週，已經過了學期中了，感覺學期末就近在咫尺，時間真的

過得好快阿!!很希望能夠再學習更多有關processing的知識，

每次的練習都是一次成長，我要更積極的練習以增進自己的

能力!期待下一次的作業。

hw06

HW6

HW05

HW5_1 軸心、角度置換練習




http://ss24.mcu.edu.tw/~s8360746/HW5_1/applet/










HW5_2 小雞追母雞




http://ss24.mcu.edu.tw/~s8360746/HW5_2/applet/











HW5_3 追隨滑鼠的小圓圈






http://ss24.mcu.edu.tw/~s8360746/HW5_3/applet/





心得感想:

覺得在課程中所學到的知識越來越專業了，學到的東西越多，能在繪圖上的應用就越廣，

想表達的事物也就越容易表達，HW5_1學到了畫布原點及角度的轉換，在做這項作業時

一開始還以為rotate(PI*角度/180);裡面的那個角度都是從0開始計算的，導致只有紅色

方塊在正確的位置，其餘兩塊歪七扭八，之後才知道，原來角度是一直持續畫下去的，

而非每次都要從0重新計算，真正了解到程式的用法之後，似乎一切都變得不這麼困難了

在做這個的同時，我也想到了是否可以配合其他程式，畫出會動的電風扇，果真老師就

提到了，現在我們會作按鈕的效果了，加上可以調整轉速的按鈕，就會更像電風扇了呢!

HW5_2這項作業非常可愛，原來先前在別處網頁瀏覽時，這個會跟著滑鼠跑的小雞母雞

就是這樣來的，如果刻意將其他小雞跑的速度調的差不多，讓最後一個小雞跑最慢，那

麼就會相當可愛，感覺就是有一隻小雞沒跟上，在做這項作業的時候，我玩的不亦樂乎!

HW5_3許多漂亮的小圓圈們，我刻意將最小圓圈的色調用成偏紅的紫色，之後讓它漸漸

偏藍，形成一種漸層的效果，相當美麗，除了寫程式之外，還可以培養美感，是件非常

愉快的事。

HW04

HW4 進階小畫家功能練習


















http://ss24.mcu.edu.tw/~s8360746/HW4/applet/




心得感想:

首先真的很感謝老師將教學速度放慢，讓我們能夠跟上腳步，並將先前所學的東西做消化

吸收，這次的題目是將簡易版的小畫家，做功能上的進階延伸，除了原先可以改變畫筆粗

細之外，現在還多了橡皮擦、全部清除、甚至還可以儲存!原來用processing不一定只能夠

畫圖出來而已，還可以讓使用者來親自畫圖，並且做修改或是儲存，讓我不得不讚嘆它的

功能性是如此強大；經過這次上課，有種重新整裝待發的感覺，不像其他課程一樣總是一

直在後面追趕著進度那樣令人喘不過氣，很期待下一次的課程，不知道會學習到什麼新的

東西。

HW03

HW3_1 會跟著滑鼠移動的眼睛

















http://ss24.mcu.edu.tw/~s8360746/HW3_1/applet/









HW3_2 簡易小畫家功能練習






















http://ss24.mcu.edu.tw/~s8360746/HW3_2/applet/





心得感想：

感覺從現在開始，已經不是只能畫些簡單的矩形圓形了，而是更加進階的圖形，甚至能和使

用者有所互動，像HW3_1的12隻眼睛，黑眼球的部分能夠因為使用者滑鼠的移動而作位

移，就像是眼 睛盯著滑鼠看一樣，很生動，這讓我想起曾經在某個網站上看過，有人修

改蒙娜 麗 莎的微笑這幅名畫，讓她的眼睛會跟著滑鼠移動，現在我也會做這樣的效果囉！

老實說，只要理解指令的用法 再稍微動一些腦，其實這些一點都不難；接下來是HW3_2的

簡易版小畫家， 雖然只有幾種簡單的顏色和粗細，不過也讓我畫的不亦悅乎，只是為了不

讓塗鴉畫到調色盤，要設定可以畫畫的區域範圍時，其實運用一些簡單的功能就可以組合

出實用的程式，我想之後應該還會再設計出更多功能的小畫家吧!

HW02

HW2_1 每秒畫100個隨機色彩的矩形






















http://ss24.mcu.edu.tw/~s8360746/HW2_1/applet/









HW2_2 利用講義範例做應用上的延伸





















http://ss24.mcu.edu.tw/~s8360746/HW2_2/applet/









HW2_3 畫12個不同色彩的圓中圓


















http://ss24.mcu.edu.tw/~s8360746/HW2_3/applet/




心得感想：

這次的課程最主要是在練習random和loop的應用，還學到了新的function，void setup{}、

void draw{}，還有每秒畫n次的frameRate(n);，運用以上這些指令就可以做出許多的變化

HW2_1每秒就變換一張截然不同的面貌，有許多隨機色彩又是半透明矩形、有種眼花撩亂

但又繽紛絢麗的感覺，然而以用frameRate就可以做出多變的效果，HW2_2就是一個例子，

只要再和loop做結合，就可以達成兩種色澤交錯的效果，搭配random就可以有深淺不一的

色塊，最後因為frameRate的關係，還會讓圖變得像是跑馬燈一樣閃爍，非常有趣，HW2_3

也是loop的應用，只是畫的是圓形，不過每個圓的圓心位子及半徑都必須先計算過，利用巢

狀for迴圈即可少寫許多冗長不必要的程式碼，只是在撰寫前要先稍微動動腦，思考撰寫方

式，然後測試，發現跑出來的圖形不是自己想要的結果時，就再加以修改。

在這些過程中，可以促使自己思考，還有在為圖案上色時，可以選擇自己喜歡的配色，自由

度很高，我喜歡這種自由發揮的感覺，沒有壓力，不像是在撰寫程式繪圖是像創作那樣。

HW01

HW1:世界名畫模擬


畫 名 ： 圓之舞(Several Circles)

作 者 ： 康丁斯基 Kandinsky

年 份 ： 1926 年

畫 作 材 質 ： 畫布上油彩 Oil on canvas

原 作 尺 寸 ： 140 x 140 cm

館 藏 處： 美國紐約古金漢博物館 Solomon R. Guggenheim Museum, New York

小畫家模擬:













Processing模擬:










http://ss24.mcu.edu.tw/~s8360746/HW1/applet/





程式碼:




void setup()
{
size(415,415);
background(255);
fill(95,200);
rect(-20,-20,450,450);
noStroke();
fill(161,164,137,160);
ellipse(217,76,82,52);
fill(165,176,196,150);
ellipse(165,216,55,110);
fill(242,245,252,160);
ellipse(182,157,202,202);
fill(216,133,159,200);
ellipse(220,80,50,50);
fill(176,161,190,240);
ellipse(181,242,43,43);
fill(243,213,55,180);
ellipse(37,35,16,16);
fill(235,150,140,200);
ellipse(45,77,35,35);
fill(181,78,37,220);
ellipse(365,55,13,13);
fill(250,164,30,220);
ellipse(341,90,17,17);
fill(255,230,115,170);
ellipse(300,65,30,30);
fill(125,140,145);
ellipse(372,210,13,13);
fill(65,82,151,200);
ellipse(372,210,10,10);
fill(61,68,37,210);
ellipse(48,351,12,12);
fill(160,150);
ellipse(48,351,8,8);
fill(248,143,124,150);
ellipse(55,320,10,10);
fill(88,117,183,200);
ellipse(77,339,22,22);
fill(235,177,51,210);
ellipse(207,315,16,16);
fill(81,107,158,220);
ellipse(367,381,14,14);
fill(178,83,53,190);
ellipse(320,366,18,18);
fill(242,211,32,180);
ellipse(332,341,10,10);
fill(221,208,218,160);
ellipse(346,293,75,75);
fill(220,185,77,200);
ellipse(388,292,11,11);
fill(200,160,100,210);
ellipse(300,277,22,22);
fill(231,236,180,120);
ellipse(325,283,23,23);
fill(148,182,230,180);
ellipse(325,283,18,18);
fill(215,93,52,220);
ellipse(348,262,9,9);
fill(60,40,35,210);
ellipse(357,262,6,6);
fill(0,170);
ellipse(51,231,50,50);
fill(208,194,211,230);
ellipse(51,231,46,46);
fill(43,44,38,255);
ellipse(58,221,15,15);
fill(100,127,156,150);
ellipse(296,125,65,65);
fill(142,167,187,210);
ellipse(296,125,19,19);
fill(17,12,18,230);
ellipse(296,125,15,15);
fill(94,132,197,220);
ellipse(234,258,50,50);
fill(217,128,68,180);
ellipse(120,253,35,35);
fill(236,195,71,180);
ellipse(102,236,30,30);
fill(223,100,59,180);
ellipse(96,277,30,30);
fill(166,112,76,170);
ellipse(115,277,35,35);
fill(252,247,129,170);
ellipse(79,272,35,35);
fill(43,65,125,180);
ellipse(180,155,180,180);
fill(3,5,4,230);
ellipse(160,138,130,130);
fill(200,208,185,200);
ellipse(98,191,8,8);
fill(81,70,24,230);
ellipse(98,191,5,5);
fill(43,52,59,250);
ellipse(164,263,6,6);
fill(51,73,122,190);
ellipse(196,184,18,18);
fill(128,108,73,220);
ellipse(238,207,55,55);
fill(80,70,65,255);
ellipse(246,227,6,6);
fill(208,178,68,180);
ellipse(206,209,36,36);
fill(144,183,139,210);
ellipse(223,171,35,35);
fill(252,231,228,190);
ellipse(259,220,22,22);
}



心得:

這是使用Processing做練習所遇到的第一項作業，找一張擁有幾何性

的世界名畫，並使用Processing將之模擬出來，結果我找的圖片似乎

太複雜了，以至於有些小細節的變色和疊色的部分沒辦法處理的很好

但是我還是盡力去把它寫的很像原版，然而這幅圖的許多圓形非常的

多，而且分布的很散，因此我還開了BCB，撰寫一個程式，能夠讀取

圖片，呼叫出圖片之後、滑鼠在圖上的某一點案下左鍵，即會顯示該

點之X和Y座標，以及該點的三原色(R,G,B)，有了這個程式、使我在

繪製這項作業時得以事半功倍。