圖學筆記乄Week18

期末專題展示

連結:

網址: https://youtu.be/iIq87Nf90zQ

圖學筆記乄Week17

專題製作

解決上周困難: 打光問題

=>打光重點:法向量

                                                     x        y        z        w

GLfloat light_position1[] = {-10.0f, -40.0f, 15.0f, 1.0f };

1.當w為0 是平行光  而xyz值就是此平行光法向量值。

2.若w為1，此光為聚光燈，xyz為燈源位置。

此時，要在一個程式碼:const GLfloat lightDirection[] = {0.0, 0.0, 1.0}; 

上述藍色程式碼是定義其聚光燈方向向量。

glLightfv(GL_LIGHT0, GL_SPOT_DIRECTION, lightDirection);// 聚光灯主轴方向 spot direction

glLightf(GL_LIGHT0, GL_SPOT_CUTOFF, 0.0);

聚光燈需配合此兩行(寫在main中)

=>平行光與聚光燈差別?

=>平行光:在他的法向量中照射到的物體，其光亮程度都是一樣的 沒有隨遠近而變強變弱。

=>聚光燈:就是想像一個電燈在固定位置，所以其光強弱會與距離有關。

圖學筆記乄Week16

期末專題製作:

進度:

匯入模型，設計室內空間。

難題:

模型顏色?環境顏色改變。

解決:

貼圖影響顏色部分:因為貼圖完，OpenGL會依照最後一個顏色再繼續畫下去，所以影響其他部分。

=>

方法: 沒有貼圖的部分，glDisable(GL_TEXTURE_2D);  使用此程式碼關閉貼圖，

在要貼圖地方glEnable(GL_TEXTURE_2D); 使用此語法。

圖示:

有glDisable(GL_TEXTURE_2D);

=>

沒有:

=>

地面受影響。

圖學筆記乄Week15

  Antilias

=>去除鋸齒狀。
=>狀況:就是當繪圖的頻率(或是解析度)高於你的電腦的解析度時候，
某些部分會因為同一格像素格子都要畫上某個顏色而造成share同一格，結果圖形有點偏差變成不是我們想像的  如圖:

期末專題:

=>今日進度

1.環境設置:

2.移動與空間變換:

=>

1)

->glutSolidSphere(1,10,10); 以此球體當目標點(未來會匯入模型)

->移動  只用keyboard(); Week04有教;

2)

=>

->設置到達橘色牆面時候(y=200時)

轉換到下一張地圖(傳送點概念)

->目前只有兩張測試 所以以bool作判定，

預計有多張環境，正在思考用什麼判定。

進度:(5~10)%

圖學筆記乄Week14

Rasterization:

3D的圖投影在2D的方格空間上，有好像柵欄一樣，最後予以著色

EX:

以三角形教學，若標頂點畫凹多邊形，其結果可能不如預期

=>
多了一個點後的結果
=>
-----------------------------------------------------------------------
期末作品Q&A!!

本次學習到:
1.地面設置!
========>當初我為了這個做不出來卡好幾天，最後還是上網找到資源post出來的，
老師現場3分鐘結束QAQ。

2.人物設置(動作):這個OK，已經學習到。不過倒是有學到不童設置方法移動速度的不同。

圖學筆記乄Week13

Week13:

1. VR機器體驗: 老師帶了珍藏的VR給同學們開眼界。

2.kids Coding 創立50年活動
->課堂上的線上休閒
->

3.RGB   //光三原色的比例

  //HSB:色相,飽和度,亮度
for(int x=0;x<255;x++)
{
  for(int y=0;y<255;y++)
  {
       stroke(x,y,255);
       point(x,y);
  }
}

在processing3.3.6中 在coloemode右鍵，參考文檔:




然後在data標籤中找到color 點下去:

有教學!!!!

圖學筆記乄Week12

Scene、Morap,Sketon,Model

一.3D介面教學

1.processing-Library 2D 

首先，下載兩個library 

=>(綠勾部分)

開啟範例程式 run:

=>

程式碼中:

boolean modelsEnabled[] = new boolean[]{false,false,false,false,false,false,true};

          if (modelsEnabled[0]) models[0] = ColladaLoader.load("sketchup/truck.dae",this,optionals);

          // a beer can with textures, basic shapes and lines

          if (modelsEnabled[1]) models[1] = ColladaLoader.load("sketchup/duff.kmz",this,optionals);

          //default sketchupmodel with transparent textures and colors

          if (modelsEnabled[2]) models[2] = ColladaLoader.load("sketchup/ghostly_susan_at_glasswall.kmz",this,optionals);

          //a kmz just with one triangle, one texture and three lines

          if (modelsEnabled[3]) models[3] = ColladaLoader.load("sketchup/simpleshapes.kmz",this,optionals);

         

          optionals.setProperty("LinkingSchema", "Blender"); //blender parsing profile

