# 互動式網頁設計工程師該具備哪些技能？
###### tags: `大神來六角`
---
吳哲宇
20221124


## 主持人

六角學院 - Ray

## 近期活動

- [2022 The F2E](https://2022.thef2e.com/)

## 講者

吳哲宇
- 介紹
- 跨領域新媒體藝術家、設計師、工程師、講師與創業者，喜歡新奇古怪的事物。
- 藉由理性電機工程背景與感性視覺設計的混合，從自然、物理、現代藝術、數學韻律、音樂中取材，創造複合生成式的演算作品，探索藝術與工程的邊界以及極致的互動體驗。
- 專攻探索互動型 NFT，近年致力於推廣程式藝術，於Hahow開設動態網頁與互動藝術程式創作課程，引領超過萬名同學進入互動設計的世界。
- blog
* 官網：[互動程式創作台灣站](https://creativecoding.in/)
* YT：[老闆來點寇汀吧](https://www.youtube.com/channel/UCHX_XMhPrtvOmgGOnA2eTmA)
* FB：[吳哲宇](https://www.facebook.com/cheyuwu345)

## 課程推薦/相關課程
- [動態互動網頁程式入門](https://hahow.in/cr/monoame-webdesign1)
- [動態互動網頁特效入門](https://hahow.in/cr/monoame-webdesign2)
- [互動藝術程式創作入門](https://hahow.in/cr/creative-coding-1/)

## 大綱
* 講者介紹
* 墨雨互動設計介紹
* 網頁、動畫與互動設計的交集
* 互動網頁工程需要的技能
* 生成式與互動藝術
* 後續與學習資源
* Q&A

## 互動網頁工程需要的技能
* CSS 視覺物件形塑能力
* 動畫製作 - Jquery, [Framer-Motion](https://www.framer.com/motion/), [ScrollMagic](https://scrollmagic.io/)…等
* 轉場能力 - Component 的生命週期 (transition)
* 銜接設計流程 - [Lottie.js](https://airbnb.io/lottie/#/) + [BodyMovin](https://aescripts.com/bodymovin/) + After Effects
* 畫布 Canvas 與 簡易WebGL / [p5.js](https://p5js.org/)
* 網頁的聲音操作 - [Tone.js](https://tonejs.github.io/) [Music Lab](https://musiclab.chromeexperiments.com/)
* 3D 網頁製作與微調能力 - [Three.js](https://threejs.org/), [Babylon.js](https://www.babylonjs.com/) 與產製流程
* 進階特效 [Pixi](https://pixijs.com/), [WebGL Shader](https://thebookofshaders.com/) - GLSL
* 引入即時使用者視訊與音訊 Media Capture & Stream API
* 引入機器學習 Model - [Tensorflow.js](https://www.tensorflow.org/js) 的機器學習 / ml5.js / [Human](https://github.com/vladmandic/human)
* [Creative Coding](https://course.creativecoding.in/) (程式創作)的概念
* 跨平台媒介與軟硬體的整合操作 / 通訊協議連結硬體 [OSC 與 socket](https://github.com/adzialocha/osc-js) [serialport](https://www.npmjs.com/package/serialport)
* WASM 與瀏覽器虛擬機化 (e.g. Figma)
* 所見即所得時代的逆襲 (WYSWYG)

## 講義

- [Sli.do 問答區](https://app.sli.do/event/nyHfSk9yCYYJ8rGEN217Hd)
- [講義 ppt](https://docs.google.com/presentation/d/1M9k-hiMycyBufZkouUfIyi4xbjbGsTl3ZT2LeLTBEHY/edit?usp=sharing)
- video