My Mobile

Flowing Mobile

นี่คือภาพ Mobile ภาพแรกที่ผมทำขึ้นไว้ก่อนหน้านี้ มาดัดแปลงให้มีลักษณะเหมือนกับปลิวตามลม ในภาพนี้มีการใช้ฟังก์ชั่นใหม่ และฟังก์ชั่นที่เคยใช้มารวมกัน อันดับแรก ผมกำหนดตัวแปรชนิด Global variable ร่วมกับฟังก์ชั่น int มา 6 ตัว ต่อจากนั้นจึงใช้ฟังก์ชั่น void setup() ในการกำหนดค่าต่างๆ ของฟังก์ชั่น เช่น size() เพื่อการกำหนดขนาดของกรอบ, background เพื่อการกำหนดสีของพื้นหลัง และ while() เพื่อการกำหนดเงื่อนไขที่ต้องการให้วนซ้ำ เป็น loop ใน while() นี้กำหนดเงื่อนไขที่สร้างเองเป็น function with parameter และเงื่อนไข if() หลังฟังก์ชั่นนี้แล้ว ผมก็สร้างเส้น พร้อมกำหนดสี และน้ำหนักของเส้นเพิ่มเติม สุดท้าย ผมก็สร้างฟังก์ชั่นที่มีชื่อว่า DrawWind เพื่อให้ฟังก์ชั่นใน while() นั้นระบุได้ ในชุดนี้ ผมใช้ฟังก์ชั่น stroke เพื่อการเติมสีในเส้น, strokeWeight เพื่อกำหนดความหนาของเส้น, line ในการวาดเส้น และ point หรือจุด เพื่อให้เป็นจุดตามเส้นใน line ที่ใช้เป็นสายของ Mobile ให้สายของเส้นเรียงตั้งแต่ต่ำไปสูง แล้วค่อยสูงลงต่ำอีกที เหมือนกับสายของ Mobile ที่ปลิวไปด้านหลังกับลม นี่เป็นเพียงภาพนิ่ง ดังนั้งวิธีการทำจึงไม่ยากเท่าไร ขอเชิญทุกคนลองทำกันได้

Processing Code

int xPosition = 30;  //กำหนดตำแหน่ง หรือพิกัดตามแกน X
int yPosition = 100;  //กำหนดตำแหน่ง หรือพิกัดตามแกน Y
int green = 50;
int yellow = 255;
int count = 0;  //กำหนดเพื่อการนับ
int space = 30;  //กำหนดตัวแปร เพื่อการใช้กำหนดระยะห่าง
//กำหนด ค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น 
void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(500, 500);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
  background(223, 255, 44);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีเหลืองอ่อน

  while(xPosition < width) {  //กำหนดเงื่อนไขที่ต้องการให้ทำซ้ำเป็น loop ในกรณีที่เป็นจริง จะทำต่อไปเรื่อยๆ จนกระทั่งเป็นเท็จ อันนี้ในกรณี อันนี้ในกรณี xPosition < width
    DrawWind(xPosition, yPosition, green, yellow);  //เงื่อนไขที่สร้างเอง และเรียกใช้แล้ว
    if(xPosition > 100)  //สร้างเงื่อนไข ถ้าค่า xPosition > 100 ให้เข้าเงื่อนไข
    yPosition = yPosition - 20;  //ค่า yPosition ลดลงไปเรื่อยๆ ทีละ 20 จะทำให้รูปวิ่งขึ้นไปข้างบน
    else  //กำหนดเงื่อนไขอีกกรณีหนึ่ง หรือมากกว่านั้น
    yPosition = yPosition + 130;  //ค่า yPosition เพิ่มขึ้นไปเรื่อยๆ ทีละ 130 จะทำให้รูปวิ่งลงไปข้างล่าง
    xPosition = xPosition + space;  //กำหนดระยะห่างของ xPosition ตามค่า space
    green = green + 70;
    yellow = yellow - 90;  //สำหรับการกำหนดสีของฟังก์ชั่นสองตัวนี้ โดยสีมีค่าลดลง และเพิ่มขึ้น
    count = count + 1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า count จะไม่น้อยกว่า width
  }
  stroke(0);  //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีดำ
  strokeWeight(10);  //กำหนดความหน้าของเส้น โดยการใส่ค่าลงในวงเล็บ
  line(20, 100, 480, 100);  //ใช้ในการวาดเส้น
  line(250, 100, 250, 0);
}

void DrawWind (int xPosition, int yPosition, float green, float yellow) {  //ฟังก์ชั่นที่สร้างขึ้นเอง โดยมี int xPosition, int yPosition, float green และ float yellow มาร่วมด้วย
  strokeWeight(8);
  stroke(green, 0, yellow);  //กำหนดค่าสีตามแม่สี สีจะเปลี่ยนไปเรื่อยๆ ตามค่าตัวแปร
  line(xPosition, 100, xPosition, yPosition);
  strokeWeight(20);
  point(xPosition, yPosition);  //ใช้วาดจุดไว้ตามตำแหน่งในพิกัด หรือค่าตัวแปร
}

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

ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้
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. if() คือฟังก์ชั่นที่ใช้ในการกำหนดเงื่อนไข
10. else ใช้ในการกำหนดเงื่อนไขที่มีมากกว่านั้นว่าเงื่อนไขในเป็นจริง หรือเท็จ
11. fill() ใช้ในการเติมสีให้กับสิ่งต่างๆ ที่ระบุไว้ด้านล่างของฟังก์ชั่นนี้ โดยใช้สีตามแม่สี หรือเครื่องหมาย #
12. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
13. float คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่ติดทศนิยม
14. void DrawWind คือฟังก์ชั่นที่เราสร้างขึ้นเอง ต้องเรียกใช้เท่านั้นถึงจะทำงาน
15. point คือฟังก์ชั่นที่ใช้ในการวาดจุด
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้

Canvas