Visualia

Trigonometry functions

polar

Converts polar coordinates to Cartesian coordinates. Inspired by pol2cart() function in R and Matlab.

function polar(angle: number = 0, radius: number = 0): { x: number; y: number };

Usage

<svg width="400" height="400">
  <g transform="translate(200,200)">
    <circle r="100" fill="none" stroke="black" />
    <circle :cx="polar(v.angle,100).x" :cy="polar(v.angle,100).y" r="10" />
  </g>
</svg>

> <v-slider v-model="v.angle" max="360" />
> Angle: {{ v.angle }}°
> Radius: 100

> Cartesian coordinates:
> {{ polar(v.angle,100) }}

Polar coordinates:

angle: 0
radius: 100

Cartesian coordinates:
{ "x": 6.123233995736766e-15, "y": -100 }

cartesian

Converts Cartesian coordinates to polar coordinates. Inspired by cart2pol() function in R and Matlab.

function cartesian(
  angle: number = 0,
  radius: number = 0
): { x: number; y: number };

Cartesian coordinates

v.x: 0
v.y: 0

Polar coordinates:
{ "angle": 0, "radius": 0 }

deg2rad

Converts degrees to radians

function deg2rad(deg: number): number;

Usage

> <v-slider v-model="v.deg" max="360" />
> Degrees: {{ v.deg }}

> Radians {{ deg2rad(v.deg) }} = {{ deg2rad(v.deg) / Math.PI }} π

Degrees:

Radians 0 = 0 π

rad2deg

Converts radians to degrees

function rad2deg(rad: number): number;

Usage

<v-slider v-model="v.rad" :max="2 * Math.PI" step="any" />
> Radians {{ v.rad }} = {{ v.rad / Math.PI }} π
> Degrees: {{ rad2deg(v.rad) }}

Radians = NaN π
Degrees: 0

PI

Returns value

const PI: number;

Usage

> {{ PI }}

3.141592653589793

Example

<svg width="400" height="100">
  <line
    v-for="x in range(0,PI,PI/2)"
    :x1="map(x,0,PI,1,400-1)"
    y1="0"
    :x2="map(x,0,PI,1,400-1)"
    y2="100"
    stroke="#aaa"
  />
  <circle
    v-for="x in range(0,PI,0.01)"
    :cx="map(x,0,PI,0,400)"
    :cy="map(Math.sin(x),-1,1,10,100 - 10)"
    r="1"
    fill="red"
  />
  <circle
    v-for="x in range(0,PI,0.01)"
    :cx="map(x,0,PI,0,400)"
    :cy="map(Math.cos(x),-1,1,10,100 - 10)"
    r="1"
    fill="green"
  />
</svg>

TAU

Returns value. Inspired by the Tau Manifesto.

const TAU: number;

Usage

> {{ TAU }}

6.283185307179586

Example

<svg width="400" height="100">
  <line
    v-for="x in range(0,TAU,TAU/4)"
    :x1="map(x,0,TAU,1,400-1)"
    y1="0"
    :x2="map(x,0,TAU,1,400-1)"
    y2="100"
    stroke="#aaa"
  />
  <circle
    v-for="x in range(0,TAU,0.1)"
    :cx="map(x,0,TAU,0,400)"
    :cy="map(Math.sin(x),-1,1,1,100-1)"
    r="1"
    fill="red"
  />
</svg>

Prior art

https://designstem.github.io/fachwerk/docs/#/deg2rad

https://visualia.github.io/visualia_original/#helper-functions_trigonometry