@xingwangzhe/tags-cloud: মাল্টি-মোডাল ৩D ট্যাগ ক্লাউড ইঞ্জিন বিশুদ্ধ গণিতের ভিত্তিতে নির্মিত

GitHub: xingwangzhe/tags-cloud · Demo: tagscloud.needhelp.icu · npm: @xingwangzhe/tags-cloud · লাইসেন্স: MIT · ভার্সন: v0.9.0

১. ভূমিকা: আধুনিক ওয়েবের জন্য ৩D ট্যাগ ক্লাউড পুনর্কল্পনা

ট্যাগ ক্লাউড দুই দশকেরও বেশি সময় ধরে ওয়েব ভিজুয়ালাইজেশনের একটি প্রধান উপাদান, সরল ওজনযুক্ত শব্দ তালিকা থেকে নিমগ্ন ত্রিমাত্রিক অভিজ্ঞতায় বিবর্তিত হয়েছে যা ব্যবহারকারীদের মোহিত করে এবং সাধারণ টেক্সট সংগ্রহকে ইন্টারেক্টিভ স্থানিক ভাস্কর্যে রূপান্তরিত করে। এই বিবর্তনে সবচেয়ে প্রভাবশালী অবদানগুলির মধ্যে একটি হল cong-min/TagCloud, একটি হালকা ওজনের জাভাস্ক্রিপ্ট লাইব্রেরি যা প্রদর্শন করেছে যে ন্যূনতম ওভারহেড এবং শূন্য বাহ্যিক নির্ভরতা সহ কীভাবে ঘূর্ণায়মান টেক্সট লেবেলের একটি গোলক অর্জন করা যায়। GitHub-এ ৩৯০টি স্টার এবং ৯৩টি ফর্ক নিয়ে, মূল TagCloud একটি ডিজাইন প্যাটার্ন প্রতিষ্ঠা করেছে যা অগণিত ডেভেলপার পোর্টফোলিও সাইট, স্কিল শোকেস এবং ডেটা ভিজুয়ালাইজেশন ড্যাশবোর্ডের জন্য গ্রহণ করেছেন। এর মূল উদ্ভাবন এই প্রমাণে নিহিত যে ৩D ট্যাগ ক্লাউডের জন্য ভারী ওজনের WebGL ফ্রেমওয়ার্ক বা বাহ্যিক রেন্ডারিং ইঞ্জিনের প্রয়োজন নেই; এর পরিবর্তে, সরাসরি ত্রিকোণমিতিক গণনা এবং সাবধানে DOM পজিশনিং ব্যবহার করে আশ্চর্যজনকভাবে আকর্ষণীয় ভিজুয়াল ফলাফল তৈরি করা যায়।

এবার আসছে @xingwangzhe/tags-cloud — ৩D ট্যাগ ক্লাউড ধারণার একটি সম্পূর্ণ পুনর্কল্পনা যা তার পূর্বসূরীর গাণিতিক কমনীয়তা ধরে রেখেছে, এবং একই সাথে তার সক্ষমতা নাটকীয়ভাবে প্রসারিত করেছে, আর্কিটেকচার আধুনিকীকরণ করেছে এবং একটি ট্যাগ ক্লাউড কী রেন্ডার করতে পারে তার সীমানা ঠেলে দিয়েছে। এটি কেবল একটি ফর্ক বা ফিচার সংযোজন নয়; এটি একটি মৌলিক আর্কিটেকচারাল পরিবর্তন — একটি টেক্সট-অনলি, DOM-ভারী রেন্ডারার থেকে মাল্টি-মোডাল ইঞ্জিনে রূপান্তর যা টেক্সট, ইমেজ, SVG গ্রাফিক্স, যেকোনো HTML, ভিডিও এলিমেন্ট এবং এমনকি সম্পূর্ণ ওয়েব কম্পোনেন্ট প্রদর্শন করতে সক্ষম — সবকিছু গাণিতিকভাবে নির্ভুল ত্রিমাত্রিক空间中 একসাথে ঘুরছে। লাইব্রেরিটি এই বহুমুখিতা অর্জন করে একটি অসাধারণ কম্প্যাক্ট ফুটপ্রিন্টে — প্রায় ৩KB gzipped, শূন্য রানটাইম নির্ভরতা, এবং সম্পূর্ণ আধুনিক টুলচেইন দিয়ে নির্মিত: Bun জাভাস্ক্রিপ্ট রানটাইম, Vite বান্ডলার, এবং সম্পূর্ণ কোডবেস জুড়ে সম্পূর্ণ টাইপ সুরক্ষার জন্য TypeScript।

