#藝術家也為之瘋狂的 JS Library
- 以 Javascript 實作 Processing 哲學
- 與 Porcessing 技術上沒有關係
- Processing 是常用來製作數位藝術的程式語言
- Processing 語法非常直覺簡單,適合非程式人員(如藝術家)學習
- p5.js 將 Processing 的哲學搬到瀏覽器上實現
- p5.js 是個有點肥的 js library Orz
- 正被 NYU ITP 的學生熱烈的開發中
- 因為是單純的 js library,所以可以使用 DOM,大大增加 p5.js 的應用範圍
- 有很多 addons
- 適合一層一層疊起來的繪圖需求,若要製作精緻的變化,請找 Paper.js
- 可以把以前只活在單機的 Processing 作品,搬到網路上囉,大家都可以在家玩
- 可以導入動態識別設計(Dynamic Identity)的作業流程裡
- 透過 p5.js,快速製造手工麻煩的圖形
- 再使用 p5.svg.js addon 匯出成 SVG,再丟回 Adobe Illustrator 進行排版即可
- 優勢 1:能處理打量客製化的設計需求(如:想在每張邀請卡印上該貴賓風格化後的肖像)
- 優勢 2:能使用亂數或參數導入圖形的製作(如:蒐集員工的聲音波形,當參數丟入演算法繪製圖形,製造獨一無二的員工名片)
- 優勢 3:取代簡單但大量重複耗時的人工繪圖
- 劣勢 1:圖形造型有限
- 劣勢 2:動態演算法設計成本高
- 劣勢 3:目前的 Workflow 還沒完善
- 塗鴉是人類的本能,任何人拿到筆就知道要畫畫
- 相較於遊戲,塗鴉更沒有局限、有更多可能、更鼓勵自由創造
- p5.js 語法寫錯了會做出意想不到的超猛特殊效果,Scratch 語法寫錯了會被認定為 bug
- 即時視覺化的程式語言,繪圖邏輯很直覺,適合初學者
- 以羅東高中網頁互動設計工作坊為例
- 簡報下載
- p5.js 的 Github
- Processing works by @aprilcoffee
- 動態識別設計的實驗
- Hello World 設計成品展示
- p5.js 學生作品 1
- p5.js 學生作品 2
- 荷包蛋的逆襲-使用 Paper.js
游宭鎬,台灣科技大學商業設計系二年級,專注於平面設計與網頁開發。不從事使用者介面與使用者體驗方面的創作或研究。
- 平面設計
- 識別設計
- 設計原理
- 網頁繪圖技術
- 網頁互動技術
- Anything realated to JavaScript
- 台灣科技大學二年級 / 主修商業設計 / 輔修色彩照明工程
- 台科大互動設計研究社 / 創社社長
- 台科大工程師養成計畫 / 網頁設計組導師
- 台科大程式設計研究社 / JS 助教
- 台科大學生會資訊部 / 部員
- 羅東高中網頁設計工作坊 / 發起人
- TEDxNTUST 台灣科大/ 設計師
- Rails Girls Yilan / 助教
- 羅東高中數理資優班畢業 / 資訊專研組
- 東光國中美術班畢業