12750272_陳昱瑄,week01

課堂作業1 Codeblocks開OpenGL專案

Codeblock:File-New-Project,OpenGL專案

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

再回第一行，設定專案名稱

 

 

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

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

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

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

 

A:80-94行

課堂作業 2:用java的OpenGL 使用 processing來開發

學校電腦的 Win-E 開檔案總管，下載 有Processing解壓縮的目錄

開啟Processing(藍色)

File-Prefence 設定把字型放大, 比較好寫程式

利用 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存檔

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

Google: p5.js

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

左下角 Star Coding 線上寫程式

https://editor.p5js.org/

在 function draw()裡面 塞入剛剛程式

在按三角形執行

function setup() {

  createCanvas(400, 400);

}

function draw() {

  background(220);

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

}

課堂作業 4: 想要他轉動

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

把舊的程式 則到 新的視窗 然後來改寫

// week01_4_Java_setup_draw_rotate

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

}

加了 兩個函式的形狀

void setup(){

}

void draw(){

}

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

roate(angle); 照角度做旋轉

angle+-0.01;角度增加

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

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

把剛剛的座標 換成正中心 有正 有負的座標系統

// week01_5_Java_background_translate_rotate_vertex

void setup(){

  size(400,400,P3D); 

}

float angle = 0;

void draw(){

  background(0);

  translate(200,200);

  rotate(angle);

  angle += 0.01;

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

}

課堂作業 6: 

//week01_6_PImage_loadImage_background

//請先用小畫家,做出 400x400 的 cute.png

//再從檔案總管理 把cute.png 圖檔,拉到程式裡

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

size(400,400);

background(img);