//          optionals.setProperty("debuglevel", "4"); //4 = extreme details 3 = details, 2 = medium, 1 = abstract , 0 = none (default)

         //Blender formated file (to see it: scale bigger)

         //a transparent skull (triangles only)

          if (modelsEnabled[4]) models[4] = ColladaLoader.load("blender/halloween_crystal.dae",this,optionals);

          //same skull but textured (triangles only)

          if (modelsEnabled[5]) models[5] = ColladaLoader.load("blender/halloween_textured.dae",this,optionals);

          //same skull as grid (lines only)

          if (modelsEnabled[6]) models[6] = ColladaLoader.load("blender/halloween_grid_only.dae",this,optionals);

藍色部分的TRUE/FALSE 與綠色部分對應 不同true/false組合有其意義。

=>

=>

=>

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

額外介紹:Unity

=>一個簡單操作，做出圖學的軟件，幾行就能展現出OPENGL幾十行程式碼。

Unity基礎底層是C/C++。

=>內容多，網路有許多教學。

=>優點:他可以專業(懂程式，能寫openGL的人)與非專業人士共同合作製作遊戲

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

Morap,Sketon,Model:

---By Processing

簡單的樹狀結構->影像動作分析

=>

=>學習從模仿開始，老師實力高深，說寫就寫出來了!

=>於是分享給學生們看有沒有啟發。或許學下程式碼中的功夫加以應用

(程式碼老師版權，不po)

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

其他老師的程式:

圖學筆記乄Week11

聲音、音效

1.sound in C/C++(glut project)

=>

需要:

#include "CMP3_MCI.h"     CMP3_MCI是一個h檔 網路有提供。

CMP3_MCI mp3;  宣告變數!! 重要。

  mp3.Load("file.mp3");    load音樂檔

  mp3.Play();        播放。

=>

2. sound in JAVA  by process環境

=>要先載library中的Minim

import ddf.minim.*;     匯入library minim

Minim minim;   // 變數 

AudioPlayer player;

void setup(){

minim=new Minim(this);

player=minim.loadFile("file.mp3");    //讀檔

player.loop();         

player.play();        //播放

}

P.S :檔案的路徑 要注意~~!

圖學筆記Week10

1，期末專題討論

2，process3 mode anroid教學

->process3要下載 android模式
自動安裝 Android SDK NDK

->

android mode需要USB連接電腦與手機，
所以用java mode先做測試。

3.碰撞問題:

=>
寫出求碰撞以及撞到視窗邊界時候反射回去的碰撞。
此圖程式碼只要在+上滑鼠設置就基本完成!

=>附上程式碼:
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;
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));
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;
}

圖學筆記@Week09

Bump Mapping

1.今日PPT教學講解

2.使用 Processing 3.3.6 作簡單程式

=>EX:

3.在簡單程式之前，有先使用範例程式教學

=>

4.加入滑鼠操作:

=>

=>

(模擬error)

5.鍵盤移動:

=>模擬馬力歐

=>

=>按了'UP'＿

圖學筆記Week08

主題:Texture

需要檔案:

OpenCV2.1

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

需要程式碼

#include <opencv/highgui.h>

int main()

{

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

cvNamedWindow("hello");

cvShowImage("hello", img);

cvWaitKey(0);

}

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

注意事項:

需要在專案檔設置build option

->

=>Link setting 加入三個lib檔

->

=>search dirtories中的linker跟compiler設置位置

->

=>沒注意到這些將可能error

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

開openGL專案，將上述所教的放入此專案檔，

=>他們可以共存~

做出旋轉地球:

需要涵式:

=>

#include <opencv/cv.h>

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;

}

=>gluQuadricTexture(quad, 1);  in function display()

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

     in main function

->

圖學筆記Week07

Lightening&Shading(光影)

今日函式:

light_position[]={2.0f, 5.0f, 5.0f, 0.0f}  ->內建程式碼，打光位置。

void Motion(int x,int y)

{

   light_position[0]=(x-150)/150.0*50;   //改變X座標位置

    light_position[1]=-(y-150)/150.0*50;  //改變Y座標位置

    glLightfv(GL_LIGHT0, GL_POSITION, light_position);   //在main函式有 ，需呼叫才會打光

    glutPostRedisplay();

}

->

->

圖學筆記Week06.

主題:Lighting

主要使用程式碼:    

    GLfloat light_pos[] = { 0.0, 0.0, -1.0, 0.0 };

    glEnable(GL_DEPTH_TEST);

    glEnable(GL_LIGHT0);

    glEnable(GL_LIGHTING);

    glLightfv(GL_LIGHT0, GL_POSITION, light_pos);

->pos為陣列宣告  這是一個打光位置的宣告。

以上程式碼是老師提供的範例中擷取出來--->[projection.c]

