อธิบาย MilkDrop presets: สมการไม่กี่บรรทัดสร้างภาพได้อย่างไร

ใครที่เคยใช้ MilkDrop ของ Winamp ต้องจำ presets ได้ อุโมงค์ที่หายใจตามจังหวะกระเดื่อง ควันที่ม้วนออกจากคลื่นเสียง หรืออันที่ดูเหมือนโลหะเหลว สิ่งที่คนส่วนใหญ่ไม่เคยเห็นคือ presets พวกนั้นเล็กแค่ไหน MilkDrop preset เป็นแค่ไฟล์ข้อความสั้น ๆ หลายไฟล์มีแค่ไม่กี่สิบบรรทัด และภาพส่วนใหญ่ที่เห็นก็มาจากไอเดียง่าย ๆ เพียงข้อเดียว

ไอเดีย: ทุกเฟรมสร้างจากเฟรมก่อนหน้า

MilkDrop ไม่ได้วาดแต่ละเฟรมใหม่ตั้งแต่ศูนย์ มันเอาเฟรมก่อนหน้ามาขยับนิดหน่อย ทั้งซูม หมุน บิด และเลื่อน แล้วทำให้จางลงเล็กน้อย จากนั้นวาดคลื่นเสียงของเพลงทับลงไป แล้วทำแบบเดิมซ้ำอีก ประมาณหกสิบครั้งต่อวินาที

เพราะแต่ละเฟรมส่งต่อไปยังเฟรมถัดไป การขยับเล็ก ๆ จึงสะสมกันขึ้น ซูมเฟรมละ 1% กลายเป็นอุโมงค์ หมุนนิดเดียวกลายเป็นเกลียว จางลงเบา ๆ ก็ทิ้งร่องรอยไว้ข้างหลังทุกอย่าง หน้าที่ของ preset คืออธิบายการเคลื่อนไหวนั้น และทำให้มันตอบสนองต่อเพลง

เคล็ดลับทั้งหมด: แต่ละเฟรมคือเฟรมก่อนหน้าที่ถูกขยับ ทำให้จาง และวาดทับ ภาพประกอบ

ในไฟล์ .milk มีอะไรบ้าง

preset คือไฟล์ข้อความธรรมดานามสกุล .milk เขียนเป็นบรรทัดแบบ key=value เปิดด้วยโปรแกรมแก้ไขข้อความตัวไหนก็ได้ โดยคร่าว ๆ มีห้าส่วน

ค่าเริ่มต้น ซูม หมุน และบิดแรงแค่ไหน ภาพจางเร็วแค่ไหน (decay) วาดคลื่นเสียงแบบไหน และใช้สีอะไร

สมการ per-frame โค้ดที่รันหนึ่งครั้งต่อเฟรมและเปลี่ยนค่าเหล่านั้นไปตามเวลา ตรงนี้แหละที่เพลงเข้ามาเกี่ยว MilkDrop ส่งตัวแปรอย่าง bass, mid และ treb ซึ่งบอกความดังของแต่ละย่านความถี่ในขณะนั้น พร้อมค่าที่ถูกทำให้เรียบแล้ว และ time เป็นวินาที ให้กับ preset

ตัวอย่างเพื่อให้เห็นภาพ ในรูปแบบของไฟล์จริง:

per_frame_1=zoom = 1.0 + 0.04*bass;
per_frame_2=rot = 0.03*sin(time*0.5);
per_frame_3=wave_r = 0.5 + 0.5*sin(time);

แบบนี้ทำให้ภาพพุ่งไปข้างหน้าทุกครั้งที่เบสกระแทก แกว่งช้า ๆ ไปซ้ายขวา และเปลี่ยนช่องสีแดงของคลื่นเสียงไปตามเวลา

