01 - 製作揮灑的彩色滑鼠筆刷 Mix Circle
作品概述
初次接觸 P5.js，參考了教材中提供的 Rotary Brush (OpenProcessing) 作品進行延伸應用。剛開始製作時利用各種配色 mix 出來的圖不是很理想，所以最後決定改用灰黑白來實現。
操作說明
可使用滑鼠點擊並拖放來建立筆刷，如果將滑鼠鍵按住不放則會連續隨機生成不同樣式的圓。
Creative Coding Collections by WangXuan
Hello ~ 我是萱😊 目前是全職自由接案的前端工程師。
當初受到全端工程師老公的影響，從非本科轉職踏入網頁前端，累積實務經驗後轉為自由接案。
這個頁面收錄的是 2022 年底到 2023 年初，我開始學習『互動藝術程式創作』時獨立完成的 p5.js 小作品，
當時希望能透過更豐富、更有互動性的畫面來提升使用者體驗。
這些是早期的練習，我把它們保留下來，作為一段學習過程的紀錄。
歡迎點擊瀏覽，如有任何建議也歡迎來信指教 ~
02 - 繪製程式自畫像、景物或怪獸 Just Fish
作品概述
利用 curveVertex() 繪製一隻魚，由於 curveVertex() 位置非常不好控制，也發現在不同裝置上呈現出來的圖像差很多，最後只能限制畫布的大小避免變形問題。建議瀏覽時視窗寬度大於 800px 才不會變形唷！
操作說明
可使用滑鼠移動，在魚的後面建立隨機的泡泡，並即時變換魚的顏色。
03 - 用程式重現動態版博物館藝術 For Loop Rect
作品概述
結合迴圈與 random 的手法重複建構出像磁磚的小方塊，再利用隨機生成的位置產生許多小圓點色彩，營造出噴灑顏料的視覺感。
操作說明
可使用滑鼠移動控制噴灑出來的小圓點色系。
04 - 用抽象的方式視覺化時間 Time With Shape
作品概述
利用時、分、秒的數值產生形狀於隨機位置，從上到下分別是照秒數生成的圓形、按照分鐘生成的橫向長方形以及按照小時生成的直向長方形。
操作說明
該作無互動效果，會隨時間自行更動畫面。
05 - 利用繽紛色彩繪製製作專輯封面 Broken Rainbow
作品概述
用迴圈先製作出類似迪斯可球的圓形當背景，再於背景上疊加隨機寬度的線條，利用不同的色彩疊加模式製造出切割的視覺感。(本作品使用了 SCREEN、OVERLAY、EXCLUSION 三種 blendMode)。
操作說明
顏色與疊加效果會隨時間變得越來越細碎，可在喜歡的時機點按下滑鼠鍵以停止切割。
06 - 生成式藝術或圖騰 Mix Color By Rect
作品概述
嘗試利用 blendMode 交錯不同大小的方形建立出類似交織的樣式。(本作品使用了 BLEND、SCREEN、DIFFERENCE 三種 blendMode)。
操作說明
該作無互動效果。
07 - 製作互動場景 Aquarium
作品概述
簡易地製作一個水族箱，初始畫面只會有一隻魚，可透過滑鼠點擊的方式餵給食物，當魚吃到飼料後身體會逐漸變大，最後到達某程度大小時會生出新的小魚並讓原先的魚恢復初始大小。
操作說明
在畫面中想生成食物的位置點擊滑鼠，即可餵給飼料，當魚游到畫面上下邊界會回彈、游到左邊界則會重新從右側游出。
08 - 繪製自然感的風景或畫 Mix Noise&Sin
作品概述
利用 Noise 結合 Sin 繪製出隨機移動的點，作品放置越久，整體會越像粉蠟筆繪製出來的筆觸。
操作說明
可透過滑鼠位置控制生成的點的顏色。
09 - 製作文字藝術產生器或圖像動態詩 Rotate Text By DOM
作品概述
利用 DOM 元素獲取 input 中的文字，旋轉生成於畫面中，最左邊的輸入框每次按下鍵盤就觸發，中間的可輸入多個文字後點擊 submit 生成，右上角則有一個 reset 清空按鈕用來重置畫布。
操作說明
於左上角輸入框中鍵入文字即可旋轉生成於畫面中，於中間輸入框鍵入多個字後點擊 SUBMIT 即可旋轉生成於畫面中，右上角 RESET 可用來清空畫布。
10 - 製作繽紛的物理或生物模擬系統 Monster Hit
作品概述
利用 class 各司其職的特性製作出類似章魚的怪物射擊遊戲，可以多次射擊章魚致使章魚變小最後消失，另可點擊左上角切換章魚型態＆新增章魚數量，右上角則會呈現出當前章魚的存活數量。
操作說明
滑鼠點擊可生成子彈射往滑鼠所在的方向，擊中後章魚會變小且轉為生氣模式亂跑，左上角可增加章魚數量與切換章魚的狀態。
11 - 製作拼貼圖片跟充滿音效的遊樂場 Jumping Stars With Sound
作品概述
結合鍵盤事件與聲音，製作出簡易的彈琴遊戲，每成功發出三次聲音畫面就會生成一個星星並同時加快新圓圈往下移動的速度，快來挑戰看看能不能成功彈完一首小星星吧！
操作說明
按下鍵盤數字 1~6 可彈鋼琴，如果失敗可於畫面任意處點擊滑鼠鍵重新開始。
12 - 利用即時影音轉變為抽象畫 Sound&Tracking Bacteria
作品概述
利用麥克風監聽聲音頻率，結合視訊鏡頭引入 tracking.js 辨識黃色物體，再將黃色物體轉換為十字瞄準標誌，製作出消滅細菌的小遊戲。
操作說明
發出噪音可生成細菌，使用黃色物體對著視訊鏡頭移動，瞄準細菌即可將細菌消滅。
13 - 使用資料視覺化手法製作動態 Marriages&Divorces
作品概述
使用政府提供的資料，列出婚姻狀況並繪製男女統計數據。
操作說明
該作無互動效果。
