🤘🏻 👩🏾‍⚖️ 👈 3 डी खुद करते हैं। भाग 1: पिक्सेल और रेखाएँ 🙎🏽 👋🏼 👇🏼

मैं उन पाठकों के लिए लेखों की इस श्रृंखला को समर्पित करना चाहता हूं जो 3 डी प्रोग्रामिंग की दुनिया का अन्वेषण करना चाहते हैं, उन लोगों के लिए जो गेम और एप्लिकेशन के 3 डी घटक बनाने की मूल बातें सीखना चाहते हैं। हम हर पहलू को समझने के लिए स्क्रैच से प्रत्येक ऑपरेशन को लागू करेंगे, भले ही पहले से तैयार फ़ंक्शन हो जो इसे तेजी से बनाता है। सीख लेने के बाद, हम 3D के साथ काम करने के लिए अंतर्निहित टूल पर स्विच करेंगे। लेखों की श्रृंखला को पढ़ने के बाद, आप समझेंगे कि प्रकाश, छाया, बनावट और प्रभावों के साथ जटिल तीन आयामी दृश्यों को कैसे बनाया जाए, गणित में गहन ज्ञान के बिना यह सब कैसे किया जाए, और बहुत कुछ। आप यह सब स्वतंत्र रूप से और तैयार किए गए उपकरणों की मदद से कर सकते हैं।

पहले भाग में हम विचार करेंगे:

अवधारणाओं का प्रतिपादन (सॉफ्टवेयर, हार्डवेयर)
पिक्सेल / सतह क्या है?
लाइन आउटपुट का विस्तृत विश्लेषण

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

3 डी की दिलचस्प दुनिया का पता लगाने के लिए शुरू करने से पहले, आइए उदाहरणों के लिए एक प्रोग्रामिंग भाषा चुनें, साथ ही साथ विकास का माहौल भी। मुझे 3D ग्राफिक्स प्रोग्रामिंग के लिए कौन सी भाषा चुननी चाहिए? कोई भी, आप काम कर सकते हैं जहां आप सबसे अधिक आरामदायक हैं, गणित हर जगह समान होगा। इस लेख में, जेएस के संदर्भ में सभी उदाहरण दिखाए जाएंगे (यहां टमाटर मुझे उड़ते हैं)। क्यों js? यह सरल है - हाल ही में मैं मुख्य रूप से उसके साथ काम कर रहा हूं, और इसलिए मैं आपको अधिक प्रभावी रूप से सार को बता सकता हूं। मैं उदाहरणों में JS की सभी विशेषताओं को दरकिनार कर दूंगा, क्योंकि हमें केवल सबसे बुनियादी सुविधाओं की आवश्यकता है जो किसी भी भाषा में हैं, इसलिए हम विशेष रूप से 3 डी पर ध्यान देंगे। लेकिन आप चुनते हैं कि आप क्या प्यार करते हैं, क्योंकि लेखों में, सभी सूत्र किसी भी प्रोग्रामिंग भाषा की विशेषताओं से बंधे नहीं होंगे। कौन सा वातावरण चुनना है? यह मायने नहीं रखता,जेएस के मामले में, कोई भी पाठ संपादक उपयुक्त है, आप उस का उपयोग कर सकते हैं जो आपके करीब है।

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

पिक्सेल का उपयोग करके स्क्रीन पर सभी त्रि-आयामी डिस्प्ले, बाद में लेखों में आप देखेंगे कि यह कैसे होता है। क्या यह धीमा होगा? हार्डवेयर त्वरण के बिना (उदाहरण के लिए, वीडियो कार्ड द्वारा त्वरण) - होगा। पहले लेख में, हम त्वरण का उपयोग नहीं करेंगे, हम 3 डी के बुनियादी पहलुओं को समझने के लिए खरोंच से सब कुछ लिखेंगे। आइए भविष्य के लेखों में उल्लिखित कुछ शब्दों को देखें:

(Rendering) — 3D- . , 3D- , , .
(Software Rendering) — . , , , - . , . 3D- , — .
हार्डवेयर रेंडरिंग - एक हार्डवेयर-असिस्टेड रेंडरिंग प्रक्रिया। मैं इसे गेम और एप्लिकेशन का उपयोग करता हूं। सब कुछ बहुत तेजी से काम करता है, क्योंकि बहुत सारी रूटीन कंप्यूटिंग वीडियो कार्ड का काम संभालती है, जिसे इसके लिए बनाया गया है।

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

