संगीत खिलाड़ी के लिए दृश्य

लेख में जानकारी एक संगीत खिलाड़ी के लिए विज़ुअलाइज़ेशन बनाने के विषय को कवर करेगी। ऐसा हुआ कि कार्यक्रम as3 में लिखा गया था, क्योंकि यह अब मैं जिस भाषा में प्रोग्रामिंग कर रहा हूं।
यह सब Phthalo के कोरोना दृश्य से शुरू हुआ जो AIMP खिलाड़ी में देखा गया था। मैंने लंबे समय तक सोचा कि यह कैसे काम करता है और आखिरकार कुछ के साथ आया।

पहला प्रोटोटाइप C ++ में लिखा गया था।


नतीजतन, मुझे केवल इस दृश्य में कणों के आंदोलन का एक प्रोटोटाइप मिला। इस पर मैं रुक गया और आधे साल बाद मैं फिर से ध्वनि के साथ काम करना चाहता था। 2 दिनों के बाद, ऐसी फ्लैश ड्राइव तैयार थी।
प्रतिक्रिया दें संदर्भ
माउस क्लिक - ब्लर मोड बदलें।

इसे सही ढंग से काम करने के लिए, आपको किसी ब्राउज़र में किसी प्रकार का संगीत प्लेयर (उदाहरण के लिए, VKontakte पर) खोलने की आवश्यकता है, और ऑडियो डेटा के साथ सभी अतिरिक्त टैब को बंद कर दें, क्योंकि जब साउंडमिक्सर। PuteSpectectrum फ़्लैश ड्राइव के माध्यम से स्पेक्ट्रल डेटा प्राप्त होता है, तो इसके कारण दुर्घटना हो सकती है यह तथ्य कि अन्य एप्लिकेशन उन्हें ऑडियो डेटा लेने की अनुमति नहीं देते हैं। अगर यह नहीं गिरता है, तो कुछ भी बंद नहीं किया जा सकता है। जैसा कि उल्लेख किया गया था, अन्य टैब से मेरे क्रोम ध्वनि में पकड़ा नहीं गया है।

अब यह कैसे काम करता है इसका अवलोकन करने के लिए आगे बढ़ते हैं।

भौतिक विज्ञान

कण क्षेत्र में स्थित हैं (इस मामले में, 650)। 600 सक्रिय कण और 50 कण जो इस क्षेत्र में एक यादृच्छिक बिंदु पर दिखाई देते हैं और नीचे गिरते हैं, जब ऐसा कण फर्श को छूता है, तो यह क्षेत्र में फिर से प्रतिक्रिया देगा। बेशक, गुरुत्वाकर्षण सभी कणों पर कार्य करता है।
गुरुत्वाकर्षण के अलावा, कणों को एक आकर्षण और प्रतिकारक द्वारा प्रभावित किया जा सकता है। अब मैं समझाऊंगा कि किस तरह की चीजें इतनी जादुई होती हैं। वास्तव में, वे बिल्कुल भी जादुई नहीं हैं, उनके पास बस एक ही नाम के समान अपमानजनक नाम हैं "खुद को व्यक्त करने के लिए" प्रोफेसर।

एक आकर्षित करने वाला ऐसा काम है जो हर उस चीज को आकर्षित करता है जो खुद के लिए संभव है। इस मामले में, कण, और दूर कण कण से है, कमजोर इसे आकर्षित किया है।

एक प्रतिकारक एक आकर्षित करने वाले के समान है, लेकिन इसके विपरीत यह खुद से सब कुछ दोहराता है।

तो, कुछ शर्तों के तहत (ध्वनि स्पेक्ट्रम के आधार पर), एक अणु और कणों पर एक प्रतिकारक कार्य होता है। इस वजह से, वे क्षेत्र में इतने कूद रहे हैं।

ड्राइंग

बिटमैपडेटा कणों के लिए बनाया गया है, सभी के लिए एक (यह तार्किक है)। यह एक छोटा सफेद सर्कल है, क्यों सफेद नीचे की व्याख्या करेगा।

var radius: Number = PARTICLE_SIZE * 0.5; var particleShape: Shape = new Shape(); particleShape.graphics.beginFill(0xFFFFFF); particleShape.graphics.drawCircle(PARTICLE_SIZE * 0.5, PARTICLE_SIZE * 0.5, radius); m_ParticleBmp = new BitmapData(PARTICLE_SIZE, PARTICLE_SIZE, true, 0x0); m_ParticleBmp.draw(particleShape); 

