Videos → Dance with Three.js! สร้างท่ารำไทยใหม่ๆ ด้วย JavaScript

แนะนำตัวและเกริ่นนำเรื่องโปรเจค Cyber Subin0:00

สวัสดีครับทุกคน ภูมิเองนะครับ ภูมิเจ้าเก่า สวัสดีครับ จริงๆ วันนี้เดี๋ยวภูมิขอเซ็ต timer เนาะ เพราะวันนี้น่าจะพูดเพลิน

ชื่อภูมิครับ จริงๆ เป็นโปรแกรมเมอร์ ตอนนี้ทำงานอยู่ที่ MetaBase ครับ แล้วก็จริงๆ ภูมิเนี่ยเวลานอกเวลาเราก็จะชอบทำโปรเจคเนาะ บางทีภูมิก็เขียน OS เอาไว้แต่งเพลงอะไรแบบนี้ แต่มีโปรเจคนึงที่ภูมิทำแล้วอยากเอามาแชร์กันครับ ชื่อ Cyber Subin เป็นโปรเจคที่ภูมิทำกับทีม MIT Media Lab แล้วก็ กลุ่มพิเชษฐ กลั่นชื่น Dance Company ทอล์คนี้จริงๆ ก็คือชื่อ Engineering Behind Cyber Subin นะครับ จะมาเล่าให้ฟัง แต่โปรเจคนี้ก็จริงๆ จะเกิดขึ้นไม่ได้เลย ถ้าเกิดไม่มีพี่ๆ ในทีมนะครับ อันนี้ก็เป็นพี่ๆ ในทีม Cyber Subin มีทั้งคนไทย มีทั้ง dancers จากต่างชาตินะครับ คนฮ่องกง

ก็เป็นทีมที่ไม่ได้ใหญ่มาก แต่ว่าก็ทำอะไรเจ๋งๆ ได้ แล้วก็โชว์นี้เราจะมีไปต่างประเทศ ยกเว้นประเทศไทย

เพราะบางกระทรวงเขาไม่อยากให้เราแสดงนะครับ ล้อเล่น ล้อเล่น เอ่อ ไม่พูดต่อดีกว่า

แต่ว่าวันนี้จริงๆ ภูมิก่อนจะเริ่มทอล์คอ่ะ อยากจะมาเปิดด้วยคำถามง่ายๆ อันนี้อยากถามจริงๆ เลยนะครับ ใช้ไมค์ภูมิก็ได้

คำถามทำไมชอบเขียนโค้ด1:18

อยากถามว่าทำไมเราถึงชอบโค้ดครับ เอาแค่คนที่ชอบนะ ใครไม่ชอบอยู่เงียบๆ นะ มีใครชอบ มีใครอยากตอบมั้ยครับ พี่เวิร์ลแล้วกันมา ทำไมชอบเขียนโค้ดครับ ห้ามตอบว่าเพราะว่ารักอีวานนะ ผมรู้สึกสนุกกับการแก้ปัญหา เหมือนเราเล่นเกม ก็เลยรู้สึกว่าชอบเขียนโค้ดครับ เฮ้ย ขอบคุณครับ เฮ้ย เกือบเงียบแล้ว ภูมิรู้สึกว่าจริงๆ หลายคน น่าจะมีคำตอบคล้ายๆ กันเนาะ ว่าชอบเขียนโค้ด เพราะว่าชอบแก้ปัญหา หรือว่าชอบสร้าง สำหรับภูมิอ่ะ เราชอบเขียนโค้ด สมัยตอนที่เราเล่น Minecraft ประมาณตอน 4-5 ขวบ คือตอนที่เราได้เขียน Java ครั้งแรก ตอนนั้นคือสมัยเราประมาณ 5 ขวบ มันก็จะมีม็อดใน Minecraft ใช่มั้ยฮะ ตอนนั้นเราก็อยากให้มัน มีของขึ้นมาในโลกในเกม อยากให้มันมี shader สวยๆ อยากให้มันมีต้นไม้ อยากให้มีเรือ อันนี้เราวาดเองด้วยนะ สมัยตอนเด็ก แล้วเรารู้สึกว่า เฮ้ย พอเขียนโค้ดได้ มันเหมือนเราเป็นนักเวทมนตร์อ่ะ เราสามารถเขียนโปรแกรม เพื่อสร้างโปรแกรม 3D สร้าง simulation สร้างอะไรขึ้นมาก็ได้

จริงๆ เป็นเหตุผลนึง ที่เราทำ Creatorsgarten กับเพื่อนๆ เพราะเรารู้สึกว่าโค้ดมันเอาไปใช้ สร้างอะไรได้เยอะจริงๆ อ่ะฮะ เรามีจัดงานกับ กทม. งานแก้ปัญหากรุงเทพฯ เรามีจัดงานเหมือนเขียน โปรแกรมขึ้นมาเพื่อวิเคราะห์ biology เรารู้สึกว่าโค้ดทำอะไรได้เยอะ มีงานนึงเอา blockchain มาแก้ มาเก็บผีบันพบุรุษด้วย

คือมันทำอะไรได้เยอะจริงๆ

อ้างอิงคำพูดของ Richard Feynman2:42

มีใครเคยเห็น quote นี้มั้ยฮะ อันนี้เป็น quote ของ Richard Feynman ก่อนเขาจะเสียไป อันนี้กระดานดำเนี่ยฮะ มันเขียนไว้ว่า What I cannot create, I cannot understand. อะไรที่เราสร้างไม่ได้ เราจะไม่สามารถเข้าใจมันได้จริงๆ แล้วเรารู้สึกว่าการเป็นโปรแกรมเมอร์อ่ะ มันทำให้เราสร้างของได้ คราวนี้คำถามที่ 2 ฮะ

คำถามเกี่ยวกับการเรียนนาฏศิลป์3:02

มีใครที่ชอบเรียนนาฏศิลป์บ้างฮะ ห้องนี้

