week01_11131301賴珮語

 課堂作業1 CodeBlocks 開 OpenGL 專案

 

CodeBlock:File-New-Project,OpenGL專案

先在第2行挑選桌面作為目錄

再回第1行設定專案名稱week01-1_OpenGL

 

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

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

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

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

A: 80-94行

按run即可跑出會動的三角形

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

 

學校電腦的Win-E開檔案總管,下載, processing-4.3-windows-x64

打開processing.exe

點開後會出現一個小視窗

File-Preference設定 把字型放大 寫出我們的程式

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

//weel01_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 存檔

按run即可跑出三角形(不會動)

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

 

Google:p5js

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

左下角Start Coding線上寫程式https://editor.p5js.org/

在backgroundground(220);下方貼上作業2的部分程式碼

 

 

 

按run 出現一個不會動的藍色三角形

課堂作業4 想要讓作業2不會動的三角形開始轉動

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

把舊的程式貼到新的小視窗裡頭,然後改寫

 

加上 兩個函式的形狀

void setup(){

 

}

Void draw(){

 

}

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

Rotate(angle);

angle+=0.01; //角度增加

 

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

課堂作業5 讓轉動更清楚

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

在前面加上background(0) 將背景設定為黑色

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