范姜紹瑋_Week18_筆記

一、期末作品

范姜紹瑋_Week14_筆記

Rasterization
1.到moodle下載processing後，輸入以下程式碼
"size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
stroke(255,0,0);vertex(300,100);
stroke(255,255,0);vertex(500,500);
stroke(0,0,255);vertex(100,500);
endShape();"
就會出現一個中空的三角形

2.接者把stroke改成fill就會有一個填滿的三角形

3.

范姜紹瑋_Week13_筆記

色彩系統
1.打開Processing，輸入以下程式碼
"                                           "
size(255,255);
colorMode(HSB,255);
for(int x=0;x<255;x++)
{
  for(int y=0;y<255;y++)
  {
    stroke(x,y,255);
    point(x,y);
  }
}

范姜紹瑋_Week12_筆記

編譯來路不明的程式

1.先開好原始的GLUT專案後，再到MOODLE的上課檔案裡，下載"myGL_Frustrum221_MultiView_2012_1221-20171130T060949Z-001.zip"，將裡面的程式碼複製到開好的GLUT專案裡面。

2.記得在main的括弧中加入"int argc,char **argv"，也要在函式裏頭加入"glutInit(&argc,argv);"

3.再把setting的compiler的勾勾取消掉，接著就可以執行拉

--------------------------------------------------------------------------------------------------------------------------

1.下載Processing之後，添加新的庫文件，選擇3D，下載下圖的兩個文件。

2.開啟範例程式"Viewer2D"，

范姜紹瑋_Week11_筆記

在Openglut程式中加入聲音
1.首先，在外部加入include<mmsystem.h>
   接著，在main裡面加入
   "PlaySoundA("123.wav",NULL,SND_ASYNC);"
(記得將音檔放入freeglut的bin資料夾裡)

--------------------------------------------------------------------------------------------------------------------------
在程式裡播放MP3音樂檔
1.在社團中下載"CMP3_MCI.h"檔案，並將檔案放入專案資料夾裡，再將想要播放的MP3檔，放入freeglut的bin資料夾裡 

2.在專案裡輸入以下程式碼，就可以執行了

--------------------------------------------------------------------------------------------------------------------------
在Processing中播放MP3檔
1.打開processing，選擇java模式，並點選速寫本_引用庫文件_添加庫文件

2.搜尋Sound，並且下載Minim

3.下載完後輸入以下程式碼
"import ddf.minim.*;
  Minim minim;
  AudioPlayer player;
  void setup(){
    minim=new Minim(this);
    player = minim.loadFile("Hero.mp3");
    player.loop();
    player.play();
  }
  void draw(){}"
接著，把音檔拉入空白處，就可以執行了

范姜紹瑋_Week9_筆記

Bump Mapping凹凸貼圖
1.先到https://www.openprocessing.org/sketch/249457看程式範例

2.接著到moodle下載processing，載完後開啟processing，並將剛剛網站上的程式碼複製過來，在random裡面加入數字255，就可以執行了

--------------------------------------------------------------------------------------------------------------------------
用processing展示下載的圖片
1.先開啟新的文件，並加入以下程式碼(記得還要把要顯示的圖片拉到到程式碼裡)

PImage img=loadImage("CAR.jpg");  ///Processing image load it!

size(600,600); ///600*600的框框

image(img,0,0,600,600); ///在(0,0)的地方show the image img(600*600)

2.以上，就可以顯示囉

--------------------------------------------------------------------------------------------------------------------------
在滑鼠的位置顯示圖片
1.加入以下程式碼

PImage img;

void setup() {

  size(1280, 900);

}

void draw() {

  img=loadImage("CAR.jpg");

  image(img,mouseX,mouseY); ///從滑鼠位置顯示圖片

}

如此一來就會有疊影的效果

--------------------------------------------------------------------------------------------------------------------------
製作簡易馬力歐
1.將mario.png(找transparent的圖)跟brick.png的圖拉進去
PImage imgMario,imgBrick;
void setup() {
  size(800, 600);
  imgMario=loadImage("mario.png");
  imgBrick=loadImage("brick.png");
}
float marioX=200,marioY=300,marioVY=0;
void draw() {
  background(255);
  for(int x=0;x<18;x++) image(imgBrick,x*50,500,50,50);
  image(imgMario,marioX,marioY,100,100);
  marioY+=marioVY;
  marioVY+=0.98;
  if(marioY>=500-100) {marioY=500-100; marioVY=0;}
}

2.左右移動以及跳
PImage imgMario,imgBrick;
void setup() {
  size(800, 600);
  imgMario=loadImage("mario.png");
  imgBrick=loadImage("brick.png");
}
float marioX=200,marioY=300,marioVX=0,marioVY=0;
boolean marioOnFloor=false;  ///讓馬力歐只有在地上才能跳
void draw() {
  background(255);
  for(int x=0;x<18;x++) image(imgBrick,x*50,500,50,50);
  image(imgMario,marioX,marioY,100,100);
  marioY+=marioVY; marioX+=marioVX;
  marioVY+=0.98;
  if(marioY>=500-100) {marioY=500-100; 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; 
}

3.秀出完整地圖的馬力歐
在多把brick2.png圖拉進去(問號磚塊)
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,1,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=300,marioVX=0,marioVY=0;
boolean marioOnFloor=false;
void draw() {
  background(255);
  //for(int x=0;x<18;x++) image(imgBrick,x*50,500,50,50);
  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; 

}

范姜紹瑋_Week8_筆記

Texture貼圖
1.先到http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/下載"data.zip","windows.zip","glut32.dll"(把window.zip解壓縮到一個資料夾裡，再把glut32.dll丟進去，再把data.zip解壓縮後放進資料夾裡)，接著執行Texture.exe

OpenCV
1.到moodle下載OpenCV 2.1，下載完後執行，執行時，在記得在這裡選擇第三個選項。

2.接著開啟Console專案，開啟後輸入以下程式碼。

3.到google下載earth map，下載後將檔名改為"earth.jpg"，然後放到專案檔裡

4.接著到Setting->Compiler選擇Toolchain executables，按下Auto-detect後，選擇ok

5.在到cbp檔上，按下右鍵，選擇Build options

6.在Linker settings的Link libraries加入以下三個檔案，
以及Search directories的Compiler、Linker加入以下路徑

7.接著就可以執行了

--------------------------------------------------------------------------------------------------------------------------
在glut專案檔上執行OpenCV
1.開啟glut專案檔，接著將剛剛的Console專案檔裡面main函式的程式碼複製到glut專案檔裡面main函式，宣告也要記得複製！

2.記得重複上面的Build option步驟，緊接著將你要的圖放到freeglut_bin裡面，接著按執行，執行後再按下任意鍵就可以執行了。

--------------------------------------------------------------------------------------------------------------------------

將earth map在旋轉的球上顯示

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