ทำไมรูปภาพแบบเวกเตอร์ถึงเรียกว่าแบบเวกเตอร์
มันเกี่ยวอะไรกับเวกเตอร์ในคณิตศาสตร์ไหม หรือแค่บังเอิญชื่อเหมือนกันเฉย ๆ
ถ้าใครเคยทำงานเกี่ยวกับโลโก้ นามบัตร เสื้อ ป้ายไวนิล หรือไฟล์กราฟิกอะไรสักอย่าง เราอาจเคยได้ยินประโยคประมาณว่า “ขอไฟล์เวกเตอร์หน่อย” หรือ “มีไฟล์ .ai หรือ .svg ไหม” ซึ่งสำหรับคนที่ไม่ได้อยู่ในสายกราฟิก ประโยคนี้อาจฟังดูเหมือนภาษาลับของร้านพิมพ์นิดหน่อย เพราะเราก็มีรูปโลโก้อยู่แล้วนี่นา เป็นไฟล์ .jpg หรือ .png ก็เปิดดูได้ปกติ ทำไมยังต้องมีไฟล์อีกแบบนึงด้วย
เหตุผลสำคัญก็คือ รูปภาพแบบเวกเตอร์ที่ว่านี้นั้นมันมีคุณสมบัติพิเศษ นั่นคือเมื่อเอาไปขยายให้ใหญ่ ภาพที่ออกมาจะยังคมอยู่ชัดเหมือนต้นฉบับ ไม่แตก ไม่เบลอ และไม่กลายเป็นช่องสี่เหลี่ยม ๆ เหมือนเวลาซูมรูปที่ save มาเป็นไฟล์รูปทั่วไป
นี่คือเหตุผลที่ไฟล์เวกเตอร์สำคัญมากในงานกราฟิก โดยเฉพาะงานที่ต้องใช้รูปเดียวกันหลายขนาด เช่น โลโก้บริษัทที่ต้องอยู่ได้ทั้งบนเว็บไซต์ขนาดไม่กี่เซนติเมตร และบนป้ายหน้าตึก ขนาดหลายเมตร ถ้าโลโก้นั้นเป็นไฟล์รูปธรรมดาที่มีความละเอียดต่ำ พอเอาไปขยายมันก็จะเริ่มแตกทันที
คำถามคือ แล้วไฟล์รูปแบบเวกเตอร์นี่มันทำยังไงให้สามารถขยายได้โดยไม่แตก ผมใบ้ว่าเกี่ยวกับชื่อเวกเตอร์ของมันนั่นแหละฮะ
เพื่อให้เห็นความต่างชัดขึ้น เราลองย้อนกลับไปดูรูปภาพปกติที่เราคุ้นเคยกันก่อน ไฟล์อย่าง .jpg หรือ .png โดยทั่วไปเป็นภาพแบบแรสเตอร์ (raster) ซึ่งหมายความว่ารูปภาพถูกเก็บเป็นตารางของพิกเซล สมมติว่าเรามีรูปขนาด 10 × 10 พิกเซล รูปนี้ก็มีช่องเล็กๆ ทั้งหมด 100 ช่อง แต่ละช่องมีค่าสีของตัวเอง คอมพิวเตอร์จะรับรู้รูปนี้ประมาณว่า พิกเซลที่หนึ่งเป็นสีแดง พิกเซลที่สองเป็นสีแดงเข้ม พิกเซลที่สามเป็นสีส้ม ไล่ไปเรื่อยๆ จนครบทั้งรูป ถ้าเป็นภาพถ่ายจากมือถือที่มีขนาด 4000 × 3000 พิกเซล ก็แปลว่ามันมีข้อมูลสีอยู่ประมาณ 12 ล้านจุด
ข้อเสียของการเก็บข้อมูลภาพเป็นพิกเซล คือเมื่อเราขยายรูปมากกว่าขนาดข้อมูลจริงที่มันมี คอมพิวเตอร์จะต้องเดาว่าพิกเซลใหม่ที่เพิ่มขึ้นมาควรเป็นสีอะไร มันอาจเอาสีเดิมมายืด อาจเฉลี่ยสีจากพิกเซลข้างๆ หรืออาจใช้เทคนิคที่ฉลาดขึ้น แต่สุดท้ายก็ยังทำงานจากข้อมูลเดิมที่มีจำกัดอยู่ดี
เพราะฉะนั้นเวลาเราซูมรูปแรสเตอร์มากๆ ขอบที่เคยดูเนียนจะเริ่มกลายเป็นขั้นบันได เส้นเฉียงจะเริ่มเป็นฟันปลา ตัวหนังสือจะเบลอ และโลโก้จะดูไม่คมทันที นี่เป็นเหตุผลที่ร้านพิมพ์มักไม่ค่อยอยากได้โลโก้ที่เป็น .jpg เล็กๆ ที่ถูกส่งต่อมาจากไลน์ ไม่ใช่เพราะเขาเรื่องมาก แต่เพราะไฟล์นั้นไม่มีข้อมูลเพียงพอสำหรับการพิมพ์ขนาดใหญ่
ส่วนภาพแบบเวกเตอร์นั้นทำงานต่างออกไป มันไม่ได้เก็บข้อมูลว่าพิกเซลช่องนี้สีอะไร พิกเซลช่องถัดไปสีอะไร แต่เก็บเป็นคำสั่งวาดรูปแทน เช่น วาดวงกลมตรงตำแหน่งนี้ รัศมีเท่านี้ วาดเส้นจากจุดนี้ไปจุดนั้น วาดเส้นโค้งผ่านจุดควบคุมเหล่านี้ แล้วเติมสีนี้ลงไปข้างใน เพราะฉะนั้นเวลาเราขยายรูปเวกเตอร์ให้ใหญ่ขึ้น คอมพิวเตอร์ไม่ได้เอารูปเดิมมายืด แต่จะวาดรูปขึ้นมาใหม่ในขนาดที่ใหญ่กว่าแทน ภาพเลยยังคมอยู่ ไม่แตก ไม่เบลอ และไม่กลายเป็นช่องสี่เหลี่ยม ๆ เหมือนเวลาซูมรูปทั่วไป
สมมติว่าเราต้องการส่งรูปภาพวงกลมหนึ่งวง ถ้าเป็นภาพแรสเตอร์ คอมพิวเตอร์ต้องจำว่าพิกเซลไหนอยู่ในวงกลม พิกเซลไหนอยู่นอกวงกลม พิกเซลตรงขอบควรเป็นสีอะไรเพื่อให้ดูเนียน
แต่ถ้าเป็นเวกเตอร์ คอมพิวเตอร์จะเก็บข้อมูลแค่ว่า ในรูปนี้นั้นมีวงกลมที่จุดศูนย์กลางอยู่ที่ตำแหน่งนี้ รัศมีเท่านี้ และเป็นสีนี้ แค่นี้ก็เพียงพอแล้ว เพราะเมื่อถึงเวลาวาด โปรแกรมสามารถคำนวณเองได้ว่ารูปวงกลมควรออกมาเป็นอย่างไร
อย่างภาพ SVG ซึ่งเป็นรูปแบบเวกเตอร์ที่ใช้บนเว็บ มันจะเก็บข้อมูลแบบนี้
ก็คือบอกว่า กรอบภาพขนาดกว้าง 100 ยาว 100 นะ วาดวงกลมที่มีจุดศูนย์กลางอยู่ที่จุด x=50 และ y=50 รัศมี 30 และลงสี hotpink นะ ซึ่งพอเอามาวาดจริง ก็จะได้แบบนี้
ซึ่งถ้าอยากให้วงกลมใหญ่ขึ้น เราเปลี่ยนค่า r ถ้าอยากให้มันขยับไปทางขวา เราเปลี่ยนค่า cx ถ้าอยากเปลี่ยนสี เราเปลี่ยนค่า fill ความรู้สึกจึงไม่เหมือนการแก้ไขรูปภาพทั่วไปเท่าไร แต่มันเหมือนเรากำลังแก้สูตรวิธีสร้างรูปภาพมากกว่า
และนี่คือแก่นของภาพเวกเตอร์ มันเก็บข้อมูล “วิธีวาดภาพ” ไม่ใช่ “ภาพที่วาดเสร็จแล้ว”
คราวนี้ผมลองสร้างรูปด้วย SVG ดังนี้
พอเดาได้ไหมฮะว่ามันจะออกมาเป็นอะไร
มันคือเส้นตรงที่ลากจากจุด (50,50) ไปที่ (250,220) นั่นเอง ได้ออกมาหน้าตาแบบนี้ฮะ
ถึงตรงนี้ หลายคนน่าจะเริ่มคุ้นแล้ว เพราะมันคือสิ่งที่เราเรียนในเรื่องเรขาคณิตวิเคราะห์ตอน ม.4 นั้นเอง ตอนนั้นเราเรียนเรื่องจุดบนระนาบ พิกัด x y เส้นตรง แล้วก็ลามไปถึงเส้นโค้งต่าง ๆ อย่างวงกลม วงรี พาราโบลา ไฮเพอร์โบลา หรือที่รวม ๆ กันอยู่ในหัวข้อภาคตัดกรวยนั่นแหละ
อย่างถ้าเราจะวาดวงรีใน SVG คำสั่งที่ต้องใช้คือ <ellipse cx="150" cy="100" rx="80" ry="40" /> ซึ่งก็จะเห็นว่ามันก็คือการระบุหน้าตาของวงรีด้วยจุดศูนย์กลาง ความยาวแกนเอก ความยาวแกนโท เหมือนกับตอนเราเรียนเรื่องสมการวงรีนั่นแหละฮะ เพียงแต่ในห้องเรียนมันอยู่ในรูปโจทย์คณิตศาสตร์ แต่ในคอมพิวเตอร์กราฟิกมันกลายเป็นคำสั่งวาดภาพเท่านั้นเอง
ดังนั้นที่ตอนเรียนหลายคนอาจสงสัยว่าจะเรียนสมการรูปนั้นรูปนี้ไปทำไม ใครจะมาวาดรูปพวกนี้ด้วยสมการ งานกราฟิกส่วนใหญ่ที่เราเห็นกันทุกวันนี้ก็วาดด้วยสมการพวกนี้ทั้งนั้นนะฮะ
ส่วนที่มันถูกเรียกว่าเวกเตอร์เนี่ย นอกจากเพราะมันคือการจัดการกับพิกัดบนระนาบแล้ว เข้าใจว่าอาจจะมีเหตุผลทางประวัติศาสตร์ด้วย คือหน้าจอที่เราใช้กันสมัยนี้ส่วนใหญ่เป็นแบบ raster display ซึ่งคือมีพิกเซลสีต่าง ๆ เรียงกันเต็มหน้าจอถูกไหมฮะ
แต่ระบบกราฟิกยุคแรกบางแบบใช้สิ่งที่เรียกว่า vector display ซึ่งวาดภาพด้วยการบังคับลำแสงให้เคลื่อนจากจุดหนึ่งไปอีกจุดหนึ่ง คล้ายกับการสร้างเวกเตอร์จริง ๆ บนจอ ภาพที่ได้จึงถูกสร้างจากเส้นและพิกัด ไม่ใช่จากตารางพิกเซลแบบที่เราคุ้นเคยในปัจจุบัน
สิ่งที่ทำให้ภาพเวกเตอร์ทรงพลังขึ้นไปอีกคือเส้นโค้งอื่น ๆ ที่ไม่ได้มีสมการแบบที่เราเคยเรียน แต่คือสิ่งที่เรียกว่า path ใน SVG เราสามารถเขียนคำสั่งวาดเส้นที่ซับซ้อนกว่าเส้นตรงได้
เช่น เส้นโค้งแบบ Bézier ซึ่งเป็นเส้นโค้งจากสมการพหุนามที่ถูกควบคุมด้วยจุดหลายจุด เวลาเราใช้ Pen Tool ใน Illustrator หรือ Figma แล้วลากแขนจับโค้งๆ จริงๆ แล้วเรากำลังสร้างข้อมูลลักษณะนี้อยู่ แค่เราอาจไม่เห็นคำสั่งหรือตัวพหุนามโดยตรง เพราะโปรแกรมซ่อนมันไว้หลัง Interface ที่ใช้ง่ายกว่า แต่เบื้องหลังยังเป็นเรื่องของจุด พิกัด และการคำนวณเส้นโค้ง
ตัวอย่างเช่น
ที่เมื่อวาดออกมาจะได้เป็นเส้นโค้งหน้าตาแบบนี้ฮะ
คำสั่งนี้เริ่มจากการ move ไปที่จุด (50,150) แล้ววาดเส้นโค้งไปจบที่ (250,150) โดยมีจุดควบคุมความโค้งอยู่ที่ (90,20) และ (210,20) แปลว่าเราไม่ได้วาดโค้งด้วยการจำพิกเซลทีละจุด แต่กำหนดกติกาทางเรขาคณิต แล้วให้คอมพิวเตอร์คำนวณเส้นโค้งให้ นี่คือเหตุผลที่โลโก้ ตัวอักษร ไอคอน และ illustration จำนวนมากสามารถย่อขยายได้โดยยังคมอยู่
และด้วยการเอารูปเรขาคณิตง่าย ๆ พวกนี้มาต่อกันไปมา เราก็จะสามารถเขียน svg เพื่อสร้างรูปที่ซับซ้อนขึ้นได้ อย่างเช่นโลโก้ของ Facebook อันนี้ก็สร้างมาจากคำสั่ง path ที่ปาดไปปาดมาเช่นกัน
หรือเอาให้เวอร์ไปอีก รูปรถข้างล่างนี้ก็สร้างขึ้นมาจาก svg เช่นกัน แค่ใช้คำสั่งหลาย ๆ อันมาซ้อน ๆ กันไปมากเท่านั้นเอง
แต่ภาพเวกเตอร์ก็ไม่ได้เหมาะกับทุกอย่าง ถ้าเป็นโลโก้ ไอคอน ตัวอักษร กราฟ แผนภาพ แผนที่ หรืองาน illustration ที่ประกอบจากเส้นและรูปทรง เวกเตอร์นั้นเหมาะมาก แต่ถ้าเป็นภาพถ่ายอาหาร ภาพท้องฟ้า ภาพหน้าแมว หรือภาพคนจริงๆ ที่มีรายละเอียดของแสงเงาซับซ้อน raster ยังเหมาะกว่า เพราะการอธิบายภาพถ่ายทั้งภาพด้วยเส้นและสมการทั้งหมดจะยุ่งยากและไม่คุ้มเท่าไร
สุดท้ายแล้ว คำว่าเวกเตอร์ในรูปเวกเตอร์จึงไม่ได้เป็นชื่อที่บังเอิญเหมือนกับเวกเตอร์ในคณิตศาสตร์ แต่มันเกิดจากกรอบคิดเดียวกัน คือการอธิบายสิ่งต่าง ๆ ผ่านพิกัด จุด ระยะ ทิศทาง สมการ เส้นตรง เส้นโค้ง และรูปทรงเรขาคณิต
สิ่งที่เราเคยเรียนในห้องเรียนอย่างพิกัดฉาก วงกลม วงรี เส้นตรง หรือภาคตัดกรวย ไม่ได้หายไปไหน มันแค่เปลี่ยนร่างมาอยู่ในไฟล์ .svgที่เราใช้เป็นไอคอนปุ่มกด โลโก้ ฟอนต์ กราฟ และภาพเล็กๆ บนหน้าเว็บที่เราเห็นทุกวัน ที่เราอาจจะไม่เคยรู้ตัวเลย
และเช่นเดิม ใครที่อยากสนับสนุนเพจเว็บไซต์ของเรา ให้ผลิตคอนเทนต์คณิตศาสตร์แบบนี้ต่อไป ก็สามารถสมัครเป็นสมาชิกรายเดือนได้โดยกดปุ่ม 'สมัครสมาชิก' ได้เลยนะฮะ
เอกสารอ้างอิง
https://developer.mozilla.org/en-US/docs/Web/SVG
https://www.w3.org/TR/SVG2/shapes.html
https://computerhistory.org/blog/the-remarkable-ivan-sutherland
https://www.w3.org/TR/svg-paths/
และถ้าใครอยากเข้าใจวิธีการสร้างรูปทรงต่าง ๆ ด้วย svg ผมแนะนำเว็บนี้เลยฮะ เขาอธิบายดีมาก แล้วก็มีตัวอย่างให้ลองกดเล่นได้ด้วย
Josh W. Comeau
