晚安week01

 。OpenGL專案建置

    1. 打開CodeBlocks新建project

    2.選取OpenGL專案

    3.下一步，替專案命名，下一步，完成

    執行結果：

 。第一個OpenGL程式

設定創建視窗

函式設定視窗互動

wcex.lpfnWndProc = WindowProc;

OpenGL裡主要的繪圖程式：

glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

glClear(GL_COLOR_BUFFER_BIT);

glPushMatrix();

glRotatef(theta, 0.0f, 0.0f, 1.0f);

glBegin(GL_TRIANGLES);

glColor3f(1.0f, 0.0f, 0.0f);   glVertex2f(0.0f,   1.0f);

glColor3f(0.0f, 1.0f, 0.0f);   glVertex2f(0.87f,  -0.5f);

glColor3f(0.0f, 0.0f, 1.0f);   glVertex2f(-0.87f, -0.5f);

glEnd();

glPopMatrix();

Processing

學校電腦的下載資料夾裡有Processing

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

執行結果：

P5.js

javascript語法的Processing語言，線上編譯器點這裡

複製三角形的程式碼貼上

執行結果：

___________________________________________________________________________________

回到Processing，在程式碼中加入rotate參數

把創建視窗和畫圖的程式碼用函式重新分開

每次旋轉後畫一次圖，讓三角形轉起來

void setup(){

  size(400,400,P3D); //設定視窗

}

float angle = 0;

void draw(){

  rotate(angle);

  angle += 0.01;

  if(angle == 360) angle = 0;

  beginShape(TRIANGLES);// 畫三角形

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

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

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

  endShape();

}

執行結果：

加上background(0,0,0);將背景設定為黑色(蓋過原先畫過的圖)

加上translate(200,200);將旋轉的中心點設定在視窗的正中心

改變vertex();的頂點位置，讓圖形的形狀維持在正三角形

void setup(){

  size(400,400,P3D); //設定視窗

}

float angle = 0;

void draw(){

  

  background(0,0,0);

  translate(200,200);

  

  rotate(angle);

  angle += 0.01;

  if(angle == 360) angle = 0;

  beginShape(TRIANGLES);// 畫三角形

  fill(255,0,0); vertex(0,100*2);

  fill(0,255,0); vertex(87*2,-50*2);

  fill(0,0,255); vertex(-87*2,-50*2);

  endShape();

}

執行結果：(ps.他會轉)

___________________________________________________________________________________

匯入一張圖片用做背景

//將圖檔拖曳進編譯器，以新增匯入的程式碼

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

size(576,324);//注意圖片與視窗大小

background(img);

執行結果：