Week18 期末專題

李柏徹的計算機圖學學習紀錄14

Rasterization
1.moodle下載processing
輸入以下程式碼
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,0);
stroke(255,255,0);vertex(500,500);
stroke(0,0,255);vertex(100,500);
//glEnd();
endShape();

把stroke改成fill

2.輸入以下程式碼
void setup(){
  size(600,600,P3D);
}
void draw(){
  background(255);
  beginShape(TRIANGLE);
  fill(255,0,0);vertex(100,100,0);
  fill(255,0,255);vertex(100,500,100);
  fill(255,255,0);vertex(500,500,0);
  endShape();
  beginShape(Triangle);
  fill(0,255,0);vertex(500,100,0);
  fill(0,255,255);vertex(500,500,100);
  fill(255,255,0);vertex(100,500,0);
  endShape();
}

李柏徹的計算機圖學學習紀錄13

week13 色彩系統
1.在moodle下載processing
輸入以下程式碼
size(255,255);
colorMode(RGB,255);
for(int x=0;x<255;x++)
{
  for(int y=0;y<255;y++)
  {
    stroke( _ , _ , _ );//_自行填入數字，以下使用 stroke(x,y,0);
    point(x,y);
  }
}
(1)RGB不動

第三個_改成x+y

(2)把RGB改成HSB

第三個_改成x+y

2.moodle下載roach.zip 解壓縮後開啟玩一玩

李柏徹的計算機圖學學習紀錄11

1.加入聲音
先開一個基本的GLUT專案
並如下圖加入程式碼