सबसे पहले, एक प्रोजेक्ट बनाएं, मेरे लिए यह केवल एक पाठ index.html फ़ाइल है, जिसमें निम्न सामग्री है:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3D it’s easy. Part 1</title>
</head>

<body>
    <!--         -->
    <canvas id="surface" width="800" height="600"></canvas>

    <script>
        //    
    </script>
</body>

</html>

मैं अब JS और कैनवास पर बहुत अधिक ध्यान केंद्रित नहीं करूंगा - ये इस लेख के मुख्य पात्र नहीं हैं। लेकिन एक सामान्य समझ के लिए, मैं स्पष्ट करूंगा कि <कैनवास ...> एक आयत है (मेरे मामले में, 800 बाय 600 पिक्सल आकार में) जिस पर मैं सभी ग्राफिक्स प्रदर्शित करूंगा। मैंने एक बार कैनवास पंजीकृत किया और अब इसे नहीं बदलेगा।

<script> … </script>

स्क्रिप्ट - एक ऐसा तत्व जिसके भीतर हम 3D ग्राफिक्स को अपने हाथों से (जावास्क्रिप्ट में) रेंडर करने के लिए सभी तर्क लिखेंगे।

जब हमने अभी हाल ही में बनाई गई परियोजना के index.html फ़ाइल की संरचना की समीक्षा की , तो हम 3D ग्राफिक्स से निपटना शुरू करेंगे।

जब हम विंडो में कुछ खींचते हैं, तो यह अंतिम गणना पिक्सेल में बदल जाती है, क्योंकि यह वह है जो मॉनिटर प्रदर्शित करता है। जितने अधिक पिक्सल्स होते हैं, तस्वीर उतनी ही तेज होती है, लेकिन कंप्यूटर भी अधिक लोड करता है। स्टोर किए गए विंडो में हम कैसे आकर्षित करते हैं? किसी भी विंडो में ग्राफिक्स को पिक्सेल की एक सरणी के रूप में दर्शाया जा सकता है, और पिक्सेल स्वयं एक रंग है। अर्थात, 800x600 के स्क्रीन रिज़ॉल्यूशन का मतलब है कि हमारी खिड़की में 800 पिक्सेल की 600 लाइनें हैं, अर्थात् 800 * 600 = 480000 पिक्सल, बहुत कुछ, है ना? पिक्सेल एक सरणी में संग्रहीत किए जाते हैं। आइए सोचते हैं कि हम किस सरणी में पिक्सल स्टोर करेंगे। यदि हमारे पास 800 से 600 पिक्सल होने चाहिए, तो सबसे स्पष्ट विकल्प 800 के 600 के दो आयामी सरणी में है। और यह लगभग सही विकल्प है, या बल्कि, पूरी तरह से सही विकल्प है। लेकिन खिड़की के पिक्सेल, 480,000 तत्वों के एक आयामी आयाम में संग्रहीत करना बेहतर है (यदि संकल्प 800 से 600 है),सिर्फ इसलिए कि यह एक आयामी सरणी के साथ काम करने के लिए तेज़ है, क्योंकि यह बाइट्स के एक सतत अनुक्रम में मेमोरी में संग्रहीत होता है (सब कुछ पास में है और इसलिए इसे प्राप्त करना आसान है)। द्वि-आयामी सरणी में (उदाहरण के लिए, जेएस के मामले में), प्रत्येक पंक्ति को मेमोरी में अलग-अलग स्थानों पर बिखरा जा सकता है, इसलिए ऐसे सरणी के तत्वों तक पहुंच में अधिक समय लगेगा। इसके अलावा, एक आयामी सरणी पर पुनरावृत्ति करने के लिए, केवल 1 चक्र की आवश्यकता है, और दो आयामी पूर्णांक 2 के लिए, चक्र के हजारों पुनरावृत्तियों को करने की आवश्यकता को देखते हुए, गति यहां महत्वपूर्ण है। ऐसी सरणी में एक पिक्सेल क्या है? जैसा कि ऊपर उल्लेख किया गया है - यह सिर्फ एक रंग है, या इसके घटकों में से 3 (लाल, हरा, नीला)। कोई भी, यहां तक कि सबसे रंगीन चित्र विभिन्न रंगों के पिक्सेल की एक सरणी है। स्मृति में एक पिक्सेल को आप जैसे चाहें, 3 तत्वों की एक सरणी, या ऐसी संरचना में संग्रहीत किया जा सकता है, जहाँ लाल, चिकना,नीला; या कुछ और। एक छवि जिसमें पिक्सेल की एक सरणी होती है जिसे हम सिर्फ पार्स करते हैं, मैं सतह को कॉल करना जारी रखूंगा। यह पता चला है कि चूंकि स्क्रीन पर प्रदर्शित होने वाली सभी चीज़ों को पिक्सेल की एक सरणी में संग्रहीत किया जाता है, तो इस सरणी में बदलते तत्व (पिक्सेल) - हम पिक्सेल-दर-पिक्सेल स्क्रीन पर छवि को बदल देंगे। यह ठीक वैसा ही है जैसा हम इस लेख में करेंगे।

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

