Rainbow Bridges
นี่เป็นสะพานแขวนรูปแรกที่ผมทำขึ้น โดยการนำภาพที่ทำไว้ก่อนหน้านี้มาดัดแปลง ในครั้งนี้ ผมได้เพิ่มสะพานแขวนเป็นสองรูปในหนึ่งภาพ อันดับแรกผมกำหนดตัวแปรชนิด Global variable มา 2 ตัว แล้วกำหนดขนาดของพื้นที่ด้วย size() และสีของพื้นหลังด้วย background ต่อมาผมจึงใช้ฟังก์ชั่น while() ในการกำหนดเงื่อนไขที่ต้องการให้ทำซ้ำ ในฟังก์ชั่นนี้ ผมใช้ฟังก์ชั่นในการเขียนเส้น ตกแต่งเส้น และกำหนดความหนา รวมทั้งฟังก์ชั่นกำหนดเงื่อนไข if() และ else สำหรับเงื่อนไขที่มากกว่าหนึ่ง ในการสร้างสายของสะพานทั้งสอง หลังจากฟังก์ชั่น while() แล้ว ผมก็กำหนดระยะห่างระหว่างเส้นที่ใช้เป็นสายสะพานด้วย x = x+10 ถ้าเปลี่ยนตัวเลขตรงนี้ให้เพิ่มขึ้น จะยิ่งมีความห่างของเส้นมากขึ้น สุดท้าย ผมก็ออกแบบเสา 2 ต้น และถนนที่เป็นสะพานด้วยฟังก์ชั่นในการเขียนเส้น หรือ line และตกแต่งสีด้วย stroke รวมทั้งเพิ่มความหนาด้วย strokeWeight ในชุดนี้ ไม่มีการใช้ฟังก์ชั่น void ให้ยุ่งยาก ถึงแม้ว่า เราจะไม่ใช้ฟังก์ชั่นนี้ ก็ยังสามารถทำให้เงื่อนไขเหล่านี้ทำงานได้ สำหรับภาพนี้อาจจะยุ่งยากเล็กน้อย แต่ถ้าเข้าใจการใช้เงื่อนไข หรือฟังก์ชั่น if() และ while() ซึ่งจำเป็นสำหรับการทำ loop แล้ว จะไม่ยากเลย ใครๆ อาจต้องการออกแบบสะพานแบบนี้ให้มีรูปร่างต่างออกไปก็ได้
Processing Code
int x = 0; //กำหนดค่าตัวแปรที่ใช้แทนตัวเลขบางตัว และเพื่อให้ใช้ในเงื่อนไขได้int y = 50; //กำหนด ค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น
size(500, 250); //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
background(142, 210, 255); //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีฟ้าคราม
while(x <= 500) { //กำหนดเงื่อนไขที่ต้องการให้ทำซ้ำเป็น loop ในกรณีที่เป็นจริง จะทำต่อไปเรื่อยๆ จนกระทั่งเป็นเท็จ อันนี้ในกรณี x <= 500
strokeWeight(2); //กำหนดความหน้าของเส้น โดยการใส่ค่าลงในวงเล็บ
stroke(65, 196, 10); //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีเขียวอ่อน
if(x > 250) { //กำหนดเงื่อนไข ถ้า x > 250 จึงจะเข้าเงื่อนไขได้
line(375, y, x, 200); //ใช้ในการวาดเส้น
}else if(x >= 0 && x <= 500) { //อีกเงื่อนไขหนึ่ง ในกรณี x >= 0 และ x <= 500
line(125, y, x, 200);
}
x = x+10; //กำหนดระยะห่างในแนวแกน X
}
strokeWeight(10);
stroke(240, 165, 2); //สีเหลือง
line(125, y, 125, 300);
line(375, y, 375, 300);
stroke(155); //สีเทาอ่อน
line(0, 200, 500, 200);
อธิบายเพิ่มเติม
ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้1. size() กำหนดขนาดของกรอบ หรือพื้นหลังที่ใช้สร้าง code ดูได้จาก size(width, height)
2. stroke() กำหนดค่าสีของเส้นโดยการใช้แม่สี หรือเครื่องหมาย #
3. background() กำหนดสีของพื้นหลังโดยการใช้แม่สี
4. strokeWeight() กำหนดขนาดของเส้นโดยการใส่ตัวเลข หรือค่าที่ต้องการลงในวงเล็บ
5. while() ใช้ในการวน loop โดยกำหนดเงื่อนไขที่ต้องการ เพื่อให้มีการทำซ้ำ
6. line() ใช้ในการวาดเส้นตรง โดยดูได้จาก line(x1, y1, x2, y2) กำหนดค่าตามพิกัดแต่ละจุด
7. if() คือฟังก์ชั่นที่ใช้ในการกำหนดเงื่อนไข
8. else ใช้ในการกำหนดเงื่อนไขที่มีมากกว่าหนึ่ง และแยกว่าเงื่อนไขในเป็นจริง หรือเท็จ
9. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น