12750140_week01

課堂作業1 CodeBlocks 開 OpenGL 專案 

---------------------------------------------------

截圖 :

1. 全螢幕：Print Screen(PrtSc)

2. 單獨視窗：Alt+Print Screen(PrtSc)

3. 自訂範圍：Win+Shift+S

------------------------------------------------------

打開CodeBlocks

左上 File-New-Project...

滑到最下方，選擇 "OpenGL project"，右上點選 "Go"

點選"Next >"

在第2行，選擇桌面(Desktop)

在第1行，設定專案名稱

點選 "Next >"

點選"Finish"

點選左方"main.c"兩下

可以看到預設程式碼

在 C 語言的 OpenGL 程式，需要設定 Windows 的視窗，會花很多程式碼

裡面設定Windows函式，去處理視窗的互動

真的「圖學」的程式，在EnableOpenGL和DisableOpenGL裡，把相關的設定設好。

Q: 我們要學的程式碼是什麼呢?

A: 80-94行

課堂作業2 用Java的OpenGL使用Processing來開發

學校電腦的Win+E開檔案總管，下載裡有processing...解壓縮的目錄

開啟processig.exe(藍色)

左上File-Preferences設定字型放大，比較好寫程式

左右對照程式碼

按左上三角形執行程式

課堂作業3 在網頁，試著把程式寫出來。(從課堂作業2出發)

Google搜尋: p5.js

找到官網 https://p5js.org/，左下角 StartCoding線上寫程式 https://editor.p5js.org/

在function draw(){ } 裡面，塞入剛剛程式的beginShape()…endShape() 那幾行，

再按粉色三角形執行

課堂作業4 想要讓他轉動

在藍色的Processing裡，Ctrl+N開新的程式

把舊的程式，貼到「新的視窗」，然後改寫。

加了

void setup(){

}

void draw(){

}

再加3行程式，分別是

float angel=0; 宣告變數

rotate(angel); 照角度旋轉

angel += 0.01; 角度增加

最後，再把vertex()座標改一下位置

執行程式

課堂作業5 讓轉動更清楚

把剛剛的座標，換成「正中心」有正、負的座標系統

在前面，加上background(0) 背景設「黑色」

Translate(200,200); 把旋轉的三角形，從左上角移到正中心

執行程式

課堂作業6