//     ()    
const ctx = document
.getElementById('surface')
.getContext('2d')

//     ,    
// +       
const imageData = ctx.createImageData(800, 600)

उदाहरण में, इमेजडेटा एक ऑब्जेक्ट है जिसमें 3 गुण हैं:

ऊंचाई और चौड़ाई - पूर्णांक ड्राइंग के लिए खिड़की की ऊंचाई और चौड़ाई को संग्रहीत करते हैं
डेटा - 8-बिट अहस्ताक्षरित पूर्णांक सरणी (आप इसमें 0 से 255 तक की सीमा में संख्याएँ संग्रहीत कर सकते हैं)

डेटा सरणी में एक सरल लेकिन व्याख्यात्मक संरचना है। यह एक-आयामी सरणी प्रत्येक पिक्सेल का डेटा संग्रहीत करती है, जिसे हम निम्न प्रारूप में स्क्रीन पर प्रदर्शित करेंगे:
सरणी के पहले 4 तत्व (सूचकांक 0,1,2,3) पहली पंक्ति में पहले पिक्सेल का डेटा हैं। दूसरी 4 तत्व (सूचकांक 4, 5, 6, 7) पहली पंक्ति के दूसरे पिक्सेल के डेटा हैं। जब हम पहली पंक्ति के 800 वें पिक्सेल पर पहुंचते हैं, तो बशर्ते कि खिड़की 800 पिक्सेल चौड़ी हो - 801 वीं पिक्सेल पहले से ही दूसरी पंक्ति से संबंधित होगी। अगर हम इसे बदल देते हैं, तो स्क्रीन पर हम देखेंगे कि दूसरी पंक्ति का 1 पिक्सेल बदल गया है (हालाँकि सरणी में गिनती से यह 801 वां पिक्सेल होगा)। सरणी में प्रत्येक पिक्सेल के लिए 4 तत्व क्यों हैं? ऐसा इसलिए है क्योंकि कैनवास में, प्रत्येक रंग के लिए 1 तत्व आवंटित करने के अलावा - लाल, हरा, नीला (ये 3 तत्व हैं), पारदर्शिता के लिए 1 अधिक तत्व (वे अल्फा चैनल या अस्पष्टता भी कहते हैं)। रंग की तरह अल्फा चैनल, 0 (पारदर्शी) से 255 (अपारदर्शी) की सीमा में सेट किया गया है। इस संरचना के साथ, हमें एक 32-बिट छवि मिलती है,क्योंकि प्रत्येक पिक्सेल में 8 बिट्स के 4 तत्व होते हैं। संक्षेप में: प्रत्येक पिक्सेल में शामिल हैं: लाल, हरा, नीला रंग और अल्फा चैनल (पारदर्शिता)। इस रंग योजना को ARGB (अल्फा रेड ग्रीन ब्लू) कहा जाता है। और तथ्य यह है कि प्रत्येक पिक्सेल 32 बिट्स पर कब्जा करता है, कहता है कि हमारे पास 32 बिट छवि है (वे 32 बिट्स की रंग गहराई के साथ एक छवि भी कहते हैं)।

