12750202 week13

作業1

//week13-1-processing-video
//Sketch-Library-Manage Libraries
//教學在 https://processing.org/tutorials/video
import processing.video.*;//Jave 使用外掛的匯入
//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");
  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
}
作業3

//week13-3-texture-textureMode-beginShape-vertax-endShape
//再把 貼圖 之後在加進去
PImage img;
void setup(){
  size(400,400,P3D); //要有 P3D 才有 OpenGL 功能
  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(){ //攝影機往前方看 mouse左右、前後移動
  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(); //左方 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-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(){ //攝影機往前方看 mouse左右、前後移動
  //camera(mouseX,200,mouseY,mouseX,200,mouseY-10,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(); //正前方
    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及chessboard.png都加進來
import processing.video.*;
Movie movie; //等一下 再把 Capture 視訊盡頭加進來
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();
  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();
  beginShape();
    //texture(video);
}