อ่า ชิบหายเงียบแล้ว ครูนาฏศิลป์เสียใจละ งั้นเรา invert ใส่ not statement ใครไม่ชอบเรียนนาฏศิลป์บ้าง อ่า ครูน่ะ เฮ้ย นาฏศิลป์เป็นของมีครู พูดอย่างงี้ เดี๋ยวครูมาหลอกนะ อยากรู้ฮะ อยากถาม คำถาม ไม่เอาพี่เวิลด์ ขอคนอื่นบ้าง ทำไมถึงไม่ชอบ เรียนนาฏศิลป์ ครูไม่อยู่ฮะ ไม่เป็นไร ตอบได้ สะดวกมั้ย

ฮะ ใครก็ได้ มาๆ ฮะ ทำไมไม่ชอบเรียนนาฏศิลป์ฮะ เหมือนมันต้องตั้งวงแล้วมีท่ามันดูยากอะไรเงี้ยค่ะ

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

การ Fork และการพัฒนาซอฟต์แวร์4:11

คำตอบของภูมิละกัน ภูมิว่ามันคือปุ่มๆ นี้เว้ย ใน GitHub ชื่อ fork คืออย่างงี้ฮะ เรารู้สึกว่าคนไทยอ่ะ เราให้ความสำคัญกับปุ่มนี้น้อยมาก คือเรามีซอฟต์แวร์ใช่มั้ย เราก็จะชอบเข้าไปใช้ รู้สึกว่าซอฟต์แวร์นี้มันดี แต่เราไม่ค่อยกด fork กันเลยเว้ย แต่ว่าจริงๆ ซอฟต์แวร์ในโลกเนี่ยฮะที่มันเกิดขึ้นได้ เรารู้สึกว่ามันเป็นเพราะว่าเราแชร์ เรารีมิกซ์กัน หลายครั้งเราเขียนโปรแกรมสมัยเนี่ย เราแทบจะเขียนไม่ได้ ถ้าไม่มี ChatGPT ไม่มี Stack Overflow เพราะเราก็ build on งานที่คนอื่นเค้าทำมาใช่มั้ยฮะ หรือโปรแกรมเจ๋งๆ มันก็เกิดจากการที่มันเกิด การ fork การ collaborate มีใครรู้มั้ยฮะว่ารูปนี้คือรูปอะไร พอเดาได้มั้ย

ประวัติท่ารำแม่บท 59 ท่า4:52

รูปนี้คือรูป อันนี้เอาพวกเส้นๆออกไปก่อนนะครับ แค่ตัวรูปถ่ายเนี่ย มันคือรูปถ่ายแรกของท่ารำแม่บท 59 แม่บท

ภาพนี้ถ่ายเมื่อปี 1923 ครับ ตอนนั้นเราก็คุยกับพี่พิเชษฐ์ที่เป็นครูนาฏศิลป์ เค้าบอกความเศร้าอย่างนึงของนาฏศิลป์ไทยคือมันไม่มีการ fork ครับ มันมีอยู่ repo เดียวครับ แล้วถ้าใคร repo นี้ protect ด้วย ถ้าใครไปแก้ repo นี้จะโดนจับนะครับ คือเป็น repo ที่มี firewall แน่นหนามาก เค้าบอกว่ามันผ่านไป 101 ปีแล้วครับ ตั้งแต่ภาพนี้ถูกถ่ายขึ้นมา ยังไม่มีใครเคย fork repo นี้ได้เลย ทุกครั้งที่คนพยายามจะแก้ หรือเพิ่มเติมท่า 59 แม่บทเนี่ย เค้าก็จะบอกว่าเอ้ยเดี๋ยวผีมาหลอกนะ แบบมันเป็นของมีครู เรา notion ของวัฒนธรรมของการที่มีครูเนี่ย มันทำให้ repo นี้มัน fork ไม่ได้ครับ คราวนี้ถ้าเรานึกถึงเวลา 100 ปีเนี่ยครับ มันเป็นเวลาที่ยาวนานมากๆนะครับ เราว่าถ้าลองเทียบง่ายๆเลย ลองเทียบวัฒนธรรมแบบของ

เอาเป็น K-pop ละกัน 100 ปีของ K-pop มันผ่าน iteration มาเยอะมากๆครับ ลองคิดว่าวันนึงเนี่ย เฮ้ยมันเกิดอะไรขึ้นกับ K-pop วันนึงมันมี MV มันมี choreography ใหม่เกิดขึ้นเยอะเท่าไหร่ แต่ประเทศไทยครับ ไม่ว่าเราจะพยายามทำเท่าไหร่ เรายังหลุดพ้น repo นั้นไม่ได้ คือไม่ว่าเราจะทำ มีโขนแสดงโขนกี่รอบ สุดท้ายมันยัง base บนท่า 59 แม่บทอยู่ดี มันคือ repo ที่ไม่มีการเปลี่ยนครับ มีใครเห็นภาษานี้รึยังครับแบบตอนเช้า มีใครเห็นภาษา Bend ยัง อ้ามีแล้ว คือภาษา Bend เนี่ยครับ เป็นภาษาโปรแกรมที่มันใช้ model เรียกว่า interaction combiner คือเวลาเราเขียนโปรแกรมทั่วไป เราต้องบอกมันให้ parallel ใช่ไหม ถ้าสมมุติผมจะคำนวณแบบ เอาเลขมาบวกกันน่ะ ผมต้องบอกมันว่าเอ้ยคุณต้อง parallel มันถึงจะทำ ภาษานี้เป็นภาษาที่ parallel อัตโนมัติครับ แทนที่จะใช้ CPU แค่คอร์เดียว มันใช้ CPU ทั้งหมดที่เรามี คือเรามี GPU เรามีแบบ 16 หมื่นกว่า thread มันก็ใช้หมดนั่น

เนี่ยแหละครับ คือความแตกต่างระหว่างนาฏศิลป์ไทยกับ ความแตกต่างระหว่าง dance คือเรา operate อยู่บน CPU คอร์เดียว ในขณะที่วัฒนธรรมอื่นมันเกิดการ fork มันเกิดการ modify มันเหมือนเรารันบน GPU เพราะฉะนั้นมันก็ไม่แปลกครับว่าทำไมวัฒนธรรมมันจะต่างกัน

