肯尼斯的學習筆記 Week 18

期末專題展示

遊戲名字:

宇宙大爆炸

遊戲玩法:

利用MOUSE點擊白色圓圈進行防禦，當白色圓圈超過30個遊戲結束。

而遊戲難度會由玩家的攻擊白色圓圈的數量而不停增白色圓圈長生速度。

遊戲攻略:

一定點比較大的白色圓圈，因為白色圓圈大到一定程度會分裂成2個白色圓圈。

遊戲賣點:

訓練手速，打發時間一流。

肯尼斯的學習筆記 Week 12

Scene 場景

範例檔案

到Moodle下載範例檔案:

myGL_Frustrum221_MultiView_2012_1221-20171130T060949Z-001.zip

開啟CodeBlocks新增GUUT專案，將範例檔案的.cpp檔加入專案

修改一下程式

int main(int argc, char**argv)

{

    glutInit(&argc, argv);

    ....

}

就能成功執行徎式了

P語言

下載Processing並安裝，添加庫文件 -> 分類選"3D"

添加 "Collada" 跟 "Picking"

Viewer2D範例程序

安裝好後，開啟Viewer2D範例程序

文件 -> 範例程序 -> Contributed Libraries -> Collada -> Viewer2D

更改 modelsEnabled[]後面的Boolean參數可讀入不同的圖檔

執行程式

按 a,d,s,y,x,c,1,2,3,p,o 再拖動滑鼠會有不同功能效果

Simple範例程序

再開啟Picking的Simple範例程序

執行程式

滑鼠指著不同的方塊邊框會變成方塊的顏色喔

肯尼斯的學習筆記 Week 11

聲音 - 音效、音樂

Windows 平台

初階版

1. 先開啟Code Blocks建立GLUT專案

2. 可在main裡加入PlaySoundA播放聲音

#include <mmsystem.h>

PlaySoundA("file.wav", NULL, SND_ASYNC);

PlaySoundA("檔名", 在哪裡, 如何播);

*音樂檔要放在freeglut/bin目錄中

*它會播完整首音樂才會進入下一行程式碼

進階版

加入CMP3_MCI.h函式庫 (Facebook社團下載)

#include "CMP3_MCI.h"

CMP3_MCI mp3;  //宣告變數

int main ()

{

   mp3.Load ("file.mp3");  //讀入mp3檔

   mp3.Play ();  //播放mp3檔

}

*它會播著音樂進入下面的程式碼

Java 平台

使用Processing語言

*要加入Minim函式庫

*在Processing軟件上按速寫本 > 引用庫文件 > 添加庫文件

找Minim庫文件下載

import ddf.minim.*;  //use ddf's minim music library

Minim minim;  //int a; the whold system

AudioPlayer player;  //corresponding to one mp3 file

void setup() {

  minim = new Minim(this);  //constructop of Minim Object

  player = minim.loadFile("music.mp3");  //minim load to player

  player.play();

}

void draw() {

  

}

肯尼斯的學習筆記 Week 9

Bump Mapping

*先在moodle下載Processing 3軟體

體驗一位網友寫的程式碼：

https://www.openprocessing.org/sketch/249457

將它程式複製到Processing中

用Processing寫簡單的程式

程式碼：

PImage img=loadImage("doraemon.jpeg");

size(600, 600);

image(img, 0,0, 600,600);

*要先把doramon.jpeg圖檔拖曳至程式中

寫進一步的程式

程式碼：

PImage img;

void setup(){

  size(1280, 800);

  img=loadImage("error.jpg");

}

void draw(){

  //rect(mouseX, mouseY, 50, 50);  <- 用來畫正方形的碼

  image(img, mouseX,mouseY, 400,250);

}

寫出簡易超級瑪莉歐

程式碼：

