How to use the d3-interpolate.interpolateBasis function in d3-interpolate

// with gamma correction
iString = d3Interpolate.interpolateCubehelix.gamma(2.2)('purple', 'orange');

// without gamma correction
iString = d3Interpolate.interpolateCubehelixLong('seagreen', 'steelblue');
iString = d3Interpolate.interpolateCubehelixLong(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateCubehelixLong(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));
str = iString(0.5);

// with gamma correction
iString = d3Interpolate.interpolateCubehelixLong.gamma(2.2)('purple', 'orange');

// test interpolateBasis(splineNodes) and interpolateBasisClosed(splineNodes: number[]) ----------------------------

iNum = d3Interpolate.interpolateBasis([1, 50, 30, 10]);

iNum = d3Interpolate.interpolateBasisClosed([1, 50, 30, 10]);

const BEAT_MULTIPLIER = 80
    const ROTATION_CONSTANT = 2500
    const LIFESPAN_MULTIPLIER = 3
    const SIDES = 5
    const SHADOW_BLUR_MULTIPLIER = 3
    const GRAPH_SLICE = .02
    const EASING = 'easeOutQuart'

    const progress = Math.max(Math.min((now - this.birth) / (this.lifespan * LIFESPAN_MULTIPLIER), 1), 0)
    if (progress === 1) return this.self.blobs = this.self.blobs.filter(c => c !== this)

    const iRadius = interpolateNumber(0,this.width)
    const iLineWidth = interpolateBasis([0, this.width/WIDTH_DIVIDER, 0]) 
    const beat = interpolateBasis([1,BEAT_MULTIPLIER,1])(ease(this.self.sync.beat.progress, EASING))
    const radius = iRadius(progress)
    const amplitude = interpolateBasis([-radius/2, radius, -radius/2])(ease(this.self.sync.beat.progress, EASING))
    const rotation = now/ROTATION_CONSTANT
    
    ctx.save()
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'  
    ctx.beginPath()

    for (let theta = 0; theta <= TWO_PI + GRAPH_SLICE; theta+= GRAPH_SLICE) {
      const _x = (radius + (amplitude * Math.sin(SIDES * (theta - rotation)))) * Math.cos(theta) + width/2
      const _y = (radius + (amplitude * Math.sin(SIDES * (theta + rotation)))) * Math.sin(theta) + height/2
      if (theta === 0) {
        
        ctx.moveTo(_x, _y)
      } else {
        ctx.lineTo(_x, _y)
      }

paint ({ ctx, height, width, now }) {
    const bar = interpolateBasis([0, this.sync.volume * 10, 0])(this.sync.bar.progress)
    const beat = interpolateBasis([0, this.sync.volume * 300, 0])(this.sync.beat.progress)
    ctx.fillStyle = 'rgba(0, 0, 0, .08)'
    ctx.fillRect(0, 0, width, height)
    ctx.lineWidth = bar 
    ctx.strokeStyle = interpolateRgb(this.lastColor, this.nextColor)(this.sync.bar.progress)
    sin(ctx, now / 50, height / 2, this.sync.volume * 50, 100)
    ctx.stroke()
    ctx.fillStyle = 'rgba(0, 0, 0, 1)'
    ctx.beginPath()
    ctx.lineWidth = beat
    circle(ctx, width / 2, height / 2, this.sync.volume * height / 5 + beat / 10)
    ctx.stroke()
    ctx.fill()
  }
}

paintOuterLines ({ ctx, width, height, now }) {
    const progress = ease(this.sync.beat.progress, this.easing)
    const base = (width > height) ? width / 10 : height / 10
    const volume = this.sync.getVolumeQueue('wavesync-beat') //this.sync.volume
    const iAmp = interpolateBasis([volume * -base, volume * base, volume * -base]) 
    const amp = iAmp(progress) * this.radiusScale(this.sync.state.trackFeatures.energy) * .66
    const radius = (width > height) ? volume * height / 3 : volume * width / 3
    const x = ANGLE => (radius + amp * Math.sin(7 * (ANGLE + now/this.rotationScale(this.sync.state.trackFeatures.energy)))) * Math.tan(ANGLE) + width/2
    const y = ANGLE => (radius + amp * Math.sin(7 * (ANGLE + now/this.rotationScale(this.sync.state.trackFeatures.energy)/2))) * Math.cos(ANGLE) + height/2

    this.createPath(ctx, { x, y })
    
    ctx.lineWidth = (volume * 5)
    ctx.strokeStyle = this.gradient
    ctx.stroke()
    ctx.fillRect(0, (height/2) - (volume * 20), width, volume * 40)
  }

