生命之歌 week01

 課堂作業1 CodeBlocks 開 OpenGL 專案

CodeBlocks:File-New-Project,OpenGL專案

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

再回第1行設定專案名稱

截圖

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

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();

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

Google: p5js

找到官網 p5.js

左下角 Start Coding 線上寫程式p5.js Web Editor

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

再按粉色三角形 執行

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

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

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

加了 兩個函式的形狀

void setup(){

}

void draw(){

}

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

rotate(angle);照角度做旋轉

angle +=0.01; 角度增加

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

//week01_4_Java_setup_draw_rotate

void setup(){

  size(400,400,P3D);//設定好全部的OpenGL

}

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: 放入圖片

把圖片用小畫家調整大小,並且size()那一行要與圖片大小相同

在打完之後,要把圖片移進processing 裡