師大柯雷吉歐的計圖筆記-Week18

一、期末作品

師大柯雷吉歐的計圖筆記-Week14

一、Rasterization

size(600,600,P3D);

background(255);

//glBegin(GL_POLYGON);

beginShape(TRIANGLE);

  //glColor3f(r,g,b);

  //glVertex3f(x,y,z);

  stroke(255,0,0);vertex(300,100);

  stroke(255,255,0);vertex(500,500);

  stroke(0,0,255);vertex(100,500);

//glEnd();

endShape();

stroke：畫出一個空心，邊有色彩的三角形

size(600,600,P3D);

background(255);

//glBegin(GL_POLYGON);

beginShape(TRIANGLE);

  //glColor3f(r,g,b);

  //glVertex3f(x,y,z);

  fill(255,0,0);vertex(300,100);

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

  fill(0,0,255);vertex(100,500);

//glEnd();

endShape();

fill：畫出實心有色彩的三角形

師大柯雷吉歐的計圖筆記-Week13

一、色彩系統

size(255,255);

colorMode(HSB,255); ///HSB為某個色彩定義，還有其他的(RGB...)

for(int x=0;x<255;x++)

{

 for(int y=0;y<255;y++)

 {

  stroke(x,y,255); ///色像座標，由3個組成

  point(x,y);

 }

}

size(255,255);

colorMode(RGB,255);

for(int x=0;x<255;x++)

{

 for(int y=0;y<255;y++)

 {

  stroke(x,y,255);

  point(x,y);

 }

}

師大柯雷吉歐的計圖筆記-Week12

一、範例檔

1.下載myGL_Frustum221_MultiView

(1)跑看看執行檔

(2)程式.cpp.編譯
1.開glut專案
2.將下載的cpp程式碼複製過去
3.記得在setting-compiler把第2個勾勾拿掉
並在int main  改成
int main(int argc,char *argv[])
{
glutInit(&argc,argv);

4.就可以執行了

二、View2D

1.下載Processing3

2.速寫本-引用庫文件-填加庫文件

3.下載Collada  &  Pinking

4.文件-範例程序

5.開啟Viewer2D ，執行

師大柯雷吉歐的計圖筆記-Week11

一、加入聲音

1.開一個glut專案

2.加入這2行程式碼

#include <mmsystem.h> ///使用 Multimedia System多媒體系統

 ///要讓它有聲音(檔名,在哪裡,如何播<SND_ASYNC / SND_SYNC(不等待/等待)>)

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

    ///Ascii的檔名(正當的英文)

記得下載的wav檔要放在freeglut的bin資料夾裡，且檔名要是符合你程式碼的檔名

3.就可以播放出聲音了。

二、如何加入mp3檔

#include "CMP3_MCI.h" ///使用外掛,老師提供的h檔

CMP3_MCI mp3;/// 宣告變數

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

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

一樣要將下載的mp3檔放到freeglut的bin資料夾裡

並在專案add CMP3_MCI.h 檔

就可以播放嘍。

三、用Processing 3開音樂檔

1.開啟Processing後，下載Minim...這個mode

2.好了之後打上這些程式碼，並將mp3檔拉進視窗裡

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

Minim minim; //int a; the whold system

AudioPlayer player; //corresponding to one mp3 file

AudioPlayer player2;

void setup(){

    minim=new Minim(this);

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

    player.loop();

    player.play();

}

void draw(){

  

}

就可以播放嘍。

師大柯雷吉歐的計圖筆記-Week10

一、製作Android程式

1.一樣開啟Processing，點右上角-添加模式

下載Android模式

2.由於使用Android模式要接Android手機，沒有手機也可以用Java模式寫

void setup(){

 fullScreen(); 

}

void draw(){

 if(mousePressed) background(255,0,255);

 else background(0,255,0);

}

可以讓手機未觸碰時顯示綠色

觸碰螢幕及顯示紫色

*連接手機後要設定-開發人員選項-USB偵錯模式開啟

二、球球碰撞偵測

下面是葉正聖老師的範例程式碼

可以使2顆球在小於多少半徑會以反射角反彈回去

void setup() {

size(500, 500);

}

float ballX=250, ballY=450, ballVX=1.3, ballVY=-10;

float ball2X=250, ball2Y=50;

void draw() {

if ( dist(ballX, ballY, ball2X, ball2Y)<100 ) {

float cx=(ballX+ball2X)/2, cy=(ballY+ball2Y)/2;

float nx=ballX-ball2X, ny=ballY-ball2Y;

line(ballX,ballY, ball2X,ball2Y);

PVector N=new PVector(nx, ny);

N.normalize();

PVector v0=new PVector(ballVX, ballVY);

float len= -N.dot(v0);

v0.add(N.mult(len*2));

line(cx,cy, cx+10*ballVX, cy+10*ballVY);

line(cx,cy, cx+20*v0.x, cy+20*v0.y);

ellipse(cx, cy, 10, 10);

stroke(0); 

line(ballX, ballY, ball2X, ball2Y);

stroke(255, 128, 0); 

line(cx, cy, cx+5*ballVX, cy+5*ballVY);

stroke(255, 128, 0); 

line(cx, cy, cx+5*v0.x, cy+5*v0.y);

stroke(255, 0, 0); 

line(cx, cy, cx+N.x, cy+N.y);

//return;

ballVX=v0.x; 

ballVY=v0.y;

}

background(255);

ballX+=ballVX; 

ballY+=ballVY;

if(ballX<50 || ballX>500-50) ballVX = -ballVX;

if(ballY<50 || ballY>500-50) ballVY = -ballVY;

ellipse(ballX, ballY, 100, 100);

ellipse(ball2X, ball2Y, 100, 100);

}

void mouseDragged(){

ball2X=mouseX; ball2Y=mouseY;

}

師大柯雷吉歐的計圖筆記-Week9

一、Bump Mapping凹凸貼圖

1.先到https://www.openprocessing.org/sketch/249457

觀看一個範例圖以及程式碼。

2.到moodle下載processing3

下載好後解壓縮，點選processing3

將剛剛網站上的範例程式碼複製貼上過來，並執行

會發現random這行有錯誤，在裡面加入數字(255)

就可以成功執行了

3.接下來試著讓processing展示下載的圖片

首先新開一個文件，並打上

PImage img=loadImage("cogi.jpeg");  ///Processing image load it!

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

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

並將想要顯示的圖片(cogi.jpeg)拉進來

就可以顯示嘍

4.在滑鼠位置跑出圖片

PImage img;

void setup() {

  size(1280, 900);

}

void draw() {

  img=loadImage("cogi.jpeg");

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

}

就會有下面這個效果

5.Mario
將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;}
}
就可以顯示出馬力歐跟磚塊了

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; 
}
這樣就可以讓馬力歐左右移動以及跳