แนะนำทีมงานและแนวคิดการ Fork นาฏศิลป์7:14

จนกระทั่งวันที่ภูมิได้เจอพี่ๆ 2 คนนี้ครับ คนซ้ายชื่อพี่พีพี คนขวาชื่อพี่พิเชษฐ์ พี่พีพีเค้าทำงานเป็น ตอนนี้เป็น PhD student กำลังจะเป็น postdoc แล้ว ทำอยู่ที่ MIT Media Lab ครับ ส่วนคนขวาพี่พิเชษฐ์เนี่ยเค้าเป็นครูนาฏศิลป์ เป็น choreographer เป็นคนที่สร้างท่านาฏศิลป์ใหม่ขึ้นมา ผมรู้สึกว่าไอเดียของพี่พิเชษฐ์ครับมันง่ายมากเลย มันคือไอเดียมันคือ จะเกิดอะไรขึ้นถ้าเราสามารถ fork นาฏศิลป์ได้

ตอนที่เราคุยกับพี่ๆ เค้าครับ ก็มีคำถามนึงที่เราถามพี่ๆ เหมือนกันว่า ถ้าพี่จะสร้างนาฏศิลป์ใหม่ขึ้นมาเนี่ย ถ้าพี่จะ fork มันมา แล้ว source code มันอยู่ตรงไหนครับ ถ้าไม่มีโค้ดเราทำอะไรไม่ได้ถูกมั้ย พี่เค้าบอกเราครับ เป็นความน่าเศร้าของประเทศนี้คือ ไฟล์ binary สุดท้ายที่เรามีครับ มันมีอยู่เมื่อ 100 ปีก่อน 100 ปีก่อนภาพถ่ายภาพนั้น เมื่อปี 1900 กว่าครับ คือสิ่งสุดท้ายที่เรามี ในเชิงหลักฐานเชิงนาฏศิลป์ เราไม่มีข้อมูลเก็บไว้เลยว่า ทำไมท่า 59 แม่บทมันถึงเป็นอย่างนั้น ทำไมพรมสีหน้าต้องเป็นอย่างนี้ แต่ละท่ามันมีแค่ท่าเลยครับ มีท่าที่สอนมา แต่มันไม่ได้มีวิธีบอกว่า คุณจะ hack คุณจะ modify มันได้ยังไง source code มันหายไปแล้วครับ แต่ถ้าเราเป็นโปรแกรมเมอร์ที่ดีครับ คำถามถัดไปที่เราจะถามคือ source code มันหายไปแล้ว เรา modify มันได้ยังไง เราอ่าน assembly มันได้มั้ย เราอ่าน assembly ของท่ารำ แล้วเราพยายามเข้าใจมันได้มั้ย ว่าจริงๆ ท่ารำเนี่ยมันสร้างขึ้นมาได้ยังไง แล้วเรา open source มันครับ เราทำสิ่งเนี่ย ให้ทุกคนมาสร้างท่ารำของตัวเองได้

คำถามครับคือ assembly ของนาฏศิลป์ไทยคืออะไร อะไรคือโค้ดแบบ move x all ของนาฏศิลป์ไทย คำตอบนึงของพี่พิเชษฐ์ครับ เนื่องจากการ reverse engineer มันไม่ได้เป็นอะไรที่เป๊ะๆ เนาะ คือเรามีแบบ binary ของเกม Mario อยู่ใช่ป่ะ ถ้าเราเขียน source code ขึ้นมาครับ มันก็ไม่เหมือนกับที่เค้าทำตอนแรกไว้หรอก มันย่อมมีความแตกต่างใช่มั้ย แต่ว่าอันนี้ครับพี่เค้าก็ตีความ ละกันใช้คำว่าตีความ นาฏศิลป์ออกมาเป็น 6 elements

อธิบายแนวคิด Six Elements ในการแยกองค์ประกอบของท่ารำ9:26

หรือที่พี่เค้าเรียกว่า six elements ซึ่งใน 6 element เนี่ยครับ จริงๆ มันมีอยู่กับท่า dance ท่า choreography ของแบบทุกประเทศเลย ซึ่งบาง dance เนี่ย มันก็จะใช้ element บาง element มากกว่า ยกตัวอย่างเช่นการเต้นแบบ African dance มันอาจจะใช้พลังงานมากกว่า ใช้ movement ใช้ access point มากกว่า ซึ่งพี่เค้าก็มองว่าถ้าเกิด เราสามารถถอดรหัส DNA ของ ท่าเต้นออกมาได้ครับ เราก็สามารถเข้าใจว่าจริงๆ เนี่ย ตอนที่เค้าคิดค้นท่าแม่บทใหญ่เนี่ย เค้าคิดมันขึ้นมาได้ยังไง แล้วก็ rebuild มันขึ้นมา ซึ่งอันนั้นก็เป็นไอเดีย ของโปรเจคของพี่พิเชษฐ์ครับ ที่ชื่อว่า number 60 จะเกิดอะไรขึ้นถ้าเราสามารถ commit ท่าที่ 60 เข้าไปได้ เราไม่ได้มีท่าเดียวด้วยนะครับ มี infinity ท่า number ท่ารำท่า 60 ในแม่บทเนี่ย จะเป็นท่าอะไรก็ได้ อันนี้เป็นงานที่พี่เค้าทำมา ตั้งแต่ตอนที่ภูมิยังไม่เกิดครับ ทำมาตั้งแต่แบบ 2004