pathCoords[2] = {
		x: targetX - distanceFromPorts,
		y: targetY,
	};
	pathCoords[1] = {
		x: sourceX + distanceFromPorts,
		y: sourceY,
	};
	pathCoords[0] = {
		x: sourceX,
		y: sourceY,
	};
	const xInterpolate = interpolateBasis(
		[pathCoords[0].x, pathCoords[1].x, pathCoords[2].x, pathCoords[3].x],
	);
	const yInterpolate = interpolateBasis(
		[pathCoords[0].y, pathCoords[1].y, pathCoords[2].y, pathCoords[3].y],
	);
	const path = concreteLine(pathCoords);
	return { path, xInterpolate, yInterpolate };
}

paintInnerLines ({ ctx, width, height, now }) {
    const progress = ease(this.sync.bar.progress, this.easing)
    const volume = this.sync.getVolumeQueue('wavesync-beat')//this.sync.volume
    const amp = interpolateBasis([volume * (height / 5), volume * (height / 5)])(progress)
    const radius = (width > height) ? volume * height / 3 : volume * width / 3
    const x = ANGLE => (radius + amp * Math.sin(2.019 * (ANGLE + now/this.rotationScale(this.sync.state.trackFeatures.energy) * 8))) * Math.cos(ANGLE) + width/2
    const y = ANGLE => (radius + amp * Math.sin(2.019 * (ANGLE + now/this.rotationScale(this.sync.state.trackFeatures.energy) * 4))) * Math.sin(ANGLE) + height/2

    this.createPath(ctx, { x, y }, 15)

    ctx.lineWidth = Math.min(volume, 1)
    ctx.strokeStyle = this.gradient2
    ctx.stroke()
  }

drawLine (ctx, vertices, width) {
    for (let i = 0; i < vertices.length - 1; i++) {
      const percent = (i/(vertices.length-1))
      const next = (i+1)/(vertices.length-1)
      const _width = interpolateBasis([0, width, 0])(percent)
      const _next = interpolateBasis([0, width, 0])(next)
      ctx.fillStyle = this.glowColor
      growingLine(ctx, vertices[i].x, vertices[i].y, vertices[i + 1].x, vertices[i + 1].y, _width, _next)
      ctx.fill()
    }
  }

paintCenter ({ ctx, width, height, now }) {
    const progress = ease(this.sync.beat.progress, this.easing)
    const base = (width < height) ? width / 5 : height / 5
    const volume = this.sync.getVolumeQueue('wavesync-volume')//this.sync.volume
    const iAmp = interpolateBasis([volume * -base, volume * base, volume * -base]) 
    const amp = iAmp(progress) * this.radiusScale(this.sync.state.trackFeatures.energy) 
    const radius = (width > height) ? volume * height / 3 : volume * width / 3
    const x = ANGLE => (radius + amp*.5 * Math.sin(7 * (ANGLE + now/this.rotationScale(this.sync.state.trackFeatures.energy)*4))) * Math.cos(ANGLE) + width/2
    const y = ANGLE => (radius + amp*.5 * Math.sin(7 * (ANGLE + now/this.rotationScale(this.sync.state.trackFeatures.energy)))) * Math.sin(ANGLE) + height/2
    const iLineWidth = interpolateBasis([volume * (width > height ? width : height) / 30, volume , volume  * (width > height ? width : height) / 30])

    this.createPath(ctx, { x, y })

    ctx.lineWidth = iLineWidth(ease(this.sync.beat.progress, 'linear'))
    ctx.strokeStyle = this.gradient
    ctx.stroke()
  }

paint ({ ctx, height, width, now }) {
    const [r, g, b] = this.state.background.get()
    ctx.fillStyle = `rgb(${r},${g},${b})`
    ctx.fillRect(0, 0, width, height)
    
    const beat = interpolateBasis([1, 1.2, 1])(ease(this.sync.beat.progress, 'easeOutCubic'))

    for (let star of this.state.stars) {
      const inner = star.innerRadius.get() * beat
      const outer = star.outerRadius.get() * beat
      const rotation = now / 40
      const { vertices } = createStar(star.points, inner, outer, width/2, height/2, rotation)
      const [r, g, b] = star.color.get()
      ctx.fillStyle = `rgb(${r},${g},${b})`
      drawShape(ctx, vertices).fill()
    }
  }
}