在多把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貼圖(學會glTexCoord2f(tx,ty)功能)

1.一樣到 jsyeh.org/3dcg10 下載[source][data][win32]  glut32.dll 這4個檔案

將[data][win32]  glut32.dll 放在同一個資料夾，並執行 Texture.exe

就可以打開範例檔

2.上網或moodle下載  OpenCV 2.1

記得，要點第2個或第3個

開啟Console專案

將main函式改成以下

#include <opencv/highgui.h>
int main()
{
IplImage * img=cvLoadImage("earth.jpg");  earth.jpg 是你下載放進專案資料夾裡的圖片檔名稱

cvNamedWindow("hello");

cvShowImage("hello", img);
cvWaitKey(0);
return 0;
}

再來要設定一些OpenCV的地方

對專案按右鍵-> Build options...

在Compiler Add OpenCV 2.1裡的include

在Linker Add OpenCV 2.1裡的lib

再來到Link settings Add  lib裡的cv210.lib  cxcore210.lib  highgui210.lib

就可以執行了~

3.glut專案也可以執行

開啟glut專案

並在main上面 加上

#include <opencv/highgui.h>

main裡面加

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

cvNamedWindow("hello");

cvShowImage("hello", img);
cvWaitKey(0);

並將你要的圖放到freeglut-bin裡面

並設定上述OpenCV的步驟

(對專案按右鍵-> Build options...~

再來到Link settings Add  lib裡的cv210.lib  cxcore210.lib  highgui210.lib)

就可以執行了(按空白鍵可叫出左上角視窗)

4.將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();

要在資料夾加入這些檔案(cv210.dll  cxcore210.dll  highgui210.dll  freeglut.dll  earth.jpg)

就可以轉動了

師大柯雷吉歐的計圖筆記-Week7

一、用滑鼠打光

1.先建一個glut專案

打開main.cpp看到126~134行程式碼

const GLfloat light_ambient[]  = { 0.0f, 0.0f, 0.0f, 1.0f };

const GLfloat light_diffuse[]  = { 1.0f, 1.0f, 1.0f, 1.0f };

const GLfloat light_specular[] = { 1.0f, 1.0f, 1.0f, 1.0f };

const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };

const GLfloat mat_ambient[]    = { 0.7f, 0.7f, 0.7f, 1.0f };

const GLfloat mat_diffuse[]    = { 0.8f, 0.8f, 0.8f, 1.0f };

const GLfloat mat_specular[]   = { 1.0f, 1.0f, 1.0f, 1.0f };

const GLfloat high_shininess[] = { 100.0f };

前四行是控制打光、後四行是材質。

今天重點是要做用滑鼠控制打光

將上面打光第四行 

const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };   的cost拿掉

並在下面加上

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

}

並記得在main加上  glutMotionFunc(motion);

就可以按住滑鼠拖曳打光嘍~