int [][]map={{0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,1,1,2,2,1,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {1,1,1,1,1,1,1,1,1,1,1,1,1,1}};

PImage imgMario, imgBrick, imgBrick2;

void setup(){

  size(800, 600);

  imgMario=loadImage("mario.png");

  imgBrick=loadImage("brick.png");

  imgBrick2=loadImage("brick2.png");

}

float marioX=200, marioY=100, marioVX=0, marioVY=0;

boolean marioOnFloor=false;

void draw(){

  background(255);

  for(int x=0;x<14;x++){

    for(int y=0;y<11;y++){

      if(map[y][x]==1) image(imgBrick, x*50, y*50, 50,50);

      if(map[y][x]==2) image(imgBrick2, x*50, y*50, 50,50);

    }

  }

  image(imgMario, marioX, marioY, 50,50);

  marioY += marioVY; marioX += marioVX;

  marioVY += 0.98;

  if(marioY>=500-50)

  {marioY=500-50; marioVY=0; marioOnFloor=true;}

}

void keyPressed(){

  if(keyCode==UP && marioOnFloor) {marioVY=-15; marioOnFloor=false;}

  if(keyCode==RIGHT) marioVX=5;

  if(keyCode==LEFT) marioVX=-5;

}

void keyReleased(){

  if(keyCode==RIGHT || keyCode==LEFT) marioVX=0;

}

肯尼斯的學習筆記 Week 8

Texture 貼圖

到jsyeh.org/3dcg10下載資源

windows.zip -> desktop\windows\Texture.exe

data.zip -> desktop\windows\data\*sgi

glut32.dll -> desktop\windows\glut32.dll

source.zip

glTexCoord2f(tx, ty)

OpenCV安裝、讀圖

1. 到Moodle下載opencv-2.1.0-win32-vs2008.exe並安裝

*PATH要選第二或第三個選項

2. 開啟CodeBlocks建立Console appilication專案

3. 輸入下列程式碼

#include <opencv/highgui.h>

int main()

{

    IplImage * img=cvLoadImage("earth.jpg");

    cvNamedWindow("hello opencv");

    cvShowImage("hello opencv", img);

    cvWaitKey(0);

    return 0;

}

4. 對左邊的專案檔按右鍵，點擊Build options -> Search directories

Compiler -> Add -> C:\OpenCV2.1\include

Linker -> Add -> C:\OpenCV2.1\lib

5. 再到Linker setting -> Link libraries -> Add

cv210

cxcore210

highgui210

6. 執行成功!

OpenGL貼圖設定

1. 下載並設定好freeglut資料夾

2. 開啟CodeBlocks建立GLUT專案

3. 將上面的程式碼Copy到glut專案的cpp中

4. 對glut的專案檔按右鍵，重複上面4、5的步驟

5. 執行成功!

轉動地球

#include <opencv/highgui.h> ///for cvLoadImage()

#include <opencv/cv.h> ///for cvCvtColor()

#include <GL/glut.h> ///3D glut

#include <stdio.h>

GLUquadric * quad;

GLuint id;

float angle=0;

void display()

{   glEnable(GL_DEPTH_TEST); ///要啟動 Detph Test 深度值的測試,3D顯示才正確

    glClear(GL_COLOR_BUFFER_BIT  | GL_DEPTH_BUFFER_BIT);

    glPushMatrix(); ///自動轉很帥

        glRotatef(90, 1,0,0);

        glRotatef(angle, 0,0,1); ///自動轉很帥

        gluQuadricTexture(quad, 1);

        gluSphere(quad, 1, 30, 30); ///glutSolidTeapot(0.3);

    glPopMatrix(); ///自動轉很帥

    glFlush();

}

void timer(int t)

{   glutTimerFunc(20, timer, 0); /// 1000 msec   50fps:20msec

    angle+=1; ///自動轉很帥

    glutPostRedisplay();

}

int myTexture(char *filename)

{

    IplImage * img = cvLoadImage(filename); ///OpenCV讀圖

    cvCvtColor(img,img, CV_BGR2RGB); ///OpenCV轉色彩 (需要cv.h)

    glEnable(GL_TEXTURE_2D); ///1. 開啟貼圖功能

    GLuint id; ///準備一個 unsigned int 整數, 叫 貼圖ID

    glGenTextures(1, &id); /// 產生Generate 貼圖ID

    glBindTexture(GL_TEXTURE_2D, id); ///綁定bind 貼圖ID

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); 

    /// 貼圖參數, 超過包裝的範圖T, 就重覆貼圖

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); 

    /// 貼圖參數, 超過包裝的範圖S, 就重覆貼圖

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); 

    /// 貼圖參數, 放大時的內插, 用最近點

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

    /// 貼圖參數, 縮小時的內插, 用最近點

    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img->width, img->height, 0, GL_RGB,                  GL_UNSIGNED_BYTE, img->imageData);

    return id;

}

