Merge pull request #82 from bitbybit-dev/develop

updated docs

Author: matas-bitbybit-dev

docs/docusaurus.config.ts

@@ -102,6 +102,8 @@ const config: Config = {
                 },
                 { to: "/learn/code/intro", label: "Code", position: "left" },
                 { to: "/learn/3d-bits/intro", label: "3D Bits", position: "left" },
+                { to: "/learn/npm-packages/threejs", label: "ThreeJS", position: "left" },
+                { to: "/learn/npm-packages/babylonjs", label: "BabylonJS", position: "left" },
                 { to: "/blog", label: "Blog", position: "left" },
                 { to: "https://bitbybit.dev", label: "Home", position: "left" },
                 {
@@ -111,6 +113,13 @@ const config: Config = {
                     className: "navbar__button--support", // Custom class for styling
                     "aria-label": "Support the Project Mission", // For accessibility
                 },
+                {
+                    href: "https://bitbybit.dev/auth/sign-up",
+                    label: "Sign Up",
+                    position: "right",
+                    className: "navbar__button--support",
+                    "aria-label": "Sign Up to Bitbybit.dev",
+                },
                 {
                     href: "https://github.com/bitbybit-dev/bitbybit",
                     label: "GitHub",

docs/learn/code/common/base/_category_.json

@@ -0,0 +1,10 @@
+{
+    "label": "Base",
+    "position": 1,
+    "link": {
+        "type": "generated-index",
+        "title": "Base Algorithms in Bitbybit",
+        "description": "Base algorithms in Bitbybit provide foundational algorithms & object types, such as vectors, matrixes, points, lines, polylines, triangles and meshes. Learn how to use these algorithms to create complex shapes, grids and designs.",
+        "slug": "/code/common/base"
+    }
+}

docs/learn/code/common/base/color/_category_.json

@@ -0,0 +1,9 @@
+{
+    "label": "Color",
+    "link": {
+        "type": "generated-index",
+        "title": "Colors in Bitbybit",
+        "description": "Introduction to colors in Bitbybit.",
+        "slug": "/code/common/base/color"
+    }
+}

docs/learn/code/common/base/color/intro.md

@@ -0,0 +1,57 @@
+---
+sidebar_position: 1
+title: Colors in Bitbybit
+sidebar_label: Colors in Bitbybit
+description: An overview of the Color class in Bitbybit, explaining how to work with hex and RGB color formats, convert between them, and perform basic color manipulations.
+tags: [code, color]
+---
+
+<img 
+  class="category-icon-small" 
+  src="https://s.bitbybit.dev/assets/icons/white/color-icon.svg" 
+  alt="Color category icon" 
+  title="Color category icon" /> 
+
+[View Full Source & Details on GitHub](https://github.com/bitbybit-dev/bitbybit/blob/master/packages/dev/base/lib/api/services/color.ts)
+
+The `Color` class in Bitbybit provides tools for defining, converting, and manipulating colors, primarily focusing on hexadecimal (hex) and RGB (Red, Green, Blue) color formats.
+
+**Understanding Color Formats in Bitbybit:**
+
+*   **Hex Color (`Inputs.Base.Color`):** This is a string representation of a color, commonly used in web design and graphics, like `#FF0000` (for red) or `#00FF00` (for green).
+*   **RGB Color (`Inputs.Base.ColorRGB`):** This is an object representing color with separate red, green, and blue components, typically as numbers. For example, `{ r: 255, g: 0, b: 0 }` for red.
+    *   The `Color` class can handle RGB values in different ranges (e.g., 0-255, 0-1, or 0-100) and will remap them as needed for conversions.
+
+## Core Capabilities of the Color Class
+
+The `Color` class makes it easy to work with these common color formats. Here's what it can do. For precise input parameters and detailed behavior (like how RGB ranges are handled), please consult the [full Color API documentation](https://docs.bitbybit.dev/classes/Bit.Color.html) or the GitHub source linked above.
+
+### 1. Creating and Representing Colors
+
+*   **Hex Color Input (`hexColor()`):** If you already have a hex color string (e.g., from a color picker), this function simply returns it. It's useful in visual programming environments to explicitly define a color input.
+
+### 2. Converting Between Color Formats
+
+This is a key function of the class, allowing you to switch between hex and RGB representations:
+*   **Hex to RGB (`hexToRgb()`):** Converts a hex color string (e.g., `#FF0000`) into an RGB object (e.g., `{ r: 255, g: 0, b: 0 }`).
+*   **Hex to RGB Mapped (`hexToRgbMapped()`):** Converts a hex color to an RGB object, but then remaps the R, G, and B values from the standard 0-255 range to a custom range you specify (e.g., 0-1).
+*   **RGB to Hex (`rgbToHex()`):** Converts individual R, G, and B numerical values into a hex color string. It can intelligently handle input RGB values that are not in the 0-255 range by remapping them if you provide their original `min` and `max` range.
+*   **RGB Object to Hex (`rgbObjToHex()`):** Similar to `rgbToHex()`, but takes an RGB object (`{r, g, b}`) as input instead of separate R, G, B parameters.
+
+### 3. Extracting Color Components
+
+Get individual R, G, or B values from a color:
+*   **From Hex (Mapped):**
+    *   `getRedParam()`: Gets the red component from a hex color, remapped to a specified range.
+    *   `getGreenParam()`: Gets the green component from a hex color, remapped to a specified range.
+    *   `getBlueParam()`: Gets the blue component from a hex color, remapped to a specified range.
+*   **From RGB Object:**
+    *   `rgbToRed()`: Extracts the `r` value from an RGB object.
+    *   `rgbToGreen()`: Extracts the `g` value from an RGB object.
+    *   `rgbToBlue()`: Extracts the `b` value from an RGB object.
+
+### 4. Basic Color Manipulation
+
+*   **Invert Color (`invert()`):**
+    *   Takes a hex color and produces its photographic negative (e.g., red becomes cyan, white becomes black).
+    *   It also offers an option to invert to pure black or white based on the original color's perceived brightness, which can be useful for ensuring text visibility against a colored background.

docs/learn/code/common/base/dates/_category_.json

@@ -0,0 +1,9 @@
+{
+    "label": "Dates",
+    "link": {
+        "type": "generated-index",
+        "title": "Dates in Bitbybit",
+        "description": "Introduction to dates in Bitbybit.",
+        "slug": "/code/common/base/dates"
+    }
+}

docs/learn/code/common/base/dates/intro.md

@@ -0,0 +1,78 @@
+---
+sidebar_position: 1
+title: Dates in Bitbybit
+sidebar_label: Dates in Bitbybit
+description: An overview of the Dates class in Bitbybit, explaining how to create, access, modify, and format date and time information.
+tags: [code, dates]
+---
+
+<img 
+  class="category-icon-small" 
+  src="https://s.bitbybit.dev/assets/icons/white/dates-icon.svg" 
+  alt="Dates category icon" 
+  title="Dates category icon" /> 
+
+[View Full Source & Details on GitHub](https://github.com/bitbybit-dev/bitbybit/blob/master/packages/dev/base/lib/api/services/dates.ts)
+
+The `Dates` class in Bitbybit provides a collection of tools for working with dates and times. It largely leverages the built-in JavaScript `Date` object, offering convenient methods to create, manipulate, and query date information.
+
+**What is a Date in Bitbybit?**
+
+A "Date" in Bitbybit refers to a standard JavaScript `Date` object. This object encapsulates a specific moment in time, including the year, month, day, hour, minute, second, and millisecond.
+
+## Core Capabilities of the Dates Class
+
+The `Dates` class simplifies common date and time operations. Here's a high-level look at its features. For the exact input parameters (like DTOs) and detailed behavior (e.g., how months are 0-indexed), please consult the [full Dates API documentation](https://docs.bitbybit.dev/classes/Bit.Dates.html) or the GitHub source linked above.
+
+### 1. Creating Dates
+
+Need to define a specific date or get the current time?
+*   **Current Date & Time (`now()`):** Get a `Date` object representing the exact moment the function is called.
+*   **Specific Date (`createDate()`):** Create a `Date` object by providing individual components like year, month (0-11), day, hours, minutes, seconds, and milliseconds.
+*   **Specific UTC Date (`createDateUTC()`):** Similar to `createDate()`, but interprets the provided components as Coordinated Universal Time (UTC).
+*   **From Timestamp (`createFromUnixTimeStamp()`):** Create a `Date` object from a Unix timestamp (the number of milliseconds since January 1, 1970, UTC).
+
+### 2. Converting Dates to Strings (Formatting)
+
+Displaying dates in a human-readable format:
+*   **Basic String (`toString()`):** Get a general string representation of the date (format depends on the system's locale).
+*   **Date Part Only (`toDateString()`):** Get just the date portion as a string (e.g., "Mon Jan 01 2024").
+*   **Time Part Only (`toTimeString()`):** Get just the time portion as a string (e.g., "14:30:00 GMT+0000").
+*   **ISO Format (`toISOString()`):** Get the date in the standard ISO 8601 format (e.g., "2024-01-01T14:30:00.000Z"). This is often used for data interchange.
+*   **JSON Format (`toJSON()`):** Get the date as a string suitable for JSON serialization (typically ISO format).
+*   **UTC String (`toUTCString()`):** Get the date as a string formatted according to UTC conventions (e.g., "Mon, 01 Jan 2024 14:30:00 GMT").
+
+### 3. Getting Specific Parts of a Date
+
+Extracting individual components from a `Date` object. Most "get" methods have both a local time version and a UTC version:
+*   **Year:** `getYear()` / `getUTCYear()`
+*   **Month:** `getMonth()` (0 for January, 11 for December) / `getUTCMonth()`
+*   **Day of the Month:** `getDayOfMonth()` (1-31) / `getUTCDay()` (Note: `getUTCDay()` in JS Date returns day of week for UTC, but here it seems to mean day of month for UTC based on pairing with `setUTCDay` which takes day of month).
+*   **Day of the Week:** `getWeekday()` (0 for Sunday, 6 for Saturday - local time)
+*   **Hours:** `getHours()` (0-23) / `getUTCHours()`
+*   **Minutes:** `getMinutes()` (0-59) / `getUTCMinutes()`
+*   **Seconds:** `getSeconds()` (0-59) / `getUTCSeconds()`
+*   **Milliseconds:** `getMilliseconds()` (0-999) / `getUTCMilliseconds()`
+*   **Total Time (`getTime()`):** Get the raw numeric value of the date, represented as milliseconds since the Unix epoch (January 1, 1970, UTC).
+
+### 4. Setting Parts of a Date (Modifying Dates)
+
+Changing components of an existing `Date` object. These methods typically return a *new* `Date` object with the modification, leaving the original unchanged. Like "get" methods, "set" methods often have local and UTC versions:
+*   **Year:** `setYear()` / `setUTCYear()`
+*   **Month:** `setMonth()` / `setUTCMonth()`
+*   **Day of the Month:** `setDayOfMonth()` / `setUTCDay()`
+*   **Hours:** `setHours()` / `setUTCHours()`
+*   **Minutes:** `setMinutes()` / `setUTCMinutes()`
+*   **Seconds:** `setSeconds()` / `setUTCSeconds()`
+*   **Milliseconds:** `setMilliseconds()` / `setUTCMilliseconds()`
+*   **Total Time (`setTime()`):** Set the date based on a Unix timestamp (milliseconds since epoch).
+
+### 5. Parsing Date Strings
+
+*   **Parse Date String (`parseDate()`):** Convert a string representation of a date into a Unix timestamp (number of milliseconds since epoch). The success of parsing depends on the format of the string and the browser's parsing capabilities.
+
+## Important Notes:
+
+*   **Local Time vs. UTC:** Be mindful of whether you're working with local time (which depends on the user's system timezone) or UTC (a global time standard). The class provides methods for both.
+*   **Month Indexing:** When creating dates or getting/setting months, remember that months are typically 0-indexed in JavaScript (0 for January, 1 for February, ..., 11 for December).
+*   **Immutability:** The "set" methods in this class are designed to be immutable: they return a *new* `Date` object with the changes, rather than modifying the original `Date` object you passed in. This is generally a safer approach.

docs/learn/code/common/base/intro.md

@@ -0,0 +1,109 @@
+---
+sidebar_position: 1
+title: Introduction to Base Algorithms of Bitbybit
+sidebar_label: Base Algorithms of Bitbybit
+description: Discover the foundational capabilities of the @bitbybit-dev/base NPM package, your core toolkit for geometric and utility functions in Bitbybit.
+tags: [code, base]
+---
+
+[View Package Source on GitHub](https://github.com/bitbybit-dev/bitbybit/tree/master/packages/dev/base)   
+[NPM Package](https://www.npmjs.com/package/@bitbybit-dev/base)
+
+Welcome to the **`@bitbybit-dev/base`** package! This is the foundational layer of the Bitbybit ecosystem, providing a rich set of core utilities for mathematics, geometry, data manipulation, and more. Whether you're building complex 3D models, performing geometric analysis, or just need robust utility functions, the `base` package is your starting point.
+
+Think of this package as your essential toolbox, filled with well-defined, reliable tools that other Bitbybit functionalities and your own projects can build upon.
+
+## What's Inside? A Tour of Core Capabilities
+
+The `@bitbybit-dev/base` package is organized into several key classes, each specializing in a different area:
+
+### `Vector` - The Language of Position and Direction
+   At its core, a vector (or a point) in Bitbybit is simply an array of numbers (e.g., `[x, y, z]`). The `Vector` class provides a comprehensive suite for:
+   *   **Creating** vectors and number sequences (like linear spans or eased distributions).
+   *   Performing fundamental **vector math**: addition, subtraction, dot product, cross product, scaling.
+   *   **Analyzing** vectors: calculating length (norm), normalizing (to get direction), finding distances, and measuring angles.
+   *   [Learn more about the Vector class...](./vector/intro)
+
+### `Point` - Defining Locations in Space
+   While structurally similar to vectors, the `Point` class focuses on operations related to specific locations:
+   *   **Creating** individual points or patterned arrangements (like spirals or hexagonal grids).
+   *   **Transforming** points: moving (translating), rotating, and scaling them in 3D space.
+   *   **Analyzing** collections of points: finding the closest point, calculating bounding boxes, or determining the average position.
+   *   [Learn more about the Point class...](./point/intro)
+
+### `Line` - Working with Straight Segments
+   The `Line` class deals with straight line segments defined by start and end points:
+   *   **Creating** lines from various inputs (pairs of points, sequences of points).
+   *   **Getting information** like length, endpoints, or points along the line.
+   *   **Transforming** lines and converting between different line/segment representations.
+   *   Performing **intersections** between lines.
+   *   [Learn more about the Line class...](./line/intro)
+
+### `Polyline` - Paths and Sequences of Lines
+   Polylines are sequences of connected line segments, forming paths or outlines:
+   *   **Creating** polylines from lists of points, specifying if they are open or closed.
+   *   **Analyzing** polylines: calculating total length or getting their constituent points.
+   *   **Modifying** polylines: reversing direction or applying transformations.
+   *   Finding **intersections** (self-intersections or intersections between two polylines).
+   *   Advanced utilities like **sorting scattered segments** into continuous polylines.
+   *   [Learn more about the Polyline class...](./polyline/intro)
+
+### `Math` - Your Numerical Toolkit
+   The `Math` class offers a wide array of numerical operations:
+   *   **Basic arithmetic** and standard mathematical functions (square root, absolute value, logarithms, trigonometry).
+   *   **Number generation** (random numbers, Pi).
+   *   **Number manipulation** like remapping values from one range to another.
+   *   Powerful **easing functions** for creating smooth, non-linear transitions and distributions.
+   *   [Learn more about the Math class...](./math/intro)
+
+### `Lists` - Managing Your Data Collections
+   Lists (arrays) are fundamental for storing collections of data. The `Lists` class provides extensive tools for:
+   *   **Creating** and populating lists (e.g., repeating items).
+   *   **Accessing** items by index, getting sub-lists, or retrieving items based on patterns.
+   *   **Modifying** lists: adding, removing, or replacing items.
+   *   **Restructuring** lists: reversing, grouping, or transposing (flipping) 2D lists.
+   *   **Sorting** lists of numbers, text, or objects by property values.
+   *   [Learn more about the Lists class...](./lists/intro)
+
+### `Color` - Working with Colors
+   The `Color` class helps you define, convert, and manipulate colors, primarily focusing on:
+   *   **Hexadecimal** (e.g., `#FF0000`) and **RGB** (Red, Green, Blue) color formats.
+   *   **Converting** seamlessly between these formats.
+   *   **Extracting** individual color components (R, G, B).
+   *   Performing basic manipulations like **inverting** a color.
+   *   [Learn more about the Color class...](./color/intro)
+
+### `Logic` - Making Decisions
+   The `Logic` class is all about boolean values (`true`/`false`) and conditional operations:
+   *   **Creating** boolean values and lists of booleans (e.g., from random generation or by thresholding numerical data).
+   *   Performing **comparisons** between values (equal to, greater than, etc.).
+   *   Implementing **conditional logic** with "gates" that pass through data only if a condition is met.
+   *   [Learn more about the Logic class...](./logic/intro)
+
+### `Text` - Manipulating and Representing Text
+   The `Text` class provides tools for string operations and an exciting feature for 3D:
+   *   Basic **string manipulation**: splitting, joining, replacing, and formatting text.
+   *   Converting various data types **to strings**.
+   *   Generating **vector text**: converting text characters into 2D vector paths, suitable for creating 3D text objects in your scenes.
+   *   [Learn more about the Text class...](./text/intro) <!-- Link to Text API page -->
+
+### `Dates` - Handling Date and Time
+    The `Dates` class provides utilities for working with date and time information:
+    *   **Creating** `Date` objects (current time, specific dates, from timestamps).
+    *   **Converting** dates to various string formats (ISO, locale-specific, UTC).
+    *   **Getting and setting** individual components of a date (year, month, day, hour, etc.), with support for both local time and UTC.
+    *   **Parsing** date strings into `Date` objects.
+    *   [Learn more about the Dates class...](./dates/intro) <!-- Link to Dates API page -->
+
+### `Mesh Utilities` - Low-Level Mesh Operations
+    The `MeshBitByBit` class offers specialized functions for working directly with mesh triangles and planes:
+    *   Calculating **distances to planes** and defining **triangle planes**.
+    *   Performing **intersections** between triangles and, by extension, between entire meshes to find intersection segments or polylines.
+    *   These are more advanced tools for detailed geometric analysis.
+    *   [Learn more about the Mesh Utilities class...](./mesh/intro)
+
+## Get Started!
+
+The `@bitbybit-dev/base` package is designed to be intuitive and powerful. Dive into the documentation for each class to explore their methods in detail and see how they can accelerate your development with Bitbybit.
+
+Happy coding!

docs/learn/code/common/base/line/_category_.json

@@ -0,0 +1,10 @@
+{
+    "label": "Line",
+    "position": 2,
+    "link": {
+        "type": "generated-index",
+        "title": "Lines in Bitbybit",
+        "description": "Introduction to lines in Bitbybit.",
+        "slug": "/code/common/base/line"
+    }
+}