Art in Design

ภารกิจของคุณคือการ "ล่า" เส้นประสีขาว (Target Path) โดยการวาดเส้นสีเขียว (Player Path) ทับให้แนบสนิทที่สุดในแต่ละด่าน

1. การควบคุม (Controls)

เกมนี้จำลองตรรกะมาจากซอฟต์แวร์ระดับโลกอย่าง Illustrator และ Photoshop:

• คลิก (Click): สร้างจุดยึดมุมแหลม (Anchor Point) สำหรับเส้นตรง

• คลิกแล้วลาก (Click & Drag): สร้างจุดยึดพร้อม "แขนดัด" (Handles) สำหรับสร้างเส้นโค้ง Bezier

• แก้ไข (Edit): คุณสามารถลากจุดสี่เหลี่ยมเพื่อย้ายที่ หรือลากจุดวงกลมปลายแขนเพื่อปรับความโค้งได้ตลอดเวลา

2. เป้าหมายและคะแนน (Objective)

• Match Rate: เมื่อวาดเสร็จ กดปุ่ม [ CHECK MATCH ] ระบบจะคำนวณความแม่นยำเป็น %

• Pass Condition: ต้องได้คะแนน 90% ขึ้นไป ถึงจะปลดล็อคด่านถัดไป

• The Challenge: มีทั้งหมด 27 ด่าน ไล่ระดับความยากตั้งแต่เส้นตรงพื้นฐาน (Lv.1) ไปจนถึงรูปทรงซับซ้อนอย่างโลโก้และรูปสัตว์

3. เครื่องมือช่วยเหลือ (Toolbar)

• [ UNDO ]: ย้อนกลับทีละจุด

• [ RESET ]: ล้างกระดานเริ่มใหม่

• [ i ]: กดเพื่อดู/ซ่อน คำอธิบายวิธีเล่น

💡 Pro Tips: เทคนิคสู่ความโปร

• Less is More: กฎเหล็กของ Vector คือ "ยิ่งจุดน้อย เส้นยิ่งสวย" พยายามใช้ Anchor Point ให้น้อยที่สุดเท่าที่จะทำได้ เส้นจะดู Smooth และเป็นธรรมชาติ

• Extremes Strategy: วางจุด Anchor ไว้ที่ "จุดสูงสุด" และ "จุดต่ำสุด" ของส่วนโค้งเสมอ จะทำให้ควบคุมแขนดัดได้ง่ายที่สุด

• Parallel Handles: พยายามดึงแขนดัดให้ขนานกับทิศทางที่เส้นจะวิ่งไป

1. เบซิเยร์ เคิร์ฟ (Bézier Curve) ชื่อนี้ไม่ได้ตั้งขึ้นมาเท่ๆ แต่มาจาก Pierre Bézier วิศวกรของบริษัทรถยนต์ Renault ในยุค 1960s ที่คิดค้นสูตรคณิตศาสตร์นี้ขึ้นมาเพื่อใช้ "ออกแบบตัวถังรถยนต์" ให้มีความโค้งมนสวยงามและแม่นยำ ก่อนจะถูกนำมาใช้ในคอมพิวเตอร์กราฟิกทั่วโลก

2. เวกเตอร์ vs พิกเซล (Vector vs Pixel) ในขณะที่ภาพถ่าย (Raster) เก็บข้อมูลเป็นจุดสี, ภาพเวกเตอร์ (Vector) เก็บข้อมูลเป็น "สมการทางคณิตศาสตร์"

   1. • สมการ: "ลากเส้นจากจุด A ไป B โดยมีความโค้งตามค่า C"

      • ข้อดี: ทำให้เราย่อหรือขยายภาพ Vector ได้ไม่จำกัดโดยที่ภาพ "ไม่แตก" เลยแม้แต่นิดเดียว

1. 🅰️ ตัวหนังสือบนหน้าจอ (Typography): รู้หรือไม่? ตัวอักษรทุกตัวที่คุณกำลังอ่านอยู่ตอนนี้ ไม่ได้เกิดจากจุดสี (Pixel) แต่เกิดจากเส้นโค้ง Bezier ที่วาดขอบเขตของตัวอักษรขึ้นมา

   1. • ทำไมต้องใช้? เพราะเส้น Bezier เป็นสูตรคณิตศาสตร์ ทำให้เราสามารถขยายตัวหนังสือให้ใหญ่เท่าตึก หรือย่อให้เล็กเท่ามด ได้โดยที่ "ขอบยังคมกริบและไม่แตก" (ต่างจากรูปถ่ายที่พอย่อขยายแล้วภาพจะเบลอ)

