जावा और प्रोसेसिंग का उपयोग करके कमाल वेब कैमरा प्रभाव कैसे बनाएं

• प्रोग्रामिंग

विज्ञापन

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

कई ग्राफिक्स और एनीमेशन शुरुआती परियोजनाएं हैं जो प्रसंस्करण का उपयोग करती हैं, लेकिन यह लाइव वीडियो में हेरफेर करने में भी सक्षम है।

आज आप प्रसंस्करण वीडियो लाइब्रेरी का उपयोग करके माउस द्वारा नियंत्रित विभिन्न प्रभावों का लाइव वीडियो स्लाइड शो बना रहे हैं। लाइव वीडियो को फ़्लिप करने के साथ-साथ, आप इसे आकार देना और रंग देना सीखेंगे, और इसे माउस कर्सर का अनुसरण कैसे करें।

प्रोजेक्ट सेटअप

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

आपको स्केच> आयात पुस्तकालय> लाइब्रेरी जोड़ें के तहत पहुंच योग्य, प्रसंस्करण वीडियो लाइब्रेरी स्थापित करने की आवश्यकता हो सकती है। खोज बॉक्स में वीडियो खोजें, और प्रोसेसिंग फाउंडेशन से लाइब्रेरी स्थापित करें।

एक बार स्थापित होने के बाद, आप जाने के लिए तैयार हैं। यदि आप कोडिंग को छोड़ना चाहते हैं, तो आप पूरा स्केच डाउनलोड कर सकते हैं। हालांकि, इसे खरोंच से खुद बनाना बेहतर है!

प्रसंस्करण के साथ एक वेब कैमरा का उपयोग करना

लायब्रेरी को आयात करने और सेटअप फ़ंक्शन बनाने से शुरू होता है। रिक्त प्रसंस्करण स्केच में निम्नलिखित दर्ज करें:

 import processing.video.*; Capture cam; void setup(){ size(640, 480); cam = new Capture(this, 640, 480); cam.start(); } 

वीडियो लाइब्रेरी आयात करने के बाद, आप वेब कैमरा से डेटा स्टोर करने के लिए कैम नामक कैप्चर इंस्टेंस बनाते हैं। सेटअप में, आकार समारोह में काम करने के लिए एक 640 × 480 पिक्सेल आकार की खिड़की स्थापित करता है।

अगली पंक्ति कैम को कैप्चर के एक नए उदाहरण के लिए असाइन करती है, इस स्केच के लिए, जो कि विंडो के समान आकार है, कैमरे को कैम.स्टार्ट () के साथ चालू करने के लिए कहने से पहले।

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

 void draw(){ if (cam.available()){ cam.read(); } image(cam, 0, 0); } 

ड्रा फंक्शन को हर फ्रेम कहा जाता है। इसका मतलब यह है कि कई बार प्रत्येक सेकंड, अगर कैमरा में डेटा उपलब्ध है, तो आप इससे डेटा पढ़ते हैं ।

इस डेटा को तब 0, 0 की स्थिति में एक छवि के रूप में प्रदर्शित किया जाता है, जो कि विंडो के ऊपर बाईं ओर है।

अपना स्केच सहेजें, और स्क्रीन के शीर्ष पर प्ले बटन दबाएं।

सफलता! कैम द्वारा संग्रहीत डेटा को सही ढंग से स्क्रीन पर हर फ्रेम में प्रिंट किया जा रहा है। यदि आपको समस्या हो रही है, तो अपने कोड को अच्छी तरह से जांच लें। जावा को सही जगह पर हर ब्रैकेट और सेमी-कोलोन की आवश्यकता होती है! प्रसंस्करण को वेबकैम तक पहुंचने के लिए कुछ सेकंड की भी आवश्यकता हो सकती है, इसलिए यदि आपको लगता है कि स्क्रिप्ट लॉन्च करने के कुछ सेकंड बाद यह काम नहीं कर रहा है।

पिक्चर को फ्लिप करना

अब जब आपको एक लाइव वेबकैम छवि मिल गई है तो आइए इसे हेरफेर करते हैं। ड्रा फ़ंक्शन में, छवि को बदलें (कैम, 0, 0); कोड की इन दो पंक्तियों के साथ।

 scale(-1, 1); image(cam, -width, 0); 

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

उल्टा छवि को फ़्लिप करने के लिए बस कुछ परिवर्तनों की आवश्यकता है।

 scale(-1, -1); image(cam, -width, -height); 

इस बार, दोनों x और y मान फ़्लिप किए गए हैं, जो लाइव कैमरा छवि को उल्टा कर रहे हैं। अब तक आपने एक सामान्य छवि, एक क्षैतिज रूप से फ़्लिप की गई छवि और एक लंबवत फ़्लिप की गई छवि को कोडित किया है। आइए उनके बीच साइकिल चलाने का एक तरीका तय करें।

यह चक्र बना रही है

हर बार आपके कोड को फिर से लिखने के बजाय, हम उनके माध्यम से चक्र करने के लिए संख्याओं का उपयोग कर सकते हैं। स्विचर नामक अपने कोड के शीर्ष पर एक नया पूर्णांक बनाएं।

 import processing.video.*; int switcher = 0; Capture cam; 

कैमरा छवि का क्या होता है, यह निर्धारित करने के लिए हम स्विचर के मान का उपयोग कर सकते हैं। जब स्केच शुरू होता है, तो आप इसे 0 का मान देते हैं। अब हम तर्क का उपयोग कर सकते हैं कि छवि का क्या होता है। इस तरह दिखने के लिए अपनी ड्रा विधि को अपडेट करें:

 void draw(){ if (cam.available()){ cam.read(); } if(switcher==0){ image(cam, 0, 0); } else if(switcher == 1){ scale(-1, 1); image(cam, -width, 0); } else if(switcher == 2){ scale(-1, -1); image(cam, -width, -height); } else{ println("Switcher = 0 again"); switcher = 0; } } 

अब, कोड के सभी तीन रूपांतर स्विचर के मान के आधार पर ट्रिगर होंगे। यदि यह हमारे किसी से मेल नहीं खाता है या यदि अन्य स्टेटमेंट्स, तो दूसरा क्लॉज रीसेट हो जाता है। तर्क सीखने के लिए एक महत्वपूर्ण शुरुआत कौशल है, और आप उनके बारे में और एक उत्कृष्ट YouTube प्रोग्रामिंग ट्यूटोरियल के साथ और भी बहुत कुछ जान सकते हैं। 17 सर्वश्रेष्ठ YouTube प्रोग्रामिंग ट्यूटोरियल 17 सर्वश्रेष्ठ YouTube प्रोग्रामिंग ट्यूटोरियल इस पोस्ट में, हम आपको कुछ सर्वश्रेष्ठ YouTube प्रोग्रामिंग श्रृंखलाओं के बारे में बताना चाहते हैं। ये सभी एक नौसिखिया प्रोग्रामर के रूप में आपके पैरों को गीला करने के लिए पर्याप्त हैं। अधिक पढ़ें !

माउस का उपयोग करना

प्रसंस्करण में माउस तक पहुँचने के लिए अंतर्निहित विधियाँ हैं। जब उपयोगकर्ता माउस पर क्लिक करता है, तो यह पता लगाने के लिए कि आपकी स्क्रिप्ट के निचले भाग पर माउसपॉन्ड फ़ंक्शन जोड़ें।

 void mousePressed(){ switcher++; } 

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

अब, जब आप माउस बटन दबाते हैं, तो यह मूल पर लौटने से पहले, वीडियो के विभिन्न झुकावों के माध्यम से चक्र करता है। अभी तक आपने वीडियो को फ़्लिप किया है, अब कुछ और दिलचस्प करते हैं।

अधिक प्रभाव जोड़ना

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

 else if(switcher == 3){ tint(256, 0, 0); image(cam, 0, 0, width/2, height/2); tint(0, 256, 0); image(cam, width/2, 0, width/2, height/2); tint(0, 0, 256); image(cam, 0, height/2, width/2, height/2); tint(256, 0, 256); image(cam, width/2, height/2, width/2, height/2); } 

यह कोड स्क्रीन के प्रत्येक कोने में चार अलग-अलग कैमरा छवियों को बनाने और उन्हें सभी आधे आकार में बनाने के लिए छवि फ़ंक्शन का उपयोग करता है।

टिंट फ़ंक्शन प्रत्येक कैमरा छवि में रंग जोड़ता है। कोष्ठक लाल, हरे और नीले (RGB) मान हैं। चुने गए रंग के साथ सभी निम्न कोड रंग।

सहेजें और परिणाम देखने के लिए खेलें। रंग बदलने के लिए प्रत्येक टिंट फ़ंक्शन में RGB नंबर बदलने का प्रयास करें!

यह माउस का पालन करें

अंत में, आइए प्रोसेसिंग लाइब्रेरी से उपयोगी कार्यों का उपयोग करके लाइव इमेज को माउस पोजीशन का अनुसरण करें। इसे अपने तर्क के दूसरे भाग से ऊपर जोड़ें।

 else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } 

यहाँ, आप अपने कैमरे से mouseX और mouseY पर छवि की स्थिति बना रहे हैं। ये प्रसंस्करण मूल्यों में निर्मित होते हैं जो माउस को इंगित करते हुए किस पिक्सेल पर लौटते हैं।

बस! कोड के माध्यम से लाइव वीडियो के पांच रूपांतर। हालाँकि, जब आप कोड चलाते हैं, तो आपको कुछ समस्याएं दिखाई देंगी।

संहिता को पूरा करना

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

 void draw(){ tint(256, 256, 256); background(0); //draw function continues normally here! 

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

वेबकेम इफेक्ट्स: कोड से कला

प्रसंस्करण बहुत शक्तिशाली है, और आप इसे कई चीजों को करने के लिए उपयोग कर सकते हैं। यह कोड के साथ कला बनाने के लिए एक उत्कृष्ट मंच है, लेकिन यह रोबोटों को नियंत्रित करने के लिए समान रूप से अनुकूल है!

यदि जावा आपकी चीज नहीं है, तो p5.js. नामक प्रोसेसिंग पर आधारित एक जावास्क्रिप्ट लाइब्रेरी है यह ब्राउज़र-आधारित है, और यहां तक ​​कि शुरुआती भी इसका उपयोग शानदार प्रतिक्रियाशील एनिमेशन बनाने के लिए कर सकते हैं। कैसे p5.js में एक वॉयस-सेंसिटिव रोबोट एनिमेशन को स्क्रिप्ट करें कैसे p5.js में एक वॉयस-सेंसिटिव रोबोट एनिमेशन को स्क्रिप्ट करें कैसे अपने बच्चों को प्रोग्रामिंग में रुचि रखना चाहते हैं ? उन्हें एक ध्वनि प्रतिक्रियाशील एनिमेटेड रोबोट सिर के निर्माण के लिए इस गाइड को दिखाएं। अधिक पढ़ें !

चित्र साभार: Syda_Productions / Depositphotos

इसके बारे में अधिक जानें: कोडिंग ट्यूटोरियल, जावा, प्रोसेसिंग, वेबकेम।