ตอนนั้นภูมิน่าจะประมาณ 2 ขวบมั้ง นานมาก เค้าใช้เวลาอยู่แบบประมาณ 20 กว่าปีครับ กับการ reverse engineer ท่า ใช้ทั้งความเข้าใจในเชิงนาฏศิลป์ ใช้ทั้งคณิตศาสตร์ ใช้ทั้ง physics จนกระทั่งประมาณตอนปี 2021 นะครับ ตอนนั้นเราก็มี workshop นึงกัน ชื่อ workshop แฮ็กนาฏศิลป์ แฮ็กนาฏศิลป์เนี่ยไอเดียมันเหมือน hackathon ทั่วไปเลย เราไป hackathon ปกติเขาก็จะบอกเราว่า ลองมาแก้ปัญหาน้ำท่วมใช่ไหมครับ ตอนภูมิจัด open source hackathon แต่ hackathon นี้บอกโจทย์มีอย่างเดียวก็คือ เราจะทำยังไงที่เราจะ open source นาฏศิลป์ให้ได้ ให้คนมาสร้างท่ารำของตัวเอง based on ระบบนี้ขึ้นมา

เริ่มการสาธิตโปรแกรม Cyber Subin11:06

ตอนนั้นเราก็นัดเจอกันที่หอศิลป์แล้วก็ เล่น workshop กันนะครับ มีภาพนี้ที่พี่เขาบอกว่าเขาชอบมาก มันคือภาพของการที่เราพยายามเข้าใจ diagram ตอนนั้นเหมือนภูมิลองเขียน React เนาะ เราก็ลองเขียน React ที่เราเอา diagram ในนาฏศิลป์เนี่ยแหละ ลองเอามาแปลงเป็น code ตอนนั้นเขียนเป็น SVG จริงๆ ก็คือถ้าเขียนมือครับ หน้าตามันจะประมาณนี้ คือเราพยายามเข้าใจ element ต่างๆ ก่อน ยกตัวอย่างเช่น energy พลังงานในร่างกายเนี่ยมันไหลเวียนยังไง หรือว่า access point จุดต่างๆ ที่มันทำให้เกิดการเปลี่ยนแปลงมันเกิดขึ้นตรงไหน ตอนนั้นเราก็เริ่มจากการเข้าใจ domain นะครับ ถ้าเกิดใครทำงานบริษัทจะรู้จัก DDD เนาะ domain driven design อันนี้เหมือนเราพยายามเข้าไปเข้าใจ domain ก่อน เราพยายามสร้าง ubiquitous language

คือภาษาที่เรากับครูนาฏศิลป์คุยกันได้ แล้วเป็นภาษาเดียวกันกับที่เราใช้ใน code คือถึงเราทำงานแบบศิลปะครับ การเข้าใจ domain ก็ยังสำคัญอยู่วันยังค่ำแหละ แต่ตอน hackathon จริงๆ เรามีอีกอันนึงที่น่าสนใจด้วยก็คือ เราลองเอาข้อมูลจากวิดีโอฟีดนะครับ อันนี้น่าจะเป็น run Python แล้วเราก็ลองพล็อตออกมาดูว่า จริงๆ เนี่ยระหว่างท่าที่เป็นท่าแม่บท

กับท่าที่เราพยายาม modify มันนะครับ มันต่างกันยังไง มันมี variance ยังไง ซึ่งอันนี้เราลองเอาพวกข้อมูลจาก อันนี้น่าจะไม่ได้เป็น motion capture ครับ อันนี้เป็น open pose ก็คือเราทำ pose estimation ดูว่ากระดูก joint มันน่าจะอยู่ตรงไหน แล้วก็มาพล็อตกราฟ แต่ว่าเอาจริงๆ ก็คือมันก็จะเห็นความแตกต่างแหละ แต่เรายังไม่เข้าใจมันจากตัวกราฟว่า ความแตกต่างมันอยู่ตรงไหน ซึ่งความน่าสนใจก็คือถ้าเกิดเราเอาท่า dance แต่ละแบบครับ ลองมาพล็อตกราฟ เราก็จะเห็นว่ามันก็จะมี variance ของมันเหมือนกันว่า ถ้า dance ที่เป็น breakdance มันจะเน้นอะไร

หรือท่าที่เป็น swing มันจะเน้นอะไร แต่ก็น่าเสียดายว่าข้อมูล dataset เราครับ อย่างที่ภูมิบอกคือมันน้อยเกินจนมันเอามาทำ

Markov chain หรือเอามาทำ LSTM เอามาทำ machine learning ไม่ได้ แปลว่าเราไม่สามารถ rely ว่า เราโยนเข้าไปในโมเดลแล้วโมเดลจะสร้างท่าให้เราได้ครับ เราต้องเข้าใจมันจาก assembly เลย ตอนนั้นเราก็เลยเปิดโปรเจคที่ชื่อว่า Synthetic Cybernetics Dance กัน โปรเจคเนี่ยครับมันเริ่มจากคำถามง่ายๆ มากว่า การเต้นเนี่ยมันเป็น cybernetics ยังไง แต่ก่อนอื่นเราต้องรู้ก่อนใช่ไหมครับว่า cybernetics จริงๆ มันคืออะไร cybernetics เนี่ยครับบางคนที่เคยได้ยินคำนี้ ก็จะรู้สึกว่าเออ cyber cyber มันน่าจะเป็น เหมือนของที่เป็นหุ่นยนต์ แต่จริงๆ ไม่ใช่ครับ ที่เราเห็น robot arm

cybernetics arm อันนั้นจริงๆ เป็นแค่ส่วนนึง cybernetics มันเป็นกระบวนการที่เกิดขึ้น รอบๆ ตัวเราครับในสิ่งมีชีวิต ใน machine ต่างๆ ที่มัน interact กัน ถ้าใครเคยอ่านเรื่อง PID controller จริงๆ น่าจะคุ้นเรื่องนี้ คนที่สร้าง cybernetics ครับจริงๆ คือ Robert Wiener แล้วเขาคิดค้นเรื่องนี้ ตอนที่เกิดสงครามโลก เพราะตอนนั้นครับพอสงคราม นึกออกใช่ไหมว่า มันต้องมีการยิง missile มันต้องมีการทำให้ machinery มันมีความแม่นยำ ถ้ามันไม่มี cybernetics ครับภาพมันจะประมาณนี้ เรามี rocket อันนึงใช่ไหมครับ อ่ะมันก็จะไปเป็นเส้นตรง แต่มันไม่สามารถ adjust ได้ มันก็จะ miss ไปอย่างน่าเสียดาย ใช่ไหมครับเพราะว่ามันเหมือนเราเขียนโปรแกรม แล้วเราบอกมันให้ไปแบบ linear แต่ถ้าระบบมันมีการมี feedback loop

