Axes & Function Plots

<Axes> creates a 2D coordinate system with labeled tick marks, and <FunctionPlot> draws a mathematical function curve on those axes. Together they form the foundation for any math visualization.

0.00s / 3.97s · F0

Axes Props

Prop	Type	Default	Description
`origin`	`[number, number]`	`[200, 200]`	Pixel position of the origin
`xRange`	`[number, number]`	`[-5, 5]`	Visible range on the x-axis
`yRange`	`[number, number]`	`[-5, 5]`	Visible range on the y-axis
`scale`	`number`	`40`	Pixels per unit
`color`	`string`	`'currentColor'`	Axis line color
`labelColor`	`string`	`'currentColor'`	Tick label color
`showGrid`	`boolean`	`false`	Show background grid lines
`gridColor`	`string`	`'#e2e8f0'`	Grid line color
`tickSize`	`number`	`6`	Length of tick marks in pixels

FunctionPlot Props

Prop	Type	Default	Description
`fn`	`(x: number) => number`	—	The function to plot
`domain`	`[number, number]`	`[-5, 5]`	x-domain to evaluate
`origin`	`[number, number]`	`[200, 200]`	Pixel position of the origin (must match Axes)
`scale`	`number`	`40`	Pixels per unit (must match Axes)
`color`	`string`	`'#4f46e5'`	Stroke color of the curve
`strokeWidth`	`number`	`2`	Stroke width
`samples`	`number`	`200`	Number of evaluation points

import { Player, Draw, Axes, FunctionPlot } from '@elucim/core';

<Player width={500} height={350} fps={30} durationInFrames={90}>
  <Axes origin={[250, 200]} xRange={[-4, 4]} yRange={[-2, 3]} scale={50}
        color="currentColor" labelColor="currentColor" showGrid />
  <Draw duration={40}>
    <FunctionPlot fn={(x) => Math.sin(x)} domain={[-4, 4]}
                  origin={[250, 200]} scale={50} color="#6c5ce7" strokeWidth={2.5} />
  </Draw>
</Player>

{
  "width": 500, "height": 350, "fps": 30, "durationInFrames": 90,
  "children": [
    {
      "type": "axes",
      "origin": [250, 200], "domain": [-4, 4], "range": [-2, 3], "scale": 50,
      "showGrid": true
    },
    {
      "type": "functionPlot",
      "fn": "sin(x)", "domain": [-4, 4],
      "origin": [250, 200], "scale": 50,
      "color": "#6c5ce7", "strokeWidth": 2.5,
      "draw": { "duration": 40 }
    }
  ]
}