#include<mmsystem.h> ///使用MultiMedisSystem
#include<stdio.h>
int main(int argc, char *argv[])
{
    PlaySoundA("Wave.wav",NULL,SND_SYNC);
///Wave.wav放在freeglut的bin
    printf("海浪後出現了奇怪的畫面");
PS:
PlaySoundA(檔名,開啟位置,SND_SYNC(播放結束才執行下一行)/SND_ASYNC(開始播放並執行下一行))
2.嘗試不使用.wav 使用.mp3
在FB下載 CMP3_MCI.h
改寫原專案

#include"CMP3_MCI.h"
#include<stdio.h>
CMP3_MCI mp3;
int main(int argc, char *argv[])
{
    //PlaySoundA("Wave.wav",NULL,SND_SYNC);
    mp3.Load("file.mp3");
    mp3.Play();
3.使用processing3進行嘗試
下載processing3並添加Minim的函式庫


並輸入以下程式碼
import ddf.minim.*; //use ddf's minim music library
Minim minim;//int a; the whold system
AudioPlayer player;//cprreponding to one mp3 file
AudioPlayer player2;
void setup(){
  minim= new Minim(this);//constructor of Minim Object
  player = minim.loadFile("file.mp3");//minim load to player
  player.loop();
  player.play();
}
void draw(){
 
}
按Ctrl+k開啟資料夾位置並添加檔案

李柏徹的計算機圖學學習紀錄10

1.先到MOODLE下載Processing
2.右上角選AddMode加入Android模式

安裝完後選取Android並自動安裝Android SDK (1GB)
3.程式碼.
void setup()
{
  fullScreen();
}
void draw()
{
  if(mousePressed) background(255,0,0);
  else background (0,255,0);
}
4.有Android便連接手機 沒有可以安裝需擬機


5.嘗試執行以下程式碼
 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;
}

李柏徹的計算機圖學學習紀錄09

1.觀摩程式碼
前往https://www.openprocessing.org/sketch/249457
觀看一位日本人寫的模型及程式碼


2.到MOODLE下載processing3

3.解壓縮完後執行，把剛剛那個範例的程式碼丟進去，並在RANDOM中隨便補一個數

執行結果

4.到網路上隨便找圖片(以下以咖波為例)，載下來之後放到processing3的資料夾裡

然後開始輸入以下程式碼
PImage img=loadImage("capoo.png");//綠字要看圖片檔名
size(275,215); 字至少要大於圖片大小
image(img,0,0,275,215); 字代表圖片大小
執行結果:

5. 根據滑鼠位置繪圖(圖片使用網路上隨便找的ERROR)
圖片可以採用直接拉到寫程式碼的區域，會自動加入，加入後位置會放在
C:\Users\user\AppData\Local\Temp\untitled1478407187442716110sketches\sketch_171109c\data
sketch_171109c代表當前程式的檔名

然後輸入以下程式碼
PImage img;
void setup()
{
  size(1280,800);
  img=loadImage("IC725763.png");
}
void draw()
{
  //rect(mouseX,mouseY,50,50);
  image(img,mouseX,mouseY);
}

成果：

6.馬力歐

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,0,0,0,0,0,0,0,0},

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

             {0,0,0,0,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_Block.png");

  imgBrick2=loadImage("5da98730977895279f05af2eb7bd7516.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,100,100);

  marioY+=marioVY; marioX+=marioVX;

  marioVY+=0.98;

  if(marioY>=400){marioY=400;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;

}

以上程式有個小BUG是會跑出左右的視窗外，以後再行更改

李柏徹的計算機圖學學習紀錄08

1.到jsyeh.org/3dcg10下載下圖四個檔案

並解壓縮成如下圖

執行Texture.exe
下圖為嘗試更改過許多參數後的結果

2.上Moodle載Opencv2.1


3.開啟Codeblocks 並開始建立專案

輸入下列程式碼
#include<opencv/highgui.h>
int main()
{
    lplImage *img=cvLoadImage("earthmap.jpg");
    cvNamedWindow("Hello Opencv");
    cvShowImage("Hello Opencv",img);
    cvWaitKey(0);
    return 0;
}
到在Project按右鍵新增下列設定




到網路上找一張地球圖片，下載到專案裡

執行

4.新增一個week08-2的GLUT專案，並如同三之中修改設定
新增程式碼

在老師的程式碼中是用
圖片放置到freeglut\bin(在你下載的freegult中的bin)
5.下載老師的week08-3earth.zip 解壓縮後執行

完整程式碼
#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();
}

李柏徹的計算機圖學學習紀錄07

1.將IDLE中的
const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f }; 的const刪掉
2.新增motion函式
void motion(int x, int y)
{
    light_position[0]= (x-150)/150.0;
    light_position[1]= (y-150)/150.0;
    glLightfv(GL_LIGHT0,GL_POSITION,light_position);
    glutPostRedisplay();
}
3.在main中新增glutMotionFunc(motion);
呼叫剛剛新增的函式

完整程式碼：
/*
 * GLUT Shapes Demo
 *
 * Written by Nigel Stewart November 2003
 *
 * This program is test harness for the sphere, cone
 * and torus shapes in GLUT.
 *
 * Spinning wireframe and smooth shaded shapes are
 * displayed until the ESC or q key is pressed.  The
 * number of geometry stacks and slices can be adjusted
 * using the + and - keys.
 */

#ifdef __APPLE__
#include <GLUT/glut.h>
#else
#include <GL/glut.h>
#endif

#include <stdlib.h>

static int slices = 16;
static int stacks = 16;

/* GLUT callback Handlers */

static void resize(int width, int height)
{
    const float ar = (float) width / (float) height;

    glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glFrustum(-ar, ar, -1.0, 1.0, 2.0, 100.0);

    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity() ;
}