ครับมันมี PID ซึ่งกันและกัน มันก็จะค่อยๆ ไปค่อยๆ adjust trajectory

ตัวเองนิดนึงจนมัน hit target ซึ่งอันเนี่ยครับคือสิ่งที่แตกต่างกัน ระหว่างการมีกับไม่มี cybernetics การที่เราจะเดินได้ครับเราเดินเดินเดินเนี่ย cybernetics เรามันคือเราใช้สายตามองว่า เอ้ยตอนนี้เราเดินไปจะชนตู้รึเปล่า หรือว่าตอนนี้ถ้าเราเดินแล้วตัวเราจะเอียง เราจะล้มรึเปล่า มันก็มี sense มันมี ระบบ feedback loop เกิดขึ้นครับ เหมือนเวลาที่เรากดไลค์อะไรใน TikTok เนี่ย ผมเห็น TikTok บางคนชอบไปกดไลค์อะไรแปลกๆ มันก็จะมีอะไรแบบนั้นครับขึ้นมาเรื่อยๆ อันนี้ก็เป็น cybernetics ที่เกิดขึ้น ระหว่าง algorithm ของ TikTok กับสิ่งที่เราสนใจใช่ไหมครับ คราวนี้ไอ้คอนเซ็ปต์ของแดนซ์ตัวนี้แหละ พอมันเป็น final form อะฮะ ภาพมันเป็นอย่างงี้ แต่ว่าเสียงไม่ออกใช่มั้ย เดี๋ยวเราขอปรับแป๊บนึงนะ HDMI ปึ๊บๆๆ ถ้าดังไปปรับลงได้นะฮะ

อันนี้คือโชว์ที่เราไปโชว์ที่ไทเปอะฮะ ตอนประมาณ 2 เดือนก่อน

อ๊ะ แต่คอมเราค้างไปละ แป๊บนึงนะ โทษนะฮะ

อย่าบอกนะว่า kernel panic โอ้

เอ่อ สักครู่นะฮะ คอมค้าง

เอื้อะ โอเค GG ฮะ อันนี้ก็เป็น cybernetics ของคอมพิวเตอร์รึเปล่า ไม่รู้นะฮะ อ่ะตายละ โอเค มีใครรู้มั้ยฮะว่า Mac มัน force quit ยังไง Oh shit

Command Option Esc ครับ ขอบคุณครับ

อ่ะ

โอเคฮะ คืออันนี้ ขนาดไม่ใช่เดโมมันยังพังได้นะฮะ

โอเค เปิดปิดใหม่แล้วละกันฮะ Command Option Esc ไม่รอด Oh my god

โอเค ก็อันนี้ อ่า มีคนบอกว่ามีของมีครูนะฮะ ก็โอเค งั้นจริงๆ ทอล์คนี้เราไม่ควร publish นะฮะ เพราะว่า publish ไปแล้วมันจะ crash อ้า ปั๊บมาพอดี ความผิดปั๊บนะฮะ ปั๊บๆๆ คือเมื่อกี้เราเปิดคลิปใช่มั้ย แล้วแบบของมันมีครูแบบ จู่ๆ แบบคอมแม่ง kernel panic เลย ใช่ๆ พี่ต้องไหว้ครูก่อน อ๋อ อ่ะ ทุกคนนับไหว้ครูไว้ไม่ใช่ แหม โอเคฮะ

สายหลุด ไหว้ เสียเวลาไป 3 นาที เพราะเราไม่ไหว้ครูนะฮะ แหม

มาครับ อันนี้มาด้วยกัน

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

เราก็เขียนออกต่อนะฮะ พี่ภูมิได้เล่าอย่างฮะ ว่าไอ้งานนี้ก็คือ ส่งเป็นเปเปอร์วิจัยด้วย อ้า เออ ปั๊บเล่า ปั๊บเล่า โอเค ก็คือเหมือนด้วยความของแก๊งที่จัดนะครับ

ด้วยความที่เหมือนหนึ่งในตัวตั้งตัวตีก็มาจาก MIT Media Lab อะไรอย่างเงี้ย ที่แบบทำสายวิจัยชื่อ PP ก็เลยบอกว่า เฮ้ย นอกจากที่เราจะทำแบบงานศิลปะแล้ว เราต้องเอางานศิลปะมาเขียนเป็นเปเปอร์ด้วย ก็เลยทำเหมือนเป็นเปเปอร์ยาว 9 หน้ากระดาษฮะ

ส่งไป conference ที่เนเธอร์แลนด์ ชื่อ Movement and Computing ที่แบบสนใจเรื่องเกี่ยวกับ algorithm แบบการเต้นอะไรอย่างเงี้ย อ้า เมื่อกี้แบบผมแอบไหว้ครูให้หลังบ้าน ได้แล้ว โอเคฮะ commentary นิดนึง ก็คือในโชว์เนี่ย จริงๆ เราเล่าถึงความฝัน ของความฝันพิเภกเนาะ เออ ปั๊บเล่านิดนึงได้มั้ยครับ

ก็สุบินนิมิตอ่ะครับ มันเป็นชื่อบทนึงของรามเกียรติ์ เป็นเรื่องเกี่ยวกับช่วงที่ทศกัณฐ์อ่ะฮะ เขาเพิ่งไปแย่งนางสีดาใหม่ๆ แล้วก็แบบเขาฝันเห็นแร้งขาวกับแร้งดำตีกัน ก็เลยให้พิเภกที่เป็นโหร แล้วก็เป็นน้องชายแบบ เหมือนทำนายว่าฝันนี้มันแปลว่าอะไร อะไรอย่างเงี้ย ก็ลองฟังดูฮะ

