2025年5月29日 星期四

12750051_week15

 //week15_1_multiple_windows

//google:processing multiple windows

//File > Examples > Demos >Tests > MultipleWindows

void setup(){

  size(300,200);

  background(255,0,0);

  WindowB child = new 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(300,200);

    background(0,255,0);

  }

  public void draw(){ //空白的,要放喔!    

    

  }

}


//week15_02_multiple_windows_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_03_multiple_windows_pg1_pg2_pg3_pg4
//修改自 week15_02_multiple_windows_PGraphics
PGraphics pg1,pg2,pg3,pg4; //在外面宣告,不同人都可以用
void setup(){
  size(400,400,P3D); //主要的視窗
  pg1 = 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); //紅色的大背景
  pg1.beginDraw();
  pg1.background(0,255,0); //綠色小背景
  pg1.translate(100,100);
  pg1.rotateY(radians(frameCount));
  pg1.box(100);
  pg1.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(pg1,0,0);
  image(pg2,200,0);
  image(pg3,0,200);
  image(pg4,200,200);
}

//week15_04_Arcball_rotation_PGraphics_pg
//修改自 week15_03_multiple_windows_pg1_pg2_pg3_pg4
//又從 File > Examples > Demos > Tests > MultipleWindows
PGraphics 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); //紅色的大背景
  arcball.run();
  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);
}

****************************************************************************

// Ariel and V3ga's arcball class with a couple tiny mods by Robert Hodgin

class Arcball {
  PApplet parent;
  float center_x, center_y, radius;
  Vec3 v_down, v_drag;
  Quat q_now, q_down, q_drag;
  Vec3[] axisSet;
  int axis;
  float mxv, myv;
  float x, y;
  
  Arcball(PApplet parent, float radius){
    this.parent = parent;
    this.radius = radius;

    v_down = new Vec3();
    v_drag = new Vec3();

    q_now = new Quat();
    q_down = new Quat();
    q_drag = new Quat();

    axisSet = new Vec3[] {new Vec3(1.0f, 0.0f, 0.0f), new Vec3(0.0f, 1.0f, 0.0f), new Vec3(0.0f, 0.0f, 1.0f)};
    axis = -1;  // no constraints...    
  }

  void mousePressed(){
    v_down = mouse_to_sphere(parent.mouseX, parent.mouseY);
    q_down.set(q_now);
    q_drag.reset();
  }

  void mouseDragged(){
    v_drag = mouse_to_sphere(parent.mouseX, parent.mouseY);
    q_drag.set(Vec3.dot(v_down, v_drag), Vec3.cross(v_down, v_drag));
  }

  void run(){
    center_x = 100; //我們 pg 200x200 的旋轉中心,要放在(100,100)
    center_y = 100;
    
    q_now = Quat.mul(q_drag, q_down);
    pg.translate(center_x, center_y); //讓他的旋轉,變成 pg 裡的旋轉
    applyQuat2Matrix(q_now);
    
    x += mxv;
    y += myv;
    mxv -= mxv * .01;
    myv -= myv * .01;
  }
  
  Vec3 mouse_to_sphere(float x, float y){
    Vec3 v = new Vec3();
    v.x = (x - center_x) / radius;
    v.y = (y - center_y) / radius;

    float mag = v.x * v.x + v.y * v.y;
    if (mag > 1.0f){
      v.normalize();
    } else {
      v.z = sqrt(1.0f - mag);
    }

    return (axis == -1) ? v : constrain_vector(v, axisSet[axis]);
  }

  Vec3 constrain_vector(Vec3 vector, Vec3 axis){
    Vec3 res = new Vec3();
    res.sub(vector, Vec3.mul(axis, Vec3.dot(axis, vector)));
    res.normalize();
    return res;
  }

  void applyQuat2Matrix(Quat q){
    // instead of transforming q into a matrix and applying it...

    float[] aa = q.getValue();
    pg.rotate(aa[0], aa[1], aa[2], aa[3]);
  }
}

static class Vec3{
  float x, y, z;

  Vec3(){
  }

  Vec3(float x, float y, float z){
    this.x = x;
    this.y = y;
    this.z = z;
  }