डिफ़ॉल्ट रूप से, पिक्सेल की संपूर्ण सरणी imageData.data (डेटा एक ऐसी संपत्ति है जिसमें पिक्सेल की सरणी, और छविडेटा सिर्फ एक ऑब्जेक्ट है) मान 0 से भरा हुआ है, और अगर हमने ऐसे सरणी को आउटपुट करने का प्रयास किया, तो हम स्क्रीन पर दिलचस्प नहीं देखेंगे, क्योंकि 0 , 0, 0 काला है, लेकिन चूंकि यहां पारदर्शिता भी 0 होगी, और यह पूरी तरह से पारदर्शी रंग है, इसलिए हमने स्क्रीन पर काला भी नहीं देखा है!

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

class Drawer {
    surface = null
    width = 0
    height = 0

    constructor(surface, width, height) {
        this.surface = surface
        this.width = width
        this.height = height
    }
}

जैसा कि आप कंस्ट्रक्टर में देख सकते हैं, दराज वर्ग सभी आवश्यक डेटा लेता है और इसे बचाता है। अब आप इस वर्ग का एक उदाहरण बना सकते हैं और इसमें पिक्सेल, चौड़ाई और ऊँचाई का एक सरणी पास कर सकते हैं (हमारे पास पहले से ही यह सारा डेटा है, क्योंकि हमने इसे ऊपर बनाया है और इसे imageData में संग्रहीत किया है):

const drawer = new Drawer(
    imageData.data,
    imageData.width,
    imageData.height
)

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

drawPixel(x, y, r, g, b)  { }

कृपया ध्यान दें कि drawPixel फ़ंक्शन अल्फा पैरामीटर (पारदर्शिता) को स्वीकार नहीं करता है, और ऊपर हमने सोचा कि पिक्सेल सरणी में 3 रंग पैरामीटर और 1 पारदर्शिता पैरामीटर शामिल हैं। मैंने विशेष रूप से पारदर्शिता का संकेत नहीं दिया है, क्योंकि उदाहरण के लिए हमें इसकी बिल्कुल आवश्यकता नहीं है। डिफ़ॉल्ट रूप से, हम 255 सेट करेंगे (यानी सब कुछ अपारदर्शी होगा)। अब आइए x, y निर्देशांक में पिक्सेल के एक सरणी में वांछित रंग कैसे लिखें, इसके बारे में सोचते हैं। चूंकि हमारे पास छवि के बारे में सभी जानकारी एक-आयामी सरणी में संग्रहीत है, जिसमें प्रत्येक पिक्सेल के लिए 1 पिक्सेल (8 बिट) आवंटित किया गया है। सरणी में वांछित पिक्सेल तक पहुंचने के लिए, हमें पहले लाल स्थान सूचकांक निर्धारित करने की आवश्यकता है, क्योंकि कोई भी पिक्सेल इसके साथ शुरू होता है (जैसे [r, g, b, a])। सरणी की संरचना का थोड़ा विवरण:

हरे रंग की तालिका इंगित करती है कि कैसे रंग घटकों को एक आयामी सतह सरणी में संग्रहीत किया जाता है। एक ही सरणी में उनके सूचकांक नीले रंग में इंगित किए जाते हैं, और पिक्सेल के निर्देशांक जो ड्रापिक्सल कार्यों को स्वीकार करते हैं, जिन्हें हमें एक आयामी सरणी में सूचकांकों में परिवर्तित करने की आवश्यकता है, आर, जी, बी इंगित करते हैं, नीले रंग में पिक्सेल के लिए। इसलिए, तालिका से यह देखा जा सकता है कि प्रत्येक पिक्सेल के लिए रंग का लाल घटक पहले आता है, चलो इसके साथ शुरू करें। मान लीजिए कि हम निर्देशांक X1Y1 में पिक्सेल रंग के लाल घटक को 2 के 2 पिक्सेल के आकार के साथ बदलना चाहते हैं। तालिका में हम देखते हैं कि यह सूचकांक 12 है, लेकिन इसकी गणना कैसे करें? पहले हमें उस पंक्ति का सूचकांक मिल जाता है, जिसकी हमें आवश्यकता है, इसके लिए हम चित्र की चौड़ाई को Y और 4 से गुणा करते हैं (प्रति पिक्सेल मान) - यह होगा:

