Musical Spirograph - วาดลวดลายดนตรีในเบราว์เซอร์ด้วย generative art
Musical Spirograph คือโปรเจกต์เว็บที่รวมสไปรอกราฟกับการสร้างดนตรีแบบ generative ไว้ในแท็บเบราว์เซอร์เดียวกัน ผลลัพธ์ที่ได้คือภาพเรขาคณิตแบบ hypotrochoids และ epitrochoids ที่เคลื่อนไหวไปพร้อมกับโน้ตเพลง ทำให้ทั้งมองเพลินและฟังเพลินพร้อมกัน ซึ่งเป็นของเล่นดิจิทัลที่น่าสนใจสำหรับคนชอบกราฟิกเชิงคณิตศาสตร์และเสียงดนตรีเชิงสร้างสรรค์
ไอเดียและการทำงานหลัก
หลักการทำงานค่อนข้างตรงไปตรงมา จุดต่างๆ บนหน้าจอเคลื่อนที่ตามสมการทางคณิตศาสตร์ สร้างเส้นทาง hypotrochoids และ epitrochoids ขณะที่จุดเหล่านั้นวิ่งผ่านวงแหวนเป็นชั้นๆ จะเป็นตัวทริกเกอร์ให้เกิดโน้ตเสียงตามลำดับ ทำให้ภาพและเสียงมีการผสมผสานแบบ time-synced ที่ค่อนข้างสะกดสายตา
ปรับแต่งได้เยอะ - สนุกและมีรายละเอียด
ผู้ใช้ปรับแต่งได้หลากหลาย: มีตัวเลือก rotor ให้เลือก 6 แบบ, ตั้งแขนวาดพร้อมกันได้สูงสุด 3 แขน และปรับพารามิเตอร์อื่นๆ ของรูปแบบลวดลายได้ตามต้องการ นอกจากนี้ยังมีสเกลให้เลือก 6 แบบ หรือจะกำหนดโน้ตเองก็ได้ รวมถึง preset ซินธ์ 6 แบบ ผู้ใช้สามารถปรับ quantization และ BPM ยืดจำนวนวงแหวนออกไปได้ถึง 2 octaves เพื่อขยายพิสัยเสียง
ข้อจำกัดของเสียงและฟีเจอร์ที่อยากเห็น
แม้แนวคิดจะชวนเล่น แต่เอ็นจินเสียงในตอนนี้ยังไม่ได้คุณภาพสูงนัก พบปัญหาการ clipping และ artifacts เมื่อเล่นดังหรือซับซ้อน ผู้เขียนของแอปต้นฉบับยังแสดงความหวังว่าจะมีทางส่ง MIDI out เพื่อให้สามารถควบคุมซินธ์ภายนอกหรือบันทึกเป็น MIDI ได้ ซึ่งถ้ามีฟีเจอร์นี้จะเพิ่มความเป็นมืออาชีพและต่อยอดงานดนตรีได้มากขึ้น
ทำไมคนทำเว็บและนักพัฒนาควรสนใจ
Musical Spirograph เป็นตัวอย่างที่ดีของการประยุกต์เทคนิคเว็บ - ทั้งการวาดกราฟิกแบบรีลไทม์และการสังเคราะห์เสียงบนเบราว์เซอร์ หากคุณทำงานด้านพัฒนาเว็บไซต์หรือแอป การศึกษาการใช้ Canvas/WebGL ร่วมกับ WebAudio API และการจัดการเวลาแบบแม่นยำจะช่วยให้สร้างงานอินเทอร์แอคทีฟแบบเดียวกันได้ นอกจากนี้แนวคิดการแมปข้อมูลเชิงรูปทรงให้เป็นโน้ตยังใช้ได้กับโปรเจกต์ data visualization ที่ต้องการนำเสนอข้อมูลด้วยเสียง
โดยรวม Musical Spirograph เป็นของเล่นดิจิทัลที่ให้ทั้งความเพลิดเพลินและเป็นแหล่งไอเดียสำหรับนักพัฒนาและดีไซเนอร์ เสียงอาจยังต้องปรับปรุง แต่ความสามารถในการปรับพารามิเตอร์และการผสมผสานภาพกับดนตรีทำให้มันเป็นผลงานที่ควรลองเล่นสักครั้ง
ที่มา: The Verge - เรียบเรียงและสรุปเป็นภาษาไทยโดยทีมงาน IT Genius
ไอทีจีเนียส เอ็นจิเนียริ่ง ให้บริการด้านไอทีครบวงจร
ทั้งงานอบรม (Training) สัมมนา รับเขียนโปรแกรม เว็บไซต์ แอปพลิเคชัน งานออกแบบกราฟิก และงานด้าน E-Marketing ทั้ง SEO, PPC และ Social Media Marketing
ติดต่อเราเพื่อสอบถามผลิตภัณฑ์ ขอราคา หรือปรึกษาเรื่องไอทีได้เลยค่ะ
แนะนำหลักสูตรที่น่าสนใจ
Basic HTML5 and CSS3 (คอร์ส html 5 และ css 3 พื้นฐาน)
ในการ เรียน html5 และ css3 นับเป็นเทคโนโลยีการพัฒนาเว็บไซต์สมัยใหม่ เรามีการ สอน html5 ที่มีการใช้งานเว็บไซต์ผ่านอุปกรณ์ (Device) ที่หลากหลายขึ้น ด้วยความสามารถใหม่ ๆ ของ html5 และ css3 และเราจัดฝึก อบรม html5 เพื่อจะช่วยให้การพัฒนาเว็บไซต์บนแพตลฟอร์มต่าง ๆ…
Basic JavaScript
หลักสูตร Basic JavaScript นี้ถูกออกแบบมาเพื่อให้ผู้เรียนได้เรียนรู้พื้นฐานของภาษา JavaScript ซึ่งเป็นหนึ่งในภาษาที่สำคัญที่สุดสำหรับการพัฒนาเว็บแอปพลิเคชันในปัจจุบัน เนื้อหาจะครอบคลุมตั้งแต่การเขียนสคริปต์พื้นฐาน การทำงานของตัวแปร…
Basic HTML 5 + CSS 3 and jQuery
หลักสูตรนี้เหมาะสำหรับผู้ที่ต้องการเรียนรู้การเขียน HTML5 และ CSS3 ซึ่งเป็น Version ล่าสุดหลังจากที่ทาง W3C ไม่ได้ทำการเปลี่ยนแปลง Standard 2 ตัวนี้มานานมาก ซึ่งการเปลี่ยนแปลงนี้ได้เพิ่มความสามารถต่างๆ เข้ามามากมายทำให้เราสามารถสร้าง Web ได้โดยที่ไม่ต้องพึ่ง…