कला के साथ जावा, जेएस और ग्राफ़ को कैसे संयोजित करें, या एक इंटरेक्टिव थिएटर कैसे बनाया गया इसकी कहानी

इस साल एस्टोनिया में नाट्य प्रदर्शनों की एक पूरी श्रृंखला आयोजित की जाती है, श्रृंखला "इतिहास का इतिहास" में एकजुट। वर्ष के दौरान, देश के 22 सिनेमाघरों ने अपने प्रदर्शन में एस्टोनिया के शताब्दी इतिहास को प्रस्तुत किया। ड्रॉ के दौरान, एस्टोनियाई रूसी थियेटर को एस्टोनिया के भविष्य का विषय मिला।


कट के तहत - प्रौद्योगिकी और कला को कैसे संयोजित किया जाए।

हम में से प्रत्येक को इस बात का अंदाजा है कि भविष्य क्या हो सकता है: हम जिस चीज से डरते हैं, हम जो सपना देखते हैं, वह वास्तव में क्या हो सकता है। केवल थिएटर के बारे में लोगों के भविष्य के बारे में क्या सोचता है, इसके बारे में बताने वाले प्रदर्शन के बारे में नहीं बताने के लिए, हमने इस प्रश्न को उन लोगों को संबोधित किया, जिन्हें भविष्य में रहना है - बच्चों के लिए, एस्टोनिया के युवाओं के लिए 3-19 वर्ष। उत्तरदाताओं के सैकड़ों थे, और हम उनके लिए बहुत आभारी हैं।



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

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



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


आर्टीम गैरीव (नाटक के निर्देशक) लेआउट पर बुनियादी विचारों को दर्शाता है

दृश्यों का विचार एक निर्माता है जो बच्चों के हाथों में किसी भी रूप और कार्य को ले सकता है। इसमें एक ग्राफ का रूप भी है। एक ग्राफ एक विशेष सार गणितीय वस्तु है जो आपको वास्तविक दुनिया की कई घटनाओं का वर्णन और मॉडल करने की अनुमति देता है: एक सड़क नेटवर्क, एक संगठनात्मक संरचना, इंटरनेट, विभिन्न विकल्प जो लोग बना सकते हैं। चुनाव जो भूखंड की विभिन्न रेखाओं के साथ चलते हैं।



नाटकीय कार्य के अलावा, तकनीकी पक्ष से काफी चुनौतियां थीं: स्टेज लाइटिंग, एक परिष्कृत नियंत्रक प्रणाली जो सैकड़ों दृश्यों को नियंत्रित करती थी, भविष्य के प्रत्येक संस्करण के लिए कई वेशभूषा, कुशलता से एस्टोनिया में सर्वश्रेष्ठ थिएटर कलाकारों में से एक, रोजिता राउड द्वारा बनाई गई थी। अभिनेताओं को प्रत्येक वोट के बाद जल्दी से कपड़े बदलने की जरूरत थी, जो विशेष रूप से मुश्किल था जब साज़िश वोट के बहुत अंत तक बनी रही और अगला दृश्य अज्ञात था।

सभी संगीत संगत MODULSHTEIN परियोजना द्वारा लाइव खेला जाता है।

इसे थोड़ा स्पष्ट करने के लिए, आइए थोड़ा नाटक के संदर्भ में जाएं

हम खुद को एक बहु-सांस्कृतिक समाज में पाते हैं जहाँ भाषा और लिंग एक साथ मिल जाते हैं। सब कुछ अनुमति है।
समाचार विज्ञप्ति हमें प्रस्तावित परिस्थितियों में डुबो देती है।


विडंबना यह है कि ऐलेना सोलोमिना राष्ट्रीय टेलीविजन पर एक प्रस्तुतकर्ता है और कई दर्शकों के लिए जानी जाती है।

एक बहुसांस्कृतिक समाज सरासर मज़ेदार है, छोटा सेमेनोवा अराफातका और बैले टूटू के कपड़े पहने हुए एक विशाल प्रेमी के माता-पिता से मिलने जाता है।

