motion-canvas / motion-canvas

Visualize Your Ideas With Code
https://motioncanvas.io
MIT License
16.1k stars 605 forks source link

Dynamic point definition for `Spline` yields `Insufficient number of knots` warning. #979

Closed Splines closed 7 months ago

Splines commented 7 months ago

Describe the bug When specifying a function to evaluate the points for a spline, we get the warning:

Insufficient number of knots specified for spline. A spline needs at least two knots.

due to

https://github.com/motion-canvas/motion-canvas/blob/6c9bbfe8e6a45a60975beada15256be93b5d65b3/packages/2d/src/lib/components/Spline.ts#L119-L128

To Reproduce Dummy code snippet:

import { makeScene2D, Spline } from '@motion-canvas/2d';
import { waitFor } from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  view.add(
    <Spline
      points={() => [
        [-300, 0],
        [-150, -100],
        [150, 100],
        [300, 0],
      ]}
      stroke="lightgreen"
      lineWidth={6}
    />
  );

  yield* waitFor(1);
});

Expected behavior To be fair, the docs for the Spline component do not list this feature. In the examples, the points attribute is always statically assigned. I expected a function to work as well since this dynamic way of doing things was introduced somewhere else in the docs. And indeed, it does work fine even though the warning shows up.

Package versions:

Context I need to set up the points dynamically in my custom component MathFunction (extending a Spline) that allows me to draw mathematical functions. The user is then able to do something like this:

const amp = createSignal(1);
const freq = createSignal(20);

view.add(
  <MathFunction
      func={(x) => Math.sin(x / freq()) * 100 * amp()}
      numPoints={1000}
  />
);
Splines commented 7 months ago

@aarthificial Wow, thanks for the quick fix!