2. 🏎️ การออกแบบยานยนต์ (Automotive Design): กำเนิดของเส้น Bezier ไม่ได้มาจากศิลปิน แต่มาจากวิศวกรชื่อ Pierre Bézier แห่งบริษัทรถยนต์ Renault ในยุค 1960s

   1. • ทำไมต้องใช้? การจะขึ้นรูปตัวถังรถสปอร์ตให้โค้งมน ลู่ลม (Aerodynamic) และสวยงาม ไม่สามารถใช้ไม้บรรทัดตรงๆ วาดได้ เขาจึงคิดค้นสูตรนี้ขึ้นมาเพื่อสื่อสารกับเครื่องจักรให้ตัดเหล็กได้โค้งมนดั่งใจนึก

3. 🎬 แอนิเมชันและเอฟเฟกต์ (CGI & Motion Graphics): ในหนังซูเปอร์ฮีโร่หรือการ์ตูน 3D การเคลื่อนที่ของตัวละครจะไม่เคลื่อนที่เป็นเส้นตรงแข็งๆ แบบหุ่นยนต์ แต่จะเคลื่อนที่เป็นเส้นโค้งที่นุ่มนวล (Smooth)

   1. • ทำไมต้องใช้? โปรแกรมเมอร์ใช้กราฟ Bezier ในการกำหนด "เส้นทาง (Motion Path)" และ "ความเร็ว (Velocity)" ของวัตถุ ทำให้การขยับแขนขา หรือการบินของยานอวกาศดูสมจริงเป็นธรรมชาติ

Concept: "กำเนิดเส้นโค้งจากไม้บรรทัด" ย้อนรอยวิศวกรยุคก่อนคอมพิวเตอร์ กับการใช้อุปกรณ์วาดเส้นโค้งที่เรียกว่า "Spline" เพื่อออกแบบเรือและรถยนต์

📦 อุปกรณ์:

1. ไม้บรรทัดพลาสติกอ่อน (ยิ่งยาวและอ่อนยิ่งดี) หรือ เส้นพลาสติก

2. ก้อนยางลบ 3-4 ก้อน (หรือวัตถุที่มีน้ำหนักหน่อย เช่น แม่เหล็ก, ที่ทับกระดาษอันเล็ก)

3. ดินสอ / ปากกา

4. กระดาษ A4

🧪 วิธีการทดลอง:

Step 1: สร้างจุดยึด (Anchors)

• วางแนวสันไม้บรรทัดลงบนกระดาษ ใช้ยางลบก้อนที่ 1 และ 2 วางทับที่ปลายไม้บรรทัดทั้งสองข้าง เพื่อให้ไม้บรรทัดสามารถประคองให้ตั้งอยู่ได้

• ผลลัพธ์: ยางลบจะทำหน้าที่เป็น Anchor Point ที่ตรึงตำแหน่งไว้ แต่ยอมให้ไม้บรรทัดขยับหรือหมุนได้นิดหน่อยเหมือนจุด Anchor ในโปรแกรม

Step 2: ดัดเส้นโค้ง (The Curve)

• ใช้นิ้วดันตรงกลางไม้บรรทัดให้โค้งออกตามต้องการ

• สังเกตว่าปลายไม้บรรทัดข้างหนึ่งอาจจะเลื่อนเข้ามานิดหน่อย (เป็นเรื่องปกติของฟิสิกส์) ให้ขยับยางลบตามเข้ามาทับไว้ใหม่

Step 3: สร้างแขนควบคุม (Control Handles)

• ใช้ "ยางลบก้อนที่ 3" (หรือดินสอ) มาวางดันด้านข้างของไม้บรรทัด ตรงจุดที่ต้องการดัดความโค้ง

• ลองเลื่อนก้อนยางลบนี้ไปมา... คุณจะเห็นเส้นโค้งเปลี่ยนรูปร่างไปเรื่อยๆ

• เปรียบเทียบ: ยางลบก้อนที่ 3 นี้ทำหน้าที่เหมือน Handle ที่เราลากในแอปนั่นเอง!

💡 The Science:

• ในอดีต วิศวกรใช้ตุ้มน้ำหนักตะกั่วที่มีตะขอเกี่ยว (เรียกว่า "Ducks") วางทับเส้น Spline เพื่อดัดโค้ง เพราะน้ำหนักจะช่วยตรึงเส้นไว้ แต่ก็สามารถยกย้ายตำแหน่งได้อิสระเพื่อปรับแก้แบบครับ