->打光前

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

->打光後

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

ps. glEnable(GL_DEPTH_TEST); 此為深度測試，若沒有此行，打光會失敗。

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

Mouse&Keyboard的旋轉移動

需要程式碼:

In main:

    glutMouseFunc(Mouse);

    glutMotionFunc(Motion);

    glutKeyboardFunc(Keyboard); 

增加凾式:
void Mouse(int button,int state,int x,int y)
void Motion(int x,int y)
void Keyboard(unsigned char key,int x,int y)

In Mousfunction:
if(state==GLUT_DOWN){oldX=x;oldY=y;} 設置擊點滑鼠時記錄作標。
In Motionfunction:
   rotateX+=(oldY-y);    rotate變數是要選轉的量，當滑鼠移動時記錄他的變量。
   rotateY+=(oldX-x);
   oldX=x;oldY=y;
   glutPostRedisplay();

In Keyboard:
    switch(key)
    {
    case '1':                     這是利用鍵盤按鍵改變旋轉的變量
        rotateX+=2;
        break;
    case '2':
        rotateY++;
        break;
    case '3':
        rotateZ++;
        break;
    }
    glutPostRedisplay();

In display:
    glPushMatrix();
    glRotatef(rotateX,1,0,0);
    glRotatef(rotateY,0,1,0);
    glRotatef(rotateZ,0,0,1);
    drawmodel();
    glPopMatrix();

-----------------------------------------------
以上即可旋轉

移動呢? 請嘗試看看吧!!

圖學筆記~Week05

主題:Viewing

1.跑EXE檔了解各個函式參數內容:

->

以上都是各個函式的EXE檔

目前使用:Transformation.EXE

->

Projection.EXE

-> 圖2.

圖2來源:

以上程式均有附上source程式碼，不過對於初學者顯得有點複雜，因此從中擷取部分程式碼即可有功能。

->

圖學筆記Week04

第一步 拿出標準範例

->code block開啟glut專案檔(第一週上課部份請回顧Week01)
->

第二步  理解範例程式中Translate程式碼:

translate(x,y,z); x為螢幕左右位移(X座標) Y為上下(Y座標) Z前後(Z座標，有遠近的感覺)
-> 這是原本範例
-> 茶壺便是嘗試使用額外畫的圖
glPushMatrix();
        glColor3d(1,1,0);
        glTranslated(1.3,0,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutSolidTeapot(1);
    glPopMatrix();

第三步 glRotated函式

        glRotated(60,1,0,0);  60是指角度， 1,0,0分別指X Y Z座標 (1,0,0)就是代表了X軸
->此行意思為:以座標軸(1,0,0)旋轉60度 (右手座標原則，逆時針繞)
-> 
茶壺:含有 glRotated(a,0,0,1); (會不斷旋轉)
左下錐形圖:沒有任何glRotated函式;
中間下方的錐形圖: glRotated(30,1,0,0); (所以看起來與左下的圖有角度的不同)
     
----------------------------------
 ->   const double t = glutGet(GLUT_ELAPSED_TIME) / 1000.0;
        const double a = t*90.0;
        glRotated(a,0,0,1);
        a變數取決於t而t是時間函數所以，a會隨時間一直改變,也因此圖形能不斷旋轉

第四步  大小縮放 glScaled(x,y,z);

->分別對x y z分量做比例放大。
->所以是可以單獨放大縮小的。
->
->紅圈為原本大小
黃圈為1.5倍大   ------------------------------------------------glScaled(1.5,1.5,1.5);
下方紫色網圈為X分量1.5倍 Y、Z為0.5倍----------------glScaled(1.5,0.5,0.5);


第五步  拖曳圖形
#include <GL/glut.h>
#include <stdlib.h>
#include <math.h>

float dx=0,dy=0,dz=0;
int oldX=0,oldY=0,oldZ=0;

void display()
{
   glClearColor(0.5,0,1,0); //背景顏色
   glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
   glPushMatrix();
   glTranslated(dx,dy,dz);
   glutSolidTeapot(0.3);//此行是自己+的程式碼 作用為畫出茶壺的圖案。
   glPopMatrix();
   glutSwapBuffers();
}
void Motion(int x,int y)
{
    dx+=(x-oldX)/150.0;
    dy+=-(y-oldY)/150.0;
    oldX=x,oldY=y;
    glutPostRedisplay();
}

void Mouse(int button,int state,int x,int y)
{
    if(state==GLUT_DOWN){oldX=x;oldY=y;}
}
int main(int argc,char *argv[])
{
 glutInit(&argc, argv);
 glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
 glutCreateWindow("GLUT Shapes");
 glutMouseFunc(Mouse);
 glutMotionFunc(Motion);
 glutDisplayFunc(display);
 glutMainLoop();

}

->