कण इस तरह खींचे जाते हैं:

 var velDir: Number = Math.atan2(part.vel.y, part.vel.x); var speed: Number = Math.max(Math.abs(part.vel.y), Math.abs(part.vel.x)); if (speed > 20) speed = 20; matr.identity(); matr.scale(1.3 + speed / 20.0 * 4.0, 0.5); matr.rotate(velDir); matr.translate(part.pos.x, part.pos.y); m_BackBuffer.draw(m_ParticleBmp, matr); 

मैट्रिक्स कणों को बदल देता है ताकि चलते समय वे खिंचाव करें। कुछ भी जटिल नहीं है।

प्रभाव

पैलेट

विज़ुअलाइज़ेशन शुरू करते समय, पैलेट्स बनाए जाते हैं, जिसमें से अंतिम छवि प्रदान करते समय रंग का नमूना लिया जाता है (डेमोक्रैटिक उपयोगकर्ता का मानक निर्धारण :)

उन्हें प्रक्रिया में अनियमित रूप से चुना जाता है।

पैलेट के साथ काम करने के लिए, आपको 256 मानों के आकार के साथ 3 सरणियों को तैयार करने की आवश्यकता है। ये लाल, हरे और नीले रंग के लिए एरेज़ होंगे।

इनका उपयोग करने के लिए, आपको बिटमैपडेटा क्लास के पैलेटमैप फ़ंक्शन का उपयोग करना होगा। यह इन सरणियों और मूल छवि को मापदंडों के रूप में प्राप्त करता है।

यह इस तरह काम करता है:

1. पिक्सेल रंग मूल छवि से लिया गया है, पूर्णांक;
2. यह रंग आरजीबी (बाइट) घटकों में टूट गया है;
3. इन घटकों के लिए, संबंधित सरणी से मान लिया जाता है, ये नए आरजीबी मूल्य होंगे;
4. नए आरजीबी मानों को पूर्णांक में वापस एकत्र किया जाता है।

अब मैं बताऊंगा कि कणों को सफेद और पृष्ठभूमि को काला क्यों चित्रित किया जाना चाहिए।

फ़िल्टर को लागू करते समय, सभी पिक्सेल धुंधले हो जाएंगे और परिणामस्वरूप, यदि आप कुछ भी नहीं खींचते हैं, तो वे काले हो जाएंगे। पैलेट को लागू करते समय, काले को किसी भी रंग से बदल दिया जाता है, इसलिए जब धुंधला हो जाता है, तो रंग सुचारू रूप से उस रंग में परिवर्तित हो जाएगा जिसकी हमें ज़रूरत है (जिस बफर में कण खींचे जाते हैं, वह पृष्ठभूमि काला रहेगा)।

पैलेट इसलिए बनाया गया है कि ऊपरी सूचकांकों (255 - सफेद) आरजीबी सरणियों में, कणों का रंग दर्ज किया जाता है, और निचले (0 - काले) पृष्ठभूमि के रंग में। अन्य सभी सूचकांकों में [1..254], पृष्ठभूमि रंग से कण रंग तक ढाल रंग दर्ज किए गए हैं। बेशक, कोई भी पैलेट में 2 से अधिक रंगों को जोड़ने के लिए परेशान नहीं करता है और उनके बीच एक ढाल बनाता है।

विरूपण नक्शा

मूल दृश्य में, कण निशान का एक बहुत ही दिलचस्प मोड़ बनाया गया है। मैंने उसे समझने के लिए लंबे समय तक कहा कि यह कैसे काम करता है।

अंत में, मैं इस नतीजे पर पहुंचा कि यह एक अतिशयोक्तिपूर्ण सर्पिल है ।

हाइपरबोलिक सर्पिल का समीकरण (ध्रुवीय निर्देशांक में):
r * phi = a, जहां एक सर्पिल विचलन दर है

कार्तीय निर्देशांक में:
x = a * cos (phi) / phi,
y = a * sin (phi) / phi, जहाँ a / phi = r

सवाल उठने लगा कि अब इस O_O को कैसे किया जाए। सबसे पहले, आपको किसी तरह से इस तरह के विरूपण के लिए सूत्र निर्धारित करने की आवश्यकता है, और दूसरी बात यह है कि इसे फ्लैश पर कैसे करना है।

