Vectors & Vector Fields

<Vector> draws a single arrow between two points in math coordinates, while <VectorField> visualizes a two-dimensional field of arrows defined by a function.

0.00s / 2.97s · F0

Vector Props

Prop	Type	Default	Description
`from`	`[number, number]`	`[0, 0]`	Start point in math coordinates
`to`	`[number, number]`	—	End point in math coordinates
`origin`	`[number, number]`	`[200, 200]`	Pixel position of the coordinate origin
`scale`	`number`	`40`	Pixels per unit
`color`	`string`	`'currentColor'`	Arrow color
`strokeWidth`	`number`	`2`	Stroke width
`label`	`string`	`undefined`	Text label rendered near the arrow
`labelOffset`	`[number, number]`	`[0, -10]`	Pixel offset for the label

VectorField Props

Prop	Type	Default	Description
`fn`	`(x: number, y: number) => [number, number]`	—	Function mapping each point to a direction
`domain`	`[number, number]`	`[-5, 5]`	x-range of the field
`range`	`[number, number]`	`[-5, 5]`	y-range of the field
`origin`	`[number, number]`	`[200, 200]`	Pixel position of the coordinate origin
`scale`	`number`	`40`	Pixels per unit
`color`	`string`	`'#4f46e5'`	Arrow color
`arrowScale`	`number`	`1`	Multiplier for arrow length
`normalize`	`boolean`	`false`	Normalize all arrows to the same length
`spacing`	`number`	`1`	Grid spacing between arrows in math units
`fadeIn`	`boolean`	`false`	Animate arrows in on mount

import { Player, FadeIn, Axes, Vector } from '@elucim/core';

<Player width={500} height={350} fps={30} durationInFrames={60}>
  <Axes origin={[250, 200]} xRange={[-4, 4]} yRange={[-3, 3]} scale={50}
        color="currentColor" labelColor="currentColor" />
  <FadeIn duration={20}>
    <Vector from={[0, 0]} to={[3, 2]} origin={[250, 200]} scale={50}
            color="#6c5ce7" strokeWidth={2.5} label="v" />
  </FadeIn>
</Player>

{
  "width": 500, "height": 350, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "axes",
      "origin": [250, 200], "domain": [-4, 4], "range": [-3, 3], "scale": 50
    },
    {
      "type": "vector",
      "from": [0, 0], "to": [3, 2],
      "origin": [250, 200], "scale": 50,
      "color": "#6c5ce7", "strokeWidth": 2.5, "label": "v",
      "fadeIn": { "duration": 20 }
    }
  ]
}