week 05

step 01-1  使用  open GL 做 3D 的盒子

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

step 01-2  做盒子的旋轉 放大和縮小 

void setup()
{
  size(400,400,P3D);//Processing 3D的功能
}
void draw()
{
   background(#FFFFF2);
   pushMatrix();//備份矩陣
     translate(mouseX,mouseY);//移動
     rotateY(radians(mouseX));//旋轉 對Y軸轉 
     box(100);//3D的盒子 方塊
   popMatrix();//還原矩陣
}

step 01-3 用原本的盒子 放大再做出包心的盒子

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();//還原矩陣
}

step 01-4 畫出3D的三角形 劃出三個頂點 但會發現三角形的外圍黑色線條沒有連起來

size(410,410,P3D);
noFill();
beginShape();
vertex(200,0);
vertex(0,400);
vertex(400,400);
endShape(CLOSE);

在 endShape()括號裡面打 CLOSE
三角形就可以方起來了


step02-1  大資料結構包小資料結構 會有好多點


ArrayList<PVector> pt;//大的資料結構ArrayList  
void setup()
{
  size(400,400,P3D);
  pt = new ArrayList<PVector>();//初始化 把大的資料結構準備好(裡面放小的資料結構)
}
void draw()
{
  background(#FFFFF2);
  for (PVector p : pt)//PVector是小的資料結構
  {//特殊的for迴圈會得到小的資料結構
    ellipse(p.x,p.y,10,10);
  }
  
}
void mousePressed()
{
   pt.add( new PVector(mouseX,mouseY) ); 
  
  
}//大的資料結構裡 加入小的PVector物件

step02-2 好多點連成一個形狀 先畫出圓 圖形的vertex才會跟著出現

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)//PVector是小的資料結構
  {//特殊的for迴圈會得到小的資料結構
    vertex(p.x,p.y,10,10);//三個不共線的頂點 圖形才會出現 
  }
  endShape();//結束畫
}
void mousePressed()
{
   pt.add( new PVector(mouseX,mouseY) ); 
  
  
}//大的資料結構裡 加入小的PVector物件

step02-3 做出可以旋轉的形狀 包括 TRT TRANSLATE ROTATE 


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)//PVector是小的資料結構
    {//特殊的for迴圈會得到小的資料結構
      vertex(p.x,p.y,10,10);//三個不共線的頂點 圖形才會出現 
    }
    endShape();//結束畫
  popMatrix();
}
void mousePressed()
{
   if( mouseButton==LEFT )
   {
     pt.add( new PVector(mouseX,mouseY) ); 
   }
}//大的資料結構裡 加入小的PVector物件

step02-4 利用中鍵選點 當左鍵鍵按下去 背景變紅色 

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);//右鍵 藍色
}

step03-1 20個頂點 可以選點

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 ));
  }//假設畫面中 點好了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;
     }
  }
}

step03-2 當滑鼠中鍵被按時 點可以做移動

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) ));
  }//假設畫面中 點好了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 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;
       }
    }
  }
}
step03-3 當滑鼠右鍵按的時候 可以把點刪掉

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) ));
  }//假設畫面中 點好了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 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迴圈
  {
    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);//把第一個點刪掉 刪的時候 會把大的資料結構右邊的都左移一格 
      }
    }
  }
}