week01-12750113

 

week01-1 Code Blocks 用 OpenGL 專案

 

CodeBlocks File-New_Project-OpenGL

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

再回第1行輸入 week01-1-OpenGL

在C 語言的OpenGL 程式，需要設定 windows 的視窗，花很多程式碼

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

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

 

 

Q:圖學的程式碼是什麼呢?

A:80-94行

Week01-2 用Java 的 OpenGL 使用 Processing 來開啟

學校電腦的檔案總管 Ctrl-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 存檔

Week01-3 在網頁試著把程式寫出來

Google p5js

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

左下角 Start Coding 線上寫程式

https://editor.p5js.org/

 

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

在按粉色三角形執行

Week01-4  Rotate

想要圖形轉動

在藍色的Processing Ctrl-N 開新視窗做一個新的程式

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

 

加了兩個函式的形狀

void setup(){

 

}

 

Void draw(){

       

}

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

rotate (angle);

angle+=0.01;

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

還未調整參數的三角形

week01-5  調整過參數的三角形(以正中心為圓心點)

 

background(0); // 背景清掉，才能正確的畫新的內容

  translate(200,200); // 把東西，往200,200位移

  rotate(angle); // 在座標 0,0 轉動

Week01-6 輸出圖片

請先用小畫家，做出 400x400 的 usachi.png

再從檔案總管 裡，把 usachi.png 圖檔，「拉到程式裡」

結果