@xingwangzhe/tags-cloud: शुद्ध गणित पर निर्मित मल्टी-मोडल 3D टैग क्लाउड इंजन

GitHub: xingwangzhe/tags-cloud · डेमो: tagscloud.needhelp.icu · npm: @xingwangzhe/tags-cloud · लाइसेंस: MIT · संस्करण: v0.9.0

1. परिचय: आधुनिक वेब के लिए 3D टैग क्लाउड की पुनर्कल्पना

टैग क्लाउड दो दशकों से अधिक समय से वेब विज़ुअलाइज़ेशन का एक प्रमुख हिस्सा रहा है, सरल भारित शब्द सूचियों से विकसित होकर इमर्सिव त्रि-आयामी अनुभवों में बदल गया है जो उपयोगकर्ताओं को मोहित करते हैं और सामान्य टेक्स्ट संग्रहों को इंटरैक्टिव स्थानिक मूर्तियों में परिवर्तित करते हैं। इस विकास में सबसे प्रभावशाली योगदानों में से एक cong-min/TagCloud है, एक हल्की JavaScript लाइब्रेरी जिसने दिखाया कि घूमते हुए टेक्स्ट लेबल के एक गोले को न्यूनतम ओवरहेड और शून्य बाहरी निर्भरता के साथ कैसे प्राप्त किया जा सकता है। GitHub पर 390 स्टार और 93 फोर्क के साथ, मूल TagCloud ने एक डिज़ाइन पैटर्न स्थापित किया जिसे अनगिनत डेवलपर्स ने पोर्टफोलियो साइटों, स्किल शोकेस और डेटा विज़ुअलाइज़ेशन डैशबोर्ड के लिए अपनाया है। इसका मुख्य नवाचार यह साबित करने में था कि 3D टैग क्लाउड को भारी-भरकम WebGL फ्रेमवर्क या बाहरी रेंडरिंग इंजन पर निर्भर रहने की आवश्यकता नहीं है; इसके बजाय, सीधी त्रिकोणमितीय गणनाएँ सावधानीपूर्वक DOM पोज़िशनिंग के साथ मिलकर आश्चर्यजनक रूप से सम्मोहक दृश्य परिणाम उत्पन्न कर सकती हैं।

अब आता है @xingwangzhe/tags-cloud — 3D टैग क्लाउड अवधारणा की एक जमीन से ऊपर पुनर्कल्पना जो अपने पूर्ववर्ती की गणितीय सुंदरता को संरक्षित करती है जबकि इसकी क्षमताओं का नाटकीय रूप से विस्तार करती है, इसकी आर्किटेक्चर को आधुनिक बनाती है, और एक टैग क्लाउड जो रेंडर कर सकता है उसकी सीमाओं को आगे बढ़ाती है। यह केवल एक फोर्क या फीचर जोड़ नहीं है; यह एक टेक्स्ट-ओनली, DOM-भारी रेंडरर से एक मल्टी-मोडल इंजन में एक मौलिक आर्किटेक्चरल बदलाव का प्रतिनिधित्व करता है जो टेक्स्ट, इमेज, SVG ग्राफिक्स, मनमाना HTML, वीडियो एलिमेंट और यहाँ तक कि पूर्ण Web Components — सभी को गणितीय रूप से सटीक त्रि-आयामी स्थान में एक साथ घुमाने में सक्षम है। लाइब्रेरी इस बहुमुखी प्रतिभा को लगभग 3KB gzipped के अत्यंत कॉम्पैक्ट फुटप्रिंट, शून्य रनटाइम निर्भरता और Bun को JavaScript रनटाइम, Vite को बंडलर और TypeScript को पूरे कोडबेस में पूर्ण टाइप सुरक्षा के लिए उपयोग करते हुए प्राप्त करती है।

