Sorting Algorithm Visualizer: ดู 5 อัลกอริทึมการเรียงลำดับคิดทีละขั้นบนหน้าจอ

นักศึกษาวิทยาการคอมพิวเตอร์ทุกคนต้องเจอกับ sorting algorithm ห้าตัวคลาสสิกเหมือนกันหมด นั่นคือ bubble sort, insertion sort, selection sort, merge sort และ quick sort ซึ่งส่วนใหญ่ถูกสอนผ่าน pseudocode บนกระดาน ปัญหาคือ pseudocode ไม่มีภาพประกอบ คุณไล่โค้ดด้วยมือได้ไม่กี่บรรทัด แต่ไม่เคยเห็นจริง ๆ ว่าทำไม algorithm หนึ่งต้องเปรียบเทียบเป็นพันครั้ง ขณะที่อีกตัวจบงานด้วยการเปรียบเทียบแค่ไม่กี่ร้อยครั้ง Sorting Algorithm Visualizer แก้ปัญหานี้ด้วยการเปลี่ยน algorithm แต่ละตัวให้เป็นภาพเคลื่อนไหวสด ๆ แท่งข้อมูลยกขึ้นลงและสลับที่จนเรียงครบ พร้อมตัวนับ (counter) ที่บันทึกการเปรียบเทียบ (comparison) และการสลับค่า (swap) ทุกครั้ง

เครื่องมือนี้ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องติดตั้งอะไรเลย เพียงเลือกขนาด array เลือก algorithm ตั้งความเร็วภาพเคลื่อนไหว แล้วกดรัน คุณจะช้า merge sort ลงเพื่อดูมันแบ่ง array ครึ่งหนึ่ง หรือเร่ง bubble sort เต็มความเร็วเพื่อรู้สึกถึงความเจ็บปวดของเวลาแบบกำลังสองบน array ใหญ่ ๆ ก็ได้

บทความนี้จะพาคุณไปดูวิธีใช้งาน visualizer สิ่งที่ algorithm ทั้งห้าตัวทำบนหน้าจอจริง ๆ และวิธีอ่านตัวนับ comparison กับ swap ให้เป็นมืออาชีพ

ทำไมต้องใช้ Sorting Algorithm Visualizer?

• เปลี่ยน pseudocode ที่เป็นนามธรรมให้เป็นภาพเคลื่อนไหว อ่านโค้ดที่เปรียบเทียบค่าสองตัวข้างกันเป็นเรื่องหนึ่ง แต่การเห็นแท่งที่สูงกว่าเดินข้ามจอสี่สิบครั้งเป็นอีกเรื่อง ภาพเคลื่อนไหวสร้าง intuition ที่ติดตัวไปนานกว่าการท่องจำ
• ทำให้ complexity มองเห็นได้ ตัวนับ comparison และ swap ช่วยให้คุณรู้สึกถึงความต่างระหว่าง O(n²) กับ O(n log n) แทนที่จะแค่ท่องจำ รัน bubble sort กับ quick sort บน array เดียวกันแล้วปล่อยให้ตัวเลขพูดแทน
• ทดลองได้อย่างอิสระ เดาผิดไม่เสียอะไรเลย ช้าภาพลง ปรับความเข้าใจ แล้วรันใหม่ ไม่มีเกรด ไม่มี deadline
• ปรับได้กับจังหวะการเรียนรู้ของทุกคน speed control ทำให้มือใหม่ตามทุก swap ได้ ขณะที่คนทบทวนดู partition ทั้งรอบของ quick sort จบในไม่กี่วินาที
• ไม่ต้องตั้งค่าอะไรเลย ทุกอย่างรันในเบราว์เซอร์ ไม่ต้องมี compiler ไม่ต้องเปิด IDE ไม่ต้องโหลดโค้ดตัวอย่างมาแค่เพื่อดูมันทำงาน
• เชื่อมทฤษฎีเข้ากับโค้ด พอได้เห็น partition เกิดขึ้นต่อหน้า โค้ด quick sort ตัวจริงในภาษาไหนก็ตามจะเข้าใจง่ายขึ้นทันที

