2023年10月12日 星期四

Jia的互動技術日誌 Week05

📐📏📎

今天的第一個程式是用 Processing 做 3D功能
💾 程式碼存檔區
void setup(){
  size(400,400,P3D);
}
P3D 打開3D功能 (openGL功能)
💾 程式碼存檔區
void setup(){
  size(400,400,P3D); //Processing 的 3D功能
}
void draw(){
  background(#FFFFF2);
  box(100); //3D的盒子、方塊
}
畫3D的盒子
💾 程式碼存檔區
void setup(){
  size(400,400,P3D); //Processing 的 3D功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix(); //備份矩陣
    translate(mouseX,mouseY); //移動到滑鼠位置
    box(100); //3D的盒子、方塊
  popMatrix(); //還原矩陣
}
和大二一樣的 push pop 矩陣
移動到滑鼠位置

💾 程式碼存檔區
void setup(){
  size(400,400,P3D); //Processing 的 3D功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix(); //備份矩陣
    translate(mouseX,mouseY); //移動到滑鼠位置
    rotate(mouseX);
    box(100); //3D的盒子、方塊
  popMatrix(); //還原矩陣
}
加上旋轉，好像不太對，轉好快

💾 程式碼存檔區
void setup(){
  size(400,400,P3D); //Processing 的 3D功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix(); //備份矩陣
    translate(mouseX,mouseY); //移動到滑鼠位置
    rotate(radians(mouseX));
    box(100); //3D的盒子、方塊
  popMatrix(); //還原矩陣
}
加上 radians(將度數測量值轉換為其對應的弧度值) 
現在對 X 軸轉
💾 程式碼存檔區
void setup(){
  size(400,400,P3D); //Processing 的 3D功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix(); //備份矩陣
    translate(mouseX,mouseY); //移動到滑鼠位置
    rotateY(radians(mouseX));
    box(100); //3D的盒子、方塊
  popMatrix(); //還原矩陣
}
對 Y 軸轉
💾 程式碼存檔區
void setup(){
  size(400,400,P3D); //Processing 的 3D功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix(); //備份矩陣
    translate(mouseX,mouseY); //移動到滑鼠位置
    rotateY(radians(mouseX)); //對Y軸轉動
    noFill();
    box(100); //3D的盒子、方塊
  popMatrix(); //還原矩陣
}
不填充
💾 程式碼存檔區
void setup(){
  size(400,400,P3D); //Processing 的 3D功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix(); //備份矩陣
    translate(mouseX,mouseY); //移動到滑鼠位置
    rotateY(radians(mouseX)); //對Y軸轉動
    fill(0,255,0);
    box(100); //3D的盒子、方塊
  popMatrix(); //還原矩陣
}
填充綠色

💾 程式碼存檔區
void setup(){
  size(400,400,P3D); //Processing 的 3D功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix(); //備份矩陣
    translate(mouseX,mouseY); //移動到滑鼠位置
    rotateY(radians(mouseX)); //對Y軸轉動
    fill(0,255,0); //面填充綠色
    box(100); //3D的盒子、方塊
    
    noFill(); //面不要填
    scale(2); //放大2倍
    box(100); //雖然是100的盒子，但上面有放大兩倍，他就被放大了
    
  popMatrix(); //還原矩陣
}
外面未填充的方塊包著填綠色的方塊
雖然未填充的大小是100 但上面有scale(2)直接放大兩倍
點
💾 程式碼存檔區
size(400,400,P3D);
beginShape();
vertex(200,0);
vertex(0,400);
vertex(400,400);
endShape();
💾 程式碼存檔區
size(400,410,P3D);
beginShape();
fill(255,0,0);
vertex(200,0);
fill(0,255,0);
vertex(0,400);
fill(0,0,255);
vertex(400,400);
endShape();
顏色漸層
(不正規寫法但好閱讀)
💾 程式碼存檔區
size(400,410,P3D);
beginShape();
fill(255,0,0);vertex(200,0);
fill(0,255,0);vertex(0,400);
fill(0,0,255);vertex(400,400);
endShape();
但好像不太對！
為什麼不是封閉曲線？
💾 程式碼存檔區
size(400,410,P3D);
noFill();
beginShape();
vertex(200,0);
vertex(0,400);
vertex(400,400);
endShape();
把顏色去掉後發現！沒有畫成三角形

右鍵 > 再參考文件裡找選取的字
💾 程式碼存檔區
size(400,410,P3D);
noFill();
beginShape();
vertex(200,0);
vertex(0,400);
vertex(400,400);
endShape(CLOSE);
加 CLOSE ! 可以封閉啦

摺紙呢？
物件導向程式設計
用 <包住物件>
pt (particle) 是大的資料結構
PVector 是小的資料結構
💾 程式碼存檔區
ArrayList<PVector> pt; //大的資料結構ArrayList
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
} //初始化，把大的資料結構準備好(裡面放小的資料結構)
void draw(){
  background(#FFFFF2);
  for(PVector p : pt){ //特殊的for迴圈，得到小的資料結構
    ellipse(p.x,p.y,10,10);
  }
}
void mousePressed(){
  pt.add(new PVector(mouseX,mouseY));
} //大的資料結構裡，加入小的PVector物件
用滑鼠畫橢圓

💾 程式碼存檔區
ArrayList<PVector> pt; //大的資料結構ArrayList
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
} //初始化，把大的資料結構準備好(裡面放小的資料結構)
void draw(){
  background(#FFFFF2);
  beginShape();
  for(PVector p : pt){ //特殊的for迴圈，得到小的資料結構
    vertex(p.x,p.y);
  }
  endShape();
}
void mousePressed(){
  pt.add(new PVector(mouseX,mouseY));
} //大的資料結構裡，加入小的PVector物件
用滑鼠打點，可以連出形狀

但 至少要三個不共線的點，我們才能看出面
💾 程式碼存檔區
ArrayList<PVector> pt; //大的資料結構ArrayList
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
} //初始化，把大的資料結構準備好(裡面放小的資料結構)
void draw(){
  background(#FFFFF2);
  for(PVector p : pt){
    ellipse(p.x,p.y,10,10);
  }
  beginShape();
  for(PVector p : pt){ //特殊的for迴圈，得到小的資料結構
    vertex(p.x,p.y);
  }
  endShape();
}
void mousePressed(){
  pt.add(new PVector(mouseX,mouseY));
} //大的資料結構裡，加入小的PVector物件
更清楚點在哪了
畫完可以變3D轉動嗎？
💾 程式碼存檔區
ArrayList<PVector> pt; //大的資料結構ArrayList
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
} //初始化，把大的資料結構準備好(裡面放小的資料結構)
void draw(){
  background(#FFFFF2);
  pushMatrix();
    if(mousePressed && mouseButton==RIGHT){
      translate(200,200);
      rotateY(radians(frameCount));
      translate(-200,-200);
    }
    for(PVector p : pt){
      ellipse(p.x,p.y,10,10);
    }
    beginShape();
    for(PVector p : pt){ //特殊的for迴圈，得到小的資料結構
      vertex(p.x,p.y);
    }
    endShape();
  popMatrix();
}
void mousePressed(){
  if(mouseButton==LEFT){
    pt.add(new PVector(mouseX,mouseY));
  }
} //大的資料結構裡，加入小的PVector物件
滑鼠左鍵按下 打點
右鍵按下 旋轉
T R T 功用：讓他先對著Y軸旋轉，再移動中心點將他掛上去

滑鼠中鍵左鍵右鍵
💾 程式碼存檔區
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(255);
  if(mousePressed && mouseButton==LEFT)background(255,0,0);
  if(mousePressed && mouseButton==CENTER)background(0,255,0);
  if(mousePressed && mouseButton==RIGHT)background(0,0,255);
}

