🎞️ Videos → hydra.js: playing visual with code

แนะนำ Hydra.js: โปรแกรมสร้าง Visual ผ่านโค้ด0:00

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

โอเค ใครมาจากทาง เอ่อ Visual หรือว่ากราฟิกไหมครับ Fine Art?

โอเค ไม่มี โอเคๆ ก็ เอิม งั้นอาจจะไปไวประมาณหนึ่งนะครับ เพราะมีเวลา 20 นาทีอาจจะไม่เหมือน Workshop แต่ว่าจะพาทัวร์ว่ามันทำอะไรได้มากแค่ไหนครับ

Live coding คืออะไร? และประวัติศาสตร์ของ Hydra0:43

ก็อาจจะไปที่ประวัติศาสตร์มันแบบเร็วๆ ก่อนนะครับ ก็อาจจะ Live coding มันคืออะไรครับ ใน sense หนึ่ง Live coding มันก็คือเหมือนเราเขียนโค้ด แล้วเราก็แปลงโค้ดมันให้กลายเป็น Visual

ซึ่งจริงๆ อาจจะเป็น Text หรือว่าจะเป็นในรูปแบบอื่นก็ได้นะครับเนี่ย สมมติว่าถ้าเคยเห็นพวก Low code มันก็จะชอบมี เป็น Node เป็นเหมือนแบบว่ามีเส้นโยงถูกมั้ย มันก็จะมี โปรแกรมพวกนั้นเหมือนกันที่เอาไว้เล่น Live code ได้ นะครับ ก็ตัว Hydra เนี่ยมันก็คือเหมือนเป็น Text base ล้วนเลย ก็คือเขียน เขียนโค้ดแล้วก็พอเรากด evaluate ก็คือ กด เอ่อ ถ้าเป็นใน Mac กด Option Enter ปุ๊บมันก็จะแปลงโค้ดที่เราเขียนกลายเป็น Visual เลยครับ

ต้นกำเนิด Hydra: จาก Sandin image processor สู่ยุค Demoscene1:24

ก็ประวัติศาสตร์ Hydra แบบเร็วๆ ก็คือเมื่อก่อนในอดีตเมื่อประมาณ เอ่อ

50 ปีที่แล้ว มันจะมีสิ่งที่เรียกว่า Sandin image processor นะครับ ยุคนั้นก็เริ่มเขียนโค้ดทำภาพกันแล้ว ครับ เขาก็เขียนโค้ดทำภาพเสร็จ แต่ว่าไอ้การเขียนโค้ดทำภาพเสร็จ แล้วแปลงมาเป็น Visual ตอนนั้นน่ะ มันยังแปลงได้ยากได้ช้าอยู่ เขาก็ เขาก็คิดอีกตัวหนึ่งที่คิดว่ามันน่าจะเอาไปเล่นต่อได้ง่ายนะครับ มันก็เป็นตัวซ้ายมือก็คือเป็น Sandin image processor ปี 1971 ครับ ไอ้ตัวนี้มันทำงาน มันคือเหมือนเป็นระบบไฟฟ้านะครับ มันเป็นการรบกวนสัญญาณไฟฟ้าทางภาพ แล้วก็มันสามารถเอามา plug and play แล้วกลายเป็น Visual ต่างๆ ได้ เช่น อาจจะ เราอาจจะอยากให้แบบว่า Visual สามเหลี่ยมมันหมุนๆๆๆ หรือว่า แบบว่า มันเอามาซ้อนกันอะไรอย่างนี้นะครับ