คุณสมบัติหลัก

• ตัวนับทั้งสองอัปเดตสดระหว่างภาพเคลื่อนไหว คุณจะเห็นเลยว่าการทำงานครั้งไหนดันตัวเลขขึ้น
• เพราะปรับขนาด array ได้ คุณจึงทดสอบข้ออ้างคลาสสิกที่ว่าเพิ่มข้อมูลเป็นสองเท่าแล้วงานของ sort แบบ O(n²) จะโตเป็นสี่เท่า
• การประมวลผลฝั่ง client ทำให้เครื่องมือนี้ไวพอสำหรับใช้สาธิตสดในห้องเรียนหรือกลุ่มติว

วิธีใช้งาน Sorting Algorithm Visualizer

1. ตั้งขนาด array เริ่มจากขนาดเล็กประมาณ 10-20 ค่า เพื่อตามแท่งข้อมูลทีละแท่งได้ ส่วน array ใหญ่เหมาะกับตอนที่อยากเทียบประสิทธิภาพรวม
2. เลือก algorithm มีให้เลือกทั้ง bubble, insertion, selection, merge และ quick sort แนะนำให้เริ่มที่ bubble sort เพราะรูปแบบการ swap ค่าข้างเคียงตามง่ายที่สุด
3. ปรับความเร็ว ตั้งความเร็วช้าสำหรับรอบแรก แล้วเพิ่มขึ้นเมื่อเริ่มเข้าใจ pattern ความเร็วสูงเหมาะกับการดู partition ทั้งรอบของ quick sort
4. กดรัน sort กดเล่นแล้วดูแท่งข้อมูลเคลื่อนไหว สังเกตสีไฮไลต์ที่บอกว่าตอนนี้กำลังเปรียบเทียบหรือ swap ค่าคู่ไหนอยู่
5. อ่านค่าตัวนับ เมื่อ sort จบ ดูยอด comparison และ swap จดไว้ แล้วรันอีก algorithm บน array ลักษณะเดียวกันเพื่อเทียบผล

ดูทั้งห้า sort คิดทีละขั้น

ความสนุกจริง ๆ คือการเห็นห้ากลยุทธ์ที่ต่างกันสิ้นเชิงลงมือกับ array ชุดเดียวกัน

Bubble sort กวาดจากซ้ายไปขวา เปรียบเทียบค่าข้างเคียงทีละคู่ แล้วสลับถ้าเรียงผิดที่ บนหน้าจอจะเห็นค่าที่สูงที่สุดค่อย ๆ เดินไปกองที่ขอบขวา รอบละหนึ่งค่า ตัวนับบอกความจริงอย่างโหด: ประมาณ n²/2 ครั้งของ comparison และถ้าข้อมูลเรียงกลับด้าน จำนวน swap ก็ใกล้เคียงกันเลย

Insertion sort สร้างส่วนที่เรียงแล้ว (sorted prefix) ไว้ทางซ้าย ค่าใหม่แต่ละตัวจะยกตัวออกจากส่วนที่ยังไม่เรียง แล้วเดินไปทางซ้ายจนเจอที่ลงตัว ดู prefix โตขึ้นทีละแท่ง และสังเกตว่าถ้าข้อมูลเกือบเรียงอยู่แล้ว มันใช้ comparison น้อยมาก นั่นคือเหตุผลที่ sort แบบผสมในโลกจริงยังใช้ insertion sort กับข้อมูลช่วงสั้น ๆ

Selection sort คือนักล่าค่าน้อยสุด แต่ละรอบจะสแกนทั้งส่วนที่ยังไม่เรียงเพื่อหาค่าน้อยที่สุด แล้ววางลงตำแหน่งด้วย swap ครั้งเดียว ตัวนับ comparison ไต่ขึ้นสู่แถว n²/2 เสมอไม่ว่าข้อมูลจะเป็นแบบไหน ขณะที่ตัวนับ swap ต่ำอย่างน่าทึ่ง นี่คือการแลกเปลี่ยนแบบคลาสสิก: มองเยอะ แต่ขยับน้อย