প্রকল্পের ট্যাগলাইন — “মাল্টি-মোডাল ৩D ট্যাগ ক্লাউড · বিশুদ্ধ গণিত ইঞ্জিন” — এর দ্বৈত পরিচয়কে ধারণ করে। একদিকে, এটি একটি প্রায়োগিক UI কম্পোনেন্ট লাইব্রেরি যা ডেভেলপাররা যেকোনো ওয়েব প্রজেক্টে দৃষ্টিনন্দন ট্যাগ গোলক তৈরি করতে ব্যবহার করতে পারেন। অন্যদিকে, এটি একটি গাণিতিক ইঞ্জিন যা ৩D ট্যাগ ক্লাউড রেন্ডারিংয়ের জটিল সমস্যাকে তিনটি বিশুদ্ধ, নির্ধারক এবং সুন্দরভাবে পৃথক জ্যামিতিক অপারেশনে বিভক্ত করে: ফিবোনাচ্চি গোলক বিতরণ প্রাথমিক অবস্থানের জন্য, রোটেশন ম্যাট্রিক্স গুণন স্থানিক রূপান্তরের জন্য, এবং পার্সপেক্টিভ প্রজেকশন গভীরতা-সচেতন ২D রেন্ডারিংয়ের জন্য। এই প্রতিটি অপারেশন src/core/ ডিরেক্টরির মধ্যে নিজস্ব ডেডিকেটেড মডিউলে বাস্তবায়িত, যা কোডবেসকে কেবল অত্যন্ত রক্ষণাবেক্ষণযোগ্যই নয়, বরং যারা সম্পূর্ণ রেন্ডারিং পাইপলাইনের জটিলতা ছাড়াই ৩D কম্পিউটার গ্রাফিক্সের পিছনের গণিত বুঝতে চায় তাদের জন্য একটি চমৎকার শিক্ষামূলক সম্পদও করে তোলে।

নিম্নলিখিত বিভাগগুলি @xingwangzhe/tags-cloud-এর প্রতিটি দিকের একটি বিস্তৃত প্রযুক্তিগত গভীর ডুব প্রদান করে — সোনালী অনুপাত-উদ্ভূত গোলক বিতরণ অ্যালগরিদম থেকে শুরু করে কোয়াটারনিয়ন-অনুপ্রাণিত আর্কবল ইন্টারঅ্যাকশন মডেল, দ্বৈত ক্যানভাস/ডিওএম রেন্ডারিং আর্কিটেকচার থেকে শুরু করে রেসপন্সিভ ডিজাইন বিবেচনা যা ডেস্কটপ এবং মোবাইল ডিভাইস জুড়ে নির্বিঘ্নে কাজ করতে সক্ষম করে। আপনি যদি আপনার পরবর্তী প্রজেক্টের জন্য এই লাইব্রেরিটি মূল্যায়ন করছেন, হালকা ওজনের ৩D টেকনিকে আগ্রহী গ্রাফিক্স প্রোগ্রামার, বা ফিবোনাচ্চি ল্যাটিসের বাস্তব-বিশ্ব প্রয়োগ সম্পর্কে কৌতূহলী গণিতবিদ — এই নিবন্ধটি সফ্টওয়্যার ইঞ্জিনিয়ারিংয়ের এই উল্লেখযোগ্য অংশের প্রতিটি দিক আলোকিত করার জন্য বিস্তারিত ব্যাখ্যা, গাণিতিক উৎপত্তি, আর্কিটেকচারাল ডায়াগ্রাম এবং টীকাযুক্ত কোড উদাহরণ সরবরাহ করে।

