2025年5月29日 星期四

week15



檔名就是class

//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-2-multiple-window-PGraphics
PGraphics pg;
void setup(){
  size(400,400,P3D);//main window
  pg = createGraphics(200,200,P3D);
}
void draw(){
  background(255,0,0);//red
  pg.beginDraw();
  pg.background(0,255,0);//green
  pg.translate(100,100);
  pg.rotateY(radians(frameCount));
  pg.box(100);
  pg.endDraw();
  image(pg,0,0);
}

--------------------------------------------------------------------------------------

//week15-3-multiple-windows-pg-pg2-pg3-pg4
PGraphics pg,pg2,pg3,pg4;
void setup(){
  size(400,400,P3D);//main window
  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);//red
  pg.beginDraw();
  pg.background(0,255,0);//green
  pg.translate(100,100);
  pg.rotateY(radians(frameCount));
  pg.box(100);
  pg.endDraw();
  
  
   
  pg2.beginDraw();
  pg2.background(255,255,0);//yellow
  pg2.translate(100,100);
  pg2.rotateY(radians(frameCount));
  pg2.box(100);
  pg2.endDraw();
  
   
  pg3.beginDraw();
  pg3.background(255,0,0);//red
  pg3.translate(100,100);
  pg3.rotateY(radians(frameCount));
  pg3.box(100);
  pg3.endDraw();
  
   
  pg4.beginDraw();
  pg4.background(255,0,255);//purple
  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-rotation-pgraphics-pg
//File > Examples> Demos > Tests >MultipleWindows
PGraphics pg,pg2,pg3,pg4;
Arcball arcball;
void setup(){
  size(400,400,P3D);//main window
  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);//red
  
  pg.beginDraw();
  pg.background(0,255,0);//green
  arcball.run();
 // pg.translate(100,100);
  //pg.rotateY(radians(frameCount));
  pg.box(100);
  pg.endDraw();
  
  
   
  pg2.beginDraw();
  pg2.background(255,255,0);//yellow
  pg2.translate(100,100);
  pg2.rotateY(radians(frameCount));
  pg2.box(100);
  pg2.endDraw();
  
   
  pg3.beginDraw();
  pg3.background(255,0,0);//red
  pg3.translate(100,100);
  pg3.rotateY(radians(frameCount));
  pg3.box(100);
  pg3.endDraw();
  
   
  pg4.beginDraw();
  pg4.background(255,0,255);//purple
  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;//選轉中心
    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
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("right-arm.png");
  uparm2 = loadImage("left-arm.png");
  hand1 = loadImage("right-hand.png");
  hand2 = loadImage("left-hand.png");
  foot1 = loadImage("right-leg.png");
  foot2 = loadImage("left-leg.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); // 把現在的動作的這行, 加到 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(){
  float dx = mouseX - 236,dy=mouseY - 231;
  angleX[0] = degrees(atan2(dy,dx))+90;
  //angleX[ID] += mouseX - pmouseX;
  //angleY[ID] += mouseY - pmouseY; // 多了這一行
}
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;
    }
  }
}
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(); // 腳 foot1
    translate(220, 375);
    rotate(radians(angleX[5]));
    translate(-220, -375);
    image(foot1, 0, 0);
  popMatrix();

  pushMatrix(); // 腳 foot2
    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-posX-posY-ID-angleX-ID-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("right-arm.png");
  uparm2 = loadImage("left-arm.png");
  hand1 = loadImage("right-hand.png");
  hand2 = loadImage("left-hand.png");
  foot1 = loadImage("right-leg.png");
  foot2 = loadImage("left-leg.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); // 把現在的動作的這行, 加到 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,116,290,357,220,260};
float [] posY = {231,261,265,262,259,375,372};
float [] posAngle = {90,180,180,0,0,-90,-90};
void mouseDragged(){
  //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; // 多了這一行
}
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;
    }
  }
}
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(); // 腳 foot1
    translate(220, 375);
    rotate(radians(angleX[5]));
    translate(-220, -375);
    image(foot1, 0, 0);
  popMatrix();

  pushMatrix(); // 腳 foot2
    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();
}
-----------------------------------------------------------------------------------------------

沒有留言:

張貼留言