### Install Maath Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Installs the maath library using yarn. ```bash yarn add maath ``` -------------------------------- ### Install Maath Source: https://github.com/pmndrs/maath/blob/main/README.md Installs the maath library using yarn. ```bash yarn add maath ``` -------------------------------- ### Maath Easing Usage Examples Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Demonstrates the usage of various damping functions for animating properties like position, color, and rotation. It shows how to animate different data types and includes examples for Vector2, Vector3, Vector4, Matrix4, Quaternion, and Color. ```jsx import { damp, damp2, damp3, damp4, dampE, dampM, dampQ, dampS, dampC } from 'maath/easing' function frameloop() { const delta = clock.getDelta() // Animates foo.bar to 10 damp(foo, "bar", 10, 0.25, delta) // Animates mesh.position to 0,1,2 damp3(mesh.position, [0, 1, 2], 0.25, delta) // Also takes vectors, shallow vectors and scalars // damp3(mesh.position, new THREE.Vector3(0, 1, 2), 0.25, delta) // damp3(mesh.position, { x: 0, y: 1, z: 2 }, 0.25, delta) // damp3(mesh.scale, 2, 0.25, delta) dampC(mesh.material.color, "green", 0.25, delta) // Also takes colors, fake colors, numbers and arrays // dampC(mesh.material.color, new THREE.Color("green"), 0.25, delta) // dampC(mesh.material.color, 0xdead00, 0.25, delta) // dampC(mesh.material.color, [1, 0, 0], 0.25, delta) // dampC(mesh.material.color, { r: 1, g: 0, b: 0 }, 0.25, delta) // Animates an euler with a shortest-path algorithm dampE(mesh.rotation, [Math.PI / 2, 0, 0], 0.25, delta) // Also takes eulers // dampE(mesh.rotation, new THREE.Euler(Math.PI / 2, 0, 0), 0.25, delta) // damp2 for Vector2 // damp4 for Vector4 // dampM for Matrix4 // dampQ for Quaternion // dampS for Spherical } ``` -------------------------------- ### Maath Easing Usage Examples Source: https://github.com/pmndrs/maath/blob/main/README.md Demonstrates the usage of various damping functions for animating properties like position, color, and rotation. It shows how to animate different data types and includes examples for Vector2, Vector3, Vector4, Matrix4, Quaternion, and Color. ```jsx import { damp, damp2, damp3, damp4, dampE, dampM, dampQ, dampS, dampC } from 'maath/easing' function frameloop() { const delta = clock.getDelta() // Animates foo.bar to 10 damp(foo, "bar", 10, 0.25, delta) // Animates mesh.position to 0,1,2 damp3(mesh.position, [0, 1, 2], 0.25, delta) // Also takes vectors, shallow vectors and scalars // damp3(mesh.position, new THREE.Vector3(0, 1, 2), 0.25, delta) // damp3(mesh.position, { x: 0, y: 1, z: 2 }, 0.25, delta) // damp3(mesh.scale, 2, 0.25, delta) dampC(mesh.material.color, "green", 0.25, delta) // Also takes colors, fake colors, numbers and arrays // dampC(mesh.material.color, new THREE.Color("green"), 0.25, delta) // dampC(mesh.material.color, 0xdead00, 0.25, delta) // dampC(mesh.material.color, [1, 0, 0], 0.25, delta) // dampC(mesh.material.color, { r: 1, g: 0, b: 0 }, 0.25, delta) // Animates an euler with a shortest-path algorithm dampE(mesh.rotation, [Math.PI / 2, 0, 0], 0.25, delta) // Also takes eulers // dampE(mesh.rotation, new THREE.Euler(Math.PI / 2, 0, 0), 0.25, delta) // damp2 for Vector2 // damp4 for Vector4 // dampM for Matrix4 // dampQ for Quaternion // dampS for Spherical } ``` -------------------------------- ### Get Matrix Minor Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Retrieves the minor of a given matrix by calculating the determinant of the submatrix formed by excluding a specified row and column. ```js const minor = getMinor([1, 2, 1, 2, 1, 1, 3, 2, 3], 1, 1); // minor will be the determinant of the submatrix without row 1 and colum 1 // | 1 1 | // | 2 3 | ``` -------------------------------- ### Get Matrix Minor Source: https://github.com/pmndrs/maath/blob/main/README.md Retrieves the minor of a given matrix by calculating the determinant of the submatrix formed by excluding a specified row and column. ```js const minor = getMinor([1, 2, 1, 2, 1, 1, 3, 2, 3], 1, 1); // minor will be the determinant of the submatrix without row 1 and colum 1 // | 1 1 | // | 2 3 | ``` -------------------------------- ### Importing Maath Modules Source: https://github.com/pmndrs/maath/blob/main/README.md Demonstrates how to import namespaces and individual functions from the maath library. ```javascript // Import namespaces from the main entrypoint import { buffer, random } from "maath"; // Or import each function or all of them from each namespace entrypoint import * as buffer from "maath/buffer"; import { inSphere } from "maath/random"; ``` -------------------------------- ### Importing Maath Modules Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Demonstrates how to import namespaces and individual functions from the maath library. ```javascript // Import namespaces from the main entrypoint import { buffer, random } from "maath"; // Or import each function or all of them from each namespace entrypoint import * as buffer from "maath/buffer"; import { inSphere } from "maath/random"; ``` -------------------------------- ### Maath Easing Import Source: https://github.com/pmndrs/maath/blob/main/README.md Imports all easing functions from the maath/easing module. ```js import * as easing from "maath/easing"; ``` -------------------------------- ### Maath Easing Import Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Imports all easing functions from the maath/easing module. ```js import * as easing from "maath/easing"; ``` -------------------------------- ### Maath Matrix Import Source: https://github.com/pmndrs/maath/blob/main/README.md Imports all matrix functions from the maath/matrix module. ```js import * as matrix from "maath/matrix"; ``` -------------------------------- ### Maath Matrix Import Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Imports all matrix functions from the maath/matrix module. ```js import * as matrix from "maath/matrix"; ``` -------------------------------- ### Maath Easing Functions Source: https://github.com/pmndrs/maath/blob/main/README.md Lists available easing functions, including sine, cubic, quint, circ, quart, and expo with 'in', 'out', and 'inOut' variants. Also includes specific functions like `rsqw`, `exp`, and `linear`. ```jsx import { sine, cubic, quint, circ, quart, expo } from "maath/easing"; sine.in(t); sine.out(t); sine.inOut(t); import { rsqw, exp, linear } from "maath/easing"; // rounded-square wave rsqw(t, delta); // unity smooth damping exp(t); // linear linear(t); // === t ``` -------------------------------- ### Maath Easing Functions Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Lists available easing functions, including sine, cubic, quint, circ, quart, and expo with 'in', 'out', and 'inOut' variants. Also includes specific functions like `rsqw`, `exp`, and `linear`. ```jsx import { sine, cubic, quint, circ, quart, expo } from "maath/easing"; sine.in(t); sine.out(t); sine.inOut(t); import { rsqw, exp, linear } from "maath/easing"; // rounded-square wave rsqw(t, delta); // unity smooth damping exp(t); // linear linear(t); // === t ``` -------------------------------- ### Triangle Utilities Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Imports the triangle module from the maath library. Specific functionalities are TBD (To Be Determined), indicating that the API for triangle-related operations is not yet finalized or documented. ```js import * as triangle from "maath/triangle"; // TBD ``` -------------------------------- ### Triangle Utilities Source: https://github.com/pmndrs/maath/blob/main/README.md Imports the triangle module from the maath library. Specific functionalities are TBD (To Be Determined), indicating that the API for triangle-related operations is not yet finalized or documented. ```js import * as triangle from "maath/triangle"; // TBD ``` -------------------------------- ### Random Number Generation Source: https://github.com/pmndrs/maath/blob/main/README.md Imports the random module from the maath library, providing functions for generating random numbers and points, potentially for use in graphics and simulations. Further details on specific functions like `onTorus` and `inTorus` are pending. ```js import * as random from "maath/random"; // TODO: Add documentation for onTorus and inTorus functions. // onTorus(buffer, { innerRadius, outerRadius }) // inTorus(buffer, { innerRadius, outerRadius }) ``` -------------------------------- ### Buffer Utilities Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Provides functions for manipulating typed arrays representing vectors. ```javascript import * as buffer from "maath/buffer"; // Converts an [..., x, y, z, ...] typed array to a Vector[] const myBuffer = new Float32Array(100 * 3); const myArray = buffer.toVectorArray(myBuffer, 3); // Swizzles individual vectors in a vector buffer const myBufferSwizzle = new Float32Array(100 * 3); myBufferSwizzle.push(0, 1, 2); buffer.swizzleBuffer(myBufferSwizzle, "xzy"); // buffer is now [0, 2, 1] // Adds a z axis to an [..., x, y, ...] typed array const my2DBuffer = new Float32Array(100 * 2); const my3DBuffer = buffer.addAxis(my2DBuffer, 2, () => Math.random()); const my4DBuffer = buffer.addAxis(my3DBuffer, 3, () => 1); // Linearly interpolates two buffers, writing on a third one // Assuming inSphere and inBox are available from maath/random // const mySphere = inSphere(new Float32Array(100 * 3), { radius: 4 }); // const myBox = inBox(new Float32Array(100 * 3), { side: 4 }); // const interpolationTarget = myBox.slice(0); // buffer.lerpBuffers(mySphere, myBox, interpolationTarget, Math.sin(performance.now())); ``` -------------------------------- ### Random Number Generation Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Imports the random module from the maath library, providing functions for generating random numbers and points, potentially for use in graphics and simulations. Further details on specific functions like `onTorus` and `inTorus` are pending. ```js import * as random from "maath/random"; // TODO: Add documentation for onTorus and inTorus functions. // onTorus(buffer, { innerRadius, outerRadius }) // inTorus(buffer, { innerRadius, outerRadius }) ``` -------------------------------- ### Miscellaneous Math Utilities Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Provides essential math utilities for graphics programming. Includes functions for clamping values, repeating values within a range, calculating angle differences, converting between degrees and radians, generating Fibonacci points on a sphere, comparing vectors with tolerance, sorting vectors lexicographically, computing the convex hull of 2D points, and remapping values between ranges. ```tsx /** * Clamps a value between a range. * @param value The number to clamp. * @param min The minimum allowed value. * @param max The maximum allowed value. * @returns The clamped value. */ clamp(value: number, min: number, max: number): number /** * Loops the value t, so that it is never larger than length and never smaller than 0. * @param t The value to repeat. * @param length The length of the range to repeat within. * @returns The repeated value. */ repeat(t: number, length: number): number /** * Calculates the shortest difference between two given angles. * @param current The current angle. * @param target The target angle. * @returns The shortest difference between the angles. */ deltaAngle(current: number, target: number): number /** * Converts degrees to radians. * @param degrees The angle in degrees. * @returns The angle in radians. */ degToRad(degrees: number): number /** * Converts radians to degrees. * @param radians The angle in radians. * @returns The angle in degrees. */ radToDeg(radians: number): number /** * Generates Fibonacci points on a sphere. * Adapted from https://gist.github.com/stephanbogner/a5f50548a06bec723dcb0991dcbb0856 by https://twitter.com/st_phan * @param buffer The buffer to store the points. * @param options Options for generating points, including radius. */ fibonacciOnSphere(buffer: TypedArray, { radius = 1 }): void /** * Checks if vector a is equal to vector b, with tolerance. * @param a The first vector. * @param b The second vector. * @param eps The tolerance for comparison (defaults to Number.EPSILON). * @returns True if the vectors are equal within the tolerance, false otherwise. */ vectorEquals(a, b, eps = Number.EPSILON): boolean /** * Sorts vectors in lexicographic order. * Works with both v2 and v3. * Use as: const sorted = arrayOfVectors.sort(lexicographicOrder) * https://en.wikipedia.org/wiki/Lexicographic_order * @param a The first vector. * @param b The second vector. * @returns A negative value if a < b, a positive value if a > b, or 0 if they are equal. */ lexicographic(a: Vector2 | Vector3, b: Vector2 | Vector3): number /** * Convex Hull * Returns an array of 2D Vectors representing the convex hull of a set of 2D Vectors. * @param _points An array of 2D vectors. * @returns An array of 2D vectors representing the convex hull. */ convexHull(_points: Vector2[]): Vector2[] /** * Remaps a value from one range to another. * @param x The value to remap. * @param low1 The lower bound of the first range. * @param high1 The upper bound of the first range. * @param low2 The lower bound of the second range. * @param high2 The upper bound of the second range. * @returns The remapped value. */ remap(x: number, [low1, high1]: number[], [low2, high2]: number[]): number ``` -------------------------------- ### Miscellaneous Math Utilities Source: https://github.com/pmndrs/maath/blob/main/README.md Provides essential math utilities for graphics programming. Includes functions for clamping values, repeating values within a range, calculating angle differences, converting between degrees and radians, generating Fibonacci points on a sphere, comparing vectors with tolerance, sorting vectors lexicographically, computing the convex hull of 2D points, and remapping values between ranges. ```tsx /** * Clamps a value between a range. * @param value The number to clamp. * @param min The minimum allowed value. * @param max The maximum allowed value. * @returns The clamped value. */ clamp(value: number, min: number, max: number): number /** * Loops the value t, so that it is never larger than length and never smaller than 0. * @param t The value to repeat. * @param length The length of the range to repeat within. * @returns The repeated value. */ repeat(t: number, length: number): number /** * Calculates the shortest difference between two given angles. * @param current The current angle. * @param target The target angle. * @returns The shortest difference between the angles. */ deltaAngle(current: number, target: number): number /** * Converts degrees to radians. * @param degrees The angle in degrees. * @returns The angle in radians. */ degToRad(degrees: number): number /** * Converts radians to degrees. * @param radians The angle in radians. * @returns The angle in degrees. */ radToDeg(radians: number): number /** * Generates Fibonacci points on a sphere. * Adapted from https://gist.github.com/stephanbogner/a5f50548a06bec723dcb0991dcbb0856 by https://twitter.com/st_phan * @param buffer The buffer to store the points. * @param options Options for generating points, including radius. */ fibonacciOnSphere(buffer: TypedArray, { radius = 1 }): void /** * Checks if vector a is equal to vector b, with tolerance. * @param a The first vector. * @param b The second vector. * @param eps The tolerance for comparison (defaults to Number.EPSILON). * @returns True if the vectors are equal within the tolerance, false otherwise. */ vectorEquals(a, b, eps = Number.EPSILON): boolean /** * Sorts vectors in lexicographic order. * Works with both v2 and v3. * Use as: const sorted = arrayOfVectors.sort(lexicographicOrder) * https://en.wikipedia.org/wiki/Lexicographic_order * @param a The first vector. * @param b The second vector. * @returns A negative value if a < b, a positive value if a > b, or 0 if they are equal. */ lexicographic(a: Vector2 | Vector3, b: Vector2 | Vector3): number /** * Convex Hull * Returns an array of 2D Vectors representing the convex hull of a set of 2D Vectors. * @param _points An array of 2D vectors. * @returns An array of 2D vectors representing the convex hull. */ convexHull(_points: Vector2[]): Vector2[] /** * Remaps a value from one range to another. * @param x The value to remap. * @param low1 The lower bound of the first range. * @param high1 The upper bound of the first range. * @param low2 The lower bound of the second range. * @param high2 The upper bound of the second range. * @returns The remapped value. */ remap(x: number, [low1, high1]: number[], [low2, high2]: number[]): number ``` -------------------------------- ### Buffer Utilities Source: https://github.com/pmndrs/maath/blob/main/README.md Provides functions for manipulating typed arrays representing vectors. ```javascript import * as buffer from "maath/buffer"; // Converts an [..., x, y, z, ...] typed array to a Vector[] const myBuffer = new Float32Array(100 * 3); const myArray = buffer.toVectorArray(myBuffer, 3); // Swizzles individual vectors in a vector buffer const myBufferSwizzle = new Float32Array(100 * 3); myBufferSwizzle.push(0, 1, 2); buffer.swizzleBuffer(myBufferSwizzle, "xzy"); // buffer is now [0, 2, 1] // Adds a z axis to an [..., x, y, ...] typed array const my2DBuffer = new Float32Array(100 * 2); const my3DBuffer = buffer.addAxis(my2DBuffer, 2, () => Math.random()); const my4DBuffer = buffer.addAxis(my3DBuffer, 3, () => 1); // Linearly interpolates two buffers, writing on a third one // Assuming inSphere and inBox are available from maath/random // const mySphere = inSphere(new Float32Array(100 * 3), { radius: 4 }); // const myBox = inBox(new Float32Array(100 * 3), { side: 4 }); // const interpolationTarget = myBox.slice(0); // buffer.lerpBuffers(mySphere, myBox, interpolationTarget, Math.sin(performance.now())); ``` -------------------------------- ### Geometry Utilities Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Provides functions for creating and manipulating geometric data, often for use with three.js. ```javascript import * as geometry from "maath/geometry"; // Creates a rounded plane geometry // const geo = new geometry.RoundedPlaneGeometry(); // const mesh = new THREE.Mesh(geo, material); // Applies box-projected UVs to a buffer geometry // geometry.applyBoxUV(bufferGeometry); // Applies spherical UVs to a buffer geometry // geometry.applySphereUV(bufferGeometry); // Applies cylindrical-projected UVs to a buffer geometry // geometry.applyCylindricalUV(bufferGeometry); ``` -------------------------------- ### Special Damping Functions: Angle and LookAt Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Introduces two specialized damping functions: `dampAngle` for animating angles with shortest-path and `dampLookAt` for animating a mesh's look-at behavior. ```jsx import { dampAngle, dampLookAt } from "maath/easing"; // Animates angle to targetAngle, with a shortest-path algorithm dampAngle(angle, targetAngle, 0.25, delta); // Animates a meshes look-up dampLookAt(mesh, focus, 0.25, delta); ``` -------------------------------- ### Unity Smooth Damping Function Source: https://github.com/pmndrs/maath/blob/main/README.md Provides a Unity-style smooth damping function for animating properties. It is refresh-rate independent and can be interrupted. It supports various data types like numbers, vectors, and colors. ```tsx export function damp( /** The object */ current: { [key: string]: any }, /** The key to animate */ prop: string, /** To target (or goal) value */ target: number, /** Approximate time to reach the target. A smaller value will reach the target faster. */ smoothTime = 0.25, /** Frame delta, for refreshrate independence */ delta = 0.01, /** Optionally allows you to clamp the maximum speed. If smoothTime is 0.25s and looks OK * going between two close points but not for points far apart as it'll move very rapid, * then a maxSpeed of e.g. 1 which will clamp the speed to 1 unit per second, it may now * take much longer than smoothTime to reach the target if it is far away. */ maxSpeed = Infinity, /** Easing function */ easing = (t: number) => 1 / (1 + t + 0.48 * t * t + 0.235 * t * t * t), /** End of animation precision */ eps = 0.001 ); ``` -------------------------------- ### Special Damping Functions: Angle and LookAt Source: https://github.com/pmndrs/maath/blob/main/README.md Introduces two specialized damping functions: `dampAngle` for animating angles with shortest-path and `dampLookAt` for animating a mesh's look-at behavior. ```jsx import { dampAngle, dampLookAt } from "maath/easing"; // Animates angle to targetAngle, with a shortest-path algorithm dampAngle(angle, targetAngle, 0.25, delta); // Animates a meshes look-up dampLookAt(mesh, focus, 0.25, delta); ``` -------------------------------- ### Geometry Utilities Source: https://github.com/pmndrs/maath/blob/main/README.md Provides functions for creating and manipulating geometric data, often for use with three.js. ```javascript import * as geometry from "maath/geometry"; // Creates a rounded plane geometry // const geo = new geometry.RoundedPlaneGeometry(); // const mesh = new THREE.Mesh(geo, material); // Applies box-projected UVs to a buffer geometry // geometry.applyBoxUV(bufferGeometry); // Applies spherical UVs to a buffer geometry // geometry.applySphereUV(bufferGeometry); // Applies cylindrical-projected UVs to a buffer geometry // geometry.applyCylindricalUV(bufferGeometry); ``` -------------------------------- ### Unity Smooth Damping Function Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Provides a Unity-style smooth damping function for animating properties. It is refresh-rate independent and can be interrupted. It supports various data types like numbers, vectors, and colors. ```tsx export function damp( /** The object */ current: { [key: string]: any }, /** The key to animate */ prop: string, /** To target (or goal) value */ target: number, /** Approximate time to reach the target. A smaller value will reach the target faster. */ smoothTime = 0.25, /** Frame delta, for refreshrate independence */ delta = 0.01, /** Optionally allows you to clamp the maximum speed. If smoothTime is 0.25s and looks OK * going between two close points but not for points far apart as it'll move very rapid, * then a maxSpeed of e.g. 1 which will clamp the speed to 1 unit per second, it may now * take much longer than smoothTime to reach the target if it is far away. */ maxSpeed = Infinity, /** Easing function */ easing = (t: number) => 1 / (1 + t + 0.48 * t * t + 0.235 * t * t * t), /** End of animation precision */ eps = 0.001 ); ``` -------------------------------- ### 2x2 Matrix Determinant Calculation Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Calculates the determinant of a 2x2 matrix provided in row-major order. ```js const d = determinant2(1, 1, 2, 2); ``` -------------------------------- ### 3x3 Matrix Determinant Calculation Source: https://github.com/pmndrs/maath/blob/main/packages/maath/README.md Calculates the determinant of a 3x3 matrix provided in row-major order. ```js const d = determinant3(1, 1, 1, 2, 2, 2); ``` -------------------------------- ### 2x2 Matrix Determinant Calculation Source: https://github.com/pmndrs/maath/blob/main/README.md Calculates the determinant of a 2x2 matrix provided in row-major order. ```js const d = determinant2(1, 1, 2, 2); ``` -------------------------------- ### 3x3 Matrix Determinant Calculation Source: https://github.com/pmndrs/maath/blob/main/README.md Calculates the determinant of a 3x3 matrix provided in row-major order. ```js const d = determinant3(1, 1, 1, 2, 2, 2); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.