12750671_week01

課堂作業1 CodeBlocks 開OpenGL專案

 

CodeBlocks: File-New-Project, OpenGL專案

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

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

 

Win-Shift-S 可以截圖

 

 

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

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

真的「圖學」的程式,在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); //開始畫 三角形s

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://editor.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); 把左邊旋轉的三角形

 

課堂作業6 印圖片