สมการ per-pixel โค้ดที่รันกับจุดต่าง ๆ บนกริดทั่วหน้าจอ โดยรับตำแหน่งของแต่ละจุดเป็นอินพุต: x และ y หรือระยะห่าง rad และมุม ang จากจุดศูนย์กลาง ถ้าเปลี่ยน zoom ตาม rad ขอบจะเคลื่อนเร็วกว่าตรงกลาง ถ้าเปลี่ยน rot ตาม ang ภาพจะบิดเป็นวังวน

per_pixel_1=zoom = zoom + 0.03*rad;

Custom waves และ shapes คลื่นเสียงและรูปหลายเหลี่ยมเพิ่มเติมที่ preset วาดขึ้นเอง แต่ละตัวมีสมการเล็ก ๆ ของตัวเอง พวกนี้คือวงแหวน ดวงดาว และอนุภาคที่เต้นอยู่บนการเคลื่อนไหว

Shaders (MilkDrop 2) MilkDrop 2 ซึ่งมากับ Winamp 5.5 ในปี 2007 เพิ่ม pixel shader เข้ามาสองตัว คือ warp shader ที่เปลี่ยนวิธีส่งต่อเฟรมก่อนหน้า และ composite shader ที่เปลี่ยนวิธีแสดงเฟรมที่เสร็จแล้ว แสงเรือง การเปลี่ยนสี และลายคาไลโดสโคปของ presets ยุคหลังมาจากตรงนี้

preset แบบย่อ ของจริงยาวกว่านี้ แต่มีสี่ส่วนเหมือนกัน ภาพประกอบ

ทำไมถึงมี presets มากมายขนาดนี้

presets สั้น อ่านง่าย และให้อภัยความผิดพลาด เปลี่ยนตัวเลขตัวเดียวก็เห็นผลทันที ทำให้ MilkDrop เป็นหนึ่งในวิธีเล่นกับโค้ดที่เป็นมิตรที่สุดเท่าที่เคยมีมา คนเป็นพัน ๆ เขียน presets บ่อยครั้งก็ด้วยการก๊อปของคนอื่นมาแก้ แล้วแชร์ต่อกันในฟอรัม Winamp แพ็ก presets ใหญ่ ๆ ที่ยังส่งต่อกันอยู่ทุกวันนี้คือผลของการรีมิกซ์กันมายี่สิบปี

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

presets เก่า ๆ รันได้อย่างไรในวันนี้

MilkDrop ตัวจริงรันบน Windows ด้วย DirectX และ presets ของมันใช้ภาษา shader ของ DirectX โปรเจกต์ที่สร้างขึ้นใหม่ในยุคนี้จึงต้องแปลงมัน:

• projectM อ่านไฟล์ .milk ได้โดยตรงในเอนจินของตัวเอง
• Butterchurn รันบน WebGL และใช้ presets ที่แปลงมาจากไฟล์ .milk ด้วยตัวแปลงของมันเอง ซึ่งแปลงสมการเป็น JavaScript และแปลง shaders เป็นภาษา shader ของเว็บ presets คลาสสิกส่วนใหญ่ผ่านการแปลงมาได้ดี มีบางตัวที่อาศัยลักษณะเฉพาะของต้นฉบับซึ่งจะดูต่างไป

ลองบน Mac

Konpo โปรแกรมฟังเพลงฟรีบน Mac ของเรา มีตัวแสดงภาพ Butterchurn ติดมาในตัว กด ⇧⌘V ระหว่างเล่นเพลง มันจะเปิดขึ้นในหน้าต่างของตัวเองแล้ววนเล่น presets ไปเรื่อย ๆ คลิกขวาที่หน้าต่างเพื่อโหลดโฟลเดอร์ presets ของคุณเอง หรือกลับไปใช้ชุดที่มากับแอป

ถ้าเพิ่งเริ่มรู้จักเรื่องทั้งหมดนี้ ลองเริ่มจากเรื่องราวของ Winamp และ MilkDrop และถ้าอยากได้ประสบการณ์ Winamp ส่วนที่เหลือบน Mac ด้วย อ่านWinamp สำหรับ Mac: ห้าวิธีเรียกความรู้สึกเดิมกลับมา