Theppitak's blog

My personal blog.

12 ธันวาคม 2550

Cubic vs Quadratic Splines

ระหว่างทำฟอนต์ Arundina รวมทั้งฟอนต์ Waree เองที่ผ่านไป เจอประเด็นหนึ่งให้ตัดสินใจ ระหว่างการใช้ cubic spline กับ quadratic spline เป็นรูปแบบสำหรับการ edit ฟอนต์ ว่าจะใช้รูปแบบไหนดี เนื่องจากต้นฉบับเขาใช้ quadratic แต่ผมคุ้นเคยกับ cubic

จากการทดลอง และคิดถึงหลักเหตุผลจากทฤษฎีเบื้องหลัง ก็ทำให้ตัดสินใจในที่สุดกับฟอนต์ดังกล่าว แต่ก่อนจะไปถึงคำตอบ ขอเท้าความสักนิด บันทึกความคิดเกี่ยวกับเรื่องนี้ก่อน

โมเดลของเส้นโค้งที่นิยมใช้กันมากที่สุดในแวดวงคอมพิวเตอร์กราฟิกส์ ก็คือ Bézier curve โดยแทนเส้นโค้งด้วยสมการ parametric เป็นพหุนาม ซึ่งสามารถเป็น linear, quadratic, cubic หรือดีกรีเท่าไรก็ได้ เส้นโค้งดีกรี n จะอาศัยจุดควบคุมทั้งหมด n + 1 จุด โดยเป็นจุดปลาย 2 จุด และจุดควบคุมเส้นโค้งอีก n - 1 จุด กล่าวคือ

ดีกรี 1 เป็นเส้นตรง สมการแทนเส้นตรงจากจุดปลาย P0 ไป P1 คือ

B(t) = (1 - t)P0 + tP1 ; 0 ≤ t ≤ 1

ดีกรี 2 (quadratic) สมการแทนเส้นโค้งจากจุดปลาย P0 ไป P2 โดยมีจุดควบคุมเส้นโค้ง P1 คือ

B(t) = (1 - t)2P0 + 2(1 - t)tP1 + t2P2 ; 0 ≤ t ≤ 1

quadratic curve

ดีกรี 3 (cubic) สมการแทนเส้นโค้งจากจุดปลาย P0 ไป P3 โดยมีจุดควบคุมเส้นโค้ง P1 และ P2 คือ

B(t) = (1 - t)3P0 + 3(1 - t)2tP1 + 3(1 - t)t2P2 + t3P3 ; 0 ≤ t ≤ 1

cubic curve

ที่นิยมใช้มีแค่นี้ เนื่องจากดีกรีที่สูงกว่านี้จะจัดการยาก โดยที่นิยมใช้มากที่สุดคือ cubic Bézier curve เนื่องจากความอิสระของจุดควบคุมกำลังเหมาะกับการปรับแก้ด้วยมือ โปรแกรมกราฟิกส์ทั่วไปก็มักใช้ cubic Bézier นี้ จนกระทั่งเมื่อพูดถึง Bézier curve ลอย ๆ ก็จะหมายถึง cubic Bézier โดยปริยาย

Postscript ก็ใช้ cubic Bézier แทนเส้นโค้ง ฟอนต์ Postscript จึงแทนโค้งของตัวอักษรด้วย cubic Bézier ส่วนฟอนต์แบบ TrueType จะใช้ quadratic Bézier

แล้วข้อดีข้อเสียของเส้นโค้งทั้งสองแบบนี้เป็นยังไง?

การแปลงรูปแบบ

ถ้ายังไม่พูดถึงการแก้ไข การเก็บเส้นโค้งในรูป quadratic จะสามารถแปลงเป็น cubic ได้โดยไม่เสียความละเอียด เนื่องจากเส้นโค้งที่ดีกรีสูงกว่าสามารถลดรูปลงมาเป็นดีกรีที่ต่ำกว่าได้ ในขณะที่การแปลงจาก cubic เป็น quadratic จะไม่สามารถแทนเส้นโค้ง cubic ด้วย quadratic แบบแม่นยำได้ จะต้องมีการ interpolate จุดควบคุมระหว่างกลางเพิ่มเติม

