Space Invader को ड्रॉ करने का तरीका

• Space Invader Generator का परिचय दिया गया है, और यह समझाया गया है कि यह विभिन्न pixel art invader को अपने-आप कैसे जनरेट करता है
• यह साधारण vector polygon body generation, symmetry, random points, mirroring जैसी geometric rules पर आधारित है
• arm, tentacle, horn जैसे limb elements भी randomness और geometric methods से बढ़ाए जाते हैं, जिससे आसान और रचनात्मक variations संभव होते हैं
• vector form से pixel conversion, color application, और eyes जोड़कर परिचित game graphics तैयार किए जाते हैं
• पूरी निर्माण प्रक्रिया और code implementation logic को सार्वजनिक किया गया है, ताकि learners और developers खुद customize या practice कर सकें

---

अवलोकन

Space Invader Generator एक ऐसा टूल है, जिसके जरिए कोई भी आसानी से pixel art style invader को random तरीके से बना सकता है। इस लेख में इसके काम करने का तरीका और रचनात्मक random generation की प्रक्रिया को animation और examples के साथ समझाया गया है। Invader की geometric structure, vector-to-pixel conversion, color application आदि को design और coding के मिश्रण वाले approach में पेश करना इसकी खासियत है।

शुरुआत की पृष्ठभूमि

• Rayven नाम का 3D renderer tool बनाते समय यह एहसास हुआ कि वास्तविक creative output बनाना कितना महत्वपूर्ण है
• सरल और मज़ेदार नतीजे के लिए Space Invader जैसे intuitive और आसानी से पहचाने जाने वाले subject को चुना गया
• Vector-based 3D rendering से कई classic invaders बनाकर देखने के बाद लगा कि इसे random generator तक बढ़ाना मज़ेदार होगा, और यहीं से यह काम शुरू हुआ
• इस निर्माण अनुभव को Creative Coding Amsterdam के code challenge में भी साझा किया गया

code challenge

• Space Invaders code challenge ने कई creators और developers की रुचि आकर्षित की
• अलग-अलग implementations और results इकट्ठा किए जा रहे हैं, और development communities में इसे सक्रिय रूप से साझा किया जा रहा है

sketch से pixel तक

• शुरुआत में कागज़ पर हाथ से doodle और sketch बनाकर invader की संरचना का विश्लेषण किया गया
• Aseprite टूल की मदद से 15x15 pixel grid पर कई invader shapes को digital रूप में बनाया गया
• कुछ सामान्य geometric patterns मिले, जैसे central-axis symmetry और simple polygon body
• pixel art और vector graphics के फायदों को मिलाकर, ज़्यादातर हाथ से बनाए गए designs को अपने-आप जनरेट करने वाला फीचर सफलतापूर्वक बनाया गया
• implementation की विस्तृत जानकारी GitHub repository में देखी जा सकती है

invader generation process

center तय करना

• सभी operations के reference point के रूप में center point सेट किया जाता है
• tentacles नीचे बनते हैं, इसलिए main body को थोड़ा ऊपर रखा जाता है
• पूरी symmetry का उपयोग करते हुए पहले सिर्फ एक side ड्रॉ की जाती है, फिर बाद में उसे left-right mirror करके पूरा किया जाता है

top और bottom define करना

• body के side हिस्से को डिजाइन करते समय top और bottom points को random तरीके से चुना जाता है
• symmetry axis के कारण दोनों तरफ का आकार एक जैसा बना रहता है

बाईं side ड्रॉ करना

• body के बाएँ हिस्से में 1 से 5 points random तरीके से रखे जाते हैं
• simple convex polygon से लेकर अधिक स्वतंत्र रूपांतरणों तक, अलग-अलग परिणाम बनाए जा सकते हैं
• line overlap जैसी स्थितियाँ pixelization प्रक्रिया में स्वाभाविक रूप से ठीक हो जाती हैं

दाईं तरफ reflection

• बाईं तरफ के vertex data का उपयोग करके अपने-आप right-side reflection बनाया जाता है

body polygon को जोड़ना

• points को जोड़कर vector polygon body पूरी की जाती है
• इसके ऊपर limbs जोड़ने पर invader का मुख्य आकार बनता है

limbs जोड़ना

tentacle और horn generation का तरीका

• नीचे के tentacle और ऊपर के horn अलग-अलग बनाए जाते हैं, लेकिन दोनों में वही method इस्तेमाल होता है, सिर्फ position और angle बदलते हैं

tentacle root ढूँढना