อ่า ครับ ก็เป็น Live coding มันเติบโตมาจากสิ่งที่เรียกว่า Demo scene นะครับ Demoscene มันก็เป็น scene ที่แบบว่าชาว Hacker ยุคหนึ่งเอา พวกแบบว่าตัว Software หรือว่าตัว Hardware อย่างยุคนั้นน่าจะเอาพวกแบบเหมือน Playstation หรือเก่ากว่านั้นก็อาจจะเป็นพวกตัว NES ของ Nintendo Family Famicom ทั้งหลายนะครับ Super Famicom มา มาโมเพื่อให้มันกลายเป็น Visual นะครับ จากตอนนั้นเนี่ยมันเริ่ม มันเริ่มมีการที่แบบว่าเริ่มทดลองกันไปไกลเรื่อยๆ จากแค่ Hack Hardware แต่มันไปว่า Hack Software เขียน Software ขึ้นมาสู้กัน เอามาโชว์ แล้วก็เหมือนเป็นงาน showcase นะครับ ก็ตอนนั้นมันก็เริ่มมี Live coding ขึ้นมาเป็น scene เล็กๆ มันก็มี Live coding sound แล้วก็มี Live coding Visual นะครับ Sound อาจจะเติบโตมาใกล้เคียงกัน ก็คือเริ่มจาก Demo scene นะครับ ครับ ก็ เอ่อ Live coding

ทำไมต้อง Hydra? เปรียบเทียบกับ p5.js, Veda, TouchDesigner2:56

ก็อาจจะจริงๆ เมื่อเช้า เอ่อ เมื่อ เมื่อบ่ายมีตัว เอ่อ Workshop p5.js จริงๆ ตอนนั้นก็เอามา Live coding ได้เหมือนกันนะครับ แต่ว่าตัวที่ผมเล่นวันนี้ก็คือเป็น Hydra.js ครับ Hydra.js ข้อดีมันก็คือมันง่ายกว่า p5.js แล้วกันนะครับ p5.js เราอาจจะต้องคิดเยอะประมาณหนึ่งว่า โอเค เราจะต้องสร้างสี่เหลี่ยมสามเหลี่ยมให้มันวิ่งซ้ายวิ่งขวานะครับ ก็อาจจะสำหรับผมอาจจะยาก ยากไปหน่อยเวลาเล่นสดนะครับ ผมอาจจะทำบัคเยอะเกินนะครับ อีกตัวหนึ่งก็คือ Veda Veda จริงๆ มันจะไปใช้ GLSL นะครับ มันเล่นสดได้ แต่ว่า GLSL ก็จะเล่นสดยากไปกว่า p5.js อีก มันคือ Graphic programming โดยตรงเลย เราไปเจอ Veda ปุ๊บ ถ้าปกติถ้าผมจะเล่นพวก Veda หรือว่า GLSL คือผมจะเขียน เขียนเตรียมไว้ก่อนครับ ไม่งั้นตอนมันเกิดบัค แล้วผมไม่รู้มันจะเกิดอะไรขึ้นครับ แล้วก็มีอีกตัวหนึ่งก็ยอดฮิตก็คือ TouchDesigner นะครับ ก็เล่นสดได้ แต่มัน มันจะหนักเครื่องนิดหน่อยนะครับ เพราะมันเหมือนมาเป็นแบบ เป็นตัวกราฟิกเลย เป็น UI เวลาเราเขยิบทีมมันอาจจะกระตุกครับ ก็ common interface นะครับ ตัว ตัว Hydra มันรันอยู่บน WebGL เป็นหลักนะครับ ซึ่งมันก็ใช้ GLSL นั่นแหละ คือเบื้องหลังของ Hydra มันก็ไปเขียน GLSL นั่นแหละครับ แล้วมันทำเหมือนเป็นฟังก์ชันให้เราเรียกใช้ให้มันง่ายขึ้นนะครับ อะไรประมาณนี้

แนวคิดหลักของ Hydra: Plug and Play วิดีโอและภาพ4:13