width * y * 4 
//  :
2 * 1 * 4 = 8

हम देखते हैं कि दूसरी पंक्ति इंडेक्स 8. से शुरू होती है। अगर हम प्लेट से तुलना करते हैं, तो परिणाम परिवर्तित हो जाता है।

अब आपको वांछित लाल सूचकांक प्राप्त करने के लिए पाया गया पंक्ति सूचकांक में एक कॉलम ऑफसेट जोड़ने की आवश्यकता है। ऐसा करने के लिए, पंक्ति सूचकांक में X गुना 4 जोड़ें। पूर्ण सूत्र होगा:

width * y * 4 + x * 4 
//     :
(width * y + x) * 4
//  :
(2 * 1 + 1) * 4 = 12

अब हम तालिका के साथ 12 की तुलना करते हैं और देखते हैं कि पिक्सेल X1Y1 वास्तव में सूचकांक 12 से शुरू होता है।

अन्य रंग घटकों के सूचकांकों को खोजने के लिए, आपको लाल सूचकांक में एक रंग ऑफसेट को जोड़ने की आवश्यकता है: +1 (हरा), +2 (नीला), +3 (अल्फा) । अब हम ड्राअर क्लास के अंदर ड्रापिक्सल विधि को लागू कर सकते हैं जो ऊपर दिए गए फॉर्मूले का उपयोग कर रहे हैं:

drawPixel(x, y, r, g, b) {
    const offset = (this.width * y + x) * 4

    this.surface[offset] = r
    this.surface[offset + 1] = g
    this.surface[offset + 2] = b
    this.surface[offset + 3] = 255
}

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

यह कोड का परीक्षण करने और अंत में स्क्रीन पर पहला पिक्सेल देखने का समय है। यहाँ पिक्सेल रेंडर विधि का उपयोग करके एक उदाहरण दिया गया है:

//     Drawer
drawer.drawPixel(10, 10, 255, 0, 0)
drawer.drawPixel(10, 20, 0, 0, 255)

//         canvas
ctx.putImageData(imageData, 0, 0)

ऊपर दिए गए उदाहरण में, मैं 2 पिक्सेल, एक लाल 255, 0, 0, दूसरा नीला 0, 0, 255 आकर्षित करता हूं। लेकिन छवि में परिवर्तन। डेटा सरणी (यह दराज वर्ग के अंदर की सतह भी है) स्क्रीन पर दिखाई नहीं देगी। आकर्षित करने के लिए, आपको ctx.putImageData (imageData, 0, 0) को कॉल करने की आवश्यकता है, जहां imageData वह ऑब्जेक्ट है जिसमें पिक्सेल का सरणी और ड्राइंग क्षेत्र की चौड़ाई / ऊंचाई, और 0, 0 वह बिंदु सापेक्ष है, जिससे पिक्सेल का सरणी प्रदर्शित होगा (हमेशा 0, 0 छोड़ें) ) यदि आपने सब कुछ सही ढंग से किया है, तो आपके पास ब्राउज़र विंडो में कैनवास तत्व के ऊपरी बाएँ में निम्न चित्र होगा: क्या आपने

पिक्सेल देखा? वे कितने छोटे हैं, और कितना काम किया गया है।

अब, उदाहरण के लिए, उदाहरण के लिए थोड़ा गतिशीलता जोड़ने की कोशिश करते हैं, ताकि हर 10 मिलीसेकेंड हमारे पिक्सेल को दाईं ओर शिफ्ट कर दे (हम प्रत्येक 10 मिलीसेकंड में +1 करके X पिक्सेल बदलते हैं), हम एक अंतराल पर पिक्सेल ड्राइंग कोड को सही करते हैं:

let x = 10
setInterval(() => {

    drawer.drawPixel(x++, 20, 0, 0, 255)
    ctx.putImageData(imageData, 0, 0)

}, 10)

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

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

clearSurface() {
    const surfaceSize = this.width * this.height * 4
    for (let i = 0; i < surfaceSize; i++) {
        this.surface[i] = 0
    }
}

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

let x = 10
setInterval(() => {
    drawer.clearSurface()
    drawer.drawPixel(x++, 20, 0, 0, 255)
    ctx.putImageData(imageData, 0, 0)
}, 10)

