week15-1_multiple_windows
// week15_01_multiple_windows
// google:processing multiple windows
// File > Examples > Demos > Tests > Multiplewindows
void setup(){
size(300,200); // 小的第1個視窗
background(255,0,0);
WindowB child = new WindowB(); // 請 WindowB 發威
}
void draw(){ // 空白的，要放喔!
}
// 以下會獨立執行
class WindowB extends PApplet{
public WindowB(){ // 「建構子」 constructor
super(); // 呼叫上一層「建構子」
PApplet.runSketch(new String[]{this.getClass().getName()},this);
}
public void settings(){
size(300,200);
}
public void setup(){
// size(200,200);
background(0,255,0);
}
public void draw(){ // 空白的，要放喔!
}
}
比較難的程式
week15-2_multiple_window_PGraphics// week15_02_multiple_window_PGraphics
PGraphics pg; // 在外面宣告，不同人都可以用
void setup(){
size(400,400,P3D); // 主要的視窗
pg = createGraphics(200,200,P3D); // 有一個小的
}
void draw(){
background(255,0,0); // 紅色大背景
pg.beginDraw();
pg.background(0,255,0); // 綠色小背景
pg.translate(100,100);
pg.rotateY(radians(frameCount));
pg.box(100);
pg.endDraw();
image(pg,0,0);
}
此程式比week15-1簡單
方塊會沿著Y軸旋轉
week15-3_multiple_windows_pg_pg2_pg3_pg4// week15_3_multiple_windows_pg_pg2_pg3_pg4
// 修改自 week15_02_multiple_window_PGraphics
PGraphics pg, pg2, pg3, pg4; // 在外面宣告，不同人都可以用
void setup(){
size(400,400,P3D); // 主要的視窗
pg = createGraphics(200,200,P3D); // 有一個小的
pg2 = createGraphics(200,200,P3D); // 有一個小的
pg3 = createGraphics(200,200,P3D); // 有一個小的
pg4 = createGraphics(200,200,P3D); // 有一個小的
}
void draw(){
background(255,0,0); // 紅色大背景
pg.beginDraw();
pg.background(0,255,0); // 綠色小背景
pg.translate(100,100);
pg.rotateY(radians(frameCount));
pg.box(100);
pg.endDraw();
pg2.beginDraw();
pg2.background(255,255,0); // 黃色小背景
pg2.translate(100,100);
pg2.rotateY(radians(frameCount));
pg2.box(100);
pg2.endDraw();
pg3.beginDraw();
pg3.background(255,0,0); // 紅色小背景
pg3.translate(100,100);
pg3.rotateY(radians(frameCount));
pg3.box(100);
pg3.endDraw();
pg4.beginDraw();
pg4.background(255,0,255); // 紫色小背景
pg4.translate(100,100);
pg4.rotateY(radians(frameCount));
pg4.box(100);
pg4.endDraw();
image(pg,0,0);
image(pg2,200,0);
image(pg3,0,200);
image(pg4,200,200);
}
week15-4_arcball_rotatin_PGraphics_pg// week 15_04_arcball_rotatin_PGraphics_pg// 修改自 week15_03_multiple_windows_pg_pg2_pg3_pg4// 偷 Arcball 從 File > Examples > Demos > Tests > MultiplewindowsPGraphics pg, pg2, pg3, pg4; // 在外面宣告，不同人都可以用
Arcball arcball; // 用偷來的 Arcball 宣告小寫 arcball
void setup(){
size(400,400,P3D); // 主要的視窗
arcball = new Arcball(this,200);
pg = createGraphics(200,200,P3D); // 有一個小的
pg2 = createGraphics(200,200,P3D); // 有一個小的
pg3 = createGraphics(200,200,P3D); // 有一個小的
pg4 = createGraphics(200,200,P3D); // 有一個小的
}
void mousePressed(){
arcball.mousePressed();
}
void mouseDragged(){
arcball.mouseDragged();
}
void draw(){
background(255,0,0); // 紅色大背景
pg.beginDraw();
pg.background(0,255,0); // 綠色小背景
arcball.run();
//pg.translate(100,100);
//pg.rotateY(radians(frameCount));
pg.box(100);
pg.endDraw();
pg2.beginDraw();
pg2.background(255,255,0); // 黃色小背景
pg2.translate(100,100);
pg2.rotateY(radians(frameCount));
pg2.box(100);
pg2.endDraw();
pg3.beginDraw();
pg3.background(255,0,0); // 紅色小背景
pg3.translate(100,100);
pg3.rotateY(radians(frameCount));
pg3.box(100);
pg3.endDraw();
pg4.beginDraw();
pg4.background(255,0,255); // 紫色小背景
pg4.translate(100,100);
pg4.rotateY(radians(frameCount));
pg4.box(100);
pg4.endDraw();
image(pg,0,0);
image(pg2,200,0);
image(pg3,0,200);
image(pg4,200,200);
}
利用arcball讓綠色的方塊可用滑鼠讓它旋轉
其他三個方塊自轉
week15-5_postman_mouseDragged_head_angle[0]_atan2// week15_5_postman_mouseDragged_head_angle[0]_atan2// 修改自 week11_3_postman_again// 重新來一次，讓程式架構更清楚PImage postman, head, body, leftupuparm, leftuparm, rightupuparm, rightuparm, foot1, foot2;
void setup(){
size(560,560);
postman = loadImage("postman.png");
head = loadImage("head.png");
body = loadImage("body.png");
leftupuparm = loadImage("leftupuparm.png");
leftuparm = loadImage("leftuparm.png");
rightupuparm = loadImage("rightupuparm.png");
rightuparm = loadImage("rightuparm.png");
foot1 = loadImage("foot1.png");
foot2 = loadImage("foot2.png");
}
int R = 0;
void myInterpolate(){
if(lines.size() >= 2){ // 要有 2 行以上，才能做內插
float alpha = (frameCount%30)/30.0; // 介於 0.0~1.0 中間的值
if(alpha == 0.0) R = (R+1)%lines.size(); // 如果變到0.0，就換下一組
int R2 = (R+1)%lines.size();
float [] oldAngle = float(split( lines.get( R ),' '));
float [] newAngle = float(split( lines.get( R2 ),' '));
for(int i=0;i<10;i++){
angleX[i] = oldAngle[i*2+0]*(1-alpha) + newAngle[i*2+0]*alpha;
angleY[i] = oldAngle[i*2+1]*(1-alpha) + newAngle[i*2+1]*alpha;
}
}
}
float [] angleX = new float[10]; // 在 3D 的世界裡面，我們的旋轉
float [] angleY = new float[10];
int ID = 0; // 一開始是頭的關節
ArrayList<String> lines = new ArrayList<String>();
void keyPressed(){
if(key == 's'){
String now = ""; //空字串
for(int i=0;i<10;i++){
now += angleX[i] + " "; // 後面有空格
now += angleY[i] + " "; // 後面有空格
}
lines.add(now); // 把現在的動作的這行，加到 lines 裡面
String[] arr = new String[lines.size()];
lines.toArray(arr);
saveStrings("angles.txt",arr);
println("現在存檔:"+ now);
}
if(key == 'r'){
String [] file = loadStrings("angles.txt");
if(file != null){
for(int i=0; i<file.length; i++){
lines.add(file[i]);
println("現在讀檔:" + file[i]);
}
}
}
if(key == 'p') playing = !playing; // 播動畫 <=> 不播動畫
if(key == '1') ID = 1; // 左上上臂
if(key == '2') ID = 2; // 左上臂
if(key == '3') ID = 3; // 右上上臂
if(key == '4') ID = 4; // 右上臂
if(key == '5') ID = 5; // (待用)
if(key == '6') ID = 6; // (待用)
if(key == '0') ID = 0; // 頭
}
boolean playing = false; // 一開始，不播動畫，按下 'p' 可切換
void mouseDragged(){
// 要把原本 mouseX 的左右移動，改成像 IK 的轉動
// 從void draw() 找到頭「掛的位置」 +236 +231
float dx = mouseX - 236, dy = mouseY - 231; // 減掉座標
angleX[0] = degrees(atan2(dy,dx)) +90; // 頭的角度
//angleX[ID] += mouseX - pmouseX;
//angleY[ID] += mouseY - pmouseY; // 多了這一行
}
void draw(){
background(#FFFFF2);
if(playing) myInterpolate();
image(body, 0, 0); // 先畫身體
pushMatrix();
translate(+236, +231); // 再放回去正確的位置
rotate(radians(angleX[0]));
translate(-236,-231); // 把頭的旋轉中心，放到(0,0)
image(head, 0, 0); // 再畫頭
popMatrix();
pushMatrix();
translate(+185, +263); // 再放回去正確的位置
rotate(radians(angleX[1]));
translate(-185,-263);
image(leftupuparm, 0, 0); // 左上上手臂
pushMatrix();
translate(+118, +264); // 再放回去正確的位置
rotate(radians(angleX[2]));
translate(-118,-264);
image(leftuparm, 0, 0); // 左上手臂
popMatrix();
popMatrix();
pushMatrix();
translate(+290, +263); // 再放回去正確的位置
rotate(radians(angleX[3]));
translate(-290,-263);
image(rightupuparm, 0, 0); // 右上上手臂
pushMatrix();
translate(+356, +259); // 再放回去正確的位置
rotate(radians(angleX[4]));
translate(-356,-259);
image(rightuparm, 0, 0); // 右上手臂
popMatrix();
popMatrix();
pushMatrix();
translate(220,375);
rotate(radians(angleX[5]));
translate(-220,-375);
image(foot1,0,0);
popMatrix();
pushMatrix();
translate(261,372);
rotate(radians(angleX[6]));
translate(-261,-372);
image(foot2,0,0);
popMatrix();
}
頭轉動會比較順暢
week15-6_postman_mouseDragged_posX_posY_ID_angleX_ID_atan2// week15_6_postman_mouseDragged_posX_posY_ID_angleX_ID_atan2
// 修改自 week15_5_postman_mouseDragged_head_angle[0]_atan2
PImage postman, head, body, leftupuparm, leftuparm, rightupuparm, rightuparm, foot1, foot2;
void setup(){
size(560,560);
postman = loadImage("postman.png");
head = loadImage("head.png");
body = loadImage("body.png");
leftupuparm = loadImage("leftupuparm.png");
leftuparm = loadImage("leftuparm.png");
rightupuparm = loadImage("rightupuparm.png");
rightuparm = loadImage("rightuparm.png");
foot1 = loadImage("foot1.png");
foot2 = loadImage("foot2.png");
}
int R = 0;
void myInterpolate(){
if(lines.size() >= 2){ // 要有 2 行以上，才能做內插
float alpha = (frameCount%30)/30.0; // 介於 0.0~1.0 中間的值
if(alpha == 0.0) R = (R+1)%lines.size(); // 如果變到0.0，就換下一組
int R2 = (R+1)%lines.size();
float [] oldAngle = float(split( lines.get( R ),' '));
float [] newAngle = float(split( lines.get( R2 ),' '));
for(int i=0;i<10;i++){
angleX[i] = oldAngle[i*2+0]*(1-alpha) + newAngle[i*2+0]*alpha;
angleY[i] = oldAngle[i*2+1]*(1-alpha) + newAngle[i*2+1]*alpha;
}
}
}
float [] angleX = new float[10]; // 在 3D 的世界裡面，我們的旋轉
float [] angleY = new float[10];
int ID = 0; // 一開始是頭的關節
ArrayList<String> lines = new ArrayList<String>();
void keyPressed(){
if(key == 's'){
String now = ""; //空字串
for(int i=0;i<10;i++){
now += angleX[i] + " "; // 後面有空格
now += angleY[i] + " "; // 後面有空格
}
lines.add(now); // 把現在的動作的這行，加到 lines 裡面
String[] arr = new String[lines.size()];
lines.toArray(arr);
saveStrings("angles.txt",arr);
println("現在存檔:"+ now);
}
if(key == 'r'){
String [] file = loadStrings("angles.txt");
if(file != null){
for(int i=0; i<file.length; i++){
lines.add(file[i]);
println("現在讀檔:" + file[i]);
}
}
}
if(key == 'p') playing = !playing; // 播動畫 <=> 不播動畫
if(key == '1') ID = 1; // 左上上臂
if(key == '2') ID = 2; // 左上臂
if(key == '3') ID = 3; // 右上上臂
if(key == '4') ID = 4; // 右上臂
if(key == '5') ID = 5; // (待用)
if(key == '6') ID = 6; // (待用)
if(key == '0') ID = 0; // 頭
}
boolean playing = false; // 一開始，不播動畫，按下 'p' 可切換
float[]posX = {+236,+185,+118,+290,+356,220,261}; // 從 void draw()
float[]posY = {+231,+263,+264,+263,+259,375,372}; // 找到全部座標
float [] posAngle = {90, 180, 180, 0, 0, -90, -90};
void mouseDragged(){
// 要把原本 mouseX 的左右移動，改成像 IK 的轉動
// 從void draw() 找到頭「掛的位置」 +236 +231
// float dx = mouseX - 236, dy = mouseY - 231; // 減掉座標
// angleX[0] = degrees(atan2(dy,dx)) +90; // 頭的角度
float dx = mouseX - posX[ID], dy = mouseY - posY[ID]; // 減掉座標
angleX[ID] = degrees(atan2(dy,dx)) + posAngle[ID]; // 某個關節的角度
//angleX[ID] += mouseX - pmouseX;
//angleY[ID] += mouseY - pmouseY; // 多了這一行
}
void draw(){
background(#FFFFF2);
if(playing) myInterpolate();
image(body, 0, 0); // 先畫身體
pushMatrix();
translate(+236, +231); // 再放回去正確的位置
rotate(radians(angleX[0]));
translate(-236,-231); // 把頭的旋轉中心，放到(0,0)
image(head, 0, 0); // 再畫頭
popMatrix();
pushMatrix();
translate(+185, +263); // 再放回去正確的位置
rotate(radians(angleX[1]));
translate(-185,-263);
image(leftupuparm, 0, 0); // 左上上手臂
pushMatrix();
translate(+118, +264); // 再放回去正確的位置
rotate(radians(angleX[2]));
translate(-118,-264);
image(leftuparm, 0, 0); // 左上手臂
popMatrix();
popMatrix();
pushMatrix();
translate(+290, +263); // 再放回去正確的位置
rotate(radians(angleX[3]));
translate(-290,-263);
image(rightupuparm, 0, 0); // 右上上手臂
pushMatrix();
translate(+356, +259); // 再放回去正確的位置
rotate(radians(angleX[4]));
translate(-356,-259);
image(rightuparm, 0, 0); // 右上手臂
popMatrix();
popMatrix();
pushMatrix();
translate(220,375);
rotate(radians(angleX[5]));
translate(-220,-375);
image(foot1,0,0);
popMatrix();
pushMatrix();
translate(261,372);
rotate(radians(angleX[6]));
translate(-261,-372);
image(foot2,0,0);
popMatrix();
}
讓轉動更順暢
沒有留言:
張貼留言