Merge sort เล่นเกมต่างออกไป คือแบ่งแล้วรวม มันแบ่ง array ซ้ำ ๆ จนเหลือแท่งเดียว จากนั้น merge เริ่มทำงาน พับสองช่วงที่เรียงแล้วเข้าหากันเป็นช่วงที่ใหญ่ขึ้น ภาพเคลื่อนไหวทำให้พฤติกรรม O(n log n) เห็นได้ชัด จำนวนระดับการแบ่งยังน้อยมากแม้ array จะใหญ่ และแต่ละระดับแตะค่าทุกตัวเพียงครั้งเดียว

Quick sort เลือก pivot แล้ว partition ข้อมูลรอบ ๆ มัน กวาดค่าที่น้อยกว่าไปซ้าย ค่าที่มากกว่าไปขวา จน pivot ลงหลังบ้านของตัวเอง การเห็นขอบเขต partition เดินเข้าหากันคือวิธีเร็วที่สุดที่จะเข้าใจว่าทำไม recursion ถึงเวิร์ก และทำไมถ้าเจอ pivot ไม่ดีติด ๆ กัน มันถึงช้าลงจนใกล้เวลากำลังสอง

ตัวนับเปลี่ยนเรื่องทั้งหมดนี้ให้เป็นตัวเลขที่จับต้องได้ บน array สับหว่าง 50 ค่า bubble sort อาจทำ comparison เกินพันครั้งและ swap หลายร้อยครั้ง ขณะที่ merge sort จบงานเดียวกันด้วยเศษเสี้ยวของทั้งสองค่า จำนวน swap ยังบอกต้นทุนการเขียนข้อมูลด้วย selection sort แทบไม่ swap เลย ซึ่งสำคัญมากเมื่อการเขียนมีราคาแพง

กรณีการใช้งานจริง

สร้าง intuition ให้การบ้านวิชา CS

การบ้านชอบถามว่า "อธิบายว่าทำไม merge sort ชนะ bubble sort" แทนที่จะคัด Big-O จากหนังสือ ให้รันสอง algorithm นี้บน array 50 ค่าเดียวกัน จดตัวนับตอนจบ แล้วอ้างตัวเลขจริงในคำตอบ คุณยังจะเห็นโครงสร้าง divide and conquer ที่โจทย์อ้อมแอ้อมพาไปด้วย

เตรียมตัวสัมภาษณ์งาน

สัมภาษณ์บนกระดานมักให้ไล่ partition ของ quick sort ด้วยมือ พอได้ดูการกวาด partition สิบกว่ารอบใน visualizer การร่างมันจากความจำจะกลายเป็นเรื่องเครื่องกล วิธีเดียวกันใช้อธิบายว่าทำไม bubble sort เป็น O(n²) เพราะคุณเห็นลูปซ้อนกันครูดไปครูดมาแล้ว

สาธิตการสอนในห้องเรียน

ฉายเครื่องมือนี้บนจอ ช้าภาพลง แล้วให้นักเรียนทายว่า swap ถัดไปจะเกิดที่คู่ไหนก่อนกดต่อ ตัวนับสดเปลี่ยนคาบเรียนให้เป็นข้อมูล หยุดหลังแต่ละ algorithm จบแล้วเทียบยอดรวมกันทั้งห้อง

เลือก sort ให้เหมาะกับข้อมูลจริง

ข้อมูลเกือบเรียงอยู่แล้ว? ดู insertion sort ไหลผ่านด้วย comparison น้อยนิด แล้วคุณจะเข้าใจว่าทำไม library จริงถึงหยิบมันใช้กับข้อมูลช่วงสั้นหรือเกือบเรียง ข้อมูลที่การเขียนมีราคาแพง? จำนวน swap ต่ำของ selection sort เล่าเรื่องนี้ให้ฟังทันที

แนวทางปฏิบัติที่ดี

