小凱 Week05

第一節課

先把教授傳的Processing 4.3的檔案解壓縮，調整偏好設定成標楷體，字型改24。

week05-1

先做出一個方塊，或發現方塊在畫面的左上角，在裡面加上translate，讓方塊可以移動。

void setup(){
 size(400,400,P3D); //Processing的3D功能
}
void draw(){
 background(#FFFFF2);//鵝黃色
 pushMatrix();//備份矩陣
 translate(mouseX,mouseY);
 box(100);//3D的盒子、方塊
 popMatrix();//還原矩陣
}

week05-2

基於week05-1加上rotateY(radians(mouseX));讓方塊對Y軸做轉動。

加上noFill();，讓方形變透明

為了更了解，做兩個方形，把一個放大兩倍且面不填充，一個填成綠色。

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);//放大兩倍
 box(100);//雖然是100，但上面放大兩倍，它也放大
 popMatrix();//還原矩陣
}

week05-3

接著要教頂點，開新的檔案，寫三的頂點，填充紅、綠、藍顏色。

size(400,400,P3D);
beginShape();
fill(255,0,0);
vertex(200,0);
fill(0,255,0);
vertex(0,400);
fill(0,0,255);
vertex(400,400);
endShape();

再開一個新檔案，改成不填充，在跟week05-3做比較，會發現有填充顏色的三角形會連起來，沒填充的沒有連起來，試著做思考。

教授講解要在endShape的括號裡加上CLOSE。

第二節課

week05-4

上一節課教的方塊，那如果可以把它做摺紙呢?來試試看。

1.先試著了解ArrayList，跟著教授寫程式，完成後可以在視窗隨意點，目前看不懂程式，但後面會常遇到這個寫法，試著理解看看。

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的物件

week05-5

在剛剛的程式加上beginShpape跟endShape，再加一個for迴圈寫頂點，可以藉由隨機點讓圖形連起來。

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的物件

week05-6

把滑鼠左右鍵分開，左鍵畫點、右鍵旋轉。

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的物件a

week05-7

剛剛用到的滑鼠，還有一個中鍵可以用，開新的檔案，藉由滑鼠三鍵改變顏色。

第三節課

week05-8

先用PVector把20個點的座標存到ans裡，執行後再去判斷滑鼠的座標跟ans的座標是不是小於5，小於的畫就畫圓。

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){
  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;
    }
  }
}

week05-9

在05-8加上mouseDragged讓滑鼠中鍵可以拖曳點。

ArrayList<PVector> pt;
void setup(){
 size(400,400,P3D);
 pt=new ArrayList<PVector>();
 for(int i=0;i<37;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){
    if(dist(p.x,p.y,mouseX,mouseY)<5){
    ans=p;
    }
  }
}

week05-a

刪除點，但迴圈要用最原始的且要倒過來寫。

ArrayList<PVector> pt;
void setup(){
 size(400,400,P3D);
 pt=new ArrayList<PVector>();
 for(int i=0;i<37;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){
    if(dist(p.x,p.y,mouseX,mouseY)<5){
    ans=p;
    }
  }
}else if(mouseButton==RIGHT){
    for(int i=0;i<pt.size();i++){
     PVector p=pt.get(i); 
     if(dist(p.x,p.y,mouseX,mouseY)<5){
       pt.remove(i);
    }
  }
}
}