第一節課
第一個小程式week05_1_P3D_box_translate_pushMatrix_popMatrix
STEP 1.移動，畫一個立體小方塊P3D並根據滑鼠移動
void setup(){ size(400,400,P3D);//P3D:Processing3D立體功能 } void draw(){ background(#FFFFF2);//背景色 pushMatrix();///備份矩陣 translate(mouseX,mouseY);///移動 box(100);//畫一個3D box popMatrix();///還原矩陣 }
第二個小程式week05_2_rotate_scale
STEP 2.旋轉，縮放，加入一個放大2倍的空白方塊(nofill)
void setup(){ size(400,400,P3D);//P3D:Processing3D立體功能 } void draw(){ background(#FFFFF2);//背景色
pushMatrix();//備份矩陣 translate(mouseX,mouseY);///移動 rotateY(radians(mouseX));//rotate對X軸轉//rotateY對Y軸轉 fill(0,255,0);//面填成綠色 box(100);//畫一個3D box noFill();//沒有填充，變成空的方塊 scale(2);//放大兩倍 box(100); popMatrix();///還原矩陣 }
第三個小程式week05_3_vertex_beginShape_endShape
STEP 3.點線面色彩，畫一個三角形填充顏色
***問題***將填充拿掉時，發現他的線，右邊那條並沒有顏色，看起來不舒服，要怎麼讓線變成一個完整的三角形呢?
STEP 4.為了把線連起來，endShape(CLOSE)，連起來
size(410,410,P3D); noFill(); beginShape(); //fill(255,0,0); //填充紅色 vertex(200,0); //fill(0,255,0); //填充綠色 vertex(0,400); //fill(0,0,255);//填充藍色 vertex(400,400); endShape(CLOSE);
第二節課
可以開始想想期中、末作品的主題，有沒有想做的，獨創有趣的第四個小程式week05_4_origami01_ArrayList
之前都用小寫的程式，現在開始加一些大寫的，進階程式，物件導向程式設計
STEP 5.想要做出摺紙的程式，用進階的資料結構程式，當滑鼠點下去add一個new點
ArrayList<PVector> pt;//<物件>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));//當滑鼠點下去add一個new點 }///大的資料結構裡，加入小的PVector的物件
第五個小程式week05_5_origami02_beginShape_endShape
STEP 6.希望點點點能點出一個圖，點和點之間連起來，變一個圖
ArrayList<PVector> pt;//<物件>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){ vertex( p.x, p.y); } endShape(); } void mousePressed(){ pt.add(new PVector(mouseX,mouseY));//當滑鼠點下去add一個new點 }///大的資料結構裡，加入小的PVector的物件
第六個小程式week05_6_origami03_TRT
點一下就加一個點會太多，所以要節制一下，加其他按鍵的功能
STEP 7.加入旋轉功能，要用TRT技巧，當按右鍵時旋轉
ArrayList<PVector> pt;//<物件>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)；///TRT為了讓圖能在正中間旋轉，不然會跑出畫面 } 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));//當滑鼠點下去add一個new點 } }///大的資料結構裡，加入小的PVector的物件
第七個小程式week05_7_origami04_select_mouseButton_CENTER
當圖案在旋轉時，他就是一個平面在旋轉，但摺紙的時候想摺立體的，想要可以選點，並且用中鍵移動頂點，讓圖不會那麼無聊
STEP 8.練習用左中右鍵變換底色，等等就可以用中鍵來移動頂點了
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);//右鍵藍色 }
第三節課
draw()///一秒鐘畫60次
mousePressed()///滑鼠按下去才做，這比較佳!!!
第八個小程式week05_8_origami05_mousePressed_select_dist
STEP 9 .印出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){//畫出20個頂點 ellipse( p.x, p.y, 10, 10); } if(ans!=null)ellipse(ans.x, ans.y, 15, 15);//ans有東西的話，將對應的圓圈出來 } PVector ans = null;//空指標 void mousePressed(){ for(PVector p : pt){///如果找到距離和滑鼠距離<5 if(dist(p.x, p.y, mouseX, mouseY) < 5){ ans = p; } } }
第九個小程式week05_9_origami06_mouseDragged_x_y
STEP 10 .亂數決定點的位置，然後按滑鼠中鍵可以拖曳點的位置
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(255); for(PVector p: pt){//畫出37個頂點 ellipse( p.x, p.y, 10, 10); } if(ans!=null)ellipse(ans.x, ans.y, 15, 15);//ans有東西的話，將對應的圓圈出來 } 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){///如果找到距離和滑鼠距離<5 if(dist(p.x, p.y, mouseX, mouseY) < 5){ ans = p; } } } }
第十個小程式week05_A_origami07_remove_ArrayList_RIGHT
不能再神奇for迴圈(for(PVector p : pt))裡面隨便刪除(remove)東西，要刪掉東西的話，要用傳統的for迴圈，要倒過來刪比較快，ex.刪掉0，就要把1搬到0...以此類推，一直搬家很累
STEP 11 .
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(255); for(PVector p: pt){//畫出37個頂點 ellipse( p.x, p.y, 10, 10); } if(ans!=null)ellipse(ans.x, ans.y, 15, 15);//ans有東西的話，將對應的圓圈出來 } 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){///如果找到距離和滑鼠距離<5 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);//要寫兩行，才等於厲害的1行 if(dist(p.x,p.y,mouseX,mouseY)<5){//找到夠近的點 pt.remove(i);///就把第i個點刪掉(刪掉的時候會把大資料結構右邊的都左移一個) } } } }
沒有留言:
張貼留言