12750211-week13

 1.影片 & 攝影機基本練習：video + movie

//week13_1_processing_video
// 上面播放影片（movie），下面是鏡頭畫面（video）
// 學習使用 Capture 與 Movie 兩種來源的影像

import processing.video.*;

// video 是攝影機畫面
Capture video;

// movie 是影片
Movie movie;

void setup() {
  size(640, 960);  // 畫布大小：640x960，剛好上半部影片、下半部鏡頭

  video = new Capture(this, 640, 480);  // 建立鏡頭畫面（解析度）
  video.start();  // 開啟攝影機

  movie = new Movie(this, "street.mov");  // 載入影片檔
  movie.loop();  // 重複播放影片
}

void draw() {
  // 有畫面就讀進來
  if (video.available()) video.read();
  if (movie.available()) movie.read();

  image(movie, 0, 0);       // 上半部：播放影片
  image(video, 0, 480);     // 下半部：顯示攝影機畫面
}

2.camera 基本參數練習：eye + center + up + 播影片當背景

//week13_2_camera_movie_eye_center_up
// 用滑鼠控制攝影機位置，搭配影片播放。camera(eye, center, up) 的基礎練習

import processing.video.*;

Movie movie;

void setup() {
  size(600, 400, P3D);
  movie = new Movie(this, "street.mov"); 
  movie.loop();  // 影片循環播放
}

void draw() {
  background(128);

  // camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ)
  // 攝影機位置跟著滑鼠移動，看向 (300, 200, 0) 固定點
  // up 設為 (0, 1, 0) → 表示 Y 軸是「上」
  camera(mouseX, mouseY, 120,   // 攝影機位置（眼睛）
         300, 200, 0,           // 看的目標點
         0, 1, 0);              // 哪個方向是上

  // 播影片（貼到畫面上）
  if (movie.available()) movie.read();
  image(movie, 0, 0);  // 貼影片畫面（等於是背景）
}

3.貼圖練習texture + beginShape + vertex

//week13-3_texture_textureMode_beginShape_vertex_endShape
// 如何用 beginShape() 自訂形狀 + texture() 把圖片貼上去

PImage img;

void setup() {
  size(400, 400, P3D); 
  img = loadImage("chessboard.png");  
  textureMode(NORMAL);  // 貼圖座標用 0~1（如果是 IMAGE 就是像素座標）
}

void draw() {
  background(128);  

  // 開始畫一個四邊形，並貼圖上去
  beginShape();
    texture(img);  // 指定用這張圖片當貼圖

    // vertex(x, y, z, u, v)
    // z 設為 0 表示都是平面（沒厚度）
    // u,v 是貼圖座標（0~1）
    vertex(40, 80, 0, 0, 0);     // 左上角
    vertex(320, 20, 0, 1, 0);    // 右上角
    vertex(380, 360, 0, 1, 1);   // 右下角
    vertex(160, 380, 0, 0, 1);   // 左下角
  endShape();
}

4.滑鼠控制視角位置：camera + 貼圖在前面跟左邊

//week13-4_camera_chaseboard_texture_front_left
// 貼圖整合 camera 視角，滑鼠控制攝影機位置（有點像第一人稱移動視角）

PImage img;

void setup() {
  size(400, 400, P3D); 
  img = loadImage("chessboard.png"); 
  textureMode(NORMAL);  // 用 0~1 的貼圖座標
}

void draw() {
  // 相機位置根據滑鼠 X、Y 改變（Y 固定在 200）
  // 看的方向往滑鼠前方 10 單位
  camera(
    mouseX, 200, mouseY,        // 相機位置
    mouseX, 200, mouseY - 10,   // 看哪裡（往前看）
    0, 1, 0                     // 哪個方向是上
  );

  background(128); 

  // 前方牆壁，貼上圖片
  beginShape();
    texture(img);
    vertex(0, 0, 0, 0, 0);
    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);
    vertex(0, 400, 0, 1, 0);
    vertex(0, 400, 400, 1, 1);
    vertex(0, 0, 400, 0, 1);
  endShape();
}

5.鍵盤控制視角移動：camera + keyPressed + cos/sin 計算方向

////week13-5_camera_keyPressed_keyCode_x_y_z_angle_cos_sin
// 改自 week03_4：用方向鍵控制相機移動方向，類似主角走動感覺

PImage img;

void setup() {
  size(400, 400, P3D);  
  img = loadImage("chessboard.png");  
  textureMode(NORMAL);  // 貼圖座標用 0~1
}

// 相機初始位置與角度
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));
  }
  if (keyCode == DOWN) {          // 向後退
    x -= cos(radians(angle));
    z -= sin(radians(angle));
  }
}

void draw() {
  if (keyPressed) keyPressed();

  // 設定相機位置與觀看方向
  // 相機位置 (x,y,z)，看向 (x+cos, y, z+sin) → 看「面前」
  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);
    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);
    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

//把今天教得全加入

import processing.video.*;  

Movie movie;    // 影片用的變數
PImage img;     
Capture video;  // 攝影機畫面

void setup() {
  size(400, 400, P3D);  
  movie = new Movie(this, "street.mov"); 
  movie.loop();  // 重複播放影片
  img = loadImage("chessboard.png");  // 載入圖片
  textureMode(NORMAL);  // 貼圖座標 0~1（預設是像素）

  video = new Capture(this, 640, 480);  // 啟動攝影機
  video.start();
}

void draw() {
  background(128);  
  noStroke();  

  // 這行是讓視角自己繞圈圈轉（每一幀角度變一點點）
  camera(
    200, 200, 200,
    200 + cos(radians(frameCount)), 200,
    200 + sin(radians(frameCount)),
    0, 1, 0
  );

  // 影片有新畫面就讀進來
  if (movie.available()) movie.read();

  // 前面貼圖片（棋盤）
  beginShape();
  texture(img);
    vertex(0, 0, 0, 0, 0);
    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);
    vertex(0, 400, 0, 0, 1);
    vertex(0, 400, 400, 1, 1);
    vertex(0, 0, 400, 1, 0);
  endShape();
}