Processing 基本繪圖 part3

經過兩星期的課程想必有在收看本blog的人對於processing有點了初步的了解
本週的不負責任教學又來啦！

使用beginShape來完成想要的圖形


//Class 1
void setup(){
//設定視窗大小
size(100, 100);
//背景設定為白色
background(255);
//使線段平滑點
smooth();
}

void draw(){
//開始畫圖
beginShape(TRIANGLE_STRIP);
//在這先解釋一下為何這樣下顏色指令會每個三角形都不同顏色
//三角形顧名思義三個點(廢話)
//由於beginShape在endShape出現前會將所有出現過的點連結在一起
//從第四個點開始可以共用前面倒數兩個點來連接為三角形
//所以後面這部份每隔一個vertex(點)就可以再未下一個三角形上色
fill(255, 0, 0);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
fill(0, 200, 0);
vertex(60, 20);
fill(50, 10, 100);
vertex(70, 75);
fill(0, 200, 200);
vertex(80, 20);
fill(100, 150, 0);
vertex(90, 75);
endShape();
}



使用beginShape繪製不規則形
配合curveVertex來做出曲線
當然要製作出曲線亦可選擇使用bezierVertex

因為懶所以就直接寫....懶得加上setup、deaw...

//class 2
//內部不填入顏色
noFill();
//開始畫圖
beginShape();
//剛剛使用vertex(點)所以兩點間直接連接為直線
//現在所使用的curveVertex就是繪製曲線，詳細使用方式請參考上方連結
curveVertex(90, 50);
curveVertex(50, 90);
curveVertex(70, 50);
curveVertex(80, 17);
curveVertex(50, 20);
curveVertex(50, 50);
endShape();


for loop練習
其實內容與學程式基礎的用*來排圖案一樣
只不過換成畫方塊


//class 3
void setup(){
//設定視窗大小
size(200, 200);
//定義小方塊的大小
int RS = 10;
//for(定義 i 小於畫面的高; i 大於 0; i 每次減去小方塊大小 再多5);
//會再多5 是為了方塊與方塊間的空細
for(int i = height; i > 0; i -= RS+5){
//for(定義 j 等於 0; j 小於 i ; j 每次加上小方塊大小 再多5);
for(int j = 0; j < i; j += RS+5){ //繪製小方塊 rect(i, j, RS, RS); } } }


將外部圖片讀取進processing
請參考PImage
外部讀取檔案prcessing會預設在相同資料夾內的Data
如下圖

這邊要注意的是當要將圖片設定為背景時
視窗大小必須與圖片大小一致

為何會使用這張圖咧....
沒辦法我愛阿~ 邵庭 >//////<
//class 4
//定義要弄一張圖名稱為bg
PImage bg;
//bg就是要讀取"nikki.png"這張圖
bg = loadImage("nikki.png");
//視窗大小設定為(需配合圖片大小)
size(372, 556);
//設定背景為 bg 這張圖
background(bg);



讓圖形在視窗中反彈亂跑
可參考Learn內的Bounce
或直接在processing內開啟 "open > Topics > Motion > Bounce"會有相同的結果
只是他在裡面是用圓形
在這更改為圖形
下面這部份就只註解有修改範例的部份 //class 5 float xpos, ypos; // Starting position of shape float xspeed = 2.8; // Speed of the shape float yspeed = 2.2; // Speed of the shape int xdirection = 1; // Left or Right int ydirection = 1; // Top to Bottom //設定圖形為" img " PImage img; void setup() { //設定視窗大小 size(640, 640); noStroke(); frameRate(30); smooth(); //img 為 "1.jpg"這張圖 img = loadImage("1.jpg"); // Set the starting position of the shape //因為圖片太大...原本的設定會太超過 xpos = width/9; ypos = height/3; } void draw() { background(255); xpos = xpos + ( xspeed * xdirection ); ypos = ypos + ( yspeed * ydirection ); //當( 座標x + 圖片的寬 > 視窗的寬 || 座標x < 0 ) if (xpos+480 > width || xpos < 0) { //改變方向 xdirection *= -1; } //當( 座標y + 圖片的高 > 視窗的高 || 座標y < 0 ) if (ypos+321 >= height || ypos < 0) { //改變方向 ydirection *= -1; } //繪製出圖片 image(img, xpos, ypos); } 拖曳圖形並使其產生殘影 其實原理就是利用processing內void draw(){ }會不斷的重新繪製內部的程式 所以在每次重新畫時多覆蓋一個與背景顏色相同並具透明度的矩形 這樣就會產生殘影效果 //class 6 //定義圖片為"img" PImage img; //定義 x、y 為滑鼠的座標 int x = mouseX; int y = mouseY; void setup(){ //定義視窗大小 size(600, 600); //img為 "1.jpg" img = loadImage("1.jpg"); //背景設定為白色 background(255); //不要有邊框產生 noStroke(); //圖片預設位置 image(img, x, y); } void draw(){ } void mouseDragged(){ //設定x、y位置為圖形的中央 x = mouseX-240; y = mouseY-160; //填入色彩為白色，透明度為40 fill(255, 40); //半透明方形大小為整個畫面 rect(0, 0, width, height); //畫出圖片 image(img, x, y); } //當滑鼠放開 void mouseReleased(){ //背景從新刷為白色 background(255); //因為圖片也被背景蓋過，所以再重繪圖形 image(img, x, y); } 若只是要使用殘影效果亦可考慮使用tint函數 本週不負責任教學到此結束 相關連結 Processing官方網站 Processing 基本繪圖 part2 by Isken Processing 基本繪圖 by Isken