💾 程式碼存檔區
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(255);
  if(mousePressed && mouseButton==LEFT)print(".");//background(255,0,0);
  if(mousePressed && mouseButton==CENTER)background(0,255,0);
  if(mousePressed && mouseButton==RIGHT)background(0,0,255);
}
void mousePressed(){
  if(mouseButton==LEFT)println("LEFT");
  if(mouseButton==CENTER)println("CENTER");
  if(mouseButton==RIGHT)println("RIGHT");
}
draw() 裡面 print是一直刷新 所以印很多"'"
mousePressed() println 按下才印出


💾 程式碼存檔區
ArrayList<PVector> pt;
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
  for(int i=0;i<20;i++){
    pt.add(new PVector(i*20,20));
  }
}
void draw(){
  background(255);
  for(PVector p : pt){ //畫出20個頂點
    ellipse(p.x,p.y,10,10);
  }
}


💾 程式碼存檔區
ArrayList<PVector> pt;
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
  for(int i=0;i<20;i++){
    pt.add(new PVector(i*20,20));
  }
}
void draw(){
  background(255);
  for(PVector p : pt){ //畫出20個頂點
    ellipse(p.x,p.y,10,10);
  }
  if(ans!=null)ellipse(ans.x,ans.y,15,15);
}
PVector ans = null;
void mousePressed(){
  for(PVector p : pt){
    if(dist(p.x,p.y,mouseX,mouseY)<5){
      ans = p;
    }
  }
}


