2023年10月12日 星期四

我敢打賭你會在看完我的程式碼後去洗手間

 STEP 01

1.開啟processing

2.開視窗並加上3D功能(P3D),畫背景

3.使用以前電腦圖學教的備份還原矩陣,建個盒子讓它跟著滑鼠座標移動

STEP 02

1.以剛才程式碼為基礎,再加上rotate讓盒子轉動

2.以Y軸做轉動為例:

STEP 03

1.用fill();給盒子填充顏色

2.再建立一個盒子,並把它放大(scale)兩倍


STEP 04

1.開啟一個新的processing

2.要做新的東西,類似摺紙的,於是試著使用資料結構

3.建立大的資料結構,並用特殊的for迴圈通過小的資料結構,達成滑鼠點擊得橢圓的目標

STEP 05

1.我們使用第二個特殊for迴圈做頂點,頂點(vertex)可圈出需要的範圍


STEP 06

1.現在只能畫點跟框範圍,顯然不夠,要將滑鼠左右鍵功能分開

2.打算讓左鍵畫頂點跟橢圓,右鍵讓框起來的部分旋轉

3.再次使用備份還原矩陣以及之前電腦圖學課學過的TRT,使其右鍵有旋轉功能

STEP 07

1.開新檔案,測試選取左中右鍵的程式



STEP 08

1.摺紙會有要點對點的情況,因此要能選擇頂點

2.利用ans變數不為空值畫一個稍大於頂點的圓,達成選取的效果

3.加入拖曳的程式碼,並且將滑鼠的三個鍵功能分開,加點設為左鍵,拖曳設置在中鍵


STEP 09

1.加點位置錯誤雖然可以調整位置,但目前無法減少點的數量,所以要加上刪除點的功能,設置在剩下的右鍵


final code:

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) ) );//假設畫面點好37個頂點

  }

}

void draw(){

  background(#39C5BB);

  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行

      if(dist(p.x, p.y, mouseX, mouseY) < 5 ){//找到夠近的點

        pt.remove(i);//把第i個點刪掉(刪的時候,會把大資料結構右邊的都左移一格)

      }

    }

  }

}


沒有留言:

張貼留言