計圖筆記Week18

期末專題展演
https://youtu.be/iqvzqzelFxM

計圖筆記week17

下周要期末作品展示了

專題在做細微顏色修改和動畫速度調整

計圖筆記WEEK16

專題進度:
做出一大一小球會一分為二
float r1=200, r2=0;
float totalArea=r1*r1;
boolean touched=false;
int animT=0;
void setup(){
size(800,600);
}
void draw(){
background(255);
if(touched) fill(255,255,0);
else fill(255);
ellipse(300,300, r1,r1);
ellipse( 600,300, r2, r2);
if(touched && animT>0){
//same total area
float diff=(totalArea/3) / 60 * (60-animT);
r2=sqrt(diff);
r1=sqrt(totalArea-diff);
animT--;
}
}
void mousePressed(){
if( dist( mouseX, mouseY, 300,300 ) < r1/2 ){
touched=true;
animT=60;
}
}

計圖筆記week15

本週主題有期末作品的製作和Anti-aliasing的講解。
Anti-aliasing主要就是透過在會有鋸齒狀的斜線
或是直線周圍追加灰階的顯示，達成視覺上去鋸齒的效果。

計圖筆記week14

畫三角形:

程式碼:

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

填滿圖案

size(600,600,P3D);

background(255);

beginShape(TRIANGLE);

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

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

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

endShape();

重疊三角形

void setup()
{size(600,600,P3D);
}
void draw()
{
background(255);
beginShape(TRIANGLE);
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();

}

計圖筆記WEEk13

AR體驗：
gopro*8
環景照像機
AR眼鏡
微型電腦


Processing 色彩應用
RBG色彩條：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

myGL_Frustrum221編譯且執行

1. 至moodle 下載myGL_Frustrum221壓縮檔，解壓縮

2. 建立GLUT專案檔
    解壓縮後資料夾裡的程式碼 複製至專案檔中

3. 出現問題 : freeglut ERROR: Function called without first calling 'glutInit'
    解決方法 :
A.int main(int argc,char *argv[]) 補上
B. glutInit( & argc, argv );這行指令加在main裡面)

計圖筆記WEEK11

在GLUT專檔中加入音效/音樂
(1)程式碼:
專案檔打開後 加入#include<mmsystem.h>
PlaySoundA("file.wav",NULL,SND_ASYNC);
//PlaySoundA("檔名.wav",NULL,SND_ASYNC);==>SYNC不等待同步 ASYC會等音樂播完才繼續

(2)簡化:
#include <GL/glut.h>
#include<mmsystem.h>
#include<stdio.h>

int main()
{
PlaySoundA("1.wav",NULL,SND_ASYC);
printf("*");
return 0;
}

二、在Processing 加入音效
從函式庫中尋找sound，然後選擇其中一種
載完之後可以從範例程式中學他的函式庫用法

計圖筆記WEEK10

()老師播放SIGGRAPG ASIA和圖學相關作品的影片

(2)用processing寫Android程式碼
   processing更改mode方式 : 右上角點添加模式，選android
  接下來的程式碼即可在手機上投影

(3)與專題同組開始討論我們的專題方向及實作辦法

計圖筆記WEEK09

Bump Mapping

https://www.openprocessing.org/sketch/249457　下載code執行

在Processing中匯入圖片

1.將圖片拖曳到編輯器中  並加入程式碼
PImage img=loadImage("圖片檔名");size(長,寬);image(img,0,0,長,寬);

2.讓照片跟著滑鼠移動

PImage img;

void setup()
{
   img=loadImage("pchu.jpg");
   size(500,500);
}

void draw()
{
image(img,mouseX,mouseY);
}

馬力歐 Processing 

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;

}

圖學筆記WEEK08

一、.至jsyeh.org/3dcg10下載data.zip windows.zip glut32到桌面

二、至Moodle下載 opencv2.1.0-win32-vs2008.exe

三、打開codeblocks 貝殼專案檔

四、輸入程式碼

#include<opencv/highgui.h>
int main()
{
    IplImage *img = cvLoadImage("earth.jpg");
    cvNamedWindow("hello opencv");
    cvShowImage("hello opencv", img);
    cvWaitKey(0);
    
    return 0;
}

五、此時無法執行!!

*右鍵點選左邊project,build options

*search directories->compiler->C:\openCV2.1\include

*search directories->linker->C:\openCV2.1\lib

*linker setting->cv21,cxcore210,highgui210

6.即可執行

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

陳陞凱的計圖筆記WEEK07

打開glut專案擋


尋找main中之 glLightfv函式

加入

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

}

執行後就可以用滑鼠調整光源

