Processing 基本繪圖 part2

前面的廢話部份就省略

數學計算函式
來源http://processing.org/reference/index_ext.html
搜尋"Calculation"


//class 1
//先隨便定義兩個數
float x = 12.3;
float y = 30.72;

//ceil 無條件進位
println("ceil(x) = " + ceil(x));
//random(最小值, 最大值) 隨機亂數
println("random(x) = " + random(x, y));
//round 四捨五入
println("round(x) = " + round(x));
//floor 無條件捨去
println("floor(x) = " + floor(x));
//max 找出其中最大值 不限定兩個數，亦可輸入一個數列
println("max(x) = " + max(x, y));
//min 找出其最小值 其內容與max相同
println("min(x) = " + min(x, y));



if 判斷式



//class 2
//隨機一個數
int isken = round(random(0, 100));
//印出"isken"大小
println(isken);

//if(判斷條件) { 如果成立後作哪些事}
if(isken >= 60){
//畫方型
rect(width*0.1, height*0.4, isken, isken);
}

if(isken < 60){ //畫方形 rect(width*0.5, height*0.7, isken, isken); } if(isken >= 70){
//畫圓形
ellipse(width*0.2, height*0.4, isken, isken);
}else{
//畫圓形
ellipse(width*0.4, height*0.8, isken, isken);
}


if判斷式練習
弄一顆球在畫面上左右彈，並且顏色變換


//class 3
int iskenMove = 0;
int iskenY = 0;
int iskenBall = 100;
boolean iskenDis = true;

void setup(){
//設定畫面大小
size(600, 400);
}

void draw(){
//背景顏色設定為白色
background(255);
//取消球外框
noStroke();
//使曲線平滑
smooth();
//填入求的顏色 fill(R, G, B);
fill(iskenMove, iskenY/3, iskenMove/2);
//畫出球來 ellipse(X, Y, 球寬, 球高);
ellipse(iskenMove, iskenY+iskenBall/2, iskenBall, iskenBall);

//如果球超過畫面高度時回到畫面最上端
if(iskenY > height - iskenBall){
iskenY = 0;
}

//如果球超過畫面寬時改變方向
if(iskenMove > width){
iskenDis = false;
iskenY += iskenBall;
}
if(iskenMove < 0){ iskenDis = true; iskenY += iskenBall; } //設定球跑的方向，數字越大跑越快，加號往右，減號往左 if(iskenDis == true){ iskenMove += 5; } if(iskenDis == false){ iskenMove -= 5; } }

for loop練習
使用方式請參閱官方說明
再畫面中畫出三個圈


//class 4
void setup(){
//設定畫面大小
size(400, 300);
//圓內部不填滿顏色
noFill();
}

void draw(){
//設定背景為白色
background(255);
//定義圈的大小
int iskenBall = 100;
//畫出三個圈
for(int i = 0; i < 3; i++){ ellipse( 100 + i * iskenBall, 100, iskenBall, iskenBall); } }

試著使用for loop畫出同心圓


//class 5
void setup(){
//設定畫面大小
size(400, 400);
}

void draw(){
//設定背景為白色
background(255);
//畫出同心圓
for(int i = 10; i < width/2; i += 10){ //圓內部不填顏色 noFill(); //外框線顏色設定 stroke(R, G, B); stroke(i*1.5, i*2, i*1.2); //外框線寬設定 strokeWeight(1.2); //畫圓 ellipse( width*3/4, height/2, i, i); } //以下為再畫一個 for(int i = 10; i < width/2; i += 10){ noFill(); stroke(i*2, i*3, i); strokeWeight(2); ellipse( width/4, height/2, i, i); } }

雙層for迴圈


//class 6
void setup(){
//設定畫面大小
size(600, 400);
//設定背景為白色
background(255);
//外框線設定為黑色
stroke(0);
}

void draw(){
//定義圓大小
int isken = 100;
//第一層迴圈 畫直的
for(int i = 0; i < 3; i++){ //第二層迴圈 畫橫的 for(int j = 0; j < 2; j++){ ellipse(100 + j*isken, 100+ i*isken, isken, isken); } } }

前面畫圓、畫方也畫夠多了
現在來畫一下三角形
函式使用方式
beginShape();
vertex();
endShape();


//class 7
void setup(){
//開始繪製圖形
beginShape();
//定義座標 vertex(X, Y);
vertex(width/2, height/6);
vertex(width*0.9, height/4);
vertex(width/5, height*0.9);
//結束繪製圖形
endShape(CLOSE);
}



相關連結
Processing 官方網站
Processing 函式查詢頁面