Manually creating paths?

[shendrick]

I'm trying to figure out how to use this library to create lines from some simple points that I generate algorithmically. However, it doesn't seem to deal well with minimal points that aren't curves.

example:

 const strokes = getStroke(
        [
          { x: 10, y: 10, pressure: 0.5 },
          { x: 10, y: 86, pressure: 0.5 },
          { x: 62, y: 86, pressure: 0.5 },
          { x: 62, y: 10, pressure: 0.5 },
        ],
        {
          size: 4,
          thinning: 0,
          smoothing: 0,
          streamline: 0,
          simulatePressure: false,
          start: {
            cap: false,
            taper: 0,
          },
          end: {
            cap: false,
            taper: 0,
          },
        }
      );

I would expect a U shape, however what appears is a sharp V shape. 🤔

[shendrick]

Looks like if I add a point in between each of the existing four, closer to the next point, than the previous it creates the shape I expected...

     const strokes = getStroke(
        [
          { x: 10, y: 10, pressure: 0.5 },
          { x: 10, y: 85, pressure: 0.5 },
          { x: 10, y: 86, pressure: 0.5 },
          { x: 61, y: 86, pressure: 0.5 },
          { x: 62, y: 86, pressure: 0.5 },
          { x: 62, y: 11, pressure: 0.5 },
          { x: 62, y: 10, pressure: 0.5 },
        ],
        {
          size: 4,
          thinning: 0,
          smoothing: 0,
          streamline: 0,
          simulatePressure: false,
          start: {
            cap: false,
            taper: 0,
          },
          end: {
            cap: false,
            taper: 0,
          },
        }
      );

[steveruizok]

Hey @shendrick, good question! I've also been using the algo to manually create shapes and I often need to create many points between A and B. This is because the algorithm is tuned to the types of points that are generated when drawing, which tend to bunch at the start and end of the line. I've written a helper that I've been using to generate those kinds of points. It is available in @tldraw/vec but here's a snippet you can use, too.

 function add = (A: number[], B: number[]): number[] => {
    return [A[0] + B[0], A[1] + B[1]]
  }

function sub = (A: number[], B: number[]): number[] => {
    return [A[0] - B[0], A[1] - B[1]]
  }

 function mul = (A: number[], n: number): number[] => {
    return [A[0] * n, A[1] * n]
  }

function lrp = (A: number[], B: number[], t: number): number[] => {
    return add(A, mul(sub(B, A), t))
  }

  /**
   * Get an array of points (with simulated pressure) between two points.
   * @param A The first point.
   * @param B The second point.
   * @param steps The number of points to return.
   * @param ease An easing function to apply to the simulated pressure.
   */
  function pointsBetween = (
    A: number[],
    B: number[],
    steps = 6,
    ease = (t: number) => t * t * t * t
  ): number[][] => {
    return Array.from(Array(steps)).map((_, it) =>
      [...lrp(A, B, i/steps), ease(i/steps)])
    )
}

Supporting more normal / sparse arrays of points would mean a significant adjustment to the algorithm, so I probably won't be changing it in that way. However, if I'm able to make the algorithm perform better with fewer input points, that could help in your case as well.

[shendrick]

Ah! This helps. One thing though.
Array.from(Array(steps))
Looks like Array(steps) gives an empty array, so t is always undefined. Is it supposed to be i instead?

[shendrick]

Ok, looks like i/steps instead of t in the lrp function gives me what I'm expecting for x and y now. However the pressure isn't giving me what I expect. With these numbers...

      [0, 0.5, 0.25],
      [6, 0.5, 0.5],
      [12, 0.5, 1],

I'm getting...

0: (3) [0, 0.5, 0.5]
1: (3) [1, 0.5, 0.4996141975308642]
2: (3) [2, 0.5, 0.49382716049382713]
3: (3) [3, 0.5, 0.46875]
4: (3) [4, 0.5, 0.4012345679012346]
5: (3) [5, 0.5, 0.2588734567901234]
6: (3) [6, 0.5, 0.5]
7: (3) [7, 0.5, 0.4996141975308642]
8: (3) [8, 0.5, 0.49382716049382713]
9: (3) [9, 0.5, 0.46875]
10: (3) [10, 0.5, 0.4012345679012346]
11: (3) [11, 0.5, 0.2588734567901234]

Not very familiar with easing, how can I make it linear?

[steveruizok]

Yep, fixed! A linear ease would be t => t

[steveruizok]

I've tweaked that example a little to let the easing do more of the work.

The more I think about it, you probably want two separate easings though: one for the point locations and one for the pressure, if any.

function pointsBetween = (
  A: number[],
  B: number[],
  steps = 6,
  easePoint = (t: number) => t,
  easePressure = (t: number) => t,
): number[][] => {
  return (
    Array.from(Array(steps)).map((_, i) => [...lrp(A, B, easePoint(i/steps)), easePressure(i/steps)]
  )
}

pointsBetween([0,0], [200, 200], t=>t, t => .5 + (t*t*t) / 2)