week13_11131301賴珮語

 2025-05-15 Week13

1. 運鏡、移動攝影機
2. 貼圖
3. 視訊
4. 字型
5. 期末作品：會跳舞的機器人

課堂練習1

//week13_1_processing_video

//Sketch-Library-Manage-Libraries-video Library

//https://processing.org/tutorials/vedio

import processing.video.*;

//有視訊鏡頭版本(沒鏡頭會在加幾行)

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,0); 沒視訊就註解掉

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

  // 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

}

課堂練習3

//week13_3_textureMode_beginShape_vertex_endShape

//先教貼圖 之後再加進去week13_2的camera設定

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

PImage img;

void setup(){

  size(400,400,P3D); //要加3D才有OpenGL 3D功能

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

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

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

void draw(){

  background(128); //灰背景

  beginShape(); //開始畫

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

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

  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); //要加3D才有OpenGL 3D功能

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

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

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

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

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

  endShape();

}

課堂練習5

//week13_5_camera_keyPressed_keyCode_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(){

  //camera(mouseX,200,mouseY,mouseX,200,mouseY-110,0,1,0);//攝影機【往前方看】左右前後移動

  if(keyPressed)keyPressed();

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

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

    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.videi.*;

Movie movie; //等一下再把Capture視訊鏡頭拉進來

PImage img;

void setup(){

  size(400,400,P3D);

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

  movie.loop();

  img=loadImage("chessboard.png");

  textureMode(NORMAL);

}

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(); //有畫面就讀入畫面

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

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

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

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

}