p5.js का परिचय | Introduction to p5.js in Hindi

This article is a Hindi translation of the Introduction to p5.js video by Daniel Shiffman on his youtube channel “The Coding Train”. The contents of this article is a copyright of the youtube channel The Coding Train.

यह लेख डैनियल शिफमैन द्वारा अपने यूट्यूब चैनल “द कोडिंग ट्रेन ” पर इंट्रोडक्शन टू p5.js वीडियो का हिंदी अनुवाद है। इस लेख की सामग्री यूट्यूब चैनल द कोडिंग ट्रेन का कॉपीराइट है।

p5.js के साथ बनाया गया एक सरल डिज़ाइन

नमस्कार,

इस लेख का लक्ष्य p5.js के बारे में बात करना है। p5.js क्या है? आप इसका उपयोग किस लिए कर सकते हैं? आप p5.js कैसे सीख सकते हैं? आपको किससे p5.js सीखना चाहिए?

एक परियोजना है जिसे Processing कहा जाता है। इसकी शुरुआत 2001 में Casey Reas और Ben Fry ने की थी। वे एमआईटी मीडिया लैब में एक साथ छात्र थे, डिजाइनर, कलाकार, प्रोग्रामर एक ऐसा उपकरण बनाने की कोशिश कर रहे थे जो उन्हें अपने काम में मदद कर सके। तब से, ‘क्रिएटिव कोडिंग’ (यह एक जटिल शब्द है) के प्रोग्रामिंग के माध्यम से ‘रचनात्मक अनुप्रयोग’, लेकिन मैं इसे ‘प्रोग्रामिंग के माध्यम से रचनात्मक अभिव्यक्ति’ के रूप में सोचना चाहता हूं कि आप कम्प्यूटेशनल टूल बनाते समय अपने विचारों को कैसे संवाद और व्यक्त करते हैं।

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

ब्राउज़र के इन दिनों की भाषा को JavaScript कहा जाता है। JavaScript आपको प्रोग्राम करने और सभी प्रकार की रोमांचक चीजें बनाने की अनुमति देता है जो वेब ब्राउज़र में होती हैं। यदि आप अद्वितीय और एनिमेटेड और रचनात्मक वेब सामग्री बनाने में रुचि रखते हैं, तो JavaScript सीखना, p5.js सीखना, कुछ ऐसा है जिसमें आप रुचि रख सकते हैं।

प्रोसेसिंग फाउंडेशन के साथ मिलकर Lauren McCarthy ने एक प्रोजेक्ट शुरू किया और यही p5.js है। p5.js एक ऐसा वातावरण है, जो आप को JavaScript सीखने में मदद करने के लिए एक सरल उम्मीद वाला सरल और शुरुआती-अनुकूल वातावरण है, जिससे ब्राउज़र में एप्लिकेशन, कम्प्यूटेशनल, रचनात्मक, दिलचस्प उम्मीद की दिलचस्प चीजें बनती हैं।

आप इसके साथ बहुत सारे मार्गों में जा सकते थे। आप कला बना सकते हैं, आप डेटा विज़ुअलाइज़ेशन बना सकते हैं, आप वेब डिज़ाइनर की तरह वेबसाइट बना सकते हैं, बहुत सारे रास्ते हैं जो आप चुन सकते हैं। मुझे लगता है कि एक पल के लिए यहां सोचना उपयोगी है। p5.js दो चीजें हैं:

इनमें से एक चीज यह कार्यों की लाइब्रेरी है। तो, यहाँ इसके बारे में सोचने का एक शानदार तरीका है। मान लीजिए कि आप JavaScript सीखना चाहते हैं। और आप Google पर जाएं और आप “JavaScript” टाइप करें। वाह! वहाँ बहुत सारे सुझाव हैं। एक मिलियन स्टैक ओवरफ्लो पोस्ट की तरह है, जो उस जगह की तरह है जहां लोग सवाल पूछते हैं, वहां 15 मिलियन “this.js” चीजें हैं जो आप सीख सकते हैं और कुछ ऐसा है जिसे jQuery कहा जाता है और बहुत कुछ है। तो, एक लक्ष्य, मुझे लगता है, p5.js का आपको थोड़ा सा सैंडबॉक्स, चारदीवारी वाला बगीचा, सीखने के लिए, कुछ मूल बातें, और उसके लिए, आपको कार्यों के लिए एक लाइब्रेरी मिलती है। एक सर्कल, या एक आयत बनाएं, या एक रंग सेट करें ताकि आप प्रोग्रामिंग के इन शुरुआती चरणों को सीखने के लिए बस कुछ मूल ड्राइंग फ़ंक्शन का उपयोग कर सकें।

दूसरी बात Sam Lavigne ने p5.js संपादक बनाया है। इसका मतलब है कि यह एक एप्लिकेशन है, जो आपके कंप्यूटर पर एक प्रोग्राम है जिसे आप लॉन्च कर सकते हैं और बस कुछ कोड टाइप करना शुरू कर सकते हैं और कोड के बारे में थोड़ा-बहुत प्रयोग करना और सीखना शुरू कर सकते हैं, बिना उन सभी चीजों के बड़े टुकड़ों के बारे में चिंता किए बिना, जिनकी आपको आवश्यकता है। P5.js संपादक इंटरनेट से डाउनलोड किया गया एक एप्लिकेशन है। क्या आप वाकई इसे खोलना चाहते हैं? मैं इसे खोलने जा रहा हूं। यदि आप इसे देखते हैं, तो यह पहले से ही आपके लिए थोड़े से कोड में भरा हुआ है। तो आप कहना शुरू कर सकते हैं, “आह, मुझे कार्यक्रम सीखना होगा, मुझे कुछ अजीब नई भाषा और वाक्य रचना सीखना होगा।”

ये कुछ चीजें हैं जो पहली बार होने पर प्रकाश में आएंगी। इसलिए मैं यहाँ कुछ करने जा रहा हूँ। एक बात जो मैं करने जा रहा हूँ, वह है मैं कॉल करने वाला हूं setup फंक्शन में “createCanvas”। मैं वापस जूम आउट और प्ले प्रेस करने जा रहा हूं। और देखो क्या हुआ है। मैंने कुछ लिखा जो कहता है, “createCanvas” और उसने क्या किया? इसने एक कैनवास बनाया। मैंने “rect” लिखा, जो आयत के लिए कहा, संक्षिप्त रूप। यह क्या किया? इसने एक आयत बनाई। यहाँ p5.js के साथ, पहली चीज़ जो हम सीखने वाले हैं, वह है चित्र बनाना।

function setup() {
createCanvas(400, 400);
}

function draw() {
rect(10,10,50,50);
}

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