  void normalize(){
    float length = length();
    x /= length;
    y /= length;
    z /= length;
  }

  float length(){
    return (float) Math.sqrt(x * x + y * y + z * z);
  }

  static Vec3 cross(Vec3 v1, Vec3 v2){
    Vec3 res = new Vec3();
    res.x = v1.y * v2.z - v1.z * v2.y;
    res.y = v1.z * v2.x - v1.x * v2.z;
    res.z = v1.x * v2.y - v1.y * v2.x;
    return res;
  }

  static float dot(Vec3 v1, Vec3 v2){
    return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
  }
  
  static Vec3 mul(Vec3 v, float d){
    Vec3 res = new Vec3();
    res.x = v.x * d;
    res.y = v.y * d;
    res.z = v.z * d;
    return res;
  }

  void sub(Vec3 v1, Vec3 v2){
    x = v1.x - v2.x;
    y = v1.y - v2.y;
    z = v1.z - v2.z;
  }
}

static class Quat{
  float w, x, y, z;

  Quat(){
    reset();
  }

  Quat(float w, float x, float y, float z){
    this.w = w;
    this.x = x;
    this.y = y;
    this.z = z;
  }

  void reset(){
    w = 1.0f;
    x = 0.0f;
    y = 0.0f;
    z = 0.0f;
  }

  void set(float w, Vec3 v){
    this.w = w;
    x = v.x;
    y = v.y;
    z = v.z;
  }

  void set(Quat q){
    w = q.w;
    x = q.x;
    y = q.y;
    z = q.z;
  }

  static Quat mul(Quat q1, Quat q2){
    Quat res = new Quat();
    res.w = q1.w * q2.w - q1.x * q2.x - q1.y * q2.y - q1.z * q2.z;
    res.x = q1.w * q2.x + q1.x * q2.w + q1.y * q2.z - q1.z * q2.y;
    res.y = q1.w * q2.y + q1.y * q2.w + q1.z * q2.x - q1.x * q2.z;
    res.z = q1.w * q2.z + q1.z * q2.w + q1.x * q2.y - q1.y * q2.x;
    return res;
  }
  
  float[] getValue(){
    // transforming this quat into an angle and an axis vector...

    float[] res = new float[4];

    float sa = (float) Math.sqrt(1.0f - w * w);
    if (sa < EPSILON){
      sa = 1.0f;
    }

    res[0] = (float) Math.acos(w) * 2.0f;
    res[1] = x / sa;
    res[2] = y / sa;
    res[3] = z / sa;

    return res;
  }
}

//week15_5_postman_mouseDragged_head_angleX_0_atan2
//修改自 week11_3_postman_angin
//重新來一次,讓程式架構變更清楚
PImage postman, head, body, uparm1, hand1, uparm2, hand2, foot1, foot2;
void setup(){
  size(560,560);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("uparm1.png");
  hand1 = loadImage("hand1.png");
  uparm2 = loadImage("uparm2.png");
  hand2 = loadImage("hand2.png");
  foot1 = loadImage("foot1.png");
  foot2 = loadImage("foot2.png");
}
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);
    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;
