Testing Processing.js code
size(300,300);
}
int r = 0; //ตัวแปร Global
void draw(){
background(5,255*cos(r),150+100*cos(r)); //สีจะวนไปมาระหว่างสีน้ำเงินกับสีฟ้าโดยใช้ค่า cos,sin
drawroad(150,180); //เรียกใช้ฟังก์ชัน drawroad
drawBridge(150,40,140,13,8,150); //เรียกใช้ฟังก์ชัน drawBridge
fill(5,255*cos(r),150+100*cos(r));
curve(300,900,20,280,280,280,0,900);
r = r+1/200; //กำหนดให้ค่า r เพิ่มขึ้นทีละ 1/200
}
void drawroad(int x, int y){ //เขียนฟังก์ชัน drawroad
strokeWeight(10);
line(x,40,x,y);
strokeWeight(1);
fill(11);
rect(0,y,x*2,100);
noStroke();
fill(4,132,198);
rect(0,280,300,20);
stroke(0);
}
void drawBridge(int x, int y, int l, int n, int a, int w){ //เขียนฟังก์ชัน drawBridge
int count = 0; //ประกาศและกำหนดค่า count = 0
while(count<n){ //คำสั่งวน loop โดยกำหนดให้ค่า count < n แล้ววาด ...
line(x,y+a,x-w,y+l);
line(x,y+a,x+w,y+l);
fill(222);
ellipse(x,y+a,5,5);
w = w-10; //เมื่อลำดับคำสั่งมาถึงตรงนี้ให้ลดค่า w = w-10
a = a+10; //ให้เพิ่มค่า a = a+10
count = count+1; //เพิ่มค่า count = count+1 แล้วกลับไปพิจารณาเงื่อนไขวน loop อีกครั้ง
/* เขียนเป็นลำดับคำสั่งได้เป็น
while(count < n) ---> ..คำสั่งที่กำหนด.. ---> ให้ลดค่า w = w-10 ---> ให้เพิ่มค่า a = a+10 ---> ให้ค่า count = count+1 แล้วจากนั้นก็วนไปพิจารณา while(count < n) อีกครั้งถ้าเป็นจริงตามเงื่อนไขก็ทำ loop ต่อ แต่ถ้าไม่ใช่ก็ออก loop ไปทำตามลำดับคำสั่งต่อไป.. */
}
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- line - คำสั่งวาดเส้น (x,y,x1,y1)
ค่า x,y คือ จุดเริ่มต้น
x1,y1 คือ จุดปลาย
- ellipse- คำสั่งวาดวงรี (x,y,r,p)
ค่า x,y คือ ค่ากำหนดจุดศูนย์
r คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน x
p คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน y
- rect - คำสั่งวาดสี่เหลี่ยมผืนผ้า (x,y,l,w)
ค่า x,y คือ ตำแหน่งจุดเริ่มวาดรูป จะเป็นมุมบนขวาของรูปสี่เลี่
l คือ ค่าความยาวของรูสี่เหลี่
w คือ ค่าความกว้างของรูปสี่เหลี่
- curve - คำสั่งวาดเส้นโค้ง (s1,s2,x,y,x1,y1,e1,e2);
ค่า x,y ตำแหน่งจุดเริ่มเส้นตามแนวแกน x และแกน y
x1,y1 ตำแหน่งจุดปลายเส้นมแนวแกน x และแกน y
เส้นนี้ได้แบ่งค่าการโค้งเส้
s1 โค้งปลายของจุดเริ่มโค้
s2 โค้งส่วนที่สองของจุดเริ่มโค้
e1 โค้งส่วนที่สามปลายเส้นโค้
e2 โค้งส่วนสุดท้ายอยู่ปลายเส้นโค้
- Global - เป็นตัวแปรที่กำหนดค่าอยู่นอกฟั
- Global - เป็นตัวแปรที่กำหนดค่าอยู่นอกฟั
ตัวอย่าง int x = 0; //Global variable
void setup(){
ellipse(x,100,50,50);
x = x+1; //กำหนดให้เมื่อวาดรูปแล้วค่า x = x+1 ไปเรื่อยๆ
}
- Local - ประกาศตัวแปรที่อยู่ในฟังก์ชัน
ตัวอย่าง void draw(){
int x = 100;
ellipse(x,100,50,50);
}
อาจเขียนเป็น
void drawCiecle(int x){
ellipse(x,100,50,50);
}แต่ต้องเขียนเรียกใช้ฟังก์ชัน
- void - คำสั่งสร้างฟังก์ชัน เช่น
void drawCircle(){
....
} ต้องเขียนเรียกใช้
- void setup(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้เองไม่ต้องเขียนเรี
- void draw(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้อัตโนมัติหลัง setup
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB
- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB
- noStroke() - คำสั่งไม่วาดเส้นขอบของรูป
- stroke(R,G,B) - วาดเส้นขอบโดยกำหนดสีเส้นตามค่
- strokeWeight(x)- วาดเส้นหนาโดยใส่ค่าลงไปแทนค่า x
ไม่มีความคิดเห็น:
แสดงความคิดเห็น