आखिरकार, वे पार्टी में जाते हैं।




मंच के अंत में, एक वोट खुलता है, एक विकल्प की पेशकश करता है कि क्या एस्टोनिया बहुसांस्कृतिक विकास के प्रस्तावित मार्ग का पालन करेगा।

और अगर जवाब हां है, तो ...

स्वप्नलोक डायस्टोपिया में ढह जाता है और स्वतंत्रता एक गाँठ के साथ कस जाती है। नए प्रतिबंध दिखाई देते हैं, और अब कमांडो पार्टी में भाग लेते हैं और लोगों को छांटते हैं। कुछ को दाईं ओर अनुमति दी जाती है, भविष्य की ओर, दूसरों को छीन लिया जाता है और बाईं ओर भेज दिया जाता है, जहां उनका भाग्य विनाश मशीन द्वारा तय किया जाता है। (निकोलाई कराएव और बोरिस तुख के लेखों पर आधारित)

हमारे लिए क्या तकनीकी समाधान की आवश्यकता थी?

वास्तव में, यह एक और ईएमए अभिनेता (एस्टा मॉम के बाद), कृत्रिम बुद्धिमत्ता थी, जो भविष्य में एक वास्तविकता बन गई। EMA प्लॉट के साथ दर्शकों का नेतृत्व करता है, भविष्य के लिए विभिन्न विकल्पों में खुद को प्रकट करता है, और यह भी घोषणा करता है और वोट देना शुरू करता है, परिणामों को गिनता है और प्रस्तुत करता है, कहानी लाइनों के साथ जाता है। हॉल में 600 लोगों को रखा गया था। और प्रत्येक दर्शक को वोट देने का अवसर होना चाहिए था, और सिस्टम ने सही तरीके से अपने वोट की गिनती की।

एक प्लॉट के रूप में प्रस्तुत और तैयार किए गए संभावित प्लॉट विकास विकल्प ने एक जटिल और जटिल संरचना का निर्माण किया।

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


इस सभी जटिलता को एक उपयुक्त संरचना की आवश्यकता थी, जो गणना है।



प्रदर्शन के लिए तकनीकी समाधान के लिए अन्य कार्यात्मक आवश्यकताएं क्या थीं? हमें जरूरत थी:

• मतदान प्रणाली, जो मतदान की अवधि के दौरान वोट एकत्र करती है, मतदान प्रक्रिया और उनके परिणाम दिखाती है।
• क्रियाओं का स्वत: चयन - वोट के परिणामों के आधार पर, एक नए वोट के उद्घाटन या ग्राफ के तर्क के अनुसार, अगली कहानी की शुरुआत की घोषणा।
• सिस्टम को दर्शकों के साथ संवाद करना चाहिए, विकल्पों की पेशकश करनी चाहिए और प्राकृतिक भाषा में परिणामों की घोषणा करनी चाहिए।
• सिस्टम को एक सहायक निदेशक द्वारा नियंत्रित किया जाना चाहिए और मतदान प्रक्रिया के बारे में पूर्ण आंकड़े प्रदर्शित करना चाहिए।

इसलिए हमारे पास 600 लोग हैं जिन्हें एक मिनट से भी कम समय में मतदान करना चाहिए। लोगों के पास अपने फोन से वोट डालने का अवसर होना चाहिए। मोबाइल एप्लिकेशन विकल्प को तुरंत हटा दिया गया था, क्योंकि एप्लिकेशन डाउनलोड करना एक अतिरिक्त प्रयास है। यदि आप फेसबुक या गूगल नहीं हैं तो कोई भी एप्लिकेशन डाउनलोड नहीं करता है। विभिन्न मॉडल और प्रकार के फोन को अलग-अलग विकास की आवश्यकता होती है, जो 1.5 महीने और एक डेवलपर की शर्तों में अवास्तविक है। इसलिए, हमें मोबाइल फोन के लिए एक वेब एप्लिकेशन की आवश्यकता है।