โอเค Hydra ไอเดียหลักๆ มันมาจากวิดีโอ วิดีโอซีนนั่นแหละ ก็คือตัว Sandin เมื่อตัว 50 ปีที่แล้วนะครับ ก็คือไอเดียมันก็คือการ Plug and Play เอา เอา source image source video มายำนะครับ เพื่อให้เกิด output ต่างๆ นี่ก็เป็น เป็นของยุคนั้นก็คือแบบมัน มันโดนย่อจาก Sandin ออกมาเป็นของที่มัน commercial grade เอามาขาย เรียกว่าตัว LZX module นะครับ หรือว่า Visual Cortex ตัวนี้ก็เป็นตัวยอดฮิตในยุคนั้น ไอเดียคล้ายๆ กับ Sandin ก็คือแบบ Plug and Play แล้วก็ Plug เสียบแล้วมันก็จะเกิดภาพที่เปลี่ยนไป ก็มีตัวที่ simulate ออกมาชื่อ Lumen แต่ว่าตัวนี้ไม่ฟรี ครับ ก็จริง ๆ ทั้งหมดมันแค่ เอ่อ พอเป็น Hydra เสร็จมันก็เหมือน เหมือนแปลงทุกอย่างมาเพื่อ เพื่อเอามาเล่นใน ใน text base อะครับ มันก็เหมือนแปลงการเสียบมาเป็น เอ่อ ชื่อของมันเช่น เอ่อ noise สร้าง noise เอ่อ เอา noise มาชนกันก็คือใช้ add หรือว่าแปลงทุกอย่างให้มันกลายเป็นพิกเซลเอตนะครับ

เริ่มต้นใช้งาน Hydra: เปิดเว็บ hydra.ojack.xyz และ documentation5:06

โอเค ผมพาพาทัวร์ไวๆ แล้วกันว่ามันจะทำอะไรได้บ้างครับ ถ้า ถ้าใครเปิดคอมอยู่ครับก็อาจจะเปิดตามผมได้ก็คือเข้า เข้าไปที่เว็บ เอ่อ hydra.ojack.xyz นะครับ

ผมอาจจะให้เวลาแป๊บนึงนะครับ เข้ามาเสร็จเราจะได้หน้าตาอะไรประมาณนี้ อ่า มันขึ้นมาเป็นประมาณนี้ ครับ ก็อ่าเข้ามามันก็จะได้หน้านี้ ปุ๊บ อะ เราก็อาจจะเลื่อนดูว่ามัน มันก็จะเหมือนบอก บอกว่าอยากเข้ามาก็อาจจะปิดวินโดว์แล้วก็เปลี่ยนตัวเลขแล้วก็ลองดู ผมอยากให้เลื่อนมาข้างล่างก่อนมันจะมีเหมือน… เผื่อจบ workshop วันนี้ก็อาจจะไปลองกันเองต่อได้อีกก็จะมีตัวนี้ the interactive documentation มันก็คือเหมือนเป็น tutorial ของมันครับ ก็มาตรงนี้ได้แล้วก็อีกอันหนึ่งที่ useful ก็คือเหมือนจะเป็นลิสต์ของ ของ ของฟังก์ชันที่คุณจะเอาไปใช้ได้นะครับ ก็โอเคเรามาลองคร่าวๆ กันเลยแล้วกัน

เขียนโค้ดสร้าง Visual ง่ายๆ ด้วย Hydra: osc, noise, shape6:00

พอเข้ามาเสร็จเราก็จะเจอหน้าตาประมาณนี้ โอเค พิมพ์โอเคตัวใหญ่ประมาณนี้นะ

ผมจะอธิบายเร็วๆ อา อย่างนี้มันก็ประมาณว่าสิ่งที่ผมทำก็คือเนี่ย ผมพิมพ์ osc(10) ใช่ไหมแล้วก็ .out แล้วผมก็กด อาจจะกด option enter ถ้าอยู่ใน Mac ถ้าเป็น Windows น่าจะเป็น alt enter ผมจำไม่ค่อยได้แต่ลองดู สิ่งที่ ที่มันเกิดขึ้นก็คือ เอ่อ osc มันย่อมาจาก oscillator osc(10) หมายความว่าผมเอา oscillator ที่ความถี่ 10 ถ้าสมมุติผมเปลี่ยนเป็น osc(2) ความถี่มันน้อยลงมันจะเหมือนว่า wave มันน่ะห่างไกลกันขึ้น ถ้าผมเอาสัก 100 เราก็จะเห็นแล้วว่าเนี่ยจริง ๆ มันเป็นประมาณนี้ สมมุติผมเอาจาก 10 ใช่ไหม 20 40 60 90 100 จะเห็นว่ามัน มันจะเริ่มมี

มีตัวแบนของ frequency แบบว่ามาให้เห็นเยอะขึ้นเรื่อยๆ นะครับ ก็ .out ก็ตามนั้นก็คือเหมือนเป็น เอ่อ dot output นะครับทีนี้ noise เอ่อ สิ่ง สิ่ง osc ตรงเนี้ยมันเรียกว่า source source ก็คือเหมือนเป็นจุดเริ่มต้นน่ะ ส่วน dot out ก็คือเหมือนเอา เหมือนเอาออกหน้าจอนะครับ osc สามารถเปลี่ยนเป็น เอ่อ source อื่นได้ เช่น noise noise 2 ครับมี noise ครับ มีสิ่งที่เรียกว่า Voronoi ครับ ก็จะเป็นศัพท์ mathematics แต่หน้าตาประมาณนี้ จำว่า Voronoi แต่ประมาณนี้ มี gradient มี gradient ให้เล่นนะครับ มี เอ่อมี shape

shape มันก็จะเป็นแบบว่ารูปทรงทั่วไปนะครับ shape ก็จะ เอ่อทำได้หลากหลายอยู่เหมือนกัน เช่น เอ่อ เป็น เป็นด้านใช่ไหม เป็นด้านแล้วก็เป็น เป็นขนาดรับสั่งแล้วก็อันนี้เป็น smooth นะครับ osc ก็เหมือนกัน osc ก็มีพารามิเตอร์ที่เราสามารถเล่นได้เหมือนกันครับ อันแรกก็คือเป็น band frequency ใช่ไหม อันที่สอง อันที่สองตีว่าเป็น speed ก็ได้ตอนนี้นะครับก็คือยิ่งพิมพ์มันยิ่งแบบว่าเร็ว ส่วนสุดท้ายเนี่ยเป็นเหมือนออฟเซตนะครับ จริง ๆ มันคือเหมือนเป็นออฟเซตเรื่องสี พิมพ์ไปเรื่อยๆ อะไรอย่างเงี้ยครับ

เพิ่มลูกเล่นด้วย Geometry Transformation: scale, rotate, kaleid8:06

ผมอาจจะช้าหน่อยเดี๋ยวตาลายมันก็สามารถใส่พวกเอฟเฟกต์อะครับ หรือไปกวนสัญญาณพวกนี้ได้

เราอาจจะใช้ อ่า

ใช้ อ่า สิ่งที่เรียกว่า geometry transformation ได้ เช่น scale นะครับ เราอาจจะบอกว่า scale 2 แต่อย่าง scale 2 เนี่ยมันก็เหมือน เหมือน zoom out zoom ออกนะ ผมขออนุญาตเปลี่ยนเป็น เอ่อ เปลี่ยนเป็น shape นะ เอาสิ แล้วก็

scale 2 แล้ว scale 1 ทีนี้พวกเนี้ยจริง ๆ อ่ะมันมีฟังก์ชันที่เอามาเล่นได้อีกนะครับด้วยการผ่านสิ่งที่เรียกว่า อ่า

ถ้าเป็นโปรแกรมเมอร์อ่ะที่เขียน Javascript อาจจะพอเดาได้ว่าตัวนี้มันก็คือเป็น arrow function นะครับ เราสามารถใช้ arrow function แล้วก็เหมือนใส่ เหมือนใส่ อ่า ตัวแปรที่เราอยากให้มันเปลี่ยนขึ้นมาได้อย่างอันนี้มัน อย่างเมื่อกี้ใช่ไหม สมมติว่าผมบอกว่าผมใช้ shape.scale แล้วผมใส่เลขลงไปมันก็จะได้ค่าค่าเดียว ทีนี้ถ้าผมบอกผมอยากได้ค่าที่มันเปลี่ยนไปเรื่อยๆ มันจะมีตัวแปรชื่อ time อยู่ แต่ว่ามันใส่มาตรงๆ ไม่ได้ มันต้องใส่ผ่าน arrow function นะครับ ส่วนใครถ้าเป็น non อ่า ไม่ได้มาทางเขียนโค้ดก็จำหน้าตานี้ไปเลยว่าถ้าคุณจะเล่นกับไอ้ตัวแปรชื่อ time เนี่ยคุณก็ต้องใส่ไอ้วงเล็บเปิดวงเล็บปิดเท่ากับมากกว่านะครับ มันเรียกว่าลูกศรนะครับ อาจจะจำไว้ว่ามันเป็นฟังก์ชันลูกศรนะครับ ถ้าผมทำอันนี้ผมก็สามารถทำเคลื่อนไหวได้ นะครับ scale ก็ทำได้เหมือนกันครับ .scale ทำได้เหมือนกันแต่ว่าถ้าเรา .scale แล้วใช้ arrow time ฟังก์ชันมันจะไม่ค่อยมีประโยชน์เพราะว่า time ฟังก์ชันเนี่ย ลองจินตนาการว่าตัวเลขมันก็จะโตไปเรื่อยๆ สมมติตอนเนี้ยตัวเลขมันขึ้นไปเป็นพันเป็นร้อย แล้วเรากด scale มาปุ๊บเนี่ย มันก็จะไม่เห็นอะไรเลยนอกจากสีขาวเพราะว่ามัน zoom zoom ยับไปเลย ทีนี้เราทำยังไง มันก็มีเล่นได้หลายอย่าง ถ้าคลาสสิกสุดก็อาจจะเอาจับมาเข้ากับธาตุตรีโกณใช่ไหม มันก็จะมี sin, cos, tan ถูกไหม sin ฟังก์ชันมันก็จะแบบว่าให้ให้อารมณ์แบบว่าเหมือนขึ้นๆ ลงๆ อ่ะ มันก็จะขึ้นๆ ลงๆ แบบนี้นะครับ อ่า ถ้าเราไปดู ดูหน้าตา sin ฟังก์ชันสมมติ อ่าผมจะให้ดู

sin ฟังก์ชัน… เนี่ยใช่ไหม มันแบบเป็นขึ้นๆ ลงๆ นะครับ มันมีประโยชน์มาก เอามาทำ animation นะครับ เราจะต้องกลับไปวิชาตรีโกณ ม. ปลายอีกครั้งนะครับ เพื่อเอามาเล่นอะไรแบบนี้ ซึ่งผมก็เพิ่งรู้ว่ามันเอามาทำแบบนี้นะครับ ตอนเด็กน่าจะตั้งใจเรียนกว่านี้ เอ่อ มีอันนี้เสร็จมีการเขาเรียกว่า geometry transformation scale rotate เอ่อ ตัวที่น่าสนใจเป็น kaleid นะครับ kaleid ก็อาจจะมา มันมาจาก Let's say มันคืออะไร ขอตัวที่มันชัดๆ ก่อน ขอ ขออนุญาตกลับไปตัวอื่น…

osc แล้วกัน osc…

kaleid ก็คือมาจาก kaleidoscope ก็คือ นี่ผมเอา high speed

คาไลโดสโคปก็คือไอ้กล้องที่เราเล่นตอนเด็กอ่ะ ที่มันจะมี มันจะมี อ่า ตัวกระจกอยู่ข้างในแล้วเราไปเขย่าเขย่าของที่อยู่ในนั้นอ่ะ มันก็จะแบบว่าเหมือนเหมือนพอมีกระจกใช่มั้ย มันจะแบบเหมือนเห็นเป็นงานศิลปะ trippyๆ หน่อยใช่มะ ซึ่งอันเนี้ยมันก็โดนย่อมาเป็นคำว่า kaleid ใช่มะ แล้วตัวเลขที่ใส่ได้ก็จะเหมือนเป็น จำนวนกระจกที่เราจะมองจากกล้องคาไลโดสโคป ยิ่งตัวเลขเยอะก็จะเหมือนว่าเป็น เป็นอยู่ในวงกลม อะสมมติผมเป็นที่ 4 ก็คือเหมือน 4 ด้านอะไรแบบนี้เป็นต้น

ปรับแต่งสีและเอฟเฟกต์: colorama และการใส่สี11:40

ทีนี้มันก็เล่นกับสีได้ เช่นผมจะให้มันเป็นสีแดง ผมก็สั่งให้มันเป็นสีแดงได้ แล้วก็ผมอาจจะ

มันก็มีฟังก์ชันพิสดารที่คนเขียนก็บอกว่าไม่แน่ใจว่ามันจะทำงานยังไง ก็คือแบบว่ามันจะให้ผลลัพธ์ออกมาที่น่าสนใจแต่มันเดายาก ก็จะมีตัว colorama ซึ่งมาจาก color บวก drama ผมใส่ไปผมก็จะได้อะไรไม่รู้ออกมา

ผลลัพธ์อาจจะดีหรือไม่ดีก็อันนี้แล้วแต่ดวง บางทีมันเกินแบบว่าการคำนวณในหัวอะไรประมาณนี้ได้ ก็โอเค

Modulate: การรบกวนสัญญาณและสร้างเอฟเฟกต์แบบอนาล็อก12:19

แค่สีแค่ geometric transformation อ่ะ มันอาจจะยังไม่สนุกพอ ในโลกอนาล็อกมันจะมีสิ่งที่เรียกว่า modulate ก็คือการเหมือนการรบกวนสัญญาณ การ modulate มันให้อารมณ์เหมือนว่าเราเอาสัญญาณหนึ่งอ่ะ ไปกวนสัญญาณหนึ่ง เช่นผมบอกว่าอันนี้ผมมี เอ่อ osc หน้าตานี้ใช่ไหม ผมให้มันออกที่ output0 เดี๋ยวผมมีอีกตัวหนึ่ง อ่า ผมเรียกว่ามัน noise(3) แต่ผมเอาให้ดูอ่ะ noise 3 หน้าตาประมาณนี้ ทีนี้ผมอยากจะเอา noise เนี่ยไปกวนสัญญาณกับ osc ที่เห็นเมื่อกี้ เดี๋ยวเราลองดูว่าหน้าตาจะเป็นยังไง ผมบอกว่าผม modulate เอ่อ noise 10 ปึ๊บ เห็นป่ะ มันจะเหมือนมันจะมี noise วิ่งเข้ามากวนกับอันนี้ สมมติผมบอกว่าผมเปลี่ยนเป็น

osc 10 ก็คือมี osc 10 มากวน osc 10 ซึ่งมันก็คือตัวนี้ ตัวเนี้ยเดี๋ยวจะเข้าไปกวน สมมติว่าผมบอกว่าผมจะเอาเยอะๆ แบบนี้เข้าไปกวน โอเคเดี๋ยวดูว่าหน้าตาจะเป็นยังไง อ่าสมมติว่าอันนี้เป็น osc 10 อยู่ ผมใส่ 100 เข้าไป มันก็จะเหมือนว่ามี มีตัวออสซิลเลเตอร์เนี่ยเข้าไปกวนอีกทีนึง อันนี้คือสิ่งที่เรียกว่า modulate modulate น่าสนใจอีกอย่างนึงก็คือ เราสามารถเอามันมากวนตัวเองได้ ด้วยการบอกว่าผม modulate

o0… o0 ก็คือ output 0 ก็คือหน้าจอ ก็คือเหมือนผมเอาไอ้ตัวเนี้ยที่อยู่เห็นอยู่ตอนเนี้ยกลับเข้าไปกวนมันใหม่ มันจะเหมือนมันมีดีเลย์อะไรสักอย่างอยู่แล้วมันจะกลายเป็นเกรนเกรน เห็นป่ะ มันแบบ มันจะได้เอฟเฟกต์ที่มันน่าสนใจขึ้นมา ก็คือแบบมันเหมือนมันมีตัวนึงดีเลย์อีกตัวนึงพยายามจะไปกวนตัว ตัวแรกอยู่ แล้วก็เราใส่ค่าว่าเราอยากให้มันกวนหนักแค่ไหน สมมติผมบอกให้มันกวน 1 มันก็จะกวนยับเลย หมายความว่ามันแรงมากแล้วมันจะได้เอฟเฟกต์ที่มันเป็นอนาล็อกเป็นเกรน ผมบอกว่ากวนน้อยลงมันก็จะน้อยลงประมาณนี้ ทีนี้ modulate ก็มี มีอีกหลายๆ ตัว เช่น เอ่อ

