12750113-week13

 week13-1_processing_video

// week 13_1_processing_video
// Sketch - Library - Manage Libraries ... 安裝 video
// 教學在 http://processing.org/tutorias/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,0); // 若沒視訊就註解掉
  if(movie.available()) movie.read();
  image(movie,0,0);
}

可自動播放影片

下面是如果有視訊鏡頭就會在那裡出現

week13-2_camera_movie_eye_center_up

// week13_2_camera_movie_eye_center_up
// 電腦圖學繪圖時，會設定 camera 的相關係數
import processing.video.*; // 要使用影片的外掛喔
Movie movie; // 要放影片的變數
void setup(){
  size(720, 480, P3D); // 記得要加上 P3D 才能有 OpenGL 3D 功能
  movie = new Movie(this,"street.mov"); // 請再把 street.mov 拉進來
  movie.loop(); // 迴圈播放
}
void draw(){
  background(128);
  // https://processing.org/reference/camera_.html
  camera(mouseX,mouseY,500,360,240,0,   0,1,0);
  // 很多參數 eyeX. eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ
  
  if(movie.available()) movie.read(); // 有新畫面，就讀入
  image(movie,0,0); // 放影片，放在0,0
}


滑鼠移動，影片也會跟著轉動

week12-3_camera_movie_textureMode_beginShape_vertex_endShape

// week13_3_camera_movie_textureMode_beginShape_vertex_endShape
// 先學「貼圖」，之後再加進去 week13_2 的 camera 設定
PImage img;
void setup(){
  size(400,400,P3D); // 要加 P3D 才有 OpenGL 3D 的功能
  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();
}

做出一個有棋盤圖的有點扭曲的圖

week13-4_camera_chessboard_texture_front_left

// week13_4_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(); // front 正前方，z座標都放0
    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(); // left 左方，x座標都放0 
    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();
}

可以利用滑鼠移動

來讓視窗裡的鏡頭(虛擬鏡頭)移動

就可以看到不同的視角(像是Unity的鏡頭)

week13-5_camra_keyPressed_keyCode_x_y_z_angle_cos_sin

// week13_5_camra_keyPressed_keyCode_x_y_z_angle_cos_sin
// 利用「上下左右」鍵移動
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(); // front 正前方，z座標都放0
    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(); // left 左方，x座標都放0 
    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();
}

滑鼠可以一直按，會移動比較快

week13-6_total_all_Movie_Capture_PImage_camera_sin_cos_P3D

// week13_6_total_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");
  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); // 放影片，用2D的放圖方法
  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,0,400,0,1);
  endShape();
}

左邊的鏡頭是視訊鏡頭

前方的牆播的是影片