12750202 week01

課堂作業 1 CodeBlocks 開 OpenGL 專案

CodeBlocks:File-New-Project , OpenGL 專案

先第2行,挑選桌面當目錄

再回第1行,設定專案名稱

截圖:Win-Shift-S

         :Alt-PrintScreen

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

裡面設定 WindowProc 函式 去處理你的視窗的互動

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

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

A:80-94行

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

學校電腦的 Win-E 開啟檔案總管 下載 有 Processing 解壓縮的目錄

開啟 Processing (藍色)

File-Preference 設定 把自行放大 比較好寫程式

利用 C 的 OpenGL 核心的那幾行的例子 寫出我們的程式

//week01-2-Java-OpenGL-Processing

size(400,400,P3D); //設定好全部的 OpenGL

beginShape(TRIANGLES);

fill(255,0,0); vertex(0,200);

fill(0,255,0); vertex(400,0);

fill(0,0,255); vertex(400,400);

endShape();

//Ctrl-S 存檔

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

Google: p5js

找到官網: https://p5js.org/

左下角 Start Coding 線上寫程式

https://editor.p5js.org/

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

在按 粉紅色三角形 執行

課堂作業4 想要讓它轉動

在藍色的 Processing Ctrl-N 開新的程式

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

加了 兩個函式的形狀

void setup(){

}

void draw(){

}

再加 3 行程式 分別是 float angle=0 宣告變數

Rotate(angle) 照角度做選轉

Angle+=0.01 角度增加

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

課堂作業5 讓轉動更清楚

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

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

translate(200,200) 把選轉的三角形 往左上角 移到正中心