เกี่ยวกับการลดรูปนี้ คุณสามารถพิสูจน์จากสมการ parametric ได้ว่า สำหรับเส้นโค้ง quadratic ที่มีจุดควบคุม P0, P1 และ P2 สามารถแทนได้ด้วยเส้นโค้ง cubic ที่สมมูลกันโดยมีจุดควบคุม P0, (P0/3 + 2P1/3), (2P1/3 + P2/3), และ P2

quadratic-to-cubic conversion

จำนวนจุดควบคุม

ความที่โค้ง quadratic มีจุดควบคุมโค้งเพียงจุดเดียว ความเป็นอิสระของโค้งจึงต่ำ การแทนโค้งใหญ่ ๆ จึงต้องอาศัยจำนวนโค้งย่อยมาต่อกันจำนวนมากกว่าโค้ง cubic ดังนั้น จุดต่อโค้งของโค้ง quadratic โดยทั่วไปจึงมากกว่าโค้ง cubic

points in quadratric curve points in cubic curve
จำนวนจุดในโค้ง quadratic จำนวนจุดในโค้ง cubic

การแก้ไข

เมื่อนำเส้นโค้งมาต่อกันเป็นโค้งใหญ่ แต่ละจุดเชื่อมต่อก็จะมีเวกเตอร์ควบคุมสองเส้น โดยชี้ไปยังจุดควบคุมของเส้นโค้งก่อนหน้าเส้นหนึ่ง กับชี้ไปยังเส้นโค้งส่วนถัดไปอีกเส้นหนึ่ง ซึ่งจุดเชื่อมต่อนี้ มีได้สามรูปแบบ คือ

  • จุดหักมุม (corner point) เป็นจุดที่เส้นโค้งมีการหักมุม เวกเตอร์ควบคุมทั้งสองด้านจะเอียงทำมุมอย่างอิสระ ไม่ขึ้นต่อกัน
  • จุดสัมผัสโค้ง (tangent point) เป็นจุดที่เปลี่ยนจากเส้นตรงเป็นเส้นโค้ง หรือเส้นโค้งเป็นเส้นตรง โดยมีความต่อเนื่องของเส้นต่อไป เวกเตอร์ควบคุมด้านที่ชี้ไปยังส่วนเส้นโค้งจะทำมุมเท่ากับมุมของส่วนเส้นตรง ส่วนเวกเตอร์ควบคุมที่ชี้ไปยังส่วนเส้นตรงนั้นไม่มี คือเป็นเวกเตอร์ศูนย์
  • จุดต่อโค้ง (curve point) เป็นจุดเปลี่ยนจากโค้งหนึ่งเป็นอีกโค้งหนึ่ง โดยมีความต่อเนื่องของเส้น เวกเตอร์ควบคุมทั้งสองด้านจะทำมุมเท่ากัน แต่ชี้ในทิศตรงกันข้าม

จุดสองประเภทแรกนั้น ไม่ค่อยมีปัญหาเท่าไรกับการแก้ไข ไม่ว่าจะเป็น quadratic หรือ cubic แต่จุดต่อโค้งนั้น จะทำให้แก้ไขลำบากถ้าเป็น quadratic เนื่องจากเส้นโค้ง quadratic มีจุดควบคุมเพียงจุดเดียว ซึ่งจะมีผลกับเส้นโค้งทั้งสองปลาย แล้วเมื่อเวกเตอร์ควบคุมของส่วนของเส้นโค้งสองเส้นมาผูกติดกันด้วยมุมเอียง การปรับจุดควบคุมของโค้งหนึ่ง จึงกระทบถึงอีกโค้งหนึ่งทั้งโค้งอย่างเลี่ยงไม่ได้

editing quadratic curve: before editing quadratic curve: after
การแก้ quadratic curve: ก่อน การแก้ quadratic curve: หลัง