อธิบายการทำงานของโปรแกรมและ Cybernetics19:21

โอเค อันนี้คือตอน intro เนาะ แล้วในโชว์เนี่ยฮะ จริงๆ สิ่งที่มันเกิดขึ้นคือ มันก็จะเกิด cybernetics ต่างๆ ขึ้นเรื่อยๆ ยกตัวอย่างเช่น cybernetics ของคนกับ machine ว่าแบบ อันนี้คือฉากที่คนเล่นกับโปรแกรมเนาะ อันนี้เป็น Max MSP ว่าแบบ too fast too slow อันนี้คือแบบ part ก่อนที่จะแบบเข้าโปรแกรมของพวกเรา แต่จริงๆ เดี๋ยวจริงๆ อยากให้ดู part ที่เป็นโปรแกรมเลยแล้วกัน เพราะเดี๋ยวเราจะเล่าต่อ

อันนี้คือแบบสิ่งที่เกิดขึ้นนะฮะ เดี๋ยวลองเดากันว่ามันทำอะไร

โอเคฮะ ก็ต่อจากตัวบทตอนนิดนึงว่า ชื่องานแสดงชื่อสุบินนิมิต มันก็มาจาก

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

จริงๆ เดี๋ยวเราไลฟ์เดโมให้ดู แต่อันนี้อยากให้ดูบรรยากาศ นะฮะว่าตอนโชว์จริงๆ มันเป็นยังไง

เฮ้ย ปั๊บๆๆ เต้นปั๊บๆ หรือใครอาสามาเต้นก็ได้นะฮะ คือเนี่ยตอนออนสเตจอะฮะ มันเกิด feedback loop กันระหว่าง คนที่เค้าเป็นนักเต้น กับโปรแกรม คือคน คนในออเดียนซ์อะฮะ เค้าก็จะหยิบไมค์ขึ้นมา แล้วก็พูด แล้วตัวโปรแกรมเนี่ย มันก็จะรับ command แล้วก็เปลี่ยนท่าเต้น แล้วนักเต้นก็เลือกได้ว่า เค้าจะเต้นตามหรือเค้าจะ modify ท่าเต้นนี้ เนาะ จริงๆ อยากให้ไปดู โชว์เองอะฮะ เพราะโชว์ แต่ละโชว์มันจะ random มาก บางโชว์มันก็จะออกมาอย่างสวยเลย บางโชว์เนี่ยแบบ parameter มันก็อาจจะบั๊กก็อาจจะเป็น โชว์อีกแบบ เพราะฉะนั้นคือ เวลาบั๊กไม่มีปัญหาฮะ มันเป็นศิลปะ คุณต้องเข้าใจ ศิลปะก่อน เออ ใช่ มีเรื่องตลกมาเล่าให้ฟัง คือตอนโชว์โชว์นึงอะฮะ ระบบมันบั๊กใช่มั้ยฮะ แล้วเหมือนคีย์บอร์ดมั้งมันบั๊ก แล้วมันขึ้นคีย์บอร์ด error ขึ้นมาเหมือนแบบ เฮ้ยให้กดปุ่ม เคยเห็นมั้ยแม็ก เวลาเราเสียบคีย์บอร์ดใหม่อ่ะ รู้มั้ยฮะว่าพี่เค้าบอกให้ แก้ปัญหายังไง ให้มันเด้ง error อีกสองรอบ คนจะได้คิดว่าเราตั้งใจ มันไม่ได้บั๊ก

นี่ มันเป็นศิลปะ ต้องคิดให้เป็นนะฮะ โอเค anyway เมื่อกี้จบช่วงบันเทิงไปละ ปื๊บ

ปึ๊บๆๆๆๆ โอเคฮะ ถามว่าเมื่อกี้แบบ ให้ดูเร็วๆ มันคืออะไรเนาะ สั้นๆ ฮะมันคือการที่เราแบบ อย่างแรกเลย เราพยายาม deconstruct แล้วถอดออกมา ก่อนว่า ท่าแบบนัมเบอร์ซิกซ์ตี้เนี่ย ไอ้ท่ารำแม่บท 59 แม่บทอ่ะ มันเป็นยังไงบ้าง แล้วเราพยายามเขียนโค้ด เพื่อให้มัน transform ท่ารำที่เรามีตอนแรกอะฮะ ให้มันเกิดท่าใหม่ๆ ขึ้น ให้มัน generate ขึ้นมา ซึ่งจริงๆ เนี่ยมันก็คือเหมือนแบบ เมื่อก่อนเราเคยแค่ถ่ายวิดีโอ ของท่าเต้นใช่มั้ยฮะ แต่ว่าตอนนี้มันถูกเก็บมา ในโปรแกรมโปรแกรมนึง ที่มันสามารถ generate ท่า base on ความรู้อะไรบางอย่างได้ แต่ว่ามันไม่ได้เก็บแค่ท่า เหมือนภาพถ่ายที่เราเห็นละ มันเก็บเป็นอัลกอริทึม ที่มันอยู่ในนั้น

โอเค ยังมีเวลานิดนึง เดี๋ยวอยากแบบ lightning demo ฮะ ขอให้พระเจ้าเดโมไม่ลงโทษเรานะฮะ

- ต้องไหว้ครูก่อนมั้ยฮะ - โอ้โห ต้องไหว้อีกเหรอ ไหว้ไปแล้วรอบนึง แหม เออ หรือว่าต้องไหว้จริงๆ วะ ล้อเล่นนะฮะ เปิด dev server ก่อน

อ๋อ Brendan Eich … yarn devๆ โอเค มา dancers, dancers, four

dancers Padung Yokrob แฮ่ เช็กแป๊บนะ trigger มันได้ไหม โอเคฮะ

มีใครอยากมาลองเล่นไหมฮะ ข้างหน้า ขอตัวแทนคนนึง คนที่แบบเล่นแล้วมันไม่ค่อยบั๊กอ่ะฮะ แบบคนที่ QA เกลียด

มีใครสนใจขึ้นมาเล่นไหมฮะ สั้นๆ อ่ะ