可以自己選點
那就可以摺紙啦
💾 程式碼存檔區
ArrayList<PVector> pt;
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
  for(int i=0;i<20;i++){
    pt.add(new PVector(i*20,20));
  }
}
void draw(){
  background(255);
  for(PVector p : pt){ //畫出20個頂點
    ellipse(p.x,p.y,10,10);
  }
  if(ans!=null)ellipse(ans.x,ans.y,15,15);
}
PVector ans = null;
void mousePressed(){
  if(mouseButton==LEFT)pt.add(new PVector(mouseX,mouseY));
  else if(mouseButton==CENTER){
    for(PVector p : pt){
      if(dist(p.x,p.y,mouseX,mouseY)<5){
        ans = p;
      }
    }
  }
}

💾 程式碼存檔區
ArrayList<PVector> pt;
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
  for(int i=0;i<20;i++){
    pt.add(new PVector(i*20,20));
  }
}
void draw(){
  background(255);
  for(PVector p : pt){ //畫出20個頂點
    ellipse(p.x,p.y,10,10);
  }
  if(ans!=null)ellipse(ans.x,ans.y,15,15);
}
PVector ans = null;
void mouseDragged(){
  if(mouseButton==CENTER && ans!=null){
    ans.x = mouseX;
    ans.y = mouseY; 
  }
}
void mousePressed(){
  if(mouseButton==LEFT)pt.add(new PVector(mouseX,mouseY));
  else if(mouseButton==CENTER){
    for(PVector p : pt){
      if(dist(p.x,p.y,mouseX,mouseY)<5){
        ans = p;
      }
    }
  }
}



ArrayList<PVector> pt;
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
  for(int i=0;i<20;i++){
    pt.add( new PVector(random(400), random(400)) );
  }
}
void draw(){
  background(255);
  for(PVector p : pt){ //畫出全部的頂點
    ellipse(p.x,p.y,10,10);
  }
  if(ans!=null)ellipse(ans.x,ans.y,15,15);
}
PVector ans = null;
void mouseDragged(){
  if(mouseButton==CENTER && ans!=null){
    ans.x = mouseX;
    ans.y = mouseY; 
  }
}
void mousePressed(){
  if(mouseButton==LEFT)pt.add(new PVector(mouseX,mouseY));
  else if(mouseButton==CENTER){
    for(PVector p : pt){ //厲害的for迴圈(不能增刪裡面的東西)
      if(dist(p.x,p.y,mouseX,mouseY)<5){
        ans = p;
      }
    }
  }else if(mouseButton==RIGHT){ //右鍵，要刪掉。要用傳統的for迴圈
    for(int i=0;i<pt.size();i++){ //要寫2行，才等於厲害的1行
      PVector p = pt.get(i); //要寫2行，才等於厲害的1行
      if(dist(p.x,p.y,mouseX,mouseY)<5){ //找到夠近的點
        pt.remove(i); //就把第i個點刪掉。(刪掉的時候，會把大資料結構的右邊的都左移動一格)
      }
    }
  }
}



































於






















標籤：
,


















沒有留言:















張貼留言























        

      









訂閱：
張貼留言 (Atom)