CM2030 : Graphics Programming

🔖 課前準備事項:

• JavaScript & P5js:
  • 本課可以理解為 ITP3 ，如果對 p5js 還無法駕馭的同學們，強烈建議先把 The Coding Train 的所有 p5js 範例應用用力地看一遍，加強對其基本架構的觀念。
  • 另外這堂課下半部強調3D圖形的概念，也可以參考 The Coding Train 的3D 解說。
• 指定課本: 無。本課程沒有指定閱讀教材,所以跟著老師的指導跟Demo就行了。建議多練習 JavaScript & P5js 基本語法。
• 電腦環境需求: PC/Mac/Linux 都可，這堂課大部分都是寫網頁版的作業，所以只要有瀏覽器跟Code Editor (雖然課程上建議下載Brackets，💡 但是還是建議使用Visual Studio Code) 即可。
• 其他工具準備: 無。

📓 課程攻略摘要:

• 期中作業 Midterm:
  • 四個不同主題的小project，各有不同的難易度跟有趣之處
  • Solar System: 製作星球自轉的動態效果
  • Asteroid Game Clone: 躲避及射擊的遊戲
  • Angry Bird Clone: 就是跟名字一樣XD
  • Noisy Grid: noise()跟顏色的結合
• 期末考/作業 Final:
  • 一樣有四個不同主題的小project，難度有加強
  • 3D Sine Games: 利用sine, cosine使3D物件選轉
  • Average Face: 使用照片像素計算平均來變臉
  • Instagram Filter: 透過像素變化去做濾鏡
  • Webcam Piano: 透過鏡頭讀取影像，在畫面上呈現色塊互動(選擇性加上與音樂互動)
• 其他考核作業: 無。

🤩 同學們的建議:

Chris: 這堂課對我來說是很有趣又好玩的，作業中學到很多編寫圖形程式的技巧與概念，是我以前沒有學過與接觸。就多數學長姐的感想，這是一堂屬”Easy”程度的課，當然其難易度因人而異，但我還是老話一句：多加強P5js的基本功，絕對會讓你更好上手這八個Project，輕鬆拿高分過關。 [10/01/2022]

Cynthia: 過去上ITP1&ITP2都還是沒認真看Coding Train的真的要趕快去了，這堂課有數不清的範例跟不計分作業是直接拿他的程式來做的！這邊再分享幾個Playlist: Perlin Noise Noisy Grid會用到, Video and Pixels Webcam Piano會用到, WebGL 前面有提供連結的則是3D Sine Games會用到。能的話也多多了解ES6等syntax，提升程式品質也是會加分的。 [2022/10/02]