week01_11160242

  課堂作業1 CodeBlocks開OpenGL專案

CodeBlocks:File-New-Project,OpenGL專案

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

再回第1行設定專案名稱

截圖

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

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

真的<圖學>的程式在EnableOpenGL和DisableOpenGL裡

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

A:80~94行

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

開啟檔案總管,下載有Processing解壓縮的目錄

開啟Processing(藍色)

File-Preference設定,把字形放大,比較好寫程式

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

size(400,400,P3D);

beginShape(TRIANGLES);

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

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

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

endShape();

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

Google:p5js

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

左下角Start Coding線上寫程式

https://editor.p5js.org/

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

再按 粉紅三角形 執行

課堂作業4:想要讓它轉動

再藍色的Processing開新的程式

把舊的程式,複製到<新的視窗>,然後改寫

加了 兩個函式的形狀

void setup(){

}

Void draw(){

}

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

rotate(angle);照角度做旋轉

angle+=0.01;角度增加

void setup(){

  size(400,400,P3D);

}

float angle=0;

void draw(){

  rotate(angle);

  angle+=0.01;

  beginShape(TRIANGLES);

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

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

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

  endShape();

}

課堂作業5:讓轉動更清楚

把剛剛的座標,換成<正中心>有正、負的座標系統

再前面,加上background(0)背景設<黑色>

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

課堂作業6: