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

มาทำความรู้จักกับ Hydra.js เครื่องมือบนเว็บสำหรับสร้าง Visual แบบ Live coding ไม่ว่าคุณจะเป็นโปรแกรมเมอร์หรือนักสร้างสรรค์งานกราฟิก วิดีโอนี้จะพาคุณไปสำรวจความสามารถของ Hydra.js ตั้งแต่ประวัติศาสตร์ความเป็นมาที่เชื่อมโยงกับ Sandin image processor และ Demo scene ไปจนถึงการสาธิตการใช้งานฟังก์ชันต่างๆ เช่น oscillator, noise, และ kaleid พร้อมตัวอย่างการปรับแต่งสี รูปทรง และเอฟเฟกต์ต่างๆ เรียนรู้เทคนิคการใช้ arrow function และตัวแปร time เพื่อสร้าง animation รวมถึงการ modulate สัญญาณเพื่อสร้าง Visual ที่ซับซ้อนและน่าสนใจยิ่งขึ้น ไม่ว่าคุณจะมีพื้นฐานการเขียนโค้ดหรือไม่ วิดีโอนี้จะเปิดโลกการสร้างสรรค์ Visual ด้วยวิธีที่ง่ายและสนุก พร้อมตัวอย่างการเชื่อมต่อกับกล้อง เสียง และ screen capture เพื่อต่อยอดไอเดียของคุณ

• แนะนำ Hydra.js: โปรแกรมสร้าง Visual ผ่านโค้ด 0:00
• Live coding คืออะไร? และประวัติศาสตร์ของ Hydra 0:43
• ต้นกำเนิด Hydra: จาก Sandin image processor สู่ยุค Demoscene 1:24
• ทำไมต้อง Hydra? เปรียบเทียบกับ p5.js, Veda, TouchDesigner 2:56
• แนวคิดหลักของ Hydra: Plug and Play วิดีโอและภาพ 4:13
• เริ่มต้นใช้งาน Hydra: เปิดเว็บ hydra.ojack.xyz และ documentation 5:06
• เขียนโค้ดสร้าง Visual ง่ายๆ ด้วย Hydra: osc, noise, shape 6:00
• เพิ่มลูกเล่นด้วย Geometry Transformation: scale, rotate, kaleid 8:06
• ปรับแต่งสีและเอฟเฟกต์: colorama และการใส่สี 11:40
• Modulate: การรบกวนสัญญาณและสร้างเอฟเฟกต์แบบอนาล็อก 12:19
• Modulate ในมิติ Geometry: scale และ rotate 15:02
• การรวมสัญญาณและ output หลายช่องสัญญาณ 16:02
• เชื่อมต่อ Hydra กับแหล่งสัญญาณภายนอก: กล้อง, สกรีนแคปเจอร์, ไมค์ 17:48
• Q&A: การใช้งาน Hydra ในคอนเสิร์ต, คลับ และการเชื่อมต่อกับ Audio 18:46