陳陞凱的計圖筆記WEEK06

打開上次的week05


並加上以下幾行 在程式中:

GLfloat pos[]={0.0, 0.0, -1.0, 0.0}; //打光(3)
glEnable(GL_DEPTH_TEST); //3D深度測試，打開Enable
glEnable(GL_LIGHTING); //打光(2)，打開Enable
glEnable(GL_LIGHT0); //打光(1)，打開Enable
glLightfv(GL_LIGHT0, GL_POSITION, pos);

陳陞凱的計圖筆記WEEK05

1.至jsyeh.org/3dcg10/下載win32.data.glut32.dll檔案

2.解壓縮檔案並注意是否在同個目錄(data資料夾需放入windows資料夾)

3.執行Transformation.exe

glTranslatef() x,y,z的位移

glRotatef(角度,x,y,z)    以x,y,z軸為軸心旋轉

glScalef(a,b,c)    對x軸,y軸,z軸放大a,b,c



gluPerspective(fovy, aspect, zNear, zFar)
fovy => 視野
aspect => x/y比例(寬窄)
zNear => 前界(前面的平面)
zFar => 後界(後面的平面)

gluLookAt
eye => 照相機圍繞著人物旋轉
center => 照相機固定位置，以中心做旋轉
up => 以哪一個軸為上

阿凱不糊塗學習的圖學筆記WEEK04

練習Translate, Rotate, Scale

移動、旋轉、縮放

1.開啟新的GLUT專案

glPushMatrix();

                glTranslated(-2.4,1.2,-6);

        glRotated(60,1,0,0);

      glRotated(a,0,0,1);

                            glutSolidSphere(1,slices,stacks)

glPopMatrix();

(下圖為原本執行結果)

2.修改程式碼

原部分程式碼

glPushMatrix();

                glTranslated(-2.4,1.2,-6);

        glRotated(60,1,0,0);

      glRotated(a,0,0,1);

                            glutSolidCone(1,slices,stacks)

glPopMatrix();

修改後

glPushMatrix();

        glTranslated(2,1.2,-6);//移動位置(X,Y,Z)

        glRotated(60,1,0,0);//(旋轉60度,X軸,Y軸,Z軸)

        glRotated(a,0,0,1);//沿Z軸不斷旋轉a

        glScalef(2,2,2);//沿三軸放大2倍

        glColor3f(1,0,1);//修改顏色

        glutSolidTeapot(1);//將圖形改成茶壺

    glPopMatrix();

                                                                                  執行!!!!!!!!!!!!!!!!!!!!!!!

阿凱不糊塗學習的圖學筆記WEEK03

一、編譯學姊的小小兵程式

1. 從moodle上下載學姐小小兵的程式

2. 把minion.txt放到freeglut/bin資料夾裡

3. 開啟OpenGL專案，把學姐的程式碼複製

4.執行!!!!!!!!!!!!!!!!!!!!!!!!!!!!

二 、列印3D足球

1.下載3D exploration並安裝

                                      2.將.obj檔另存為.cpp檔並用sample app 模式

                                                       

                                                    3.新建OpenGL專案檔

                                     4.複製程式碼並將無法編譯之程式碼註解掉

                                                      5.執行!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

阿凱部糊塗學習的圖學筆記02

一、做茶壺

步驟 1:開啟GLUT專案

步驟 2:複製部分程式碼

#include <GL/glut.h>

void display()

{

    glClearColor(1,0,0,0); //清背景顏色 (R,G,B,A)

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glColor3f(1,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();//執行迴圈

}

步驟 3:按下F9執行

=========================================================

二、做一個自己的三角形

#include <GL/glut.h>

void display()

{

    glClearColor(1,0,0,0);

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glColor3f(1,1,0); //物件色彩

    glBegin(GL_POLYGON); //開始畫

    glVertex3f(1,1,0); //三個頂點 //3是x,y,z 3個參數

    glVertex3f(-1,1,0);

    glVertex3f(0,-1,0);

    glEnd(); //結束畫

    glutSwapBuffers();

}

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

{

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("GLUT Shapes");

    glutDisplayFunc(display);

    glutMainLoop();

}

按下F9執行

阿凱不糊塗學習的圖學筆記-01

1.打開新的project

2.選擇OpenGLproject

3.輸入檔案名稱

4.按下Build and run

5.出現了!!!!

====================================================

【GLUT】

1.先從moodle下載freeglut程式

2.把下載好的資料解壓縮

3.複製libfreeglut.a並改名為libglut32.a

4.打開OpenGL project

                                         
                                                                 5.複製lib資料夾位置

                                     
                                                               6.貼上資料夾位置

7.F9執行程式碼