Skip to content

chiunhau/sitcon2016

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 

Repository files navigation

#藝術家也為之瘋狂的 JS Library

議程內容大綱

p5.js 與工程師

  • 以 Javascript 實作 Processing 哲學
  • 與 Porcessing 技術上沒有關係
  • Processing 是常用來製作數位藝術的程式語言
  • Processing 語法非常直覺簡單,適合非程式人員(如藝術家)學習
  • p5.js 將 Processing 的哲學搬到瀏覽器上實現
  • p5.js 是個有點肥的 js library Orz
  • 正被 NYU ITP 的學生熱烈的開發中
  • 因為是單純的 js library,所以可以使用 DOM,大大增加 p5.js 的應用範圍
  • 有很多 addons
  • 適合一層一層疊起來的繪圖需求,若要製作精緻的變化,請找 Paper.js

p5.js 與設計師

  • 可以把以前只活在單機的 Processing 作品,搬到網路上囉,大家都可以在家玩
  • 可以導入動態識別設計(Dynamic Identity)的作業流程裡
  • 透過 p5.js,快速製造手工麻煩的圖形
  • 再使用 p5.svg.js addon 匯出成 SVG,再丟回 Adobe Illustrator 進行排版即可
  • 優勢 1:能處理打量客製化的設計需求(如:想在每張邀請卡印上該貴賓風格化後的肖像)
  • 優勢 2:能使用亂數或參數導入圖形的製作(如:蒐集員工的聲音波形,當參數丟入演算法繪製圖形,製造獨一無二的員工名片)
  • 優勢 3:取代簡單但大量重複耗時的人工繪圖
  • 劣勢 1:圖形造型有限
  • 劣勢 2:動態演算法設計成本高
  • 劣勢 3:目前的 Workflow 還沒完善

p5.js 與教育

  • 塗鴉是人類的本能,任何人拿到筆就知道要畫畫
  • 相較於遊戲,塗鴉更沒有局限、有更多可能、更鼓勵自由創造
  • p5.js 語法寫錯了會做出意想不到的超猛特殊效果,Scratch 語法寫錯了會被認定為 bug
  • 即時視覺化的程式語言,繪圖邏輯很直覺,適合初學者
  • 以羅東高中網頁互動設計工作坊為例

參考資料

關於講者

游宭鎬,台灣科技大學商業設計系二年級,專注於平面設計與網頁開發。不從事使用者介面與使用者體驗方面的創作或研究。

關注領域

  • 平面設計
  • 識別設計
  • 設計原理
  • 網頁繪圖技術
  • 網頁互動技術
  • Anything realated to JavaScript

經歷

  • 台灣科技大學二年級 / 主修商業設計 / 輔修色彩照明工程
  • 台科大互動設計研究社 / 創社社長
  • 台科大工程師養成計畫 / 網頁設計組導師
  • 台科大程式設計研究社 / JS 助教
  • 台科大學生會資訊部 / 部員
  • 羅東高中網頁設計工作坊 / 發起人
  • TEDxNTUST 台灣科大/ 設計師
  • Rails Girls Yilan / 助教
  • 羅東高中數理資優班畢業 / 資訊專研組
  • 東光國中美術班畢業

More about me

About

Brief outline of my speech at SITCON 2016.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published