PORTFOLIO - 胡 婕 榆 / O p e n p ro ce ss in g
/ P 5. JS
程式設計(二) /指導老師 林楚卿
17 創意疫情圖騰
滑鼠筆刷設計
程式自畫像
創意圖形
7
13 3
1
繪圖寵物在P5互動
33 動態之現代藝術海報
情緒變換的色彩
29 23
2
日 落 -Br u sh
症 候 群 d e si g n
3
•
-作品介紹
滑動游標XY軸方位可使方塊產生顏色的漸變，上呈現墨綠色，往下漸變紫色到紅 橙色 滑鼠的速度會影響到方塊與方塊之間的間距大小和產影，速度越快間距越小，則 速度越慢間距越大 符號以方塊及缺角圓弧作為代表，整體色調呈現出日落的色彩漸變，方塊代表著 落下的軌跡，密集的排列表現出一種壓迫、密集的視覺感受
4
-程式截圖
5
-互動過程
https://openprocessing.org/sketch/1190463
6
S E L F
por trai t - 程式自畫像
7
-作品介紹
滑 動 游 標 的 XY軸方位可使方塊產生顏色的漸變 上呈現藍紫色，往下漸變紫色到粉橘色 滑 鼠 的 速 度 會 影 響到方塊與方塊之間的間距大小和產影 速 度 越 快 間 距 越 小 ，而隨著時間變化，尺寸會越來越長且大 以 蒙 眼 自 畫 像 作 為 主 要 核 心 主 題 ， 整體色調想呈現怪異帶點可愛的感覺， 背 景 密 集 的 排 列 可 以 象 徵心電圖，體驗者可自行調整賦于生命力
8
-程式截圖
9
10
11
-互動過程
https://openprocessing.org/sketch/1196693
12
Gri d
Based - 創 意圖形
13
-作品介紹 以 光 作 為 核 主 題 ， 正體色調設定為黑白灰作為強烈對比的視 覺 呈 現 ， 以 三 角 形 為主要圖騰發想再延伸擴散密集排列的線 條，以線條展現出光的照射變化 滑 動 游 標 的 X Y軸方位可使畫面呈現黑灰白的排列漸變
14
-程式截圖
15
-互動過程
https://openprocessing.org/sketch/1202953
16
Ran dom
Te x t - 創意疫情圖騰
17
-作品介紹 以疫情作為這次主要核心主題 整 體 色調設定為五彩繽紛作為強烈視覺呈現 以 口 罩 作 為 主 要 圖 形發想再向中心延伸擴散出規律性排列的 圓 形 代 表 病 毒 原 體 的擴散，畫面會不規律的顯示出”咳”的 字體呼應主題
滑 動 游 標 的 X Y 軸 方位可使口罩呈現由透明度高的黑色口罩 漸 變 到 沒 有 ， 隨著時間長度，滑鼠的圓形也會越來越大
18
-程式截圖:
19
20
21
-互動過程
https://openprocessing.org/sketch/1208860
22
Modern Art poster -動態之現代藝術海報
23
-作品介紹 當 代 藝術海報互動設計為這次主要核心主題， 色 調 設 定 以 當 代 藝 術 家 E LYSE
D OD GE 著名的風景藝術糖果 色彩為主視覺呈現，
方 塊 作 為 主 要 圖 形 發 想 再由左上至右下傾斜的隨機出規律性排 列的方塊符號， 搭配字體呼應主題 滑 動 游 標 的 X Y 軸 方位可使字體呈現隨機不同顏色的漸變
24
-程式截圖
25
26
-藝術家作品
27
-互動過程
28
COLOR -情緒變換的色彩
29
-作品介紹 以情緒變換的色彩作為這次主要核心主題 整體色調設定為橘黃色漸層作為強烈視覺呈現和暴躁卻又帶點平凡的感受 背景以漸層方塊的規律排列作為主要圖形發想表達時間情緒的波動起伏 前景會不規律得顯示出不同大小顏色的原點 說明著待在家裡複雜且反覆的情緒
30
-程式截圖
31
-互動過程
https://openprocessing.org/sketch/1218429
32
P5.JS Openprocessing PET -繪圖寵物在P5互動
33
-作品介紹 這次以上學期Microbit寵物作為這次主要核心主題，前景11*6的排列樂高人，胸 口的顯示板會依照滑鼠軸方位改變顏色， 滑鼠點擊畫面會排列顯示隨機大小所出 現 的 ” L e g o” 文 字 ， 背 景 大 致 以 深 色 為 主 ， 襯 托 前 景 物 件 的 明 顯 度
34
-模型圖
35
-互動過程
36
-程式截圖
37
38
-學習心得
我這次的程式設計課程 主題覺得滿有趣的，透過一次一次的學習對於這方面更 加的熟悉及了解，每次的研究、摸索成果出來其是滿有成就感的一件事，以往看過 軟體、資訊工程程式設計師一串串密密麻麻的英文代碼程式，感覺學會寫程式簡直 是天方夜譚，很開心的式至少我對P5.js這個程式有了初步的認識， 能夠透過互動 媒體繪製出想要表達，屬於自己的互動數位作品。
M a d e b y J i e Yu H u . . .
HU JIE YU