• รันทุก algorithm บน array เดียวกัน ข้อมูลเหมือนกันคือการเทียบที่ยุติธรรมเท่านั้น ขนาดเท่ากัน ค่าเท่ากัน แล้วปล่อยให้ตัวนับตัดสินผู้ชนะ
• ช้าลงตอนดู merge หัวใจของ merge sort อยู่ที่ช่วงรวมข้อมูล ซึ่งพุ่งผ่านจอไวมากถ้าเร่งสปีด ลดความเร็วแล้วดู merge หนึ่งครั้งตั้งแต่ต้นจนจบ
• นับจำนวนการทำงาน ไม่ใช่วินาที ความยาวภาพเคลื่อนไหวขึ้นกับ speed control ล้วน ๆ ตัวนับ comparison กับ swap ต่างหากที่เป็นตัวชี้วัดจริง
• เริ่มเล็กแล้วค่อยขยาย ตามแท่งสิบตัวให้สบายก่อน แล้วค่อยเพิ่มขนาด array การขยายคือวิธีให้คุณรู้สึกถึงช่องว่างระหว่างการโตแบบกำลังสองกับ log-linear
• ทายก่อนกดเล่น หยุดกลางภาพ เดาว่า comparison หรือ swap ถัดไปคือคู่ไหน แล้วกดต่อ การทายคือทางลัดจากการดูสู่การเข้าใจ
• ลองข้อมูลแบบโหด array ที่เรียงกลับด้านคือฝันร้ายของ bubble sort และบางครั้งของ quick sort ด้วย worst case สอนได้มากกว่าข้อมูลสุ่มเรียบร้อย

พร้อมเลิกท่องจำแล้วเริ่มเห็นภาพจริงหรือยัง? เปิด Sorting Algorithm Visualizer ตั้ง array ของคุณ แล้วดูห้ากลยุทธ์วิ่งแข่งกันเข้าเส้นชัยเดียวกัน โดยมีตัวนับวิ่งให้เห็นตลอดทาง

เครื่องมืออื่นที่คุณอาจสนใจ:

• Regex Explainer — แยกส่วน regular expression ให้เข้าใจทีละชิ้น
• SQL Join Visualizer — ดูตารางรวมกันผ่าน join แบบคลิกเดียว
• Graphviz DOT Renderer — เปลี่ยนโค้ด DOT ให้เป็นไดอะแกรมสะอาดตา

ขอให้สนุกกับการเรียนรู้!

คำถามที่พบบ่อย

ถ: ต้องเขียนโค้ดเป็นก่อนถึงจะใช้ Sorting Algorithm Visualizer ได้ไหม? ตอบ: ไม่จำเป็นเลย ภาพเคลื่อนไหวถูกออกแบบให้เข้าใจด้วยสายตา จึงไม่ต้องมีพื้นฐาน programming เลย ถ้ารู้ syntax นิดหน่อยจะยิ่งสนุกขึ้นเมื่อเชื่อมสิ่งที่เห็นเข้ากับโค้ดจริง

ถ: ควรเริ่มดู algorithm ไหนก่อน? ตอบ: เริ่มที่ bubble sort เพราะรูปแบบการ swap ค่าข้างเคียงตามง่ายที่สุดเมื่อตั้งความเร็วช้า พอเข้าใจแล้วให้กระโดดไป quick sort เพื่อดูว่ากลยุทธ์ที่ฉลาดกว่าจัดการ array ชุดเดิมอย่างไร

ถ: ทำไม selection sort ถึงมี comparison เยอะแต่ swap น้อยมาก? ตอบ: เพราะมันต้องสแกนทั้งส่วนที่ยังไม่เรียงเพื่อหาค่าน้อยสุดก่อนขยับอะไร แรงงานทั้งหมดหมดไปกับการมอง และใช้ swap แค่ครั้งเดียวในการวางแต่ละค่าลงตำแหน่ง

ถ: ใช้กับมือถือหรือแท็บเล็ตได้ไหม? ตอบ: ได้ ทุกอย่างรันในเบราว์เซอร์ เบราว์เซอร์มือถือหรือเดสก์ท็อปสมัยใหม่ใช้งานได้หมด และไม่มีอะไรถูกติดตั้งลงเครื่องของคุณ