12750530李忻穎_week13

作業1:

• 程式碼:

//week13_1_processing_video

//Sketch - Library - Manage Library...安裝video

//教學在https://processing.org/tutorials/video

import processing.video.*;  //Java使用外掛的[匯入]

Capture video;  //有視訊鏡頭的,用這個版本

Movie movie;  //沒有視訊鏡頭的,用這個版本

void setup(){

  size(640,960);  //常見的視訊

  video = new Capture(this,640,480);

  video.start();  //打開視訊

  movie = new Movie(this, "street.mov");

  movie.loop();

}

void draw(){

  if(video.available()) video.read();

  image(video,0,480);

  if(movie.available()) movie.read();

  image(movie,0,0);

}

• 執行結果:

先去Sketch - Library - Manage Library...安裝video

作業2:

• 程式碼:

//week13_2_camera_movie_eye_center_up

//電腦圖學在繪圖時,會設定camera的相關係數

import processing.video.*;  //要使用影片的外掛

Movie movie;  //要放影片的變數

void setup(){

  size(720,480,P3D);//要記得加上P3D才能有Op

  movie = new Movie(this,"street.mov");//要把street.mov拉進來

  movie.loop();//迴圈播放 影片解析度720 480

}

void draw(){

  background(128);

  camera(mouseX,mouseY,120, 300,200,0,0,1,0);

  //很多參數eyeX,eyeY,eyeZ,centerX,centerY,centerZ,upX,upY,upZ

  //現在把影片中心點,幫主角

  if(movie.available()) movie.read();//放影片在0,0

  image(movie,0,0);

}

• 執行結果:

作業3:

• 程式碼:

//week13_3_texture_textureMode_beginShape_vertex_endShape

//先加[貼圖]

//https://processing.org/reference/texture_.html

PImage img;

void setup(){  //要加P3D才有OpenGL 3D功能

  size(400,400,P3D);

  img = loadImage("chessboard.png");  //記得把[圖檔]拉進來

  textureMode(NORMAL);//有很多種[貼圖的模式]

}//先用最簡單的NORMAL來畫,2個三角形,不像是3D透視的效果

void draw(){

  background(128);//灰背景

  beginShape();//開始畫

  texture(img);//把圖片,當貼圖

  vertex(40,80,0,0);//4個頂點vertex的四邊形,會裁出2個三角形

  vertex(320,20,1,0);

  vertex(380,360,1,1);

  vertex(160,380,0,1);

  endShape();

}

• 執行結果:

作業4:

• 程式碼:

//week13_3_camera_chessboard_texture_front_left

//把貼圖,跟camera整合再一起

PImage img;

void setup(){

  size(400,400,P3D);

  img = loadImage("chessboard.png");

  textureMode(NORMAL);

}

void draw(){  //攝影機[往前方看],左右、前後移動

  camera(mouseX,200, mouseY,mouseX,200, mouseY-10,0,1,0);

  background(128);//灰背景

  beginShape();//正前拍

    texture(img);

    vertex(0,0,0,0,0);  //x,y,z,u,v

    vertex(400,0,0,1,0);

    vertex(400,400,0,1,1);

    vertex(0,400,0,0,1);

  endShape();

  beginShape();//左方

    texture(img);

    vertex(0,0,0,0,0);  //x,y,z,u,v

    vertex(0,400,0,1,0);

    vertex(0,400,400,1,1);

    vertex(0,0,400,0,1);

  endShape();

}

• 執行結果:拖曳滑鼠,可以改變camera視角

作業5:

• 程式碼:

//week13_5_camera_keyPressed_x_y_z_angle_cos_sin

//修改自week13_4_camera_chessboard_texture_front_left

//利用 方向鍵(上下左右鍵)來移動

PImage img;

void setup(){

  size(400,400,P3D);

  img = loadImage("chessboard.png");

  textureMode(NORMAL);

}

float x=200, y=200, z=200, angle=180;

void keyPressed(){  //按方向鍵

  if(keyCode==LEFT) angle--;

  if(keyCode==RIGHT) angle++;

  if(keyCode==UP)  {

    x+=cos(radians(angle));

    z+=sin(radians(angle));  //小心, 是z(3D前後) 不是y(3D上下)

  }

  if(keyCode==DOWN)  {

    x-=cos(radians(angle));

    z-=sin(radians(angle));  //小心, 是z(3D前後) 不是y(3D上下)

  }

}

void draw(){  //攝影機[往前方看],左右、前後移動

  if(keyPressed) keyPressed();

  //camera(mouseX,200, mouseY,mouseX,200, mouseY-10,0,1,0);

  camera(x,y,z, x+cos(radians(angle)),y,z+sin(radians(angle)),0,1,0);

  background(128);//灰背景

  beginShape();//正前拍

    texture(img);

    vertex(0,0,0,0,0);  //x,y,z,u,v

    vertex(400,0,0,1,0);

    vertex(400,400,0,1,1);

    vertex(0,400,0,0,1);

  endShape();

  beginShape();//左方

    texture(img);

    vertex(0,0,0,0,0);  //x,y,z,u,v

    vertex(0,400,0,1,0);

    vertex(0,400,400,1,1);

    vertex(0,0,400,0,1);

  endShape();

}

• 執行結果:利用 方向鍵(上下左右鍵)來移動

作業6:

• 程式碼:

//week13_6_combine_all_Movie_Capture_PImage_camera_sin_cos_P3D

//把今天教的,全部加起來

//street.mov 及 chessboard.png都拉進來

import processing.video.*;

Movie movie;

PImage img;

void setup(){

  size(400,400,P3D);

  movie = new Movie(this, "street.mov");//720x480

  movie.loop();  //記得要把視訊設成[循環播放]

  img = loadImage("chessboard.png");

  textureMode(NORMAL);

  video = new Capture(this,640,480);

  video.start();

}

Capture video;//有鏡頭,在加它

void draw(){ 

  camera(200,200,200,200+cos(radians(frameCount)),200,200+sin(radians(frameCount)),0,1,0);

  background(128);

  if(movie.available()) movie.read();//有畫面,就讀入畫面

  beginShape();//正前方的牆

    texture(img);

    vertex(0,0,0,0,0);  //x,y,z,u,v

    vertex(400,0,0,1,0);

    vertex(400,400,0,1,1);

    vertex(0,400,0,0,1);

  endShape();

  translate(0,0,1);

  image(movie,0,0,360,240);

  if(video.available()) video.read();

  beginShape();//正前方的牆

    texture(video);

    vertex(0,0,0,0,0);  //x,y,z,u,v

    vertex(0,400,0,1,0);

    vertex(0,400,400,1,1);

    vertex(0,400,0,0,1);

  endShape();

}

• 執行結果:會轉動