12750140_week13

 課堂作業1

//week13_1_processing_video
// Sketch - Library - Msnage Libraries.. 安裝
// 教學在 https://processing.org/tutorials/video
import processing.video.*; //Java使用外掛的「匯入」
//Capture video; //有視訊鏡頭的，用這個版本
Movie movie; //沒有鏡頭，改用這個
void setup(){
  size(640, 480); //常見的視訊
  //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);
}

課堂作業2

//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(); //迴圈播放 影片解析度720x480
}
void draw(){
  background(128);
  // https://processing.org/reference/camera_.html
  camera(mouseX, mouseY, 500, 360, 240, 0, 0, 1, 0);
  // 很多參數 eyeX, eyeY, centerX, centerY, centerZ, upX, upY, upZ 
  //                      現在把影片中心點，當主角
  if(movie.available()) movie.read(); // 有新畫面，就讀入
  image(movie, 0, 0); //放影片，放在 0, 0
}


課堂作業3

// week13_3_texture_textureMode_beginShape_vertex_endShape
// 先教「貼圖」，之後再加進去 week13_2 的 camera 設定
//  https://processing.org/reference/texture_.html
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();
}


課堂作業4

// 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(); // 正前方，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(); // 左方，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();
}

課堂作業5

// week13_5_camera_keyPressed_ceyCode_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(); // 正前方，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(); // 左方，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();
}

課堂作業6

//week13_6_combine_all_Movie_Capture_PImage_camera_sin_cos_P3D
//把今天教的，全部加進來
// street.mov 及 chessboear.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,   0, 400, 0, 1);
    endShape();      
}