Processing 基本繪圖

之前本來想過要寫關於processing的教學
一方面懶...另一方面也想不到該怎樣寫
就這樣...時間過去了

這學期修了一堂王照明老師開的課 - 網路程式設計
其內容就是教processing
想利用這課程規劃+作業順便來這邊紀錄一下(擺明自己懶得想課程...)

廢話完開始正題
第一堂課內容究竟是教些啥呢？
很簡單...教你畫圓、填色、圓跟著滑鼠移動


//class 1
int ballSize = 10;

void setup(){
//設定顯示出來視窗大小
size(600, 400);
//不要有外框線
noStroke();
//使鋸齒狀減少(如同向量檔一般)
smooth();
}

void draw(){
//背景顏色定義，此處設定為白色
background(255);

//填入顏色 三個數字分別為(R, G, B)
fill(255, 255, mouseX/2);
//processing內建畫圓的函數
//使用方式為 ellipse( 座標x, 座標y, 圓的寬, 圓的高);
ellipse(mouseX + ballSize*2, mouseY + ballSize*2, ballSize, ballSize);

fill(255, mouseY/2, 255);
ellipse(mouseX - ballSize*2, mouseY - ballSize*2, ballSize, ballSize);

fill(mouseX/2, 255, 255);
ellipse(mouseX, mouseY, ballSize, ballSize);

}


如果還想要知道更詳細的函數如何使用還是請去Processing官方Reference

接下來的範例主要是介紹Processing內常用的變數類型


//class 2
void setup(){
// int 只會有整數
int testInt = 123456789;
// float 允許有小數點
float testFloat = 123.456789;
// boolean 布林運算 只會有真(true)/假(false)
boolean testBoolean = true;
println(testInt+" "+testFloat+" "+testBoolean);
}


這次上課最後一個範例為畫線
也就是使用line函數
line函數使用方式也是相當簡單
line( x1, y1, x2, y2);
翻譯口語化一點 line( 第一點座標X, 第一點座標Y, 第二點座標X, 第二點座標Y);


//class 3
void setup(){
//設定視窗大小
size(300, 600);
//背景設定為白色
background(255);
//定義線的數量
int lineQuantity = 25;
//for loop
for(int i = 0; i < lineQuantity; i++){ //外框線的顏色(線段顏色) stroke(255 - i*10, i * 10, 255 - i*20); //外框線粗細(線段粗細) strokeWeight(i); //劃線 line(10, 10+i*lineQuantity, width-10, 10+i*lineQuantity); } }

課堂到這...也下課了
不過老師有出回家作業
利用基本圖形隨變化一張圖
想來想去還是畫南方公園的kenny啦


//定義背景星星數量
int starQuantity = 500;
float starX, starY, starSize;
int floorColor = 255;

//定義kenny位置X
int kennyX = 150;
//定義kenny位置Y
int kennyY = 180;
定義kenny大小
int kennySize = 100;
int kennyBodyX = kennyX;
int kennyBodyY = kennyY+kennySize/2;


void setup(){
size(400, 300);

}

void draw(){
background(0);
for(int i = 0; i < starQuantity; i++){ starX = random(width); starY = random(height); stroke(255); starSize = random(2); strokeWeight(starSize); point(starX, starY); //println(starX+" "+starY); } for(int i = height*3/4; i <= height; i++){ stroke(floorColor,floorColor,floorColor); line(0, i, width, i); floorColor--; if(floorColor < 200){ floorColor = 250; } } //kenny //ellipse(x, y, width, height); //arc(x, y, width, height, start, stop); //quad(x1, y1, x2, y2, x3, y3, x4, y4); //body fill(242, 98, 1); stroke(242, 98, 1); strokeWeight(1); strokeJoin(ROUND); arc( kennyBodyX+kennySize/2, kennyBodyY, kennySize, kennySize*0.8, PI, TWO_PI); quad(kennyBodyX+kennySize*0.15, kennyBodyY-kennySize*0.2, kennyBodyX+kennySize*0.85, kennyBodyY-kennySize*0.2, kennyBodyX+kennySize*0.95, kennyBodyY+kennySize*0.15, kennyBodyX+kennySize*0.05, kennyBodyY+kennySize*0.15); rect(kennyBodyX+kennySize*0.1, kennyBodyY, kennySize*0.8, kennySize*0.3); //Body line stroke(50); strokeWeight(1.5); line(kennyBodyX+kennySize*0.05, kennyBodyY+kennySize*0.1, kennyBodyX+kennySize*0.1, kennyBodyY-kennySize*0.1); line(kennyBodyX+kennySize*0.95, kennyBodyY+kennySize*0.1, kennyBodyX+kennySize*0.9, kennyBodyY-kennySize*0.1); line(kennyBodyX+kennySize*0.5, kennyBodyY-kennySize*0.35, kennyBodyX+kennySize*0.5, kennyBodyY+kennySize*0.2); //foot fill(90); stroke(90); strokeWeight(1); rect(kennyBodyX+kennySize*0.06, kennyBodyY+kennySize*0.3, kennySize*0.88, kennySize*0.04); //Hand fill(132, 83, 50); stroke(50); //strokeWeight(1); ellipse( kennyBodyX, kennyBodyY+kennySize*0.05, kennySize*0.15, kennySize*0.15); ellipse( kennyBodyX+kennySize, kennyBodyY+kennySize*0.05, kennySize*0.15, kennySize*0.15); //Head fill(242, 98, 1); stroke(90); strokeWeight(0.5); ellipse( kennyX+kennySize*0.5, kennyY-kennySize*0.1, kennySize, kennySize); //fill(242, 98, 1); //stroke(50); strokeWeight(2); ellipse( kennyX+kennySize*0.5, kennyY-kennySize*0.05, kennySize*0.8, kennySize*0.7); fill(253, 225, 178); stroke(253, 225, 178); strokeWeight(1); ellipse( kennyX+kennySize*0.5, kennyY-kennySize*0.1, kennySize*0.6, kennySize*0.6); fill(250); stroke(0); strokeWeight(1); ellipse( kennyX+kennySize*0.63, kennyY-kennySize*0.1, kennySize*0.25, kennySize*0.3); ellipse( kennyX+kennySize*0.38, kennyY-kennySize*0.1, kennySize*0.25, kennySize*0.3); fill(0); stroke(0); strokeWeight(1); ellipse( kennyX+kennySize*0.42, kennyY-kennySize*0.1, kennySize*0.05, kennySize*0.05); ellipse( kennyX+kennySize*0.58, kennyY-kennySize*0.1, kennySize*0.05, kennySize*0.05); fill(111, 62, 30); stroke(132, 83, 50); strokeWeight(1); beginShape(); vertex(kennyX+kennySize*0.5, kennyY-kennySize*0.4); bezierVertex(kennyX+kennySize*0.9, kennyY-kennySize*0.45, kennyX+kennySize*1, kennyY+kennySize*0.2, kennyX+kennySize*0.5, kennyY+kennySize*0.2); bezierVertex(kennyX+kennySize*0.8, kennyY-kennySize*0.0, kennyX+kennySize*0.8, kennyY-kennySize*0.2, kennyX+kennySize*0.5, kennyY-kennySize*0.4); endShape(); beginShape(); vertex(kennyX+kennySize*0.5, kennyY-kennySize*0.4); bezierVertex(kennyX+kennySize*0.1, kennyY-kennySize*0.45, kennyX+kennySize*0.0, kennyY+kennySize*0.2, kennyX+kennySize*0.5, kennyY+kennySize*0.2); bezierVertex(kennyX+kennySize*0.2, kennyY-kennySize*0.0, kennyX+kennySize*0.2, kennyY-kennySize*0.2, kennyX+kennySize*0.5, kennyY-kennySize*0.4); endShape(); }

雖然說沒畫的很細
不過至少還看的出來啦...|||
不會說看到指著說是stan