सिस्टम को लॉन्च करने, राज्यों को सक्रिय करने और अन्य तकनीकी मुद्दों के लिए एक और वेब एप्लिकेशन की आवश्यकता है।

और अंत में, सबसे महत्वपूर्ण बात यह है कि ईएमए को दर्शकों के साथ कैसे बातचीत करनी चाहिए।



और यहां "सुपर" की अवधारणा को पेश करना आवश्यक है, जो मेरे लिए नया था। सुपर एक स्क्रीन है जो दृश्य को कम करती है और बंद कर देती है।

पर्दा उठाना
इसे "गिलोटिन पर्दा" या "जर्मन" पर्दे के रूप में भी जाना जाता है। अधिकांश अक्सर संगीत थिएटर में उपयोग किया जाता है। पर्दे एक पूरे कैनवास हैं, सीधे या pleated, ऊपरी किनारे के साथ सहायक बीम तक तय किए गए हैं। वाहक बीम के उठाने के साथ पर्दा एक साथ उठता है। इस तरह के पर्दे को मंच के ऊपर अंतरिक्ष की एक बड़ी ऊंचाई की आवश्यकता होती है।
(विकिपीडिया)

पर्दा चिंतनशील है और आपको विभिन्न अनुमानों को प्रदर्शित करने की अनुमति देता है, जैसे कि समाचार विज्ञप्ति, जिस पर नीचे चर्चा की जाएगी, या ईएमए स्क्रीन, जो वोट से संबंधित जानकारी, उसके परिणाम और बनाई गई पसंद को प्रदर्शित करती है।



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

निर्णय

तो, चलो ग्राफ के साथ शुरू करते हैं। डेटा संरचना, इस मामले में, एस्टोनिया के इतिहास के वेरिएंट को कहीं संग्रहीत किया जाना चाहिए। मानक संबंधपरक डेटाबेस कई कारणों से ग्राफ प्रतिनिधित्व के लिए उपयुक्त नहीं हैं। हमारे लिए, सबसे महत्वपूर्ण संग्रहित डेटा, परिवर्तन, ऑडियो फ़ाइलों के लिंक, पसंद के आधार पर और इसी तरह का लचीलापन था।

निश्चित विकल्प Neo4j था, जो दुनिया का प्रमुख ग्राफ डेटाबेस सिस्टम था। दुनिया की शीर्ष 10 प्रौद्योगिकी कंपनियों में से 7 इसका उपयोग करती हैं। यह एक बहुत ही परिपक्व तकनीक है। गति, सुविधा और एक उत्कृष्ट समुदाय ऐसे निर्णयों में कोई अन्य विकल्प नहीं छोड़ते हैं।
हमने Neo4j पर ग्राफ के रूप में नाटककारों द्वारा निर्मित एक प्लॉट का मॉडल तैयार किया। और यहां प्लॉट ट्विस्ट और टर्न का एक टुकड़ा है, यह Neo4j के अंदर से कैसा दिखता है।

Neo4j ने जो लाभ दिए उनमें से एक इसकी लचीलापन और एक सर्किट की कमी थी, जिसने कहानी को दर्द रहित रूप से बदलना, नए ऑडियो विकल्प जोड़ना और विभिन्न उपन्यासों को आपस में जोड़ना संभव बना दिया। यह एक देशी वातावरण में एक ग्राफ का एक मूल प्रतिनिधित्व है।



सर्वर साइड के संदर्भ में, कुछ संदेह थे - पायथन बनाम जावा। चुनाव जावा के पक्ष में था। कारण गति हैं, समझने योग्य आवश्यकताओं और प्रत्यक्ष हाथों से कुछ तोड़ने का कम जोखिम, और अंत में स्प्रिंग बूट, जो बॉक्स से बाहर Neo4j का समर्थन करता है।



सर्वर पार्ट स्प्रिंग बूट पर लागू किया गया है। वास्तव में, सर्वर वोटों को इकट्ठा करता है, "सुपर" से कमांड को निम्न राज्यों में स्विच करता है, जब वोट खत्म हो जाता है, तो एडमिन से कमांड प्राप्त करता है, आंकड़े देता है और इसी तरह। साथ ही फ्रंटएंड के सभी विकल्प देता है, और दर्शकों को पंजीकृत भी करता है।



अब कार्य का सबसे गैर-तुच्छ हिस्सा शुरू होता है। तथ्य यह है कि, विचार के अनुसार, "सुपर" पर प्रदर्शित होने वाले घटक को दर्शकों के साथ बात करनी चाहिए: मतदान के लिए तैयार करें, विकल्प प्रस्तावित करें, वोट शुरू करें और समाप्त करें, परिणामों की घोषणा करें और विकल्प के आधार पर अन्य विकल्पों का प्रस्ताव करें, या चयन पर जाएं और परिचय बताएं अगले दृश्य के लिए। इस प्रकार, ऑडियो को गतिशील होना चाहिए और मक्खी पर तैयार किया जाना चाहिए। यह देखते हुए कि विकल्पों की संख्या बहुत बड़ी है, और ऑडियो के प्रत्येक टुकड़े की अवधि अलग है, सिंक्रनाइज़ेशन महत्वपूर्ण है (उदाहरण के लिए, वोटिंग केवल "वोटिंग ओपन है") की घोषणा के बाद खुलनी चाहिए। और यह पूरी तरह से तुच्छ कार्य नहीं था।

प्रणाली में दो नियंत्रण केंद्र हैं।

पहला सर्वर है। यह भूखंड की वर्तमान स्थिति को संग्रहीत करता है, वोट एकत्र करता है, आंकड़े देता है, एक व्यक्ति से केवल एक वोट डालने की क्षमता को नियंत्रित करता है।
दूसरा एक "सुपर" है, जो मतदान को चालू और बंद करता है, मतदान प्रक्रिया और इतने पर दिखाता है।

सुपर वीयू पर लागू किया जाता है। प्रारंभ में, हम Google भाषण एपीआई से ऑडियो कॉल करना चाहते थे, लेकिन हम यह गारंटी नहीं दे सकते थे कि नेटवर्क पर कोई देरी नहीं हुई थी। इसलिए, एक और विकल्प चुना गया था - हमने टुकड़ों में Google भाषण एपीआई की प्रतिक्रिया दर्ज की।

कुल में, हमें ऑडियो के 55 टुकड़े मिले। वर्तमान स्थिति पर निर्भर करते हुए, हम किस ग्राफ़ पर संग्रहीत हैं, इसके बारे में ऑडियो फ़ाइलों को शामिल किया जाना चाहिए। चूंकि हम जावास्क्रिप्ट के साथ काम कर रहे हैं, हम मोतियों की तरह एक-दूसरे के ऊपर ऑडियो फाइलों और कमांड कॉल को फँसाते हैं। इस प्रकार, हमने इस तथ्य पर निर्भर नहीं किया कि विभिन्न अवधि के ऑडियो फाइलें, और एक काफी सार्वभौमिक समाधान प्राप्त किया।

प्रारंभ में, मोबाइल क्लाइंट (वेब ​​पेज) को Vue में लिखा गया था, लेकिन हमें कुछ फोन मॉडल पर आंशिक असंगतता मिली। हमने बैबेल ट्रांसप्लर्स की कोशिश की, लेकिन सेटिंग्स के ढेर के कारण, पृष्ठ का आकार बढ़ गया, और हालांकि कुछ फोन पर काम करना शुरू हो गया, लेकिन यह दूसरों पर टूट रहा था। परिणामस्वरूप, मोबाइल ग्राहक को वेनिला जेएस को फिर से लिखा गया।

संक्षेप में, यह एक वितरित प्रणाली बन गई।

सिस्टम की अंतिम मात्रा (जार फ़ाइल) 146 मेगाबाइट थी। दूरसंचार कंपनी तेलिया ने हमें प्रति माह 1 यूरो के प्रतीकात्मक मूल्य पर एक वर्चुअल सर्वर प्रदान किया, जिसके लिए वह बहुत आभारी है।

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




दिलचस्प बिंदुओं में से, एक इस तथ्य को भी उजागर कर सकता है कि हमने स्क्रीन पर अंतिम मतदाताओं के नाम दिखाए और इसके लिए Vue टेम्पलेट्स का एनीमेशन का उपयोग किया। पहली प्रस्तुति में, हमें एक हत्यारा चरित्र पेश किया गया, जिसने Vue टेम्पलेट्स के एनीमेशन और प्रदर्शन को तोड़ दिया। इसके बाद, हमने इस निर्णय को छोड़ दिया और अच्छे पुराने jQuery पर स्विच कर दिया।

और यहां प्रदर्शन के दौरान वोटिंग शॉट का एक टुकड़ा है।


प्रदर्शन को प्रेस में बड़ी संख्या में सकारात्मक समीक्षा मिली।
https://rus.postimees.ee/6141942/budet-ne-budet-net-nichego-opasnee-budushchego
https://rus.postimees.ee/6147704/nashe-zavtra-v-zerkalah-utopii-i-antiutopii


टार्टू में ड्रामा फेस्टिवल में, लगभग 5 मिनट तक ओव्यूलेशन हुआ।

यह परियोजना में शामिल लोगों की पागल ऊर्जा और समर्पण के लिए एक अविश्वसनीय साहसिक कार्य था। इस प्रदर्शन को बनाने में भाग लेने वाले सभी लोगों को एक बड़ा धनुष।

निर्देशक और सेट डिज़ाइनर - अर्टिओम गैरीव
संगीतकार, परियोजना के निर्माता - अलेक्जेंडर ज़ेडेलेव
दृश्य - ऐलेना मूवको
कॉस्ट्यूम डिज़ाइनर - रोज़िता राउड
प्रकाश डिजाइनर - एंटोन आंद्रेयुक
कोरियोग्राफर - ओल्गा प्रिविस
नाटककार: करिन लामसन, मैरी-लिइस लिली, एलेना चिचेरिना और लॉरा कैले
वीडियो - निकोलाई अलखज़ोव
प्रोग्रामिंग और एक एप्लिकेशन बनाना - अलेक्जेंडर टैवगेन, अन्ना एगाफनोवा
तकनीकी समाधान बर्फ बैकलाइट - अलेक्जेंडर स्प्रोघिस
एनिमेशन - मार्टिन याकुश
संगीत बैंड - मोदुलशीन
मार्टिन अल्त्रोव - शहनाई, बास शहनाई
एलेक्सी सेमेनखिन- नमूने, प्रभाव के साथ काम करते हैं
अलेक्जेंडर ज़ेडलेव - गिटार, सिंथेसाइज़र, सक्षम
स्वर शिक्षक - अन्ना डिडिना
सहायक निर्देशक स्वेतलाना शुशिना
निम्नलिखित प्रदर्शन में लगे हुए हैं:
नताल्या डाइमेन्को, अलेक्जेंडर ज़िलेंको, डेनियल ज़ैंडबर्ग, दिमित्री कोर्डस, एकातेरिना कोर्डस, अलेक्जेंडर कुचमेज़ोव, विक्टर मार्विन, नताल्या मरीना, ऐलेना तारासेंको, एडुआर्ड टी
सर्गेई फुरमन्युक, लियोनिद शेवत्सोव, एलेना याकोवलेवा
रूसी थियेटर स्टूडियो: डेनिस वोल्कोव, पोलीना ग्रिनेवा, नीना ज़गोज़दकिना, अनास्तासिया कोलेदा, नताशा क्रिस्टेंसेन, अनास्तासिया मसलोवा, सैंड्रा मिनोसियन, सोफिया मिखेलेवा, कैथरीन त्यागी, मिखाइल पश्चुक, कैथरीन सेलोकिना, क्रिस्टीना सोरोकिना, सोफिया स्ट्राइबर्गबर्ग, सोफिया स्ट्रीबर्ग।