void mouseDragged(){
  //要把原本 mouseX 的左右移動,改成像IK的轉動
  //從 void draw()找到頭「掛的位置」+232,+200
  float dx = mouseX-232 , dy = mouseY-200; //減掉座標
  angleX[0] = degrees(atan2(dy,dx)) + 90; //頭的角度
  //angleX[ID] += mouseX - pmouseX;
  //angleY[ID] += mouseY - pmouseY;
}
int R = 0;
void myInterpolate(){
  if(lines.size()>=2){
    float alpha = (frameCount%30)/30.0; //介於0.0~1.0中間的值
    if(alpha==0.0) R = (R+1)%lines.size();
    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;
    }
  }
}
void draw(){
  background(#FFFFF2);
  if(playing) myInterpolate();
  image(body,0,0);
  pushMatrix();
    translate(232,200);
    rotate(radians(angleX[0]));
    translate(-232,-200);
    image(head,0,0);
  popMatrix();
  
  pushMatrix();
    translate(220,375);
    rotate(radians(angleX[5]));
    translate(-220,-375);
    image(foot1,0,0);
  popMatrix();
  
  pushMatrix();
    translate(260,372);
    rotate(radians(angleX[6]));
    translate(-260,-372);
    image(foot2,0,0);
  popMatrix();
  
  pushMatrix(); // 要畫左邊的上手臂、手肘
    translate(+185, +261);
    rotate(radians(angleX[1]));
    translate(-185, -261);
    image(uparm1, 0, 0); // 上手臂
    pushMatrix();
      translate(+116, +265);
      rotate(radians(angleX[2]));
      translate(-116, -265);
      image(hand1, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix(); // 要畫右邊的上手臂、手肘
    translate(290, 262);
    rotate(radians(angleX[3]));
    translate(-290, -262);
    image(uparm2, 0, 0);
    pushMatrix();
      translate(357, 259);
      rotate(radians(angleX[4]));
      translate(-357, -259);
      image(hand2, 0, 0);
    popMatrix();
  popMatrix();
}

//week15_6_postman_mouseDragged_head_angleX_0_atan2
//修改自 week15_5_postman_mouseDragged_head_angleX_0_atan2
PImage postman, head, body, uparm1, hand1, uparm2, hand2, foot1, foot2;
void setup(){
  size(560,560);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("uparm1.png");
  hand1 = loadImage("hand1.png");
  uparm2 = loadImage("uparm2.png");
  hand2 = loadImage("hand2.png");
  foot1 = loadImage("foot1.png");
  foot2 = loadImage("foot2.png");
}
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);
    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;
float [] posX = { 232, 185, 290, 357, 220, 260}; //從void draw()
float [] posY = { 200, 261, 262, 259, 375, 372}; //找到全部座標
float [] posAngle = {90,180,180,0,0,-90,-90};
void mouseDragged(){
  //要把原本 mouseX 的左右移動,改成像IK的轉動
  //從 void draw()找到頭「掛的位置」+232,+200
  //float dx = mouseX-232 , dy = mouseY-200; //減掉座標
  //angleX[0] = degrees(atan2(dy,dx)) + 90; //頭的角度
  float dx = mouseX-posX[ID] , dy = mouseY-posY[ID]; //減掉座標
  angleX[ID] = degrees(atan2(dy,dx)) + 90; //某個關節的角度
  
  //angleX[ID] += mouseX - pmouseX;
  //angleY[ID] += mouseY - pmouseY;
}
int R = 0;
void myInterpolate(){
  if(lines.size()>=2){
    float alpha = (frameCount%30)/30.0; //介於0.0~1.0中間的值
    if(alpha==0.0) R = (R+1)%lines.size();
    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;
    }
  }
}
void draw(){
  background(#FFFFF2);
  if(playing) myInterpolate();
  image(body,0,0);
  pushMatrix();
    translate(232,200);
    rotate(radians(angleX[0]));
    translate(-232,-200);
    image(head,0,0);
  popMatrix();
  
  pushMatrix();
    translate(220,375);
    rotate(radians(angleX[5]));
    translate(-220,-375);
    image(foot1,0,0);
  popMatrix();
  
  pushMatrix();
    translate(260,372);
    rotate(radians(angleX[6]));
    translate(-260,-372);
    image(foot2,0,0);
  popMatrix();
  
  pushMatrix(); // 要畫左邊的上手臂、手肘
    translate(+185, +261);
    rotate(radians(angleX[1]));
    translate(-185, -261);
    image(uparm1, 0, 0); // 上手臂
    pushMatrix();
      translate(+116, +265);
      rotate(radians(angleX[2]));
      translate(-116, -265);
      image(hand1, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix(); // 要畫右邊的上手臂、手肘
    translate(290, 262);
    rotate(radians(angleX[3]));
    translate(-290, -262);
    image(uparm2, 0, 0);
    pushMatrix();
      translate(357, 259);
      rotate(radians(angleX[4]));
      translate(-357, -259);
      image(hand2, 0, 0);
    popMatrix();
  popMatrix();
}}














沒有留言:

張貼留言