課堂作業1:
// week13_1_processing_video
// Sketch - Libbrary - Manage Libbraries... 安裝video
// 教學 https://processing.org/tutorials/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, 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);
// httes://pocessing.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_vertex_endShape
//先教「貼圖」，之後再加進去
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_cameta_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();
}
課堂作業5:
// week13_5_camera_keyPressed_keyCode_x_y_z_angle_cos_sin
// 修改自 week13_4_cameta_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(); // 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();
}
課堂作業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();
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();
}
沒有留言:
張貼留言