React Native Redash
AnimationsArraysColorsCoordinatesInterfacescanvas2Cartesian()cartesian2Canvas()cartesian2Polar()polar2Cartesian()polar2Canvas()canvas2Polar()GesturesHooksMathReadmeRun AnimationsSVGStringsTransformationsTransitionsVectors

Coordinates

In order to easily build certain types of animations, it can be extremely useful to switch from one coordinate system to another.

For instance, to convert a x and y coordinate from the React Native canvas to a polar coordinate system centered at x = 100 and y = 100:

const x = 0;
const y = 100;
const center = { x: 100, y: 100 };
const {theta, radius} = cartesian2Polar(
  canvas2Cartesian({ x, y }, center)
);
// theta is π, radius: 100

Interfaces

export interface Point {
    x: Animated.Adaptable<number>;
    y: Animated.Adaptable<number>;
}
export interface PolarPoint {
    theta: Animated.Adaptable<number>;
    radius: Animated.Adaptable<number>;
}

canvas2Cartesian()

export declare const canvas2Cartesian: ({ x, y }: Point, center: Point) => {
    x: Animated.Node<number>;
    y: Animated.Node<number>;
};

cartesian2Canvas()

export declare const cartesian2Canvas: ({ x, y }: Point, center: Point) => {
    x: Animated.Node<number>;
    y: Animated.Node<number>;
};

cartesian2Polar()

export declare const cartesian2Polar: ({ x, y }: Point) => {
    theta: Animated.Node<number>;
    radius: Animated.Node<number>;
};

polar2Cartesian()

export declare const polar2Cartesian: ({ theta, radius }: PolarPoint) => {
    x: Animated.Node<number>;
    y: Animated.Node<number>;
};

polar2Canvas()

export declare const polar2Canvas: ({ theta, radius }: PolarPoint, center: Point) => {
    x: Animated.Node<number>;
    y: Animated.Node<number>;
};

canvas2Polar()

export declare const canvas2Polar: ({ x, y }: Point, center: Point) => {
    theta: Animated.Node<number>;
    radius: Animated.Node<number>;
};