प्रोजेक्ट का टैगलाइन — “मल्टी-मोडल 3D टैग क्लाउड · शुद्ध गणित इंजन” — इसकी दोहरी पहचान को समाहित करता है। एक ओर, यह एक व्यावहारिक UI कंपोनेंट लाइब्रेरी है जिसे डेवलपर्स किसी भी वेब प्रोजेक्ट में ड्रॉप करके दृश्यात्मक रूप से आकर्षक टैग गोले बना सकते हैं। दूसरी ओर, यह एक गणितीय इंजन है जो 3D टैग क्लाउड रेंडरिंग की जटिल समस्या को तीन शुद्ध, नियतात्मक और खूबसूरती से अलग करने योग्य ज्यामितीय संक्रियाओं में विघटित करता है: प्रारंभिक स्थिति निर्धारण के लिए फाइबोनैचि स्फीयर डिस्ट्रीब्यूशन, स्थानिक परिवर्तन के लिए रोटेशन मैट्रिक्स गुणन और गहराई-जागरूक 2D रेंडरिंग के लिए परिप्रेक्ष्य प्रोजेक्शन। इनमें से प्रत्येक संक्रिया src/core/ निर्देशिका के भीतर अपने स्वयं के समर्पित मॉड्यूल में कार्यान्वित की गई है, जो कोडबेस को न केवल अत्यधिक रखरखाव योग्य बनाती है बल्कि 3D कंप्यूटर ग्राफिक्स के पीछे के गणित को पूर्ण रेंडरिंग पाइपलाइन की अस्पष्ट जटिलता के बिना समझने के इच्छुक किसी भी व्यक्ति के लिए एक उत्कृष्ट शैक्षिक संसाधन भी बनाती है।

निम्नलिखित अनुभाग @xingwangzhe/tags-cloud के हर पहलू का एक व्यापक तकनीकी गहन विश्लेषण प्रदान करते हैं, गोल्डन-रेशियो-व्युत्पन्न स्फीयर डिस्ट्रीब्यूशन एल्गोरिदम से लेकर क्वाटरनियन-प्रेरित आर्बॉल इंटरैक्शन मॉडल तक, दोहरी Canvas/DOM रेंडरिंग आर्किटेक्चर से लेकर रिस्पॉन्सिव डिज़ाइन विचारों तक जो इसे डेस्कटॉप और मोबाइल डिवाइसों पर सहजता से काम करने योग्य बनाते हैं। चाहे आप एक डेवलपर हों जो अपने अगले प्रोजेक्ट के लिए इस लाइब्रेरी का मूल्यांकन कर रहे हैं, एक ग्राफिक्स प्रोग्रामर जो हल्के 3D तकनीकों में रुचि रखते हैं, या एक गणितज्ञ जो फाइबोनैचि जाली के वास्तविक-विश्व अनुप्रयोगों के बारे में उत्सुक हैं, यह लेख सॉफ्टवेयर इंजीनियरिंग के इस उल्लेखनीय टुकड़े के हर पहलू को रोशन करने के लिए विस्तृत स्पष्टीकरण, गणितीय व्युत्पत्तियाँ, आर्किटेक्चरल आरेख और एनोटेटेड कोड उदाहरण प्रदान करता है।

2. गणितीय आधार: 3D रेंडरिंग के तीन स्तंभ

@xingwangzhe/tags-cloud के केंद्र में तीन गणितीय संक्रियाओं का एक त्रय है, जो संयुक्त होने पर, सामग्री मदों की एक अमूर्त सूची को एक दृश्य रूप से सुसंगत घूमने वाले गोले में बदल देता है। ये संक्रियाएँ — वितरण, घूर्णन और प्रक्षेपण — src/core/ के तहत तीन समर्पित मॉड्यूल में कार्यान्वित की गई हैं, प्रत्येक एक एकल ज्यामितीय परिवर्तन के लिए जिम्मेदार है। चिंताओं का यह पृथक्करण केवल एक आर्किटेक्चरल प्राथमिकता नहीं है; यह 3D कंप्यूटर ग्राफिक्स पाइपलाइनों की मूलभूत संरचना को दर्शाता है, जहाँ वर्टेक्स जनरेशन, मॉडल ट्रांसफॉर्मेशन और कैमरा प्रोजेक्शन विशिष्ट चरण हैं जिन्हें स्वतंत्र रूप से ऑप्टिमाइज़, परीक्षण और समझा जा सकता है।

