My Curve Stitching

Flower Stitching

ภาพนี้เป็นดอกไม้ที่อยู่ในวังวนของ Curve Stitching โดยที่ผมให้เส้นโค้งทั้งหมดที่ห่างจากกันทั้งหมดนั้นเป็นเหมือนกลีบดอกไม้ อันดับแรกของการสร้างภาพนี้ ผมต้องกำหนดตัวแปรชนิด Global variable มา 6 ตัว เพื่อให้การเขียนภาพนั้นง่ายขึ้น ต่อจากนั้นจึงเริ่มใช้ฟังก์ชั่น void setup() ในการกำหนดค่าต่างๆ โดยใช้ฟังก์ชั่น size() เพื่อการกำหนดขนาดของกรอบ, background เพื่อการตกแต่งพื้นหลังตามแม่สี และ while() เพื่อกำหนดเงื่อนไขในการทำซ้ำ รวมทั้งฟังก์ชั่นที่ใช้ในการวาดเส้น และตกแต่งเส้น หรือ stroke() และค่าของตัวแปรที่เปลี่ยนไป ซึ่งรวมอยู่ในฟังก์ชั่น while() ต่อจากนั้นผมใช้ฟังก์ชั่นหลัก void draw() ในการวาดสิ่งที่ต้องการวาด สำหรับฟังก์ชั่นชุดนี้ ผมใช้ตัวแปรชนิด Vocal variable กับฟังก์ชั่น int เพื่อให้แทนค่าตัวเลขได้ง่ายขึ้น ฟังก์ชั่น fill() ในการตกแต่งสีตามเครื่องหมาย # หรือแม่สี และ ellipse ในการวาดวงรี ผมใช้ฟังก์ชั่นชุดนี้ในการวาดเกสรดอกไม้ ในรูปนี้นั้น การนำฟังก์ชั่น while เข้ามาช่วยในการเขียน code จะทำให้เขียนได้หลายๆ ตัวพร้อมกันโดยใช้ line 4 เส้นเพื่อการวาดเส้นโค้งรอบๆ จะทำงานโดยทำตามเงื่อนไขที่เราตั้งไว้ จาก code ใน while จะตั้งไว้ว่า while(count < n)โดยที่ค่า n = 2,000 และ count = count + 1 ค่า count จะทำการ +1 ไปเรื่อยตลอดจนค่า count จะมีค่าไม่น้อยกว่า n และในขณะเดียวกันระยะห่างของเส้นแต่ละเส้นต้องมีค่าเท่ากันคือ 10 กำหนดโดย r = r + 10 สำหรับรูปนี้ เป็นภาพนิ่ง ไม่ได้กำหนดเงื่อนไขอะไรไว้มาก แต่เดิมในการสร้างภาพนี้ ไม่ได้ยากเท่าไร หากรู้จักการใช้ฟังก์ชั่น while() เพื่อให้วาดได้หลายเส้น

Processing Code

int xPos = 0;  //กำหนดระยะห่างระหว่างแกน X
int yPos = 0;  //กำหนดระยะห่างระหว่างแกน Y
int r = 10;  //กำหนดระยะห่างระหว่างเส้น
int n = 2000;  //กำหนดจำนวนเส้น
int h = 500;  //กำหนดความสูง หรือใช้แทนค่าอื่นได้  
//กำหนด ค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น
int count = 0;  //กำหนดให้มีการนับการกระทำในเงื่อนไข
void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(500, 500);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
  background(255, 15, 63);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีแดงอ่อน
  while(count < n) {  //กำหนดเงื่อนไขในวงเล็บ เมื่อเป็นจริงจะทำคำสั่งภายในซ้ำๆ จนกระทั่งเงื่อนไขเป็นเท็จ อันนี้ในกรณี count < n
      stroke(26, 256, 62);  //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีเขียวอ่อน
      line(xPos, yPos-5+r, xPos+r, h);  //ใช้ในการวาดเส้น
      line(h, yPos-5+r, xPos+r, 0);
      line(xPos, h-r, xPos+r, yPos);
      line(xPos+r, h, h, h-r);
      r = r + 10;  //กำหนดระยะห่างระหว่างเส้น
      count = count + 1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า count จะไม่น้อยกว่า n
 }
}

void draw() {  //การ ใช้ฟังก์ชั่น void เป็นการใช้ฟังก์ชั่นแบบไม่มีการส่งค่ากลับ และเราใช้ void draw() เป็นการใช้ฟังก์ชั่นในการประกาศว่า เราต้องการจะวาดอะไรลงไป และเป็นฟังก์ชั่นหลักมีได้เพียง 1 ชุด
  int k = 150;
  int p = 250;  //ตัวแปรชนิด Vocal variable แทนค่าได้เฉพาะในฟังก์ชั่นนี้
  fill(#FF8E03);  //คำสั่งที่ใช้เติมสีให้กับรูปทรงต่างๆ ที่เราวาด สีที่ใส่นี่คือสีส้ม
  ellipse(p, p, p, p);  //ใช้ในการวาดวงรี
  fill(#FFD500);  //สีเหลือง
  ellipse(p, p, k, k);
}

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

ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้
1. void setup() ใช้เพื่อประกาศค่าตัวแปรต่างๆ และ กำหนดค่าของตัวแปรต่างๆ โดยจะไม่มีการทำซ้ำ
2. void draw() ใช้เพื่อประกาศต่าตัวแปรต่างๆ และกำหนดค่าของตัวแปรต่างๆ โดยเป็นการทำซ้ำ (loop)
3. size() กำหนดขนาดของกรอบ หรือพื้นหลังที่ใช้สร้าง code ดูได้จาก size(width, height)
4. stroke() กำหนดค่าสีของเส้นโดยการใช้แม่สี หรือเครื่องหมาย #
5. background() กำหนดสีของพื้นหลังโดยการใช้แม่สี
6. while() ใช้ในการวน loop โดยกำหนดเงื่อนไขที่ต้องการ เพื่อให้มีการทำซ้ำ
7. line() ใช้ในการวาดเส้นตรง โดยดูได้จาก line(x1, y1, x2, y2) กำหนดค่าตามพิกัดแต่ละจุด
8. ellipse ใช้ในการวาดรูปวงรี โดยดูได้จาก ellipse(x, y, width, height)
9. fill() ใช้ในการเติมสีให้กับสิ่งต่างๆ ที่ระบุไว้ด้านล่างของฟังก์ชั่นนี้ โดยใช้สีตามแม่สี หรือเครื่องหมาย #
10. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้

Canvas