Let's say ว่าผมมี ผมมี noise 3 ออกมา ทีนี้ผมบอกว่าผมจะเอา

modulate สมมติ modulate ทั่วไปของ osc 10 จะหน้าตาประมาณนี้ ไม่ค่อยเห็น หน้าตาประมาณนี้ละกัน โอเค ทีนี้ผมอยาก…

ผมใส่สีแล้วกัน จะได้เห็นชัดขึ้น สมมติว่าสีแดงแล้วกัน ช่วยไหมนะ

ไม่ช่วยเหรอ เอาสีนี้ไหม อ้าว ไม่ช่วยเลยอ่ะ เอาสีขาวดำ โอเค

ทีนี้ modulate มันก็มีหลายตัว มันไม่ใช่มีแค่เอามากวนสัญญาณอย่างเดียว

Modulate ในมิติ Geometry: scale และ rotate15:02

มันสามารถกวนสัญญาณใน ในลักษณะ geometry ได้ หมายถึงว่าเราสามารถบอกว่าเรา modulate scale ได้ โอเค อาจจะเห็นไม่ชัด ขอเปลี่ยนใหม่เป็น osc 4 เอาออกมา อ่า 10 แล้วกัน… osc(50) แล้วกัน แล้วผมบอกว่าผมกวนนะ ผมบอกว่าผมกวนด้วย noise ก่อน ด้วย noise(3) มันจะเป็นอย่างงี้ ทีนี้เราสามารถกวนในมิติอื่นได้ เช่น กวนในมิติของ scale ก็คือแทนที่มันจะมากวนสัญญาณธรรมดา มันมากวนสัญญาณในรูปแบบการคิดเรื่อง scale ด้วย มันก็คือมันจะมีจุดหนึ่งที่มันจะ zoom out zoom in ก็คือ scale เข้า scale ออกอ่ะ แบบพิสดารเป็นพิเศษ นอกจาก scale ผมสามารถ modulate rotate ได้ ทีเนี้ยคือ…

อย่างถ้า modulate ธรรมดามัน มันเป็นอย่างงี้ใช่ไหม rotate มันจะเหมือนว่ามันเอาการ rotate อ่ะ มาคิดในแง่ modulate ได้

การรวมสัญญาณและ output หลายช่องสัญญาณ16:02

นอกจากนี้เรา สิ่งที่เราทำเราสามารถ เอ่อ สามารถเรียกว่าเหมือน เอาสัญญาณกับสัญญาณมายำกันได้ ถูกไหมครับ ทีนี้ถ้าเราไม่ใส่เลย default มันคือ output 0 ผมบอกว่าจริงๆ อะ ใน Hydra มันมีอยู่ 4 output ผมบอกว่าอันเนี้ยผมให้ output 1 มันพอ output 1 เรายังไม่เห็นถูกไหม เพราะว่ามัน มันเหมือนมันคำนวณอยู่ข้างนอก ทีนี้ผมบอกว่าผมสามารถ แต่เดี๋ยวผมเอาโชว์ให้ดูก่อน เดี๋ยวผมจะเอาสัญญาณนี้ voronoi 10 เนี่ยมากวนกับสัญญาณตัวแรก เดี๋ยวผมจะบอกว่าผมเอา voronoi มา ผมก็ทำด้วยการ… ผมอาจจะบอกว่าผมเอามาดิฟเฟอเรนซิเอตกัน มองว่าเหมือนแบบโปรแกรม Photoshop หรือว่าเอาอะไรพวกนี้ เหมือนเอาภาพมาดูว่าสัญญาณมันต่างกันยังไง ผมอาจจะบอกดิฟเฟอเรนซ์โอนึง เอ่อ

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

แต่ผม ผมชอบดิฟเพราะว่าดิฟมันสวยดีอ่ะ ผมอาจจะบอกว่าผมใส่ colorama

ไม่รู้เหมือนกัน แต่ว่าอันนี้มันจะรบกวนไหม ผม

ผมก็ทำหลายอย่างได้อีก อ่า มี

เชื่อมต่อ Hydra กับแหล่งสัญญาณภายนอก: กล้อง, สกรีนแคปเจอร์, ไมค์17:48

แต่ขอโชว์อย่างสุดท้ายแล้วกัน เวลาใกล้หมดแล้ว คือ Hydra มันก็เหมือนเอาสัญญาณมาจากที่อื่นได้ เช่น ผมบอกว่าผมเอาจากกล้องเว็บแคม อะ เดี๋ยวผมจะเอามา เอามาดิฟกล้องเว็บแคม

ชัดไหมนะ?

Oh no เอาอันนี้ออกไปก่อน เค

ก็จะเหมือนว่าเราเล่นกับกล้องเว็บแคมได้ เราเล่นกับ เอ่อ สกรีนแคปเจอร์หน้าจอได้ เช่น ผมเอาอันนี้มาสกรีน

ใช่ไหม? ก็คือผมสามารถเล่นกับวิดีโอแคม เว็บแคม ผมเล่นกับการสกรีนแคปเจอร์ได้

ผมเอาไมค์ซอร์สมายำได้นะครับ ก็อาจจะประมาณนี้ครับ

Q&A: การใช้งาน Hydra ในคอนเสิร์ต, คลับ และการเชื่อมต่อกับ Audio18:46

ขอบคุณครับ มีใครมีคำถามไหมครับ เวลาผมน่าจะหมดแล้ว เอาไปลองเล่นได้ สนุกๆ ดีครับ

นี่มันเป็นเรียกว่างานด้านอะไรครับ?

หมายถึงมันเหมือนเราใช้พวกคอนเสิร์ตอะไรอย่างเงี้ย ใช่ ครับ มันก็เล่นได้หลายแบบ คือเอาไปเล่นคอนเสิร์ตก็ได้ ถ้าเขาให้เราเล่นอะนะ เอาไปเล่นในคลับได้ หรือว่าจริงๆ แล้ว เราก็เอามาเล่นกันเองก็ได้ เพราะจริงๆ ตัวนี้มันก็เหมือนมันเอาไปต่อกับ… เหมือน P5 ตอนบ่าย ก็คือมัน มันก็มีเรื่อง audio interactive อ่า สมมุติผม ผมบอกว่าผมจะ เอาชัดๆ ละกัน อ่า… shape shape(4) สมมติผมบอกว่าผมจะให้ อ่า มันตาม audio interactive ผมก็บอกว่าออดิ เอ่อ audio.fft ก็คือฟูเรียเห็นไหม?

โอ้ มันอาจจะเยอะไป เอ่อ

เทสต์ เทสต์ อะ stop sharing ก่อนแล้วกันนะ

เอ่อ

ขอ reset ก่อน ไม่รู้มาเปล่า

ครับ มันก็มา เอ้ย ไปต่อกับออดิโอได้ เอ่อ มันเอาซอร์สวิดีโอมาเล่นได้ เอาซอร์สอิมเมจมาเล่นได้ วิดีโอแคม เอ่อ สกรีนแคปเจอร์

มาไหมนะ น่าจะมาละ เอ่อ อันนี้เป็น shape .scale

.scale ผมเอาเล่นแบบว่า เล่นกับออดิโอ

ทำไมมันใหญ่เกิน Rotate ได้ไหม? เทสต์ เทสต์ อืม โอเค มันอาจจะมีปัญหาเรื่องไมโครโฟน

เล่นกับอันนี้ได้ครับ มีคำถามไหมครับ? ครับ ถ้าไม่มีก็น่าจะประมาณนี้ก่อนครับ ครับผมครับ