Thai Cultural Heritage

Songkran Day

นี่เป็นงานประเพณีไทยวันสงกรานต์ และยังเป็นงานอนิเมชั่นชิ้นแรกของผม โดยการนำเงื่อนไข และการแทนค่าตัวแปร นอกจากนี้ยังมีการนำคำสั่งต่างๆ ที่เคยใช้ไปในชิ้นงานก่อนหน้านี้มาตกแต่ง และเพิ่มสีสันให้มากขึ้น ผมได้ทำการแยกไว้แล้วว่า ชุดไหนในแต่ละคำสั่งวาดอะไร เพื่อให้เข้าใจง่ายขึ้น อันดับแรกผมใช้ฟังก์ชั่นหลัก void setup() ในการกำหนดขนาด และพื้นหลังให้เป็นไปตามที่ต้องการ ต่อมาผมกำหนดตัวแปรชนิด Global variables เพื่อให้แทนค่าตัวเลขได้ในทุกฟังก์ชั่น ก่อนหน้าที่ผมจะเรียกใช้งานฟังก์ชั่น ผมสร้างฟังก์ชั่นที่ใช้ในการวาดรูปแต่ละรูปขึ้นมาก่อน รูปที่ผมวาดนั้นใช้เพียงฟังก์ชั่นวงรี และเส้น มีเพียงแค่รูปสุดท้ายที่วาดเท่านั้นที่มีฟังกชั่นชนิด Vocal variables ซึ่งใช้ได้เพียงในฟังก์ชั่นนั้น และเป็น function with parameter ส่วนการตกแต่งนั้น ผมใช้ฟังก์ชั่น fill() ตามด้วยเครื่องหมาย # ในการทำให้น้ำที่เป็นรูปวงรีเคลื่อนไหว เหมือนกำลังสาดน้ำอยู่นั้น ผมใช้ฟังก์ชั่น if() ในการกำหนดเงื่อนไขสร้างขึ้นมา ในตอนที่เรียกใช้ฟังก์ชั่นที่สร้างขึ้น สำหรับภาพนี้ ผมก็อธิบายได้เพียงเท่านี้ เชิญทุกคนทำกันดูนะครับ

Processing Code

void setup() {  //ฟังก์ชั่นหลักที่ใช้ในการกำหนด มีได้เพียงหนึ่งชุดเท่านั้น
   size (300, 300); //ใช้คำสั่งนี้ในการกำหนดพื้นที่ หรือขนาดของภาพ หรือ size(width, height)
   background (255, 243, 8); //ใช้คำสั่งนี้ในการกำหนดพื้นหลังให้เป็นสีต่างๆ ได้ ตามค่าของแม่สี
}

int count = 20; //ตัวแปรชนิด Global variables และเป็นจำนวนเต็มแทนค่าได้ในทุกฟังก์ชั่น
void draw() {  //ฟังก์ชั่นหลักที่ใช้ในการวาด มีได้เพียงหนึ่งชุดเท่านั้น
   background (255, 243, 8); //ฟังก์ชั่นที่ใช้ในการกำหนดพื้นหลัง โดยกำหนดค่าตามแม่สี
   drawHuman();
   drawWater(count);
   count = count-1;
   if(count<0){
      count = 50; //กำหนดเงื่อนไขตัวแปรให้มีทิศทางที่ต้องการ และยังเป็นการนับฟังก์ชั่นที่ใช้ตัวแปรด้วย
   }
} //เป็นการเรียกใช้โปรแกรมที่สร้างขึ้นซึ่งอยู่ด้านล่างนี้ โดยการใช้ฟังก์ชั่นหลัก void draw() หากไม่มีฟังก์ชั่นนี้ ไม่สามารถใช้งานฟังก์ชั่นที่สร้างขึ้นได้

void drawHuman() {  //ฟังก์ชั่นที่สร้างขึ้น ชื่อว่า drawHuman
   //Human 1
   line(60, 40, 60, 170);
   fill(#F7C239); //ฟังก์ชั่นที่ใช้ในการเติมสีตามค่าของแม่สี หรือเครื่องหมาย # 
   ellipse(60, 70, 60, 60); //ฟังก์ชั่นที่ใช้ในการวาดวงรี หรือ ellipse(x, y, width, height)
   fill(#050400);
   ellipse(60, 50, 53, 35);
   fill(#FFFFFF);
   ellipse(48, 75, 20, 10);
   fill(#050202);
   ellipse(50, 76, 7, 7);
   fill(#FFFFFF);
   ellipse(74, 75, 20, 10);
   fill(#050202);
   ellipse(73, 76, 7, 7);
   line(50, 90, 70, 90);
   line(60, 120, 90, 120);
   line(60, 120, 90, 150);
   line(60, 170, 90, 190);
   line(60, 170, 35, 200); //ฟังก์ชั่นที่ใช้ในการวาดเส้น หรือ line(x1, y1, x2, y2) กำหนดตามพิกัดต่างๆ บนรูปที่เราจะวาด

   //Human 2
   fill(#FFC558);
   ellipse(240, 150, 60, 60);
   fill(#FF0F0F);
   ellipse(240, 130, 53, 35);
   fill(#FFFFFF);
   ellipse(228, 155, 20, 8);
   ellipse(253, 155, 20, 8);
   fill(#050202);
   ellipse(252, 156, 5, 5);
   ellipse(230, 156, 5, 5);
   line(250, 170, 230, 170);
   line(240, 180, 240, 250);
   line(240, 250, 280, 290);
   line(240, 250, 220, 290);
   line(200, 200, 240, 200);
   line(200, 200, 280, 200);

   //Water
   fill(#13EA11);
   ellipse(100, 135, 40, 40);
   ellipse(100, 135, 25, 25);
}

void drawWater(int z){  //ฟังก์ชั่นที่สร้างขึ้น ชื่อว่า drawWater และเป็น function with parameter
   int x = 138;
   int y = 150; //ตัวแปรสองตัวนี้เป็น Vocal variables แทนค่าได้แค่ในฟังก์ชั่นชุดนี้
   fill (37, 206, 185);
   ellipse(140, y, x, z);
}
หมายเหตุ สังเกตได้ว่า เครื่องหมาย // เป็นการบอกว่า ฟังก์ชั่นชุดนี้ไม่่ใช้งาน

Canvas