feat(🧮): add inc(), dec(), polarToCanvas(), and canvasToPolar() (#146)

README.md

@@ -108,6 +108,14 @@ This function works by finding the roots of the cubic bezier curve so it might b
 
 ## Math
 
+### `inc(value: Value)`
+
+Increment value by one.
+
+### `dec(value: Value)`
+
+Decrement value by one.
+
 ### `toRad(node: Node): Node`
 
 Transforms an angle from degrees to radians.
@@ -194,21 +202,30 @@ const {alpha, radius} = cartesian2Polart(
 ```
 
 ```
-cartesian2Canvas({ x, y }, center)
+canvas2Cartesian({ x, y }, center)
 ```
 
 ```
-canvas2Cartesian({ x, y }, center)
+canvasToPolar({ alpha, radius }, center)
+```
+
+```
+cartesian2Canvas({ x, y }, center)
 ```
 
 ```
 cartesianToPolar({ x, y })
 ```
 
 ```
-polarToCartesian({ x, y })
+polarToCartesian({ alpha, radius })
 ```
 
+```
+polarToCanvas({ alpha, radius })
+```
+
+
 ## String
 
 ### `string`

src/Coordinates.ts

@@ -37,3 +37,12 @@ export const polar2Cartesian = ({ alpha, radius }: PolarPoint) => ({
   x: multiply(radius, cos(alpha)),
   y: multiply(radius, sin(alpha))
 });
+
+export const polar2Canvas = ({ alpha, radius }: PolarPoint) =>
+  cartesian2Canvas(polar2Cartesian({ alpha, radius }), {
+    x: radius,
+    y: radius
+  });
+
+export const canvas2Polar = ({ x, y }: Point, center: Point) =>
+  cartesian2Polar(canvas2Cartesian({ x, y }, center));

src/Math.ts

@@ -17,11 +17,16 @@ const {
   pow,
   and,
   greaterOrEq,
-  lessOrEq
+  lessOrEq,
+  proc
 } = Animated;
 
 export const bin = (value: boolean): 0 | 1 => (value ? 1 : 0);
 
+export const inc = (value: Animated.Value<number>) => set(value, add(value, 1));
+
+export const dec = (value: Animated.Value<number>) => set(value, sub(value, 1));
+
 export const min = (...args: Animated.Adaptable<number>[]) =>
   args.reduce((acc, arg) => min2(acc, arg));
 
@@ -59,43 +64,54 @@ export const toDeg = (rad: Animated.Adaptable<number>): Animated.Node<number> =>
   multiply(rad, 180 / Math.PI);
 
 // https://developer.download.nvidia.com/cg/atan2.html
+const atan2Proc = proc(
+  (
+    x: Animated.Adaptable<number>,
+    y: Animated.Adaptable<number>,
+    t0: Animated.Value<number>,
+    t1: Animated.Value<number>,
+    t3: Animated.Value<number>,
+    t4: Animated.Value<number>
+  ) =>
+    block([
+      set(t3, abs(x)),
+      set(t1, abs(y)),
+      set(t0, max(t3, t1)),
+      set(t1, min(t3, t1)),
+      set(t3, divide(1, t0)),
+      set(t3, multiply(t1, t3)),
+      set(t4, multiply(t3, t3)),
+      set(t0, -0.01348047),
+      set(t0, add(multiply(t0, t4), 0.057477314)),
+      set(t0, sub(multiply(t0, t4), 0.121239071)),
+      set(t0, add(multiply(t0, t4), 0.195635925)),
+      set(t0, sub(multiply(t0, t4), 0.332994597)),
+      set(t0, add(multiply(t0, t4), 0.99999563)),
+      set(t3, multiply(t0, t3)),
+      set(t3, cond(greaterThan(abs(y), abs(x)), sub(1.570796327, t3), t3)),
+      set(t3, cond(lessThan(x, 0), sub(Math.PI, t3), t3)),
+      set(t3, cond(lessThan(y, 0), multiply(t3, -1), t3)),
+      t3
+    ])
+);
+
 export const atan2 = (
   y: Animated.Adaptable<number>,
   x: Animated.Adaptable<number>
 ): Animated.Node<number> => {
   const t0: Animated.Value<number> = new Value();
   const t1: Animated.Value<number> = new Value();
-  // const t2: Animated.Value<number> = new Value();
   const t3: Animated.Value<number> = new Value();
   const t4: Animated.Value<number> = new Value();
-  return block([
-    set(t3, abs(x)),
-    set(t1, abs(y)),
-    set(t0, max(t3, t1)),
-    set(t1, min(t3, t1)),
-    set(t3, divide(1, t0)),
-    set(t3, multiply(t1, t3)),
-    set(t4, multiply(t3, t3)),
-    set(t0, -0.01348047),
-    set(t0, add(multiply(t0, t4), 0.057477314)),
-    set(t0, sub(multiply(t0, t4), 0.121239071)),
-    set(t0, add(multiply(t0, t4), 0.195635925)),
-    set(t0, sub(multiply(t0, t4), 0.332994597)),
-    set(t0, add(multiply(t0, t4), 0.99999563)),
-    set(t3, multiply(t0, t3)),
-    set(t3, cond(greaterThan(abs(y), abs(x)), sub(1.570796327, t3), t3)),
-    set(t3, cond(lessThan(x, 0), sub(Math.PI, t3), t3)),
-    set(t3, cond(lessThan(y, 0), multiply(t3, -1), t3)),
-    t3
-  ]);
+  return atan2Proc(x, y, t0, t1, t3, t4);
 };
 
 export const cubicBezier = (
-  t: Animated.Node<number>,
-  p0: Animated.Node<number>,
-  p1: Animated.Node<number>,
-  p2: Animated.Node<number>,
-  p3: Animated.Node<number>
+  t: Animated.Adaptable<number>,
+  p0: Animated.Adaptable<number>,
+  p1: Animated.Adaptable<number>,
+  p2: Animated.Adaptable<number>,
+  p3: Animated.Adaptable<number>
 ): Animated.Node<number> => {
   const term = sub(1, t);
   const a = multiply(1, pow(term, 3), pow(t, 0), p0);

src/__mocks__/react-native-reanimated.ts

@@ -19,6 +19,7 @@ export default {
   Value: AnimatedValue,
   Node: AnimatedValue,
   block: arr => arr[arr.length - 1],
+  proc: cb => cb,
   add: (a, b) => new AnimatedValue(getValue(a) + getValue(b)),
   sub: (a, b) => new AnimatedValue(getValue(a) - getValue(b)),
   divide: (a, b) => new AnimatedValue(getValue(a) / getValue(b)),

src/__tests__/Coordinates.test.ts

@@ -1,7 +1,9 @@
 import {
   canvas2Cartesian,
+  canvas2Polar,
   cartesian2Canvas,
   cartesian2Polar,
+  polar2Canvas,
   polar2Cartesian
 } from "../Coordinates";
 
@@ -49,7 +51,7 @@ test("canvas2Cartesian 3", () => {
   expect(point.y[" __value"]).toBe(300);
 });
 
-test("cartesian2Polar", () => {
+test("cartesian2Polar 1", () => {
   const x = 0;
   const y = 100;
   const center = { x: 100, y: 100 };
@@ -63,3 +65,15 @@ test("cartesian2Polar", () => {
   expect(x1[" __value"]).toBe(0);
   expect(Math.round(y1[" __value"])).toBe(100);
 });
+
+test("cartesian2Polar 2", () => {
+  const x = 0;
+  const y = 100;
+  const center = { x: 100, y: 100 };
+  const { alpha, radius } = canvas2Polar({ x, y }, center);
+  expect(alpha[" __value"]).toBe(Math.PI);
+  expect(radius[" __value"]).toBe(100);
+  const { x: x1, y: y1 } = polar2Canvas({ alpha, radius });
+  expect(x1[" __value"]).toBe(0);
+  expect(Math.round(y1[" __value"])).toBe(100);
+});