มาๆ อ่ะ ลองเล่าหน่อย มันเล่นยังไงครับ

สาธิตการใช้งานโปรแกรมแบบ Interactive23:31

ก็สิ่งที่มันทำได้อ่ะครับก็คือ เหมือนอันนี้นะครับ ก็จะเป็น motion capture ที่เอามาเป็น model แล้วก็ render เอาไว้ ทีนี้สิ่งที่เราทำได้ก็คือ ด้วยความที่เหมือนตัว motion capture จริงๆ แล้วมันก็คือ array ของ position เนาะ ว่าแต่ละส่วนของตัวแบบมี position ยังไงบ้าง แล้วถ้าเราแบบเหมือน map ตัวเลขแบบต้นฉบับกับค่า morph อะไรซักอย่างนึงอ่ะฮะ อาจเป็นฟังก์ชัน เราก็จะสามารถทำให้มันเปลี่ยนท่าได้ อย่างเช่นแบบทำให้แขนนึงมันม้วนผิดปกติอะไรเงี้ย

อย่างเช่น circleAndCurve

circleAndCurve, leftArm, 100% อ้อ 0%

อันนี้ 100% มันก็จะไม่เปลี่ยนเนาะ ต้อง 0 ใช่ไหม circleAndCurve, leftArm

Left arm 0%

Circle and curve Left arm 0%

นี่ครับ ก็จะชื่ออะไร ก็คือพลังงานในแขนหมดนะครับ เหนื่อยๆ เหนื่อยๆ แล้วก็ Rotation

X

100% Rotations X 100% อันนี้ก็คือเปลี่ยนแกนหมุนครับ

แล้วก็จริงๆ อ่ะฮะ มีใครเคยเล่นเกม Superhot บ้างฮะ เกมที่เหมือนยิงแล้วแบบ slow motion เนาะ เราก็สามารถทำได้เหมือนกันฮะ มันชื่ออะไรวะ External body space

90%

External body space 90%

นี่ อันนี้ก็จะเป็นแบบ ตัวที่สมมุติว่าถ้ามันเลื่อนเยอะอะไรเงี้ยฮะ มันก็แบบ โจทย์ก็คืออยากทำให้มันเห็นท่า เพราะฉะนั้นเนี่ยแบบ อันไหนที่มันเลื่อนเร็ว เราก็จะค่อยๆ โค้งให้มันช้าๆ มันจะได้เห็นท่าชัดขึ้น เพราะฉะนั้นน่ะฮะ ก็ลองเขียนดูว่า จินตนาการว่าถ้าเรามีกราฟของ position ใช่มั้ยฮะ แล้วมันก็จะเป็นแบบ อันไหนเลื่อนเยอะ มันก็จะเหมือน delta มันก็จะเปลี่ยนเยอะเนาะ เราก็เช็กดูว่ามันมี peak ใน delta ตรงไหนบ้าง แล้วก็ยืดเวลาตรงนั้นออก

ฮะ เพราะฉะนั้น แต่พอเหมือนลองทำไปดูปรากฏว่ามัน ถ้ามันไม่แปลกเกินไปอ่ะฮะ สิ่งที่เราจะเห็นมันจะเป็นแบบเนี้ย

ฮะ มันก็จะเป็น slow motion ขอ Circle and curve แบบนี้รอบนึงได้มั้ยฮะ ขอ Reset Reset

Dancer

Padung Yokrob Monkey

เลขก็ได้ 5 Dancers Padung Yokrob Monkey มา แล้วก็ อ่ะ ทีนี้เพิ่ม speed ก่อน Dance speed 300% Dance speed 300% ลิงๆ

External bodyspace 100%

อืม อย่างเท่

นี่ครับ มันก็จะเป็นแบบ อันนี้ลิง lag

โอเค ซึ่งพี่เปิดโค้ดให้ดูได้มั้ย ได้ อยากให้ดู ซึ่งจริงๆแบบมันน่าสนใจมากว่า เบื้องหลังมันก็คือ TypeScript อ่ะฮะ แบบเหมือนแทบจะทุก transform มันอยู่ใน ไฟล์เดียวเลยชื่อ override.ts

อันนี้ off script ละ ไม่เป็นไร ก็เนี่ยฮะ ก็จะเห็นว่าแบบความน่าสนใจคือเรามองว่า ทุกอย่างมัน เป็น JavaScript object แล้วก็เราก็ morph มัน แบบ External body space มันชื่ออะไรนะ delay ป่ะ ไม่ มันชื่อนี่แหละ apply อ้า นี่ฮะ เนี่ยก็จะเห็นว่าจริงๆแล้วมันก็คือแบบ ตัว detect curve ตัว detect value อืม อืม ครับ โอเค โห ขอบคุณครับปั๊บ เย้ สุดยอด อ่ะ เหลือ 3 นาทีมาเรา wrap up เลยละกัน

อธิบายเบื้องหลังการพัฒนาโปรแกรม27:33

ก็เล่าให้ฟังว่าตอนเริ่มอ่ะฮะ จริงๆคือพี่เขาก็ส่งแบบ Three.js repo มาให้ อันนึง เป็นตัวนี้นะแบบตัวแบบเหมือนให้ลองเล่นกับ pose เราก็เริ่มจากการเอาแบบตัว motion capture data เข้าไปใส่อ่ะฮะ ซึ่งmotion capture เนี่ยปกติ เมื่อก่อนอ่ะฮะ คนใส่ไปเรา ไม่ค่อยไป modify ท่ากัน มันเลยเหมือนเราเก็บแค่รูปถ่าย แต่มัน ไม่ได้เก็บแบบความเข้าใจ เก็บ energy มันเข้าไปด้วย ตอนนั้น โจทย์ก็คือ อย่างที่ปั๊บบอกว่า เราแบบพยายามเขียนโปรแกรมที่มัน transform ตัวแบบ animation ที่มันมีอยู่แล้วอ่ะฮะให้มันเปลี่ยนไป ในโค้ดอ่ะฮะ จริงๆเราแบบ มันก็จะมี config เก็บไว้ประมาณนี้นะ ว่าแบบเออ จริงๆเราเก็บ parameter อะไรบ้าง มันก็เก็บ range ไว้ว่าแบบเราอยากให้ range มันเปลี่ยนอะไรบ้าง แล้วเสร็จแล้ว อ่ะฮะ มันก็จะเอา range พวกนั้น มาเล่นได้ อีก goal นึงคือเรา อยากให้ระบบมันเล่นกับเสียงได้ แบบที่เราเห็นเมื่อกี้ อันนี้ใช้ API ชื่อ SpeechRecognition นะฮะ ข้อดีคือแบบเอาจริงๆจริงๆ