২. গাণিতিক ভিত্তি: ৩D রেন্ডারিংয়ের তিনটি স্তম্ভ

@xingwangzhe/tags-cloud-এর কেন্দ্রস্থলে রয়েছে তিনটি গাণিতিক অপারেশন যা একত্রিত হয়ে কন্টেন্ট আইটেমের একটি বিমূর্ত তালিকাকে দৃশ্যত সুসংগত ঘূর্ণায়মান গোলকে রূপান্তরিত করে। এই অপারেশনগুলি — বিতরণ, ঘূর্ণন এবং প্রজেকশন — src/core/-এর অধীনে তিনটি ডেডিকেটেড মডিউলে বাস্তবায়িত, প্রতিটি একটি একক জ্যামিতিক রূপান্তরের জন্য দায়ী। এই পৃথকীকরণ কেবল একটি আর্কিটেকচারাল পছন্দ নয়; এটি ৩D কম্পিউটার গ্রাফিক্স পাইপলাইনের মৌলিক কাঠামো প্রতিফলিত করে, যেখানে ভার্টেক্স উৎপাদন, মডেল রূপান্তর এবং ক্যামেরা প্রজেকশন পৃথক পর্যায় যা স্বাধীনভাবে অপ্টিমাইজ, পরীক্ষিত এবং বোঝা যেতে পারে।

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 পয়েন্ট → ৩D কোঅর্ডিনেট"]
        ROT["🟢 rotation.ts
রোটেশন ম্যাট্রিক্স
৩D পয়েন্ট → ঘূর্ণিত ৩D পয়েন্ট"]
        PROJ["🔴 projection.ts
পার্সপেক্টিভ প্রজেকশন
ঘূর্ণিত ৩D → ২D + গভীরতা"]
    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 -->|"Rotated Vec3[]"| PROJ
    PROJ -->|"ProjectedTag[]
(x, y, z, scale, alpha)"| CANVAS
    PROJ --> DOM
    MOUSE --> INERTIA
    INERTIA -->|"rotation angles"| 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

২.১ ফিবোনাচ্চি গোলক বিতরণ: বিন্দু স্থাপনের সোনালী জ্যামিতি

একটি ৩D ট্যাগ ক্লাউড তৈরির প্রথম এবং সম্ভবত সবচেয়ে নান্দনিকভাবে গুরুত্বপূর্ণ ধাপ হল নির্ধারণ করা কোথায় প্রতিটি ট্যাগ গোলকের উপর স্থাপন করতে হবে। একটি নিষ্পাপ পদ্ধতি নিয়মিত অক্ষাংশ এবং দ্রাঘিমাংশ ব্যবধানে ট্যাগ স্থাপন করতে পারে, কিন্তু এটি অনিবার্যভাবে মেরুগুলিতে ক্লাস্টারিং সৃষ্টি করে, যেখানে মেরিডিয়ান রেখাগুলি মিলিত হয়, এবং বিষুবরেখার কাছে বিরল অঞ্চল সৃষ্টি করে। ফিবোনাচ্চি গোলক অ্যালগরিদম এই সমস্যাটি মার্জিতভাবে সমাধান করে, পুরো গোলক পৃষ্ঠ জুড়ে একটি উল্লেখযোগ্যভাবে সমান বিন্দু বিতরণ উৎপন্ন করে, পয়েন্টের সংখ্যা নির্বিশেষে কোনও দৃশ্যমান ক্লাস্টারিং বা ফাঁক থাকে না।

এই অ্যালগরিদমটি সোনালী অনুপাত (\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) (xy-সমতলে ধনাত্মক x-অক্ষ থেকে মাপা) (\phi)-কে (\sqrt{N\pi}) দ্বারা স্কেল করে গণনা করা হয়, যা বৈশিষ্ট্যগত সর্পিল প্যাটার্ন তৈরি করে:

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

গুণক (\sqrt{N\pi}) সোনালী কোণ এবং গোলকের মোট পৃষ্ঠের ক্ষেত্রফলের মধ্যে সম্পর্ক থেকে উদ্ভূত। (N) বৃদ্ধি পাওয়ার সাথে সাথে, এই স্কেলিং নিশ্চিত করে যে সর্পিলটি প্রতিবেশী বিন্দুগুলির মধ্যে সমান ব্যবধান বজায় রাখতে গোলকের চারপাশে উপযুক্ত সংখ্যক বার ঘুরে। ফলাফল হল একটি প্যাটার্ন যেখানে প্রতিটি ধারাবাহিক বিন্দু তার পূর্বসূরীর থেকে প্রায় সোনালী কোণ (\approx 137.5°) দ্বারা ঘোরানো হয় যখন z-অক্ষ বরাবর দেখা হয়, যা প্রকৃতিতে পাওয়া ফাইলোট্যাকটিক সর্পিলগুলিকে প্রতিফলিত করে।

অবশেষে, এই গোলাকার কোঅর্ডিনেটগুলি স্ট্যান্ডার্ড রূপান্তর ব্যবহার করে কার্টেসিয়ান কোঅর্ডিনেটে রূপান্তরিত হয়:

$$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)) সময়ে চলে, যা শত শত এলিমেন্ট সহ ট্যাগ ক্লাউডের জন্য উপযুক্ত। বাস্তবে, বেশিরভাগ ট্যাগ ক্লাউডে ২০ থেকে ১০০টি ট্যাগ থাকে, যার জন্য এই গণনা কার্যত তাৎক্ষণিক।

