diff --git a/src/Colors.ts b/src/Colors.ts index d607b5b..6d10290 100644 --- a/src/Colors.ts +++ b/src/Colors.ts @@ -1,15 +1,17 @@ import { interpolateColor } from "react-native-reanimated"; +import { clamp, fract, mix } from "./Math"; + export type AnimatedColor = string | number; /** * @summary Returns black or white depending on the value of the background color. * @worklet */ -export const colorForBackground = (r: number, g: number, b: number) => { +export const isLight = (r: number, g: number, b: number) => { "worklet"; const L = 0.299 * r + 0.587 * g + 0.114 * b; - return L > 186 ? 0x000000ff : 0xffffffff; + return L > 186; }; /** @@ -29,3 +31,30 @@ export const mixColor = ( "worklet"; return interpolateColor(value, [0, 1], [color1, color2], colorSpace); }; + +export const hsv2rgb = (h: number, s: number, v: number) => { + "worklet"; + const K = { + x: 1, + y: 2 / 3, + z: 1 / 3, + w: 3, + }; + const p = { + x: Math.abs(fract(h + K.x) * 6 - K.w), + y: Math.abs(fract(h + K.y) * 6 - K.w), + z: Math.abs(fract(h + K.z) * 6 - K.w), + }; + // return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); + const rgb = { + x: v * mix(s, K.x, clamp(p.x - K.x, 0, 1)), + y: v * mix(s, K.x, clamp(p.y - K.x, 0, 1)), + z: v * mix(s, K.x, clamp(p.z - K.x, 0, 1)), + }; + + const r = Math.round(rgb.x * 255); + const g = Math.round(rgb.y * 255); + const b = Math.round(rgb.z * 255); + + return { r, g, b }; +}; diff --git a/src/Math.ts b/src/Math.ts index e2a860c..3ced066 100644 --- a/src/Math.ts +++ b/src/Math.ts @@ -246,3 +246,8 @@ export const cubicBezierYForX = ( .filter((root) => root >= 0 && root <= 1)[0]; return cubicBezier(t, a.y, b.y, c.y, d.y); }; + +export const fract = (x: number) => { + "worklet"; + return x - Math.floor(x); +}; diff --git a/src/Matrix3.ts b/src/Matrix3.ts index 2151b5b..463b5b9 100644 --- a/src/Matrix3.ts +++ b/src/Matrix3.ts @@ -209,14 +209,14 @@ export const multiply3 = (m1: Matrix3, m2: Matrix3) => { ] as const; }; -export const serializeToSVGMatrixArray = (m: Matrix3) => { +const serializeToSVGMatrix = (m: Matrix3) => { "worklet"; - return [m[0][0], m[1][0], m[0][1], m[1][1], m[0][2], m[1][2]]; + return `matrix(${m[0][0]}, ${m[1][0]}, ${m[0][1]}, ${m[1][1]}, ${m[0][2]}, ${m[1][2]})`; }; -export const serializeToSVGMatrix = (m: Matrix3) => { +export const svgMatrix = (transforms: Transforms2d) => { "worklet"; - return `matrix(${m[0][0]}, ${m[1][0]}, ${m[0][1]}, ${m[1][1]}, ${m[0][2]}, ${m[1][2]})`; + return serializeToSVGMatrix(processTransform2d(transforms)); }; export const processTransform2d = (transforms: Transforms2d) => { diff --git a/src/Transforms.ts b/src/Transforms.ts index b2ceccc..0687542 100644 --- a/src/Transforms.ts +++ b/src/Transforms.ts @@ -1,4 +1,6 @@ import type { TransformsStyle } from "react-native"; +import type Animated from "react-native-reanimated"; +import { useAnimatedStyle } from "react-native-reanimated"; import type { Vector } from "./Vectors"; import type { Transforms2d } from "./Matrix3"; @@ -32,3 +34,11 @@ export const transformOrigin2d = ( { translateY: -y }, ]; }; + +export const useTranslation = ({ + x, + y, +}: Vector>) => + useAnimatedStyle(() => ({ + transform: [{ translateX: x.value }, { translateY: y.value }], + })); diff --git a/src/__tests__/Matrix3.test.ts b/src/__tests__/Matrix3.test.ts index 7602048..2ba472b 100644 --- a/src/__tests__/Matrix3.test.ts +++ b/src/__tests__/Matrix3.test.ts @@ -1,18 +1,16 @@ -import { processTransform2d, serializeToSVGMatrix } from "../Matrix3"; +import { svgMatrix } from "../Matrix3"; test("processTransform3d()", () => { const width = 100; const height = 100; expect( - serializeToSVGMatrix( - processTransform2d([ - { translateX: width / 2 }, - { translateY: height / 2 }, - { rotate: `${Math.PI / 2}rad` }, - { translateX: -width / 2 }, - { translateY: -height / 2 }, - ]) - ) + svgMatrix([ + { translateX: width / 2 }, + { translateY: height / 2 }, + { rotate: `${Math.PI / 2}rad` }, + { translateX: -width / 2 }, + { translateY: -height / 2 }, + ]) ).toStrictEqual( "matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 100, -3.061616997868383e-15)" );