Express Way
ภาพนี้เป็นรูปทางด่วนที่ผมออกแบบให้อยู่บนสะพาน ในการสร้างทางด่วนแบบนี้ สามารถเขียนได้หลายแบบ อาจจะเขียนโดยใช้
line อย่างเดียวก็ได้ แต่ต้องเขียน line ซ้ำกันหลายๆ ตัว นอกจากนี้ผมยังได้สร้างถนนที่เป็นสายยาวๆ บนเส้น line ทั้งหมดที่ใช้แทนเสา พร้อมทั้งตกแต่งโดยใช้ฟังก์ชั่น fill() ตามด้วยเครื่องหมาย # หรืออาจใช้ค่าของแม่สีแทนก็ได้ การนำฟังก์ชั่น
while เข้ามาช่วยในการเขียนโค้ดจะทำให้เขียนได้หลายๆ ตัวพร้อมกันโดยใช้ line
เพียงตัวเดียว จะทำงานโดยทำตามเงื่อนไขที่เราตั้งไว้ จาก code ใน while
จะตั้งไว้ว่า while(count < n)โดยที่ค่า n = 35 และ count = count + 1
ค่า count จะทำการ +1 ไปเรื่อยตลอดจนค่า count จะมีค่าไม่น้อยกว่า n
และในขณะเดียวกันระยะห่างของเส้นแต่ละเส้นต้องมีค่าเท่ากันคือ space = 53
กำหนดโดย x = x + space ดังโค้ด สำหรับรูปนี้ เพื่อให้ดูเหมือนจริงมากขึ้น ผมจึงได้สร้างฟังก์ชั่นที่ใช้สร้างรถยนต์ เพื่อสร้างรถยนต์ไว้สองคัน แต่ให้เป็นภาพนิ่ง หรือไม่ได้กำหนดเงื่อนไขอะไรไว้ แต่เดิมในการสร้างภาพนี้ ไม่ได้ยากเท่าไร หากรู้จักการใช้ฟังก์ชั่น while() เพื่อให้วาดได้เร็วขึ้น หรือใช้ฟังก์ชั่นอื่นหลายๆ ชุดมารวมกัน ขอเชิญทุกคนลองทำกันได้
Processing Code
void setup() { //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้นsize(500, 500); //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
background(99, 213, 252); //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีฟ้าอ่อน
}
int count = 0; //กำหนดตัวแปรนี้เพื่อใช้ในการนับ
int x = 10;
int space = 53; //ใช้เพื่อกำหนดระยะห่าง
int n = 35; //กำหนดค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น และเป็นพื้นฐาน animation
void draw() { //การใช้ฟังก์ชั่น void เป็นการใช้ฟังก์ชั่นแบบไม่มีการส่งค่ากลับ และเราใช้ void draw() เป็นการใช้ฟังก์ชั่นในการประกาศว่า เราต้องการจะวาดอะไรลงไป
while(count < n) { //กำหนดเงื่อนไขในวงเล็บ เมื่อเป็นจริงจะทำคำสั่งภายในซ้ำๆ จนกระทั่งเงื่อนไขเป็นเท็จ อันนี้ในกรณี count < n
strokeWeight(10); //กำหนดความหน้าของเส้น โดยการใส่ค่าลงในวงเล็บ
stroke(0); //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีดำ
line(0, 100, 200, 100); //ใช้ในการวาดเส้น
line(x, 200, x, 500);
count = count + 1; //ทำการบวก 1 ไปเรื่อยๆ จนกว่า count จะไม่น้อยกว่า n
x = x + space; //กำหนดระยะห่างของค่า x ตามค่าของ space
}
//draw the road
fill(#AEB4B7); //คำสั่งที่ใช้เติมสีให้กับรูปทรงต่างๆ ที่เราวาด สีที่ใส่นี่คือสีเทาอ่อน
rect(0, 200, 600, 20); //ใช้ในการวาดรูปสี่เหลี่ยม
fill(#7B8386); //สีเทาเข้ม
rect(0, 120, 600, 80);
fill(#AEB4B7); //สีเทาอ่อน
rect(0, 100, 600, 20);
line(0, 160, 100, 160);
line(130, 160, 230, 160);
line(260, 160, 360, 160);
line(390, 160, 490, 160);
//draw bushes
stroke(#089808); //สีเขียวอ่อน
fill(#108E10); //สีเขียว
ellipse(0, 480, 100, 80); //ใช้ในการวาดวงรี
ellipse(100, 480, 140, 100);
ellipse(160, 480, 100, 100);
ellipse(230, 480, 100, 80);
ellipse(320, 480, 150, 120);
ellipse(380, 480, 90, 100);
ellipse(460, 480, 140, 80);
//draw cars
stroke(0); //สีดำ
fill(#E01919); //สีแดง
rect(50, 80, 120, 80);
fill(#FFCA08); //สีเหลือง
rect(280, 80, 120, 80);
fill(#0A0A09); //สีดำ
ellipse(80, 160, 40, 40);
ellipse(140, 160, 40, 40);
ellipse(310, 160, 40, 40);
ellipse(370, 160, 40, 40);
}
อธิบายเพิ่มเติม
ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้1. void setup() ใช้เพื่อประกาศค่าตัวแปรต่างๆ และ กำหนดค่าของตัวแปรต่างๆ โดยจะไม่มีการทำซ้ำ
2. void draw() ใช้เพื่อประกาศต่าตัวแปรต่างๆ และกำหนดค่าของตัวแปรต่างๆ โดยเป็นการทำซ้ำ (loop)
3. size() กำหนดขนาดของกรอบ หรือพื้นหลังที่ใช้สร้าง code ดูได้จาก size(width, height)
4. stroke() กำหนดค่าสีของเส้นโดยการใช้แม่สี หรือเครื่องหมาย #
5. background() กำหนดสีของพื้นหลังโดยการใช้แม่สี
6. strokeWeight() กำหนดขนาดของเส้นโดยการใส่ตัวเลข หรือค่าที่ต้องการลงในวงเล็บ
7. while() ใช้ในการวน loop โดยกำหนดเงื่อนไขที่ต้องการ เพื่อให้มีการทำซ้ำ
8. line() ใช้ในการวาดเส้นตรง โดยดูได้จาก line(x1, y1, x2, y2) กำหนดค่าตามพิกัดแต่ละจุด
9. rect ใช้ในการวาดรูปสี่เหลี่ยม โดยดูได้จาก rect(x, y, width, height)
10. ellipse ใช้ในการวาดรูปวงรี โดยดูได้จาก ellipse(x, y, width, height)
11. fill() ใช้ในการเติมสีให้กับสิ่งต่างๆ ที่ระบุไว้ด้านล่างของฟังก์ชั่นนี้ โดยใช้สีตามแม่สี หรือเครื่องหมาย #
12. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
13. // คือฟังก์ชั่นที่มักตามด้วยหน้าฟังก์ชั่นใดๆ แล้วทำให้ฟังก์ชั่นนั้นไม่ทำงาน หรือยกเลิกการทำงานของฟังก์ชั่นหนึ่งได้
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น