Car Racing (Sport)

//Gobal variable //เป็นการประกาศตัวแปรที่อยู่นอกฟังก์ชั่น เพื่อให้ครอบคลุมทุกฟังก์ชัน เป็นส่วนหนึ่งที่ทำให้ภาพเกิดการเคลื่อนไหว โดยประกาศ และกำหนดตัวแปรอยู่นอกฟังก์ชัน แล้วไปเรียกใช้ในฟังก์ชันแทน
int count = 500; //เป็นบรรทัดที่ประกาศ และกำหนดตัวแปร โดย int คือค่าของตัวแปรที่เป็นจำนวนเต็ม หลักการคือนำค่าทางด้านขวาของเครื่องหมาย = ไปใส่ให้ทางด้านซ้ายเรียกว่า Assingment Operator ในที่นี้หมายถึง นำ 500 ซึ่งเป็นจำนวนเต็ม ทางด้านขวาของเครื่องหมาย = ไปใส่ค่าให้กับตัวแปรทางด้านซ้าย คือตัวแปร count นั่นเอง
int counts = 550;
void setup () { //เป็นการประกาศฟังก์ชั่น setup ซึ่ง void ที่อยู่ข้างหน้าคือ การกำหนดว่าจะไม่มีการเรียกค่าเดิมมาใช้อีก
  size (500, 500); //เป็นการกำหนดขนาดของcanvas โดย size (ขนาดของแกนx, ขนาดของแกนy);
}
 void draw () { //เป็นการประกาศฟังก์ชั่น draw ซึ่ง void ที่อยู่ข้างหน้าคือ การกำหนดว่าจะไม่มีการเรียกค่าเดิมมาใช้อีก
   background (153, 255, 000); //เป็นการเพิ่มสีให้กับพื้นหลัง โดย background(สีแดง, สีเขียว, สีน้ำเงิน); ค่าของสีแต่ละตัวมีได้สูงสุดไม่เกิน 255 และต่ำสุดที่ 000
 
    //Local variable  //เป็นการประกาศตัวแปรที่อยู่ในฟังก์ชั่น เพื่อให้ใช้เฉพาะในฟังก์ชัน เป็นส่วนหนึ่งที่ทำให้ภาพเกิดการเคลื่อนไหว โดยประกาศ และกำหนดตัวแปรอยู่นอกฟังก์ชันไว้ แล้วมาเรียกใช้ในฟังก์ชันนี้
   int y = 100; //ความหมายคือ นำ 100 ซึ่งเป็นจำนวนเต็ม ทางด้านขวาของเครื่องหมาย = ไปใส่ค่าให้กับตัวแปรทางด้านซ้าย คือตัวแปร y นั่นเอง
   int a = 250;
   int b = 270;
  
   //Border road วาดเส้นเกาะข้างถนน
   stroke (204, 204, 204); //คือคำสั่งเกี่ยวกับการเติมสีเส้น โดย stroke (ค่าของสีแดง, ค่าของสีเขียว, ค่าของสีน้ำเงิน);
   strokeWeight (3); //เป็นการกำหนดความหนาของเส้น โดยstrokeWeight(ค่าความหนาของเส้น);
   fill (255, 255, 255);  //เป็นการเติมสีให้กับรูปร่างที่เราสร้าง โดยfill(ค่าของสีแดง, ค่าของสีเขียว, ค่าของสีน้ำเงิน);
   quad (50, 0, 0, 450, 20, 1000, 80, 0); //เป็นการสร้างรูปสี่เหลี่ยมใดๆ โดย quad (ค่าxที่เป็นจุดแรกของสี่เหลี่ยม, ค่าyที่เป็นจุดแรกของสี่เหลี่ยม, ค่าxที่เป็นจุดที่สองของสี่เหลี่ยม, ค่าyที่เป็นจุดที่สองของสี่เหลี่ยม, ค่าxที่เป็นจุดที่สามของสี่เหลี่ยม, ค่าyที่เป็นจุดที่สามของสี่เหลี่ยม, ค่าxที่เป็นจุดสุดท้ายของสี่เหลี่ยม, ค่าyที่เป็นจุดสุดท้ายของสี่เหลี่ยม);
   quad (450, 0, 500, 450, 480, 1000, 420, 0);
  
   fill (255, 000, 000);
   quad (50, 0, 80, 0, 75, y, 40, y);
   quad (450, 0, 420, 0, 425, y, 460, y);
   quad (25, y+100, 70, y+100, 60, y+200, 15, y+200);
   quad (475, y+100, 430, y+100, 440, y+200, 485, y+200);
   quad (5, y+300, 55, y+300, 50, y+400, -5, y+400);
   quad (495, y+300, 445, y+300, 450, y+400, 510, y+400);
  
   //draw Road วาดถนน
   fill (102, 102, 102);
   quad (20, 1000, 80, -5, 420, -5, 480, 1000);

  //draw Line on road  วาดเส้นประ บนถนน
   fill (255, 255, 000);
   quad (a, y-125, a, y-75, b, y-75, b, y-125);
   quad (a, y-40, a, y+10, b, y+10, b, y-40);
   quad (a, y+45, a, y+95, b, y+95, b, y+45);
   quad (a, y+135, a, y+185, b, y+185, b, y+135);
   quad (a, y+225, a, y+295, b, y+295, b, y+225);
   quad (a, y+335, a, y+405, b, y+405, b, y+335);
 
//draw a car1  วาดรถคันที่1 สีชมพู
  stroke (000, 000, 000);
  strokeWeight (5);
  fill (255, 000, 120);
  rect (125, count, 80, 130, 50, 50, 10, 10); //เป็นการสร้างรูปสีเหลี่ยม โดย rect (จุดเริ่มต้นของการวาดสี่เหลี่ยมตามแกนx, จุดเริ่มต้นของการวาดสี่เหลี่ยมตามแกนy, ค่าขนาดความกว้างตามแกนx, ค่าขนาดความกว้างตามแกนy, ค่าความโค้งมนของมุมสี่เหลี่ยมด้านบนซ้าย, ค่าความโค้งมนของมุมสี่เหลี่ยมด้านบนขวา, ค่าความโค้งมนของมุมสี่เหลี่ยมด้านล่างซ้าย, ค่าความโค้งมนของมุมสี่เหลี่ยมด้านล่างขวา);
  fill (255, 102, 153);
  rect (140, count+30, 50, 90, 50, 50, 10, 10);
 
  fill (000, 000, 000);
  rect (110, count+30, 20, 30, 50, 50, 50, 50);
  rect (110, count+80, 20, 30, 50, 50, 50, 50);
  rect (200, count+30, 20, 30, 50, 50, 50, 50);
  rect (200, count+80, 20, 30, 50, 50, 50, 50);
 
  count = count-5; //เป็นการกำหนดค่า ให้ตัวแปรที่เป็นGobal เปลี่ยน เพื่อให้เกิดการเคลื่นไหว
  if (count <0) {
  count = 500;
  } //เป็นการสร้างเงื่อนไข ให้กับการเคลื่อนที่ โดยที่ if (กำหนดค่าที่เปลี่ยนแปลงไปภายใต้เงื่อนไข) { กำหนดค่าที่ต้องการให้เปลี่ยนเมื่อเงื่อนไขสมบรูณ์; }โดยในที่นี้หมายถึง ถ้า ค่าในตัวแปร count น้อยกว่า 0 ให้ count มีค่าเท่ากับ 500

  //draw a car2 วาดรถคันที่สอง สีน้ำเงิน
  stroke (000, 000, 000);
  strokeWeight (5);
  fill (000, 000, 255);
  rect (310, counts, 80, 130, 50, 50, 10, 10);
  fill (051, 153, 255);
  rect (325, counts+30, 50, 90, 50, 50, 10, 10);
 
  fill (000, 000, 000);
  rect (295, counts+30, 20, 30, 50, 50, 50, 50);
  rect (295, counts+80, 20, 30, 50, 50, 50, 50);
  rect (385, counts+30, 20, 30, 50, 50, 50, 50);
  rect (385, counts+80, 20, 30, 50, 50, 50, 50);

  counts = counts-10; //เป็นการกำหนดค่า ให้ตัวแปรที่เป็นGobal เปลี่ยน เพื่อให้เกิดการเคลื่นไหว
  if (counts <0) {
  counts = 550;
  }  //เป็นการสร้างเงื่อนไข ให้กับการเคลื่อนที่ โดยที่ if (กำหนดค่าที่เปลี่ยนแปลงไปภายใต้เงื่อนไข) { กำหนดค่าที่ต้องการให้เปลี่ยนเมื่อเงื่อนไขสมบรูณ์; }โดยในที่นี้หมายถึง ถ้า ค่าในตัวแปร count น้อยกว่า 0 ให้ count มีค่าเท่ากับ 550

 }