Skip to content

Commit 0dbfb26

Browse files
new base docs on foundation classes
1 parent fce18cb commit 0dbfb26

File tree

20 files changed

+651
-60
lines changed

20 files changed

+651
-60
lines changed
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"label": "Color",
3+
"position": 2,
4+
"link": {
5+
"type": "generated-index",
6+
"title": "Colors in Bitbybit",
7+
"description": "Introduction to colors in Bitbybit.",
8+
"slug": "/code/common/base/color"
9+
}
10+
}
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
sidebar_position: 1
3+
title: Colors in Bitbybit
4+
sidebar_label: Colors in Bitbybit
5+
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.
6+
tags: [code, color]
7+
---
8+
9+
<img
10+
src="https://s.bitbybit.dev/assets/icons/white/color-icon.svg"
11+
alt="Color category icon"
12+
title="Color category icon"
13+
width="100" />
14+
15+
[View Full Source & Details on GitHub](https://github.com/bitbybit-dev/bitbybit/blob/master/packages/dev/base/lib/api/services/color.ts)
16+
17+
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.
18+
19+
**Understanding Color Formats in Bitbybit:**
20+
21+
* **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).
22+
* **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.
23+
* 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.
24+
25+
## Core Capabilities of the Color Class
26+
27+
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.
28+
29+
### 1. Creating and Representing Colors
30+
31+
* **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.
32+
33+
### 2. Converting Between Color Formats
34+
35+
This is a key function of the class, allowing you to switch between hex and RGB representations:
36+
* **Hex to RGB (`hexToRgb()`):** Converts a hex color string (e.g., `#FF0000`) into an RGB object (e.g., `{ r: 255, g: 0, b: 0 }`).
37+
* **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).
38+
* **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.
39+
* **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.
40+
41+
### 3. Extracting Color Components
42+
43+
Get individual R, G, or B values from a color:
44+
* **From Hex (Mapped):**
45+
* `getRedParam()`: Gets the red component from a hex color, remapped to a specified range.
46+
* `getGreenParam()`: Gets the green component from a hex color, remapped to a specified range.
47+
* `getBlueParam()`: Gets the blue component from a hex color, remapped to a specified range.
48+
* **From RGB Object:**
49+
* `rgbToRed()`: Extracts the `r` value from an RGB object.
50+
* `rgbToGreen()`: Extracts the `g` value from an RGB object.
51+
* `rgbToBlue()`: Extracts the `b` value from an RGB object.
52+
53+
### 4. Basic Color Manipulation
54+
55+
* **Invert Color (`invert()`):**
56+
* Takes a hex color and produces its photographic negative (e.g., red becomes cyan, white becomes black).
57+
* 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.
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"label": "Dates",
3+
"position": 2,
4+
"link": {
5+
"type": "generated-index",
6+
"title": "Dates in Bitbybit",
7+
"description": "Introduction to dates in Bitbybit.",
8+
"slug": "/code/common/base/dates"
9+
}
10+
}
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
sidebar_position: 1
3+
title: Dates in Bitbybit
4+
sidebar_label: Dates in Bitbybit
5+
description: An overview of the Dates class in Bitbybit, explaining how to create, access, modify, and format date and time information.
6+
tags: [code, dates]
7+
---
8+
9+
<img
10+
src="https://s.bitbybit.dev/assets/icons/white/dates-icon.svg"
11+
alt="Dates category icon"
12+
title="Dates category icon"
13+
width="100" />
14+
15+
[View Full Source & Details on GitHub](https://github.com/bitbybit-dev/bitbybit/blob/master/packages/dev/base/lib/api/services/dates.ts)
16+
17+
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.
18+
19+
**What is a Date in Bitbybit?**
20+
21+
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.
22+
23+
## Core Capabilities of the Dates Class
24+
25+
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.
26+
27+
### 1. Creating Dates
28+
29+
Need to define a specific date or get the current time?
30+
* **Current Date & Time (`now()`):** Get a `Date` object representing the exact moment the function is called.
31+
* **Specific Date (`createDate()`):** Create a `Date` object by providing individual components like year, month (0-11), day, hours, minutes, seconds, and milliseconds.
32+
* **Specific UTC Date (`createDateUTC()`):** Similar to `createDate()`, but interprets the provided components as Coordinated Universal Time (UTC).
33+
* **From Timestamp (`createFromUnixTimeStamp()`):** Create a `Date` object from a Unix timestamp (the number of milliseconds since January 1, 1970, UTC).
34+
35+
### 2. Converting Dates to Strings (Formatting)
36+
37+
Displaying dates in a human-readable format:
38+
* **Basic String (`toString()`):** Get a general string representation of the date (format depends on the system's locale).
39+
* **Date Part Only (`toDateString()`):** Get just the date portion as a string (e.g., "Mon Jan 01 2024").
40+
* **Time Part Only (`toTimeString()`):** Get just the time portion as a string (e.g., "14:30:00 GMT+0000").
41+
* **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.
42+
* **JSON Format (`toJSON()`):** Get the date as a string suitable for JSON serialization (typically ISO format).
43+
* **UTC String (`toUTCString()`):** Get the date as a string formatted according to UTC conventions (e.g., "Mon, 01 Jan 2024 14:30:00 GMT").
44+
45+
### 3. Getting Specific Parts of a Date
46+
47+
Extracting individual components from a `Date` object. Most "get" methods have both a local time version and a UTC version:
48+
* **Year:** `getYear()` / `getUTCYear()`
49+
* **Month:** `getMonth()` (0 for January, 11 for December) / `getUTCMonth()`
50+
* **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).
51+
* **Day of the Week:** `getWeekday()` (0 for Sunday, 6 for Saturday - local time)
52+
* **Hours:** `getHours()` (0-23) / `getUTCHours()`
53+
* **Minutes:** `getMinutes()` (0-59) / `getUTCMinutes()`
54+
* **Seconds:** `getSeconds()` (0-59) / `getUTCSeconds()`
55+
* **Milliseconds:** `getMilliseconds()` (0-999) / `getUTCMilliseconds()`
56+
* **Total Time (`getTime()`):** Get the raw numeric value of the date, represented as milliseconds since the Unix epoch (January 1, 1970, UTC).
57+
58+
### 4. Setting Parts of a Date (Modifying Dates)
59+
60+
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:
61+
* **Year:** `setYear()` / `setUTCYear()`
62+
* **Month:** `setMonth()` / `setUTCMonth()`
63+
* **Day of the Month:** `setDayOfMonth()` / `setUTCDay()`
64+
* **Hours:** `setHours()` / `setUTCHours()`
65+
* **Minutes:** `setMinutes()` / `setUTCMinutes()`
66+
* **Seconds:** `setSeconds()` / `setUTCSeconds()`
67+
* **Milliseconds:** `setMilliseconds()` / `setUTCMilliseconds()`
68+
* **Total Time (`setTime()`):** Set the date based on a Unix timestamp (milliseconds since epoch).
69+
70+
### 5. Parsing Date Strings
71+
72+
* **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.
73+
74+
## Important Notes:
75+
76+
* **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.
77+
* **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).
78+
* **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.
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"label": "Line",
3+
"position": 2,
4+
"link": {
5+
"type": "generated-index",
6+
"title": "Lines in Bitbybit",
7+
"description": "Introduction to lines in Bitbybit.",
8+
"slug": "/code/common/base/line"
9+
}
10+
}
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Lines in Bitbybit
3+
sidebar_label: Lines in Bitbybit
4+
description: An overview of the Line class in Bitbybit, explaining how to create, analyze, and transform lines and line segments in 3D.
5+
tags: [code, line]
6+
---
7+
8+
<img
9+
src="https://s.bitbybit.dev/assets/icons/white/line-icon.svg"
10+
alt="Line category icon"
11+
title="Line category icon"
12+
width="100" />
13+
14+
[View Full Source & Details on GitHub](https://github.com/bitbybit-dev/bitbybit/blob/master/packages/dev/base/lib/api/services/line.ts)
15+
16+
The `Line` class in Bitbybit provides tools for working with straight lines and line segments in 3D space.
17+
18+
**What is a Line in Bitbybit?**
19+
20+
In Bitbybit, a "Line" (specifically, a line segment) is typically defined by two points: a start point and an end point. It's represented as an object:
21+
`{ start: [x, y, z], end: [x, y, z] }`
22+
23+
Sometimes, a "segment" might also be represented as a simple array of two points:
24+
`[[startX, startY, startZ], [endX, endY, endZ]]`
25+
26+
The `Line` class provides methods to work with both these representations and convert between them.
27+
28+
## Core Capabilities of the Line Class
29+
30+
The `Line` class allows you to define, analyze, and manipulate these line segments. Here's a high-level look at its features. For the exact input parameters (like DTOs) and detailed behavior, please refer to the [full Line API documentation](https://docs.bitbybit.dev/classes/Bit.Line.html) or the GitHub source linked above.
31+
32+
### 1. Creating Lines and Segments
33+
34+
Defining new lines:
35+
* **From Start and End Points (`create()`):** Create a line object `{ start, end }` by providing its two endpoint coordinates.
36+
* **Segment from Points (`createSegment()`):** Create a segment (an array of two points) from its start and end point coordinates.
37+
* **Lines from a Sequence of Points (`linesBetweenPoints()`):** Given a list of points, create a series of connected line segments (e.g., point A to B, B to C, C to D).
38+
* **Lines from Separate Start/End Point Lists (`linesBetweenStartAndEndPoints()`):** If you have a list of start points and a corresponding list of end points, create a line segment for each pair.
39+
40+
### 2. Getting Information About Lines
41+
42+
Accessing properties of a line:
43+
* **Endpoints:** Get the start point (`getStartPoint()`) or end point (`getEndPoint()`) of a line.
44+
* **Length (`length()`):** Calculate the length of a line segment.
45+
* **Point on Line (`getPointOnLine()`):** Find the coordinates of a point that lies on the line segment at a specific fractional distance (parameter `param` from 0.0 at the start to 1.0 at the end) between its start and end points.
46+
47+
### 3. Modifying and Transforming Lines
48+
49+
Changing existing lines:
50+
* **Reverse (`reverse()`):** Swap the start and end points of a line.
51+
* **Transformations:**
52+
* `transformLine()`: Apply a 3D transformation (like translation, rotation, scaling) to a single line.
53+
* `transformsForLines()`: Apply a unique transformation to each line in a list of lines.
54+
55+
### 4. Converting Between Line and Segment Formats
56+
57+
Switching representations:
58+
* **Line to Segment (`lineToSegment()`, `linesToSegments()`):** Convert a line object (or a list of them) into the segment array format.
59+
* **Segment to Line (`segmentToLine()`, `segmentsToLines()`):** Convert a segment array (or a list of them) into the line object format.
60+
61+
### 5. Intersection (Advanced)
62+
63+
* **Line-Line Intersection (`lineLineIntersection()`):**
64+
* Determine if two lines (or line segments, if specified) intersect in 3D space.
65+
* If they do intersect, this method returns the point of intersection.
66+
* It handles various cases, including parallel, collinear, and skew lines, using a tolerance value.
67+
* You can specify whether to check for intersection only within the bounds of the line *segments* or to treat them as infinite lines.
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"label": "Lists",
3+
"position": 2,
4+
"link": {
5+
"type": "generated-index",
6+
"title": "Lists in Bitbybit",
7+
"description": "Introduction to lists in Bitbybit.",
8+
"slug": "/code/common/base/lists"
9+
}
10+
}

0 commit comments

Comments
 (0)