week01_12750156_黃映綺

  

課堂作業1 CodeBlocks 開OpenGL專案

CodeBlock:File-New-Project OpenGL專案
先第2行 挑選桌面目錄
再回第1行 設定專案名稱

 
Win-Shift-S 可以截圖

 

在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_Prossing

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); 把旋轉的三角形, 從左上角 移到正中心

 

課堂作業6: 

PImage img = loadImage("cute.png");

size(400,400); //size()要與圖片大小相同

background(img); //才能在背景顯示