• body के सबसे नीचे वाले point को आधार बनाकर left tentacle से random generation शुरू होती है

centerline sketch करना

• random points की मदद से polyline (centerline) बनाई जाती है
• tentacle की लंबाई और shape को कई दिशाओं में बदला जा सकता है

thickness लागू करना (fat line)

• सिर्फ centerline बहुत पतली होती है, इसलिए दोनों तरफ points बनाकर मोटा tentacle shape तैयार किया जाता है
• body के पास यह मोटा होता है और सिरे की ओर पतला होता जाता है, यानी taper effect
• जहाँ मोड़ तेज़ होता है, वहाँ line width घटाई जाती है ताकि संपर्क हिस्सा प्राकृतिक लगे
• width को नियंत्रित करने के लिए easing parameter इस्तेमाल किया जाता है

tentacle पूरा करना

• दोनों सिरों के points को जोड़कर मोटा tentacle पूरा किया जाता है

कई tentacles और horns तक विस्तार

• इसी तरीके से left-right symmetry, center tentacle, top horns आदि तक विस्तार किया जा सकता है
• center tentacle के मामले में, पहले से ड्रॉ किए गए side tentacles से टकराव से बचने के लिए generation को जल्दी रोका जाता है
• horns के लिए angle range को संकरा रखा जाता है और उन्हें बाएँ-दाएँ रखा जाता है ताकि जगह न टकराए

vector से pixel में conversion

body का pixelization

• हर pixel के center के vector polygon के अंदर होने या न होने के आधार पर body pixels तय किए जाते हैं
• accuracy से ज़्यादा simplicity और execution speed को प्राथमिकता दी गई है

limbs का pixelization

• tentacles और horns पतले होते हैं, इसलिए कई बार उनका center अंदर नहीं आता
• points और आसपास के pixel centers तक की दूरी जाँचकर pixels assign किए जाते हैं
• mid-line subdivision (line splitting) से tentacles को और प्राकृतिक बनाया जा सकता है

eyes जोड़ना

• कई पहले से तैयार eye sets में से random selection किया जाता है
• इन्हें body के center के आसपास रखा जाता है, और बाहर की तरफ bumper pixels से padding दी जाती है
• overlap होने वाले pixels अपने-आप खाली कर दिए जाते हैं, ताकि वे holes जैसे दिखें

color application

color generation logic

• OKLCH color space का उपयोग किया गया है
• HSL की तुलना में यह एकसमान lightness बनाए रखता है और अधिक जीवंत color combinations देता है
• एक lightness value को स्थिर रखकर बाकी दो parameters को random सेट किया जाता है, जिससे कई variations मिलते हैं
• इससे invader का impression लगातार और visually consistent बना रहता है

CSS variations का उपयोग

• CSS variables से color को नियंत्रित किया जा सकता है
• UI elements के contrast, debug mode आदि के अनुसार lightness और saturation बदले जा सकते हैं

animation implementation

• मूल गेम की तरह 2-frame की simple animation से tentacles, horns और eyes में movement दी जाती है
• limbs की mid-line को copy करके उसे random तरीके से shift किया जाता है, जिससे बदला हुआ frame बनता है
• eyes को भी एक pixel हिलाकर अधिक जीवंतता दी जाती है

scaling

• grid size बढ़ाने पर invader और अधिक बारीक और जटिल होता जाता है
• लेकिन बहुत बड़ा होने पर vector abstraction अधिक उभरती है और मूल invader जैसा एहसास कम हो जाता है
• इसे 31x31 pixels तक सीमित रखा गया है, जबकि hidden option से अधिकतम 51x51 तक संभव है

निष्कर्ष

• अनंत तरह के colorful invaders अपने-आप बनाने वाला generator पूरा किया गया
• निर्माण और पोस्ट-प्रक्रिया के दौरान सीखने, मज़े और रचनात्मक स्वतंत्रता—तीनों हासिल हुए
• code और principles दोनों खुले हैं, इसलिए practice, experimentation, और customization के लिए यह सुविधाजनक है

निर्माण के बाद की टिप्पणी

• पोस्ट में मौजूद JavaScript code को सीखने और reference के लिए सहेजकर रखा गया है
• Anime.js और कई external dependencies की मदद से animation design की गई, और implementation TypeScript में हुआ
• अलग debug mode और step option के जरिए generation process को सीधे explore किया जा सकता है

बोनस - rope drawing post

• SVG और JavaScript से rope shape बनाने वाली पिछली interactive post भी देखने लायक है