void myInit()

{   quad = gluNewQuadric();

    id = myTexture("earth.jpg");

}

int main(int argc, char**argv)

{   glutInit(&argc, argv);

    glutCreateWindow("3D");

    glutDisplayFunc(display); ///顯示

    glutTimerFunc(0, timer, 0);

    myInit(); ///我的 init 初始化 把貼圖準備好 前面OpenCV 2行, 後面 OpenGL 9行

    glutMainLoop();

}

肯尼斯的學習筆記 Week 7

用滑鼠調光源

建立GLUT專案，然後加入滑鼠調光源功能

程式碼：

GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };   //將const刪掉

void motion(int x, int y)

{

    light_position[0] = (x - 150) / 150.0 *2;

    light_position[1] = (y - 150) / 150.0 *2;

    glLightfv(GL_LIGHT0, GL_POSITION, light_position);

    glutPostRedisplay();

}

int main(int argc, char *argv[])

{

    ......

    glutMotionFunc(motion);  //在main加入mouse motion函式

}

肯尼斯的學習筆記 Week 5

Viewing

 

上週教學內容複習

1. 進入網址:http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/
2. 下載data.zip, windows.zip, glut32.dll


3. 解壓縮後，放到windows資料夾


4. 執行Transformation.exe

*用滑鼠拖曳綠色數字，按 R 可還原

投影視角

1. 執行Projection.exe

gluPerspective:

fovy: 視野大小
aspect:  視野寬度
zNear: 投影面的遠近
zFar: 後面的遠近

gluLookAt:

eye: 你的眼睛的位置
center: 你的眼睛看著的位置
up:  指向上的方向

2. 右鍵，點選glOetho:

glOrtho(垂直投影):

left, right, bottom, top, near, far 
(左, 右, 下, 上, 近, 遠)

肯尼斯的學習筆記 Week 4

移動、旋轉、縮放

前言

1. 建立GLUT專案

2. 改變顏色，增加茶壺

static void display(void)
{
glPushMatrix();
        glTranslated(-2.4,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
-->   glColor3f(1,1,0); glutSolidTeapot(1);
        glutSolidSphere(1,slices,stacks);
    glPopMatrix();
..........

移動圖形

glTranslated(x, y, z)    (x, y, z: x, y, z軸)

glPushMatrix();
        glTranslated(-2.4,1.2,-6);    <--  移動圖形至指定位置
.......

旋轉圖形

 glRotated(a, x, y, z)    (a: 旋轉角度, x, y, z: x, y, z軸)

glPushMatrix();
        glTranslated(-2.4,1.2,-6);
        glRotated(60,1,0,0);   <--  x軸旋轉60度
        glRotated(a,0,0,1);     <--  z軸旋轉a度 (a隨時間改變)
.......

縮放圖型

glScalef(x, y, z)   (x, y, z: x, y, z軸)

glPushMatrix();
        glTranslated(-2.4,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1); 
        glScalef(2, 2, 2);     <--  x, y, z軸同時放大兩倍
.......

現在就可以隨意移動、旋轉及縮放圖形囉 ~~

肯尼斯的學習筆記 Week 3

學習學姐的程式

程式碼：

//Drawing funciton

void draw(void)

{

  FILE *f;

  float w, h, c;

  float r, g, b;

  float i, j, x, y;

  //Background color

  glClearColor(0,0,0,1);

  glClear(GL_COLOR_BUFFER_BIT);

  //Read pixel file

  f = fopen("minion.txt", "r");

  //Read width, height, channel

  fscanf(f, "%f %f %f", &w, &h, &c);

  //Set point size

  glPointSize(10.0f);

  //Begin drawing

  glBegin(GL_POINTS);

  for(i=0; i<w; i++){

    for(j=0; j<h; j++){

      //Read r, g, b

      fscanf(f, "%f %f %f", &r, &g, &b);

      //Geometric transformation

      x = -(i-(w/2.0))/(w/2.0);

      y = (j-(h/2.0))/(h/2.0);

      //Draw(in python, read as bgr)

      glColor3f(b/255.0, g/255.0, r/255.0);

      glVertex3f(y, x, 0);

    }

  }

  //End drawing

  glEnd();

  fclose(f);

  

  //Draw order

  glutSwapBuffers();

}

//Main program

int main(int argc, char **argv)

{

  glutInit(&argc, argv);

  //Simple buffer

  glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE| GLUT_DEPTH);

  glutInitWindowPosition(50,25);

  glutInitWindowSize(300, 300);

  glutCreateWindow("minion");

  //Call to the drawing function

  glutDisplayFunc(draw);

  glutMainLoop();

  return 0;

}

*將minion.txt放進freeglut\bin中

建立3D圖案的程式

1. 下載3D Exploration並安裝

2. 上網任意下載一個3D圖形 (https://free3d.com/)，並在3D Exploration中開啟

3. 再另存新檔為cpp Open GL code類型，下一部的Export Type要設成Sample APP

4. 開啟CodeBlocks建立OpenGL project，再將cpp檔加入

5. 嘗試執行程式，會發生錯誤

6. 刪掉老舊的程式

7. 再次執行就會成功了

肯尼斯的學習筆記 Week 2

親手打造第一個OpenGL程式

1. 建立一個GLUT專案，再另外開Notrpad++建立一個.cpp檔


2. 將以下幾行程式碼複製過去新建的.cpp檔，建立好main函式


3. 再將display函式建立起來


4. 將建立好的程式碼整個複製回去Codeblocks，就可以成功執行程式


5. 可以使用glColor3f函式改變圖案顏色



程式碼：

#include <GL/glut.h>

void display(void)
{
glClearColor(1,0,0,0);  //背景顏色
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 glColor3f(0,1,1);          //圖像顏色 (R,G,B)
glutSolidTeapot(0.3);   //茶壺
glutSwapBuffers();      //交換圖像Buffers
}

int main(int argc, char *argv[])
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
glutCreateWindow("GLUT Shapes");   //視窗名稱
glutDisplayFunc(display);   //呼叫display函式
glutMainLoop();

}

6. 用頂點畫出圖案


7. 也可以設定頂點顏色


程式碼 (display函式部分)：

void display(void)
{
glClearColor(1,0,0,0);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glColor3f(0,1,1);
glBegin(GL_POLYGON);   //開始畫多邊形
glColor3f(1,0,0); glVertex3f(1,1,0);
glColor3f(0,1,0); glVertex3f(-1,1,0);
glColor3f(0,0,1); glVertex3f(0,-1,0);   //三個頂點
glEnd();   //結束畫圖
glutSwapBuffers();
}

肯尼斯的學習筆記 Week 1

建立第一個OpenGL程式

1. 開啟CodeBlocks, 點選 File -> New -> Project

2. 選取 OpenGL project

3. 設定專案名稱


4. 然後建立好後執行就完成了

建立GLUT程式

1. 下載freeglut資料夾到桌面上


2. 開啟CodeBlocks, 建立GLUT Project


3. 設定好專案名稱後進入到此畫面, 設定為freeglut的路徑


4. 到freeglut目錄裡的lib, 將libfreeglut.a複製, 並將它的名字改成libgult32.a


5. 設定完成後執行