มันใช้ฟรี ข้อเสียคือมันไม่ support อย่างอื่นยกเว้น Chrome แล้วก็ข้อเสียอีกอย่างนึงอ่ะฮะ คือมันฟังคำผิดบ่อยมาก ถามว่าเรา

แก้ปัญหายังไง เราใช้ regex ฮะ regex แม่งประมาณแบบ 500 บรรทัดอ่ะ เดี๋ยวให้ดู ชื่ออะไรนะ น่าจะชื่อ voice

อืม test match ป่ะ อ้าว regex มัน match ป่ะฮะ ถ้าจำไม่ผิด test

เนี่ยครับคือมันก็จะมี regex แบบเต็มไฟล์เลยเพื่อ ให้เวลาคนพูดอะไรแล้วมันไม่ผิด เช่นเวลาคนพูดว่า one แบบ wan มันก็จะ correct เป็น one ก็ไม่ต้องใช้ AI นะครับเคยใช้ OpenAI แล้วมันช้า ก็เลย regex บ้านๆ เนี่ยแหละแก้ปัญหาได้ง่ายกว่า แล้วความเจ๋งก็คือเวลามีคนชาติใหม่มา สมมุติมีคนจีนมาเค้าก็จะพูดผิดเราก็จะต้องคอยแก้ regex in production ครับ ก็เป็นความสนุกของการทำโชว์พวกนี้นะครับ transformer เมื่อกี้บอกไปแล้วเนาะอันนี้ให้ดูเพิ่มเติม เช่นเวลาแก้ energy ครับเรา มันเหมือนทำให้มันช้าลงเนาะ เราก็ transform keyframe มันลงมานิดนึง หรือว่า rotation เราก็ใส่ quaternion เข้าไปตรงๆ อืมซึ่งมันก็จะเป็น algorithm ง่ายๆ พวกนี้แหละครับ จนถึงเราเขียนโปรแกรมบางอย่างเข้าไป เช่นเราใส่ high pass filter ใส่ low pass filter เพื่อให้ความโค้งมันน้อยลงหรือเขียน valley detection หรือตัวล่าสุดที่เรากำลังทำก็คือใส่ inverse kinematics เข้าไป เพื่อให้เหมือนส่วนต่างๆ ของร่างกายมัน morph เข้าไปหาจุดอื่นได้ โอเค

สรุปแนวคิดและประโยชน์ของโปรเจค Cyber Subin30:07

จริงๆ อยาก wrap up สั้นๆ ละกันครับว่า

ไอ้ traditional dance เนี่ยปกติมันคือ มีครูแล้วก็มีนักเรียนเนาะ เพราะฉะนั้นนะครับ หลายครั้งมันคือ เด็กแค่ฟังครูแต่เรารู้สึกว่ามันไปไกลกว่านั้นได้มันคือ เด็กเนี่ยพยายามเล่นกับตัวเอง เล่นกับครูพยายามเข้าใจว่าเออมันมีความเป็นไปได้มากกว่านั้นนะครับ แล้วพยายาม go beyond it ได้ แบบที่เราเห็น K-Pop เราเห็น J-Pop เค้าทำได้ เรารู้สึกว่า tool เนี้ยจริงๆ นอกจากใช้ในการแสดง มันมีอีก potential ที่มันเจ๋งมากคือ สมมุติว่าเราเป็นเด็ก ป.4 ที่กำลังเรียนนาฏศิลป์อยู่ครับ แทนที่เราจะต้องรู้สึกเครียดว่าเอ้ย ทำท่านี้ไม่ได้เลยเด็กก็ generate ท่าใหม่ขึ้นมา เป็นท่าที่ตัวเองรู้สึกว่าสบายใจหรือเป็นท่าตัวเอง ที่คิดว่ามัน express ความเป็นตัวเองออกมา แค่นี้มันก็เหมือนเวลาเราเขียนโค้ดแล้วเนาะ ที่เราเขียนโค้ดเรื่องที่เรารู้สึกสนุก ผมก็รู้สึกว่าเป็น potential นึงละกันครับที่มันทำได้ เราไม่ได้อยากแค่เก็บภาพถ่ายที่เราเก็บครับ แต่เราอยากเก็บสิ่งที่มันเป็น value เราเชื่อว่าเราไม่ได้เข้าใจนาฏศิลป์จริงๆ ถ้าเราทำได้แค่เลียนแบบแต่เราไม่ได้สามารถ create มันขึ้นมาใหม่ครับ ผมก็ยังเชื่อสิ่งที่ Feynman เค้าพูดว่า What you cannot create we do not understand ครับ ก็ถ้าเกิดใครมีโอกาสได้ดูไม่ใช่ที่ไทยนะครับแต่เป็นที่ต่างประเทศ เพราะว่าในไทยน่าจะไม่ได้ดู ก็เชิญครับก็ไปดูของดีประเทศตัวเองที่ประเทศอื่นกัน สุดท้ายก็ขอบคุณพี่ๆ ในทีมด้วยครับขอบคุณปั๊บที่

ช่วยเราตลอดเวลาขอบคุณพี่พิเชษฐขอบคุณพี่พิพีขอบคุณพี่โบว์ขอบคุณ ทุกคนในทีมครับก็สงสัยเรื่องโค้ดอะไรมาถามเราทีหลังได้ วันนี้ก็ขอบคุณครับ