২.২ ৩D ঘূর্ণন: স্থানিক ডোমেইনে ম্যাট্রিক্স গুণন

একবার ট্যাগগুলি গোলকের পৃষ্ঠে অবস্থান করলে, পরবর্তী ধাপ হল ঘূর্ণন সক্ষম করা — ক্রমাগত স্বয়ংক্রিয় স্পিন এবং ব্যবহারকারী-চালিত ড্র্যাগ ইন্টারঅ্যাকশন উভয়ই। লাইব্রেরিটি যৌগিক অক্ষ-সারিবদ্ধ রোটেশন ম্যাট্রিক্স ব্যবহার করে ঘূর্ণন বাস্তবায়ন করে, বিশেষ করে Y-অক্ষের চারপাশে তারপর X-অক্ষের চারপাশে ক্রমিক ঘূর্ণন। এই পদ্ধতিটি গণনাগতভাবে দক্ষ, বোঝা সহজ, এবং ট্যাগ ক্লাউড ব্যবহারের ক্ষেত্রে সম্পূর্ণরূপে যথেষ্ট যেখানে ঘূর্ণনগুলি সর্বদা উৎপত্তিস্থলে কেন্দ্রিক একটি গোলকের সাপেক্ষে।

এই ঘূর্ণনগুলির গাণিতিক ভিত্তি লিনিয়ার বীজগণিত থেকে আসে। একটি ৩D রোটেশন ম্যাট্রিক্স হল একটি (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 };
  });
}

২.৩ পার্সপেক্টিভ প্রজেকশন: ৩D স্থান থেকে ২D পর্দায়

চূড়ান্ত গাণিতিক অপারেশন ঘূর্ণিত ৩D কোঅর্ডিনেটগুলিকে ২D পর্দার অবস্থানে রূপান্তরিত করে। লাইব্রেরিটি একটি সরলীকৃত কিন্তু অত্যন্ত কার্যকর প্রজেকশন মডেল ব্যবহার করে যা গভীরতার উপর ভিত্তিলে একটি স্কেল ফ্যাক্টর এবং একটি অপাসিটি ফ্যাক্টর গণনা করে, যার একটি পার্সপেক্টিভ ডেপথ প্যারামিটার গোলকের ব্যাসার্ধের দ্বিগুণের সমান:

$$\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 };
  });
}

৩. আর্কিটেকচার এবং মডিউল ডিজাইন

কোডবেসটি গাণিতিক গণনা, রেন্ডারিং অর্কেস্ট্রেশন এবং ব্যবহারকারী ইন্টারঅ্যাকশন হ্যান্ডলিং-এর ইচ্ছাকৃত পৃথকীকরণের মাধ্যমে পরিষ্কার সফ্টওয়্যার আর্কিটেকচারের উদাহরণ দেয়।