ในขณะที่โค้ง cubic จะเป็นอิสระกว่า เพราะมีจุดควบคุมสองจุด การปรับจุดควบคุมของโค้งหนึ่ง จึงมีผลต่อส่วนของเส้นโค้งที่แก้ไขอยู่เท่านั้น ไม่ใช่ไปกระทบต่อโค้งถัดไปด้วย

editing cubic curve: before editing cubic curve: after
การแก้ cubic curve: ก่อน การแก้ cubic curve: หลัง

เมื่อประกอบเข้ากับเงื่อนไขที่ว่า โค้ง quadratic มีจำนวนจุดต่อมากกว่า ซึ่งหมายถึงจุดต่อโค้งอยู่ใกล้กันมาก ผลของความกระทบกระเทือนจึงมีอัตราสูงกว่าด้วย ทำให้การแก้ไขโค้ง quadratic ยิ่งยากขึ้นไปอีก

fontforge มีมาตรการคลายความอึดอัดตรงนี้บ้าง ด้วยการกำหนดให้จุดต่อโค้งบางจุดเป็น interpolated คือให้คำนวณตำแหน่งจากจุดข้างเคียง แทนที่จะให้แก้ไขโดยตรง การปรับจุดข้างเคียง ก็จะมีผลต่อตำแหน่งของจุดนี้ด้วย ทำให้ดูเสมือนไม่มีจุดต่อโค้งนี้อยู่ แต่สิ่งที่ได้คือ จุดควบคุมโค้งที่อยู่ถัดจากจุดนี้ไป จะเป็นอิสระจากการปรับโค้ง เสมือนหนึ่งกำลังปรับโค้งใหญ่ที่มีจุดควบคุมสองจุด นับเป็นวิธีที่ชาญฉลาดทีเดียว

editing interpolated quadratic curve: before editing interpolated quadratic curve: after
การแก้ quadratic curve ที่มี interpolated point: ก่อน การแก้ quadratic curve ที่มี interpolated point: หลัง

อย่างไรก็ดี จำนวนจุดต่อโค้งที่มากเกินไปของโค้ง quadratic ก็ยังทำให้การปรับเส้นโค้งเป็นไปอย่างทุลักทุเล โดยเฉพาะสำหรับ glyph ที่มีโค้งซับซ้อน เพราะต้องปรับโค้งย่อยทีละส่วน แทนที่จะปรับโค้งโดยรวมได้กว้างเหมือนโค้ง cubic

editing interpolated quadratic curve: before editing interpolated quadratic curve: after
ตัวอย่าง glyph ที่ซับซ้อนเมื่อเป็น quadratic ตัวอย่าง glyph ที่ซับซ้อนเมื่อเป็น cubic

สรุป

  • โดยปกติ การสร้างฟอนต์ในรูปโค้ง cubic แล้วให้โปรแกรมแปลงเป็น TrueType ที่เป็น quadratic จะทำให้ปรับแก้ฟอนต์ได้ง่ายกว่า แม้การแปลงเป็น quadratic จะต้องมีการ interpolate เพิ่ม แต่ก็ถือว่าโปรแกรมส่วนใหญ่ interpolate แบบอัตโนมัติได้ดี
  • ถ้าต้องปรับแต่งฟอนต์ที่ต้นแบบเป็น TrueType ซึ่งใช้โค้ง quadratic ก็อาจจะขึ้นอยู่กับว่า ต้องปรับแก้ spline ของ glyph ต่าง ๆ หรือเปล่า ถ้าไม่ต้องปรับ การเก็บเป็น quadratic ก็ย่อมรักษาข้อมูลเดิมของฟอนต์ได้ครบถ้วน แต่ถ้าจำเป็นต้องปรับ การแปลงเป็น cubic โดย simplify spline เพื่อลดจำนวนจุดต่อโค้งด้วย จะทำให้ทำงานสะดวกกว่า ใช้เครื่องมือต่าง ๆ ได้ครบครันกว่า แม้จะเสียข้อมูลบางส่วนไป แต่การ interpolate ของโปรแกรมสร้างฟอนต์ก็ถือว่าไม่ทำให้เสียรูปเส้นโค้งเดิมไปเท่าไรนัก เทียบกับการปรับโค้งที่เป็นระเบียบกว่าแล้ว ถือว่าคุ้มค่า

