My Railway

Railway

นี่คือรูปที่สองที่ผมลองใช้ loop ในการทำ โดยเพิ่มฟังก์ชั่นที่ยังไม่เคยใช้เข้าไปด้วย ผมยังทำให้รางรถไฟสามารถยาวขึ้น หรือขยายขึ้นได้ตามค่าของตัวแปรที่ใช้แทนในเงื่อนไขซึ่งกำหนดในฟังก์ชั่น while()
อันดับแรก ผมกำหนดตัวแปรชนิด Global variable ร่วมกับฟังก์ชั่น int มา 6 ตัว ต่อจากนั้นจึงใช้ฟังก์ชั่น void setup() ในการกำหนดค่าต่างๆ ของฟังก์ชั่น เช่น size() เพื่อการกำหนดขนาดของกรอบ และ background เพื่อการกำหนดสีของพื้นหลัง ต่อมาผมสร้างฟังก์ชั่นที่ชื่อ void drawRailway() ซึ่งต้องเรียกใช้ด้วยฟังก์ชั่น void draw() ในภายหลัง ในฟังก์ชั่นชุดนี้ ผมใช้ฟังก์ชั่น while() เพื่อการกำหนดเงื่อนไขที่ต้องการให้วนซ้ำ เป็น loop เพื่อสร้างรางรถไฟได้ง่ายขึ้น ใน while() นี้กำหนดเงื่อนไขที่สร้างเองเป็นการวาดกล่องสี่เหลี่ยมที่ใช้เป็นแผ่นไม้รองรับรางรถไฟตามเงื่อนไขใน while() และเส้นที่ใช้เป็นรางรถไฟ พร้อมกับตัวแปรที่ต้องมีค่าเปลี่ยนไป ในฟังก์ชั่นนี้ ผมกำหนดสี และน้ำหนักของเส้นเพิ่มเติม แต่สำหรับแผ่นไม้ที่รองรับรางรถไฟนั้น ผมกำหนดให้ไม่มีขอบด้วยฟังก์ชั่น noStroke สุดท้าย ผมก็เรียกใช้ฟังก์ชั่นโดยใช้ void draw() เพื่อให้ผลลัพธ์แสดงออกมา นี่เป็นภาพนิ่ง ดังนั้งวิธีการทำจึงไม่ยากเท่าไร ขอเชิญทุกคนลองทำได้

Processing Code

int x = 50;  //กำหนดตำแหน่งตามแกน X
int y = 20;  //กำหนดตำแหน่งตามแกน Y
int width = 30;  //กำหนดความกว้าง
int height = 70;  //กำหนดความสูง
int n = 10;  //กำหนดจำนวนเส้น หรือแผ่นไม้
int i = 0;  //กำหนดเพื่อการนับ
//กำหนด ค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น 
void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(500, 100);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)   
  background(241, 242, 17);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีเหลือง
}

void drawRailway() {  //ฟังก์ชั่นที่สร้างเอง ชื่อว่า drawRailway
  while(i < n) {  //กำหนดเงื่อนไขที่ต้องการให้ทำซ้ำเป็น loop ในกรณีที่เป็นจริง จะทำต่อไปเรื่อยๆ จนกระทั่งเป็นเท็จ อันนี้ในกรณี i < n 
  noStroke();  //กำหนดว่า รูปทรงที่เราระบุนั้นไม่มีขอบ
  fill(144, 101, 6);  //คำสั่งที่ใช้เติมสีให้กับรูปทรงต่างๆ ที่เราวาด สีที่ใส่นี่คือสีน้ำตาล
  rect(x, y, width, height);  //ใช้ในการวาดรูปสี่เหลี่ยม
  strokeWeight(10);  //กำหนดความหน้าของเส้น โดยการใส่ค่าลงในวงเล็บ  
  stroke(10);  //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีดำ  
  line(x-15, y+10, x+45, y+10);  //ใช้ในการวาดเส้น
  line(x-15, y+58, x+45, y+58);
  x=x+40;  //ใช้ในการเพิ่มระยะห่างในแกน X
  i=i+1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า i จะไม่น้อยกว่า n
  }
}

void draw() {  //การ ใช้ฟังก์ชั่น void เป็นการใช้ฟังก์ชั่นแบบไม่มีการส่งค่ากลับ และเราใช้ void draw() เป็นการใช้ฟังก์ชั่นในการประกาศว่า เราต้องการจะวาดอะไรลงไป และเป็นฟังก์ชั่นหลักมีได้เพียง 1 ชุด     
  drawRailway();  //ตัวแปรที่เราต้องการเรียกใช้
}

อธิบายเพิ่มเติม

ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้
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. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
11. noStroke คือฟังก์ชั่นที่ใช้ในการระบุรูปทรงที่เราต้องการว่า ไม่มีขอบ
12. fill() ใช้ในการเติมสีให้กับสิ่งต่างๆ ที่ระบุไว้ด้านล่างของฟังก์ชั่นนี้ โดยใช้สีตามแม่สี หรือเครื่องหมาย #
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้

Canvas