৩.১ বিশুদ্ধ গণিত ইঞ্জিন: src/core/

৩.২ দ্বৈত রেন্ডারিং সিস্টেম: ক্যানভাস + ডিওএম

সবচেয়ে উল্লেখযোগ্য উদ্ভাবনগুলির মধ্যে একটি হল এর দ্বৈত রেন্ডারিং সিস্টেম, টেক্সট এবং ইমেজের জন্য Canvas 2D API এবং SVG, HTML, ভিডিও এবং ওয়েব কম্পোনেন্টের জন্য 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
✅ ভিডিও
✅ ওয়েব কম্পোনেন্ট"]
    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

৪. পারফরম্যান্স বৈশিষ্ট্য

৪.১ গণনাগত জটিলতা

৪.২ মেমরি দক্ষতা

(N = 100) ট্যাগের জন্য, মোট সংখ্যাগত অবস্থা প্রায় (100 \times (3 + 5) \times 8 = 6,400) বাইট — ফ্লোটিং-পয়েন্ট সংখ্যার ৭KB-এরও কম।

৪.৩ বান্ডল সাইজ

৫. মাল্টি-মোডাল কন্টেন্ট: ছয়টি ট্যাগ টাইপ

৬. cong-min/TagCloud-এর সাথে তুলনা

৭. ব্যবহারিক ব্যবহার নির্দেশিকা

৭.১ বেসিক টেক্সট-অনলি ক্লাউড

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,
});

৭.২ মাল্টি-মোডাল ক্লাউড

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); },
});

৭.৩ লাইফসাইকেল ম্যানেজমেন্ট

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

৮. উপসংহার: রেন্ডারিং ইঞ্জিন হিসাবে গণিত

@xingwangzhe/tags-cloud একটি বাধ্যতামূলক প্রদর্শনী হিসাবে দাঁড়িয়ে আছে যে সফ্টওয়্যারের সবচেয়ে শক্তিশালী রেন্ডারিং ইঞ্জিন একটি GPU, একটি শেডার কম্পাইলার বা একটি ফ্রেমওয়ার্ক নয় — এটি গণিত। ৩D ট্যাগ ক্লাউড ভিজুয়ালাইজেশনের সমস্যাকে তিনটি বিশুদ্ধ গাণিতিক অপারেশনে — ফিবোনাচ্চি গোলক বিতরণ, রোটেশন ম্যাট্রিক্স গুণন এবং পার্সপেক্টিভ প্রজেকশন — ভাগ করে, লাইব্রেরিটি WebGL-ভিত্তিক বিকল্পগুলির থেকে দৃশ্যত পৃথক করা যায় না এমন ফলাফল অর্জন করে, তাদের জটিলতা, হার্ডওয়্যার নির্ভরতা বা বান্ডল ওজনের কিছুই প্রয়োজন হয় না।

ওপেন-সোর্স ইকোসিস্টেমে প্রকল্পের অবদান ত্রিবিধ। আর্কিটেকচারগতভাবে, এটি প্রমাণ করে যে একটি হাইব্রিড ক্যানভাস/ডিওএম রেন্ডারার একটি ৩KB প্যাকেজের মধ্যে উভয় পারফরম্যান্স এবং বহুমুখিতা সরবরাহ করতে পারে। গাণিতিকভাবে, এটি মৌলিক ৩D গ্রাফিক্স অ্যালগরিদমের পরিষ্কার, ভালভাবে ডকুমেন্টেড বাস্তবায়ন সরবরাহ করে। ব্যবহারিকভাবে, এটি ডেভেলপারদের সমৃদ্ধ মিডিয়া সাপোর্ট, TypeScript নিরাপত্তা এবং মোবাইল-রেডি ইন্টারঅ্যাকশন সহ ৩D ট্যাগ ক্লাউড তৈরির জন্য একটি ড্রপ-ইন কম্পোনেন্ট দেয় — সব কিছু একটি একক নির্ভরতা যোগ না করেই।

নিবন্ধের সমাপ্তি — @xingwangzhe/tags-cloud v0.9.0-এর সোর্স কোড বিশ্লেষণের ভিত্তিতে