ยาวหน่อยครับ blog นี้ ถือว่าเป็นการเรียบเรียงความคิดตัวเองไปในตัว

ป้ายกำกับ:

3 ความเห็น:

  • 13 ธันวาคม 2550 09:18 , Blogger widhaya แถลง…

    เพราะเหตุว่า cubic มันอิสระเกินไปน่ะครับ หลัง ๆ ผมถึงมาใช้ quadratic จนชิน เลยทำให้รู้สึกว่า cubic มันอ้างว้างเกินครับ

     
  • 14 ธันวาคม 2550 01:34 , Blogger Thep แถลง…

    ฟังดูเหมือนจะเข้าใจไม่ยาก แต่ผมยังนึกตามไม่ออกครับ โดยเฉพาะหลังจากที่ได้พยายามทำความคุ้นเคยแล้ว แต่ก็ยังคิดว่า cubic curve จะให้ spline ที่ตายตัวกว่าอยู่ดี ความอิสระในที่นี้ คือความอิสระต่อการ edit โดยไม่กระทบโค้งข้างเคียง แต่ถ้าพูดในแง่การวางจุดแล้ว quadratic curve จะมีโอกาสวางจุดไว้นอกตำแหน่ง extrema ได้มากกว่า ทำให้ต้องแก้ไข curve ในมุมเอียง ซึ่งในแง่นี้ น่าจะถือว่ามีอิสระในการวางจุดมากกว่า cubic ไหมครับ?

    ในขณะที่การวางจุดของ cubic ถ้าวางที่ extrema ไว้แล้ว การ edit จุดควบคุมโค้งจะอยู่ในแนวนอน-แนวดิ่งเป็นส่วนใหญ่ มีจำนวนจุดในมุมเอียงน้อยกว่า quadratic จึงน่าจะเรียกว่ามีอิสระน้อยกว่า quadratic ในแง่นี้?

    อยากฟังความเห็นที่ละเอียดจากผู้ที่ชินกับ quadratic แล้วอย่างคุณ widhaya เหมือนกันครับ (เท่าที่จำได้ ที่คุยกันทางเมลก็มีแต่ผมพูดฝ่ายเดียวเหมือนกัน)

     
  • 17 ธันวาคม 2550 08:59 , Blogger widhaya แถลง…

    ความรู้สึกคือ cubic เหมือนการเขียนแบบฟรีแฮนด์ครับ ส่วน quadratic เหมือนการวาดแบบ "snap to guidline"

    ลองดูตัวอย่างจากอักษร Q ข้างบนก็ได้ครับ
    จะเห็นว่าเรารับรู้ความสมมาตรได้ทันทีจากภาพของ quadratic

    quadratic จะทำงานยากนิดนึงในตอนแรก แต่พอทำไป ๆ จนเริ่มชินแล้ว จะมองภาพได้ง่ายกว่าครับ
    (ทำงานกับฟอนต์มันจะยากตอนคิดแบบ และนานที่สุดในขั้นตอนสุดท้ายคือ fine tune ซึ่งการเห้นภาพโครงของฟอนต์จะช่วยให้จุดนี้เร็วขึ้นมากครับ - ความเห็นของมือสมัครเล่นนะครับ ไม่รู้ว่าจริง ๆ แล้ว มืออาชีพเขาทำงานกันยังไงเหมือนกัน)

    หมายเหตุ

    - fontforge รุ่นใหม่บน sid เกิด seg.fault บ่อยมาก และให้ผลที่แปลก ๆ กับ quadratic curve คือบางครั้งจุดร่วมมันดันแยกกันได้ พฤติกรรมจะไปคล้าย ๆ กับ cubic

    - ขออภัยที่ตอบช้าครับ ไปเชียงรายเสีย 3 วัน

     

แสดงความเห็น (มีการกลั่นกรองสำหรับ blog ที่เก่ากว่า 14 วัน)

<< กลับหน้าแรก

hacker emblem