बेशक, सबसे पहले मैंने पुराने ढंग से सब कुछ करने की कोशिश की, छवि के सभी पिक्सल के माध्यम से जा रहा था और कुछ निश्चित दिशाओं में पिक्सेल को स्थानांतरित कर रहा था, इसके अलावा, यह तुरंत वहाँ धब्बा लगाएगा। लेकिन व्यवहार में, सब कुछ बहुत अलग निकला। छवि में चक्र ने एफपीएस को मार दिया। मुझे दूसरे उपाय की तलाश करनी थी।

विचार एक प्रभावी प्रभाव बनाने के लिए आया था, मैंने तुरंत विस्थापन के माध्यम से कोड पाया। लेकिन मूल में ऐसा नहीं था।

हाइपरबोलिक सर्पिल की समीक्षा पर वापस लौटना पड़ा। पूरी कठिनाई यह थी कि ध्रुवीय निर्देशांक में कोण और त्रिज्या के माध्यम से सर्पिल को स्पष्ट रूप से परिभाषित किया गया है, और मुझे एक और पैरामीटर - मोटाई जोड़ने की आवश्यकता है। परिणामस्वरूप, कुछ सूत्रों को प्राप्त करने के बाद, मैंने विस्थापन मानचित्र बनाने के लिए एक एल्गोरिथ्म लिखा।

विस्थापन नक्शा निम्नलिखित एल्गोरिदम का उपयोग करके बनाया गया है:
छवि के सभी पिक्सेल के माध्यम से जा रहे हैं, प्रत्येक पिक्सेल को एक सर्पिल (मोटाई को देखते हुए) के लिए जाँच की जाती है। यदि पिक्सेल एक सर्पिल से संबंधित है, तो इस बिंदु पर ऑफसेट की गणना करना आवश्यक है।

विस्थापन की दिशा खोजने के लिए, आप दिए गए बिंदु पर स्पर्शरेखा ले सकते हैं। गणनाओं को सरल बनाने के लिए, मैंने एक निश्चित बिंदु पर सर्कल के स्पर्शरेखा को खोजने का फैसला किया। इस दृष्टिकोण के साथ, गणना त्रुटि केवल सर्पिल की पूंछ में ध्यान देने योग्य होगी। क्योंकि जैसा कि त्रिज्या (या कोण) y बढ़ता है, समन्वय एक, यानी के लिए जाता है लाइन के लिए।

f '(x, y) = आर्कटन (y / x) - पाई / 2

अब हम केवल वेक्टर को प्राप्त कोण से पाते हैं और इसे ऑफसेट गुणांक से गुणा करते हैं। परिणाम एक ऐसा विस्थापन मानचित्र है (हरे और नीले चैनल का उपयोग करके)


दूसरे मोड में, एक और विस्थापन मानचित्र सुपरिम्पोज किया गया है जो कि पेरलिन शोर द्वारा उत्पन्न होता है।

 m_NoiseBuffer.perlinNoise(SCREEN_WIDTH, SCREEN_HEIGHT - FLOOR_POS, 2, 1, false, true, BitmapDataChannel.RED | BitmapDataChannel.BLUE, false, [m_OctaveOffset, m_OctaveOffset]); 

यहाँ एक अच्छी छवि है जो सामने आती है:


पीढ़ी के दौरान अधिक सप्तक जोड़ना संभव होगा, लेकिन हर अपडेट के लिए शोर उत्पन्न होता है (इसके लिए सप्तक पारी का उपयोग किया जाता है, आंदोलन के प्रभाव के लिए)।

परिणामस्वरूप, रेंडरिंग चरण इस प्रकार हैं:

1. बैकस्‍फ़्ट के साथ ऑफ़स्‍सेट के साथ एक विस्‍थापन मानचित्र फ़िल्टर फ़िल्टर लागू किया जाता है।
2. कलंक फ़िल्टर (x: 8, y: 8, गुणवत्ता: 1) बैकबफ़र पर लागू होता है।
3. ColorTransform बैकबफ़र पर लागू होता है, इसलिए हम छवि की फीका दर को समायोजित करते हैं।
4. बैकफ़ायर में कणों को आकर्षित करें।
5. हम पैलेट मैप को screeBuffer पर लागू करते हैं, और स्रोत छवि के रूप में बैकबफर का उपयोग करते हैं।
6. खैर, आखिरी मंजिल के एक उल्टे टुकड़े को आकर्षित करते हैं

स्रोत

यह सब, देखने के लिए धन्यवाद!