static void display(void)
{
    const double t = glutGet(GLUT_ELAPSED_TIME) / 1000.0;
    const double a = t*90.0;

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glColor3d(1,0,0);

    glPushMatrix();
        glTranslated(-2.4,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutSolidSphere(1,slices,stacks);
    glPopMatrix();

    glPushMatrix();
        glTranslated(0,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutSolidCone(1,1,slices,stacks);
    glPopMatrix();

    glPushMatrix();
        glTranslated(2.4,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutSolidTorus(0.2,0.8,slices,stacks);
    glPopMatrix();

    glPushMatrix();
        glTranslated(-2.4,-1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutWireSphere(1,slices,stacks);
    glPopMatrix();

    glPushMatrix();
        glTranslated(0,-1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutWireCone(1,1,slices,stacks);
    glPopMatrix();

    glPushMatrix();
        glTranslated(2.4,-1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glutWireTorus(0.2,0.8,slices,stacks);
    glPopMatrix();

    glutSwapBuffers();
}


static void key(unsigned char key, int x, int y)
{
    switch (key)
    {
        case 27 :
        case 'q':
            exit(0);
            break;

        case '+':
            slices++;
            stacks++;
            break;

        case '-':
            if (slices>3 && stacks>3)
            {
                slices--;
                stacks--;
            }
            break;
    }

    glutPostRedisplay();
}

static void idle(void)
{
    glutPostRedisplay();
}

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 };
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 };

/* Program entry point */
void motion(int x, int y)
{
    light_position[0]= (x-150)/150.0;
    light_position[1]= (y-150)/150.0;
    glLightfv(GL_LIGHT0,GL_POSITION,light_position);
    glutPostRedisplay();
}
int main(int argc, char *argv[])
{
    glutInit(&argc, argv);
    glutInitWindowSize(640,480);
    glutInitWindowPosition(10,10);
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("GLUT Shapes");

    glutReshapeFunc(resize);
    glutDisplayFunc(display);
    glutKeyboardFunc(key);
    glutMotionFunc(motion);
    glutIdleFunc(idle);

    glClearColor(1,1,1,1);
    glEnable(GL_CULL_FACE);
    glCullFace(GL_BACK);

    glEnable(GL_DEPTH_TEST);
    glDepthFunc(GL_LESS);

    glEnable(GL_LIGHT0);
    glEnable(GL_NORMALIZE);
    glEnable(GL_COLOR_MATERIAL);
    glEnable(GL_LIGHTING);

    glLightfv(GL_LIGHT0, GL_AMBIENT,  light_ambient);
    glLightfv(GL_LIGHT0, GL_DIFFUSE,  light_diffuse);
    glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);
    glLightfv(GL_LIGHT0, GL_POSITION, light_position);

    glMaterialfv(GL_FRONT, GL_AMBIENT,   mat_ambient);
    glMaterialfv(GL_FRONT, GL_DIFFUSE,   mat_diffuse);
    glMaterialfv(GL_FRONT, GL_SPECULAR,  mat_specular);
    glMaterialfv(GL_FRONT, GL_SHININESS, high_shininess);

    glutMainLoop();

    return EXIT_SUCCESS;
}

李柏徹的計算機圖學學習紀錄06

一、上Zuvio回答問題，複習上禮拜的學習進度。
二、下載上禮拜未成功的編譯檔，把下圖的C++11勾掉，即可編譯出第二張圖的圖形
\

三、打光：去source資料夾中原始的projection.c找到打光相關程式碼並加入

GLfloat light_pos[] = { 0.0, 0.0, -1.0, 0.0 };//決定打光位置

glEnable(GL_DEPTH_TEST);//3D影像深度
glEnable(GL_LIGHT0);
glEnable(GL_LIGHTING);
glLightfv(GL_LIGHT0, GL_POSITION, light_pos);
成果：

四、Keyboard and Mouse
void keyboard(unsigned char key, int x, int y)
{
    printf("now: %c (%d %d)\n",key,x,y);
    if(key=='1')
    {
        rotatex++;
        glutPostRedisplay();
    }
    if(key=='2')
    {
        rotatey++;
        glutPostRedisplay();
    }
    if(key=='3')
    {
        rotatez++;
        glutPostRedisplay();
    }
    //printf("%d %d %d\n", rotatex, rotatey, rotatez);
}
void mouse(int button,int state, int x, int y)
{
    printf("button:%d state:%d (%d %d)\n",button,state,x,y);
    if(state==GLUT_DOWN)
    {
        oldx=x;
        oldy=y;
    }
    //glutPostRedisplay();
}
void motion(int x, int y)
{
    rotatey+= -(x-oldx);
    rotatex+= -(y-oldy);
    oldx=x;
    oldy=y;
    glutPostRedisplay();
}
main中加入
glutMouseFunc(mouse);
glutKeyboardFunc(keyboard);
glutMotionFunc(motion);
讓鍵盤跟滑鼠有一些功能


今日完整程式碼：
#include <GL/glut.h>
#include<stdio.h>
#include "glm.h"
GLMmodel* pmodel = NULL;
int rotatex=0,rotatey=0,rotatez=0;
int oldx=0,oldy=0;
void keyboard(unsigned char key, int x, int y)
{
    printf("now: %c (%d %d)\n",key,x,y);
    if(key=='1')
    {
        rotatex++;
        glutPostRedisplay();
    }
    if(key=='2')
    {
        rotatey++;
        glutPostRedisplay();
    }
    if(key=='3')
    {
        rotatez++;
        glutPostRedisplay();
    }
    //printf("%d %d %d\n", rotatex, rotatey, rotatez);
}
void mouse(int button,int state, int x, int y)
{
    printf("button:%d state:%d (%d %d)\n",button,state,x,y);
    if(state==GLUT_DOWN)
    {
        oldx=x;
        oldy=y;
    }
    //glutPostRedisplay();
}
void motion(int x, int y)
{
    rotatey+= -(x-oldx);
    rotatex+= -(y-oldy);
    oldx=x;
    oldy=y;
    glutPostRedisplay();
}
void drawmodel(void)
{
    if (!pmodel) {
pmodel = glmReadOBJ("data/al.obj");
if (!pmodel) exit(0);
glmUnitize(pmodel);
glmFacetNormals(pmodel);
glmVertexNormals(pmodel, 90.0);
    }

    glmDraw(pmodel, GLM_SMOOTH | GLM_MATERIAL);
}
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glPushMatrix();
        glRotatef(rotatex,1,0,0);
        glRotatef(rotatey,0,1,0);
        glRotatef(rotatez,0,0,1);
        drawmodel();
    glPopMatrix();
    glutSwapBuffers();
    //printf("display: %d %d %d\n", rotatex, rotatey, rotatez);
}
GLfloat light_pos[] = { 0.0, 0.0, -1.0, 0.0 };
int main(int argc, char**argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("week05");
    glutDisplayFunc(display);
    glutMouseFunc(mouse);
    glutKeyboardFunc(keyboard);
    glutMotionFunc(motion);
    glEnable(GL_DEPTH_TEST);
    glEnable(GL_LIGHT0);
    glEnable(GL_LIGHTING);
    glLightfv(GL_LIGHT0, GL_POSITION, light_pos);

    glutMainLoop();
}

李柏徹的計算機圖學學習紀錄04

1. 參照第一周的教學，產生內建專案

2.了解呈現出那六個3D模型的程式碼，並在前三個程式碼後面分別加入茶壺



成果:
3. 使用glColor3f(r,g,b); 進行更改顏色

4. 嘗試修改glRotated(a,x,y,z);//a=t*90; 即每T時間轉90度
以下以下遮罩調後四個全部的旋轉，前兩個統一遮罩調第一行，對第一個的第二行進行修改嘗試

5。嘗試修改glTranslatef(x,y,z);和加入glScalef(x,y,z)來位移和縮放物體

程式碼整理：
1.Translate(位移)
glTranslated( x, y, z)：朝( x, y, z)方向平移
2.Rotate(旋轉): 右手座標系統
glRotated( R, x, y, z)：以( x, y, z)為軸轉R角度。
3.Scale(縮放)
glScalef( x, y, z)：x,y,z為縮放率，x, y, z座標分別縮放為原本的 x, y, z倍