flowchart LR
    subgraph Input["📥 इनपुट लेयर"]
        TAGS["TagItem[]
(text | image | SVG | HTML | video | element)"]
        OPTS["TagCloudOptions
(radius, spin, colors, callbacks)"]
    end

    subgraph CoreEngine["⚙️ शुद्ध गणित इंजन (src/core/)"]
        direction TB
        DIST["🔵 distribution.ts
फाइबोनैचि स्फीयर
N बिंदु → 3D निर्देशांक"]
        ROT["🟢 rotation.ts
रोटेशन मैट्रिसेज़
3D बिंदु → घुमाए गए 3D बिंदु"]
        PROJ["🔴 projection.ts
परिप्रेक्ष्य प्रोजेक्शन
घुमाए गए 3D → 2D + गहराई"]
    end

    subgraph RenderLayer["🎨 रेंडर लेयर"]
        direction TB
        CANVAS["Canvas 2D API
(text + images)"]
        DOM["DOM ओवरले
(SVG + HTML + video + elements)"]
    end

    subgraph Interaction["👤 इंटरैक्शन लेयर"]
        MOUSE["माउस / टच ड्रैग"]
        INERTIA["जड़त्व क्षय
(0.96/फ्रेम)"]
    end

    TAGS --> DIST
    OPTS --> DIST
    DIST -->|"Vec3[]"| ROT
    ROT -->|"घुमाए गए Vec3[]"| PROJ
    PROJ -->|"ProjectedTag[]
(x, y, z, scale, alpha)"| CANVAS
    PROJ --> DOM
    MOUSE --> INERTIA
    INERTIA -->|"घूर्णन कोण"| ROT

    style CoreEngine fill:#1a1a2e,stroke:#16213e
    style Input fill:#0f3460,stroke:#16213e
    style RenderLayer fill:#533483,stroke:#16213e
    style Interaction fill:#e94560,stroke:#16213e,color:#fff

2.1 फाइबोनैचि स्फीयर डिस्ट्रीब्यूशन: बिंदु स्थान की सुनहरी ज्यामिति

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

यह एल्गोरिदम अपना नाम गोल्डन रेशियो (\varphi = \frac{1 + \sqrt{5}}{2} \approx 1.6180339887) से लेता है, एक गणितीय स्थिरांक जो प्रकृति में सूरजमुखी के बीजों की व्यवस्था से लेकर नॉटिलस शेल सर्पिल तक की संरचनाओं में दिखाई देता है। फाइबोनैचि संख्याओं से संबंध — वह अनुक्रम जहाँ प्रत्येक पद पिछले दो पदों का योग होता है — यह है कि क्रमिक फाइबोनैचि संख्याओं का अनुपात अनुक्रम जारी रहने पर गोल्डन रेशियो में अभिसरित होता है। गोला वितरण के संदर्भ में, गोल्डन रेशियो की अपरिमेयता सुनिश्चित करती है कि क्रमिक बिंदु हमेशा ऐसे कोणों पर रखे जाते हैं जो कभी दोहराए नहीं जाते, एक आवधिक सर्पिल पैटर्न बनाते हैं जो गोला सतह को समान रूप से भरता है।

src/core/distribution.ts में विशिष्ट कार्यान्वयन फाइबोनैचि जाली के एक प्रकार का उपयोग करता है जिसे गोलाकार मैपिंग के लिए ऑप्टिमाइज़ किया गया है। त्रिज्या (R) वाले गोले के लिए जिसमें (N) बिंदु वितरित किए जाने हैं, एल्गोरिदम प्रत्येक बिंदु (i \in {0, 1, 2, \ldots, N-1}) के लिए गोलाकार निर्देशांकों की गणना करता है और फिर उन्हें कार्तीय निर्देशांकों ((x, y, z)) में परिवर्तित करता है। अक्षांश कोण (\phi) (धनात्मक z-अक्ष, यानी उत्तरी ध्रुव से मापा गया) की गणना z-अक्ष के साथ समान वितरण सुनिश्चित करने के लिए व्युत्क्रम कोसाइन फलन का उपयोग करके की जाती है:

$$\phi_i = \arccos\left(-1 + \frac{‘{’}2i + 1{‘}’}{‘{’}N{‘}’}\right)$$

यह सूत्र पहले बिंदु को उत्तरी ध्रुव से थोड़ा नीचे और अंतिम बिंदु को दक्षिणी ध्रुव से थोड़ा ऊपर रखता है, (+0.5) ऑफसेट ((2i + 1) अंश में एम्बेडेड) यह सुनिश्चित करता है कि कोई भी बिंदु कभी भी ध्रुव पर बिल्कुल न लगे। यह सूक्ष्म समायोजन इसलिए महत्वपूर्ण है क्योंकि यह एक टैग के सीधे गोले के ऊपर या नीचे बैठने के दृश्य कलाकृति को रोकता है जहाँ घूर्णन मुश्किल से बोधगम्य होगा। (\arccos) फलन एक समान रूप से वितरित रैखिक पैरामीटर को कोसाइन-भारित कोणीय वितरण में बदलता है, जो इस तथ्य की भरपाई करता है कि गोले में ध्रुवों के पास कम सतह क्षेत्र और भूमध्य रेखा के पास अधिक होता है।

देशांतर कोण (\theta) (धनात्मक x-अक्ष से xy-तल में मापा गया) की गणना (\phi) को (\sqrt{N\pi}) द्वारा स्केल करके की जाती है, जो विशिष्ट सर्पिल पैटर्न बनाता है:

$$\theta_i = \sqrt{‘{’}N\pi{‘}’} \cdot \phi_i$$

गुणनखंड (\sqrt{N\pi}) गोल्डन कोण और गोले के कुल सतह क्षेत्र के बीच संबंध से व्युत्पन्न होता है। जैसे-जैसे (N) बढ़ता है, यह स्केलिंग सुनिश्चित करती है कि सर्पिल पड़ोसी बिंदुओं के बीच समान दूरी बनाए रखने के लिए गोले के चारों ओर उपयुक्त संख्या में घूमता है। परिणाम एक पैटर्न है जहाँ प्रत्येक क्रमिक बिंदु z-अक्ष के साथ देखने पर अपने पूर्ववर्ती से लगभग गोल्डन कोण (\approx 137.5°) घूमता है, जो प्रकृति में पाए जाने वाले फाइलोटैक्टिक सर्पिलों को दर्शाता है।

अंत में, इन गोलाकार निर्देशांकों को मानक रूपांतरण का उपयोग करके कार्तीय निर्देशांकों में परिवर्तित किया जाता है:

$$x_i = R \cdot \cos(\theta_i) \cdot \sin(\phi_i)$$

$$y_i = R \cdot \sin(\theta_i) \cdot \sin(\phi_i)$$

$$z_i = R \cdot \cos(\phi_i)$$

परिणामी बिंदु गोला समीकरण (x_i^2 + y_i^2 + z_i^2 = R^2) को संतुष्ट करते हैं और एक एकरूपता के साथ वितरित होते हैं जो बहुत अधिक कम्प्यूटेशनल रूप से महंगी ऑप्टिमाइज़ेशन-आधारित विधियों को टक्कर देता है। निम्नलिखित प्रदर्शन संपूर्ण फाइबोनैचि स्फीयर एल्गोरिदम का सारांश प्रस्तुत करता है:

$$\boxed{‘{’}\text{‘{’}FibonacciSphere{‘}’}(N, R): \quad \forall i \in [0, N-1]: \begin{‘{’}cases{‘}’} \phi_i = \arccos\left(-1 + \frac{‘{’}2i+1{‘}’}{‘{’}N{‘}’}\right) \ \theta_i = \sqrt{‘{’}N\pi{‘}’} \cdot \phi_i \ P_i = (R\sin\phi_i\cos\theta_i, ; R\sin\phi_i\sin\theta_i, ; R\cos\phi_i) \end{‘{’}cases{‘}’}{‘}’}$$

src/core/distribution.ts में TypeScript कार्यान्वयन उल्लेखनीय रूप से संक्षिप्त है, जो एल्गोरिदम की सुरुचिपूर्ण सादगी को दर्शाता है:

export interface Vec3 { x: number; y: number; z: number; }

export function fibonacciSphere(n: number, R: number): Vec3[] {
  const points: Vec3[] = [];
  for (let i = 0; i < n; i++) {
    const phi = Math.acos(-1 + (2 * i + 1) / n);
    const theta = Math.sqrt(n * Math.PI) * phi;
    points.push({
      x: R * Math.cos(theta) * Math.sin(phi),
      y: R * Math.sin(theta) * Math.sin(phi),
      z: R * Math.cos(phi),
    });
  }
  return points;
}

यह फलन Vec3 ऑब्जेक्ट्स की एक सरणी लौटाता है जो क्लाउड में सभी टैग के लिए प्रारंभिक स्थितियों के रूप में काम करती है। एल्गोरिदम (\mathcal{O}(N)) समय में चलता है, जो इसे सैकड़ों तत्वों वाले टैग क्लाउड के लिए उपयुक्त बनाता है। व्यवहार में, अधिकांश टैग क्लाउड में 20 से 100 टैग होते हैं, जिनके लिए यह गणना वस्तुतः तात्कालिक है।

2.2 3D घूर्णन: स्थानिक डोमेन में मैट्रिक्स गुणन

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

इन घूर्णनों का गणितीय आधार रैखिक बीजगणित से आता है। एक 3D रोटेशन मैट्रिक्स एक (3 \times 3) ऑर्थोगोनल मैट्रिक्स है जिसका सारणिक 1 होता है जो मूल बिंदु से इसकी दूरी को संरक्षित करते हुए एक बिंदु के निर्देशांकों को बदलता है। Y-अक्ष के चारों ओर कोण (\alpha) द्वारा घूर्णन के लिए, रोटेशन मैट्रिक्स (R_y(\alpha)) है:

$$R_y(\alpha) = \begin{‘{’}pmatrix{‘}’} \cos\alpha & 0 & \sin\alpha \ 0 & 1 & 0 \ -\sin\alpha & 0 & \cos\alpha \end{‘{’}pmatrix{‘}’}$$

X-अक्ष के चारों ओर कोण (\beta) द्वारा घूर्णन के लिए, रोटेशन मैट्रिक्स (R_x(\beta)) है:

$$R_x(\beta) = \begin{‘{’}pmatrix{‘}’} 1 & 0 & 0 \ 0 & \cos\beta & -\sin\beta \ 0 & \sin\beta & \cos\beta \end{‘{’}pmatrix{‘}’}$$

लाइब्रेरी इन घूर्णनों को क्रमिक रूप से लागू करती है: पहले Y-अक्ष घूर्णन, फिर X-अक्ष घूर्णन। एक बिंदु (P = (x, y, z)) के लिए, Y-अक्ष घूर्णन एक मध्यवर्ती बिंदु (P’) उत्पन्न करता है:

$$\begin{‘{’}pmatrix{‘}’} x' \ y' \ z' \end{‘{’}pmatrix{‘}’} = R_y(\alpha) \begin{‘{’}pmatrix{‘}’} x \ y \ z \end{‘{’}pmatrix{‘}’} = \begin{‘{’}pmatrix{‘}’} x\cos\alpha + z\sin\alpha \ y \ -x\sin\alpha + z\cos\alpha \end{‘{’}pmatrix{‘}’}$$

फिर X-अक्ष घूर्णन (P’) पर लागू किया जाता है ताकि अंतिम घुमाया गया बिंदु (P’’) उत्पन्न हो:

$$\begin{‘{’}pmatrix{‘}’} x'' \ y'' \ z'' \end{‘{’}pmatrix{‘}’} = R_x(\beta) \begin{‘{’}pmatrix{‘}’} x' \ y' \ z' \end{‘{’}pmatrix{‘}’} = \begin{‘{’}pmatrix{‘}’} x' \ y'\cos\beta - z'\sin\beta \ y'\sin\beta + z'\cos\beta \end{‘{’}pmatrix{‘}’}$$

src/core/rotation.ts में कार्यान्वयन इन मैट्रिक्स गुणनों को प्रत्यक्ष अंकगणितीय संक्रियाओं में विस्तारित करता है, मैट्रिक्स ऑब्जेक्ट आवंटन और गुणन के ओवरहेड से बचता है। एक एकल बिंदु के लिए, घूर्णन फलन गणना करता है:

$$\boxed{‘{’}\begin{‘{’}aligned{‘}’} y_1 &= y \cdot \cos\alpha + z \cdot (-\sin\alpha) \ z_1 &= y \cdot \sin\alpha + z \cdot \cos\alpha \ x_2 &= x \cdot \cos\beta + z_1 \cdot \sin\beta \ z_2 &= z_1 \cdot \cos\beta - x \cdot \sin\beta \ P'' &= (x_2, ; y_1, ; z_2) \end{‘{’}aligned{‘}’}{‘}’}$$

rotatePoints फलन सभी टैग के लिए इस परिवर्तन को बैच में निष्पादित करता है:

export function rotatePoints(points: Vec3[], a: number, b: number): Vec3[] {
  const sinA = Math.sin(a), cosA = Math.cos(a);
  const sinB = Math.sin(b), cosB = Math.cos(b);
  return points.map((p) => {
    const y1 = p.y * cosA + p.z * -sinA;
    const z1 = p.y * sinA + p.z * cosA;
    const x2 = p.x * cosB + z1 * sinB;
    return { x: x2, y: y1, z: z1 * cosB - p.x * sinB };
  });
}

2.3 परिप्रेक्ष्य प्रोजेक्शन: 3D स्थान से 2D स्क्रीन तक

अंतिम गणितीय संक्रिया घुमाए गए 3D निर्देशांकों को 2D स्क्रीन स्थितियों में बदलती है। लाइब्रेरी एक सरलीकृत लेकिन अत्यधिक प्रभावी प्रोजेक्शन मॉडल का उपयोग करती है जो गहराई के आधार पर एक स्केल कारक और एक अपारदर्शिता कारक की गणना करती है, जिसमें गोला त्रिज्या के दोगुने के बराबर एक परिप्रेक्ष्य गहराई पैरामीटर होता है:

$$\text{‘{’}per{‘}’} = \frac{‘{’}2 \cdot \text{‘{’}depth{‘}’}{‘}’}{‘{’}2 \cdot \text{‘{’}depth{‘}’} + z{‘}’} = \frac{‘{’}4R{‘}’}{‘{’}4R + z{‘}’}$$

अपारदर्शिता (अल्फा) कारक बायस समायोजन के साथ एक द्विघात संबंध का उपयोग करता है:

$$\text{‘{’}alpha{‘}’} = \text{‘{’}clamp{‘}’}\left(\text{‘{’}per{‘}’}^2 - 0.25, ; 0, ; 1\right)$$

संपूर्ण प्रोजेक्शन पाइपलाइन का सारांश इस प्रकार है:

$$\boxed{‘{’}\begin{‘{’}aligned{‘}’} \text{‘{’}per{‘}’}_i &= \frac{‘{’}2 \cdot \text{‘{’}depth{‘}’}{‘}’}{‘{’}2 \cdot \text{‘{’}depth{‘}’} + z_i{‘}’} \ \text{‘{’}scale{‘}’}_i &= \text{‘{’}per{‘}’}_i \ \text{‘{’}alpha{‘}’}_i &= \min\left(1, ; \max\left(0, ; \text{‘{’}per{‘}’}_i^2 - 0.25\right)\right) \ P_i^{‘{’}\text{‘{’}2D{‘}’}{‘}’} &= \left(x_i \cdot \text{‘{’}scale{‘}’}_i, ; y_i \cdot \text{‘{’}scale{‘}’}_i, ; \text{‘{’}scale{‘}’}_i, ; \text{‘{’}alpha{‘}’}_i\right) \end{‘{’}aligned{‘}’}{‘}’}$$

TypeScript कार्यान्वयन इस गणित को सटीक रूप से दर्शाता है:

export function project(
  points: { x: number; y: number; z: number }[],
  depth: number,
): ProjectedTag[] {
  const d2 = 2 * depth;
  return points.map((p) => {
    const per = d2 / (d2 + p.z);
    const alpha = Math.min(1, Math.max(0, per * per - 0.25));
    return { x: p.x, y: p.y, z: p.z, scale: per, alpha };
  });
}

3. आर्किटेक्चर और मॉड्यूल डिज़ाइन

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

3.1 शुद्ध गणित इंजन: src/core/

3.2 दोहरी रेंडरिंग प्रणाली: Canvas + DOM

सबसे महत्वपूर्ण नवाचारों में से एक इसकी दोहरी रेंडरिंग प्रणाली है, जो टेक्स्ट और इमेज के लिए Canvas 2D API और SVG, HTML, वीडियो और Web Components के लिए DOM ओवरले का उपयोग करती है।

flowchart TB
    subgraph "टैग प्रकार और रेंडरर"
        direction LR
        TEXT["📄 टेक्स्ट टैग"]
        IMG["🖼️ इमेज टैग"]
        SVG_TAG["🎨 SVG टैग"]
        HTML_TAG["🌐 HTML टैग"]
        VIDEO["🎬 वीडियो टैग"]
        ELEMENT["🔧 एलिमेंट टैग"]
    end

    subgraph "रेंडरर चयन"
        CANVAS["Canvas 2D API
✅ टेक्स्ट
✅ इमेज"]
        DOM["DOM ओवरले
✅ SVG
✅ HTML
✅ वीडियो
✅ Web Components"]
    end

    TEXT --> CANVAS
    IMG --> CANVAS
    SVG_TAG --> DOM
    HTML_TAG --> DOM
    VIDEO --> DOM
    ELEMENT --> DOM

    style CANVAS fill:#0f3460,stroke:#e94560,color:#fff
    style DOM fill:#533483,stroke:#e94560,color:#fff

4. प्रदर्शन विशेषताएँ

4.1 कम्प्यूटेशनल जटिलता

4.2 मेमोरी दक्षता

(N = 100) टैग के लिए, कुल संख्यात्मक स्थिति लगभग (100 \times (3 + 5) \times 8 = 6,400) बाइट्स है — 7KB से कम फ़्लोटिंग-पॉइंट संख्याएँ।

4.3 बंडल आकार

5. मल्टी-मोडल सामग्री: छह टैग प्रकार

6. cong-min/TagCloud से तुलना

7. व्यावहारिक उपयोग गाइड

7.1 बेसिक टेक्स्ट-ओनली क्लाउड

import { TagCloud } from "@xingwangzhe/tags-cloud";

const container = document.getElementById("cloud")!;
new TagCloud(container, {
  tags: ["TypeScript", "React", "Vue", "Svelte", "Node.js", "Bun", "Rust"],
  radius: 250,
  spinY: 0.12,
  color: "#e0e0e0",
  fontSize: 16,
});

7.2 मल्टी-मोडल क्लाउड

new TagCloud(container, {
  tags: [
    "TypeScript",
    { type: "image", src: "/avatar.webp", width: 40, height: 40 },
    { type: "svg", content: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>`, width: 48, height: 48 },
    { type: "video", src: "/demo.mp4", width: 120, height: 68 },
  ],
  radius: 300,
  spinY: 0.15,
  onTagClick(item) { console.log("Clicked:", item); },
});

7.3 लाइफसाइकिल प्रबंधन

const cloud = new TagCloud(container, { tags, spinY: 0.2 });
cloud.setTags(["New", "Set", "Of", "Tags"]);
cloud.pause();
cloud.resume();
cloud.destroy();

8. निष्कर्ष: रेंडरिंग इंजन के रूप में गणित

@xingwangzhe/tags-cloud एक सम्मोहक प्रदर्शन के रूप में खड़ा है कि सॉफ्टवेयर में सबसे शक्तिशाली रेंडरिंग इंजन GPU, शेडर कंपाइलर या फ्रेमवर्क नहीं है — यह गणित है। 3D टैग क्लाउड विज़ुअलाइज़ेशन की समस्या को तीन शुद्ध गणितीय संक्रियाओं — फाइबोनैचि स्फीयर डिस्ट्रीब्यूशन, रोटेशन मैट्रिक्स गुणन और परिप्रेक्ष्य प्रोजेक्शन — में विघटित करके, लाइब्रेरी ऐसे परिणाम प्राप्त करती है जो WebGL-आधारित विकल्पों से दृश्य रूप से अप्रभेद्य हैं जबकि उनकी कोई भी जटिलता, हार्डवेयर निर्भरता या बंडल भार की आवश्यकता नहीं होती।

इस परियोजना का ओपन-सोर्स पारिस्थितिकी तंत्र में योगदान तीन गुना है। आर्किटेक्चरल रूप से, यह साबित करता है कि एक हाइब्रिड Canvas/DOM रेंडरर 3KB पैकेज के भीतर प्रदर्शन और बहुमुखी प्रतिभा दोनों प्रदान कर सकता है। गणितीय रूप से, यह मौलिक 3D ग्राफिक्स एल्गोरिदम का स्वच्छ, अच्छी तरह से प्रलेखित कार्यान्वयन प्रदान करता है। व्यावहारिक रूप से, यह डेवलपर्स को रिच मीडिया सपोर्ट, TypeScript सुरक्षा और मोबाइल-रेडी इंटरैक्शन के साथ 3D टैग क्लाउड बनाने के लिए एक ड्रॉप-इन कंपोनेंट देता है — बिना एक भी निर्भरता जोड़े।

लेख का अंत — @xingwangzhe/tags-cloud v0.9.0 के स्रोत कोड विश्लेषण पर आधारित