अब यदि आप इस उदाहरण को चलाते हैं, तो पिक्सेल एक-एक करके दाईं ओर चला जाएगा - पिछले निर्देशांक से अनावश्यक ट्रेस के बिना।

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

drawLine(x1, y1, x2, y2, r, g, b) { }

किसी भी पंक्ति में पिक्सेल होते हैं, यह केवल X1, y1 से x2, y2 तक पिक्सेल के साथ इसे सही ढंग से भरने के लिए रहता है। शुरू करने के लिए, चूंकि रेखा में पिक्सेल होते हैं, तो हम इसे पिक्सेल द्वारा पिक्सेल को लूप में आउटपुट करेंगे, लेकिन आउटपुट के लिए कितने पिक्सेल की गणना कैसे करें? उदाहरण के लिए, [0, 0] से [3, 0] तक एक रेखा खींचने के लिए यह सहज रूप से स्पष्ट है कि आपको 4 पिक्सेल ([0, 0], [1, 0], [2, 0], [3, 0],) की आवश्यकता है । लेकिन [१२, ६] से [४३, १४] तक, यह पहले से ही स्पष्ट नहीं है कि लाइन कितनी लंबी होगी (कितने पिक्सल प्रदर्शित करने के लिए) और उनके पास क्या निर्देशांक होंगे। ऐसा करने के लिए, थोड़ी ज्यामिति को याद करें। तो, हमारे पास एक लाइन है जो X1, y1 से शुरू होती है और x2, y2 पर समाप्त होती है।

चलो शुरुआत और अंत से एक बिंदीदार रेखा खींचते हैं ताकि हमें एक त्रिकोण मिल जाए (ऊपर चित्र)। हम देखेंगे कि खींची गई लाइनों के जंक्शन पर 90 डिग्री का कोण बना है। यदि त्रिभुज में ऐसा कोण है, तो त्रिभुज को आयताकार कहा जाता है, और इसके किनारे, जिसके बीच का कोण 90 डिग्री है, को पैर कहा जाता है। तीसरी ठोस रेखा (जिसे हम खींचने की कोशिश कर रहे हैं) को त्रिभुज में कर्ण कहा जाता है। इन दो शुरू किए गए पैरों (चित्रा में सी 1 और सी 2) का उपयोग करके, हम पायथागॉरियन प्रमेय का उपयोग करके कर्ण की लंबाई की गणना कर सकते हैं। आइए देखें कि यह कैसे करना है। कर्ण की लंबाई (या रेखा की लंबाई) का सूत्र निम्नानुसार होगा:

г и п о т е н у з а = \sqrt{к а т е т 1^{2} + к а т е т 2^{2}}

$= \sqrt{1^2 + 2^2}$

दोनों पैरों को कैसे प्राप्त करें यह भी त्रिभुज से देखा जाता है। अब, ऊपर दिए गए सूत्र का उपयोग करते हुए, हम कर्ण को खोजते हैं, जो लंबी रेखा (पिक्सेल की संख्या) होगी:

 drawLine(x1, y1, x2, y2, r, g, b) {
         const c1 = y2 - y1
         const c2 = x2 - x1

         const length = Math.sqrt(c1 * c1 + c2 * c2)

हम पहले से ही जानते हैं कि रेखा खींचने के लिए कितने पिक्सेल खींचे जाते हैं। लेकिन हमें अभी तक नहीं पता है कि पिक्सल को कैसे शिफ्ट किया जाता है। यही है, हमें एक्स 1, वाई 1 से एक्स 2, वाई 2 तक एक रेखा खींचने की आवश्यकता है, हम जानते हैं कि लाइन की लंबाई होगी, उदाहरण के लिए, 20 पिक्सेल। हम X1, y1 और x2, y2 में अंतिम में 1 पिक्सेल खींच सकते हैं, लेकिन इंटरमीडिएट पिक्सल के निर्देशांक कैसे खोजें? ऐसा करने के लिए, हमें वांछित लाइन प्राप्त करने के लिए प्रत्येक अगले पिक्सेल को X1, y1 के संबंध में स्थानांतरित करने की आवश्यकता है। मैं बेहतर तरीके से समझने के लिए एक और उदाहरण दूंगा कि हम किस तरह के विस्थापन के बारे में बात कर रहे हैं। हमारे पास अंक [0, 0] और [0, 3] हैं, हमें उन पर एक रेखा खींचने की आवश्यकता है। उदाहरण से यह स्पष्ट रूप से देखा जाता है कि [0, 0] के बाद अगला बिंदु [0, 1] और फिर [0, 2] और अंत में [0, 3] होगा। यही है, प्रत्येक बिंदु के एक्स को स्थानांतरित नहीं किया गया था, अच्छी तरह से, या हम कह सकते हैं कि इसे 0 पिक्सेल द्वारा स्थानांतरित किया गया था, और वाई को 1 पिक्सेल द्वारा स्थानांतरित किया गया था, यह ऑफसेट है।इसे [0, 1] के रूप में लिखा जा सकता है। एक और उदाहरण: हमारे पास एक बिंदु है [0, 0] और एक बिंदु [3, 6], चलो हमारे दिमाग में गणना करने की कोशिश करें कि वे कैसे शिफ्ट करते हैं, पहला होगा [0, 0], फिर [0.5, 1], फिर [1, 2] तब [१.५, ३] और इसी तरह [३, ६], इस उदाहरण में ऑफसेट [५.५, १] होगा। इसकी गणना कैसे करें?

आप निम्न सूत्र का उपयोग कर सकते हैं:

   = 2 /  
  Y = 1 /

प्रोग्राम कोड में, हमारे पास यह होगा:

const xStep = c2 / length
const yStep = c1 / length

सभी डेटा पहले से ही है: लाइन की लंबाई, एक्स और वाई के साथ पिक्सेल की ऑफसेट। हम खींचने के लिए चक्र में शुरू करते हैं:

for (let i = 0; i < length; i++) {
    this.drawPixel(
        Math.trunc(x1 + xStep * i),
        Math.trunc(y1 + yStep * i),
        r, g, b,
    )
}

पिक्सेल फ़ंक्शन के X निर्देशांक के रूप में, हम X लाइन + ऑफ़सेट X * की शुरुआत को स्थानांतरित करते हैं, इस प्रकार, i-th पिक्सेल का समन्वय प्राप्त करते हुए, हम Y समन्वय की गणना भी करते हैं। Math.trunc JS में एक विधि है जो आपको किसी संख्या के भिन्नात्मक भाग को छोड़ने की अनुमति देती है। संपूर्ण विधि कोड इस तरह दिखता है:

drawLine(x1, y1, x2, y2, r, g, b) {
    const c1 = y2 - y1
    const c2 = x2 - x1

    const length = Math.sqrt(c1 * c1 + c2 * c2)

    const xStep = c2 / length
    const yStep = c1 / length

    for (let i = 0; i < length; i++) {
        this.drawPixel(
            Math.trunc(x1 + xStep * i),
            Math.trunc(y1 + yStep * i),
            r, g, b,
        )
    }
}

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

दराज वर्ग कोड

class Drawer {
  surface = null
  width = 0
  height = 0

  constructor(surface, width, height) {
    this.surface = surface
    this.width = width
    this.height = height
  }

  drawPixel(x, y, r, g, b)  {
    const offset = (this.width * y + x) * 4

    this.surface[offset] = r
    this.surface[offset + 1] = g
    this.surface[offset + 2] = b
    this.surface[offset + 3] = 255
  }

  drawLine(x1, y1, x2, y2, r, g, b) {
    const c1 = y2 - y1
    const c2 = x2 - x1

    const length = Math.sqrt(c1 * c1 + c2 * c2)

    const xStep = c2 / length
    const yStep = c1 / length

    for (let i = 0 ; i < length ; i++) {
        this.drawPixel(
          Math.trunc(x1 + xStep * i),
          Math.trunc(y1 + yStep * i),
          r, g, b,
        )
    }
  }

  clearSurface() {
    const surfaceSize = this.width * this.height * 4
    for (let i = 0; i < surfaceSize; i++) {
      this.surface[i] = 0
    }
  }
}

आगे क्या होगा?

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

3 डी खुद करते हैं। भाग 1: पिक्सेल और रेखाएँ

आगे क्या होगा?

More articles: