update-sinewave-pointer

atan-example

updatePointer = (pointer, { x, index, shift }) => {
    const { pointerWidth, pointerHeight } = this.props
    const { origin, freq, amplitude } = this.state

    const baseY = Math.sin(freq * x + shift) * amplitude + origin.y
    pointer.setAttribute('points', `
      ${x}, ${baseY}
      ${x + pointerWidth}, ${Math.sin(freq * x + shift) * amplitude + origin.y - pointerHeight / 2}
      ${x}, ${Math.sin(freq * x + shift) * amplitude + origin.y - pointerHeight}
    `)

    // The angle of the pointer's rotation must be the same as the curve's slope.
    //
    // First, we calculate the derivative of the curve's function at the pointer's X-coord.
    // Since the derivative is the tangent of the curve's slope,
    // we just take the arctangent of it and convert to degrees.
    // The point of rotation is the base of the pointer.

    const derivative = freq * Math.cos(freq * x + shift) * amplitude
    pointer.setAttribute('transform', `
      rotate(
        ${radToDeg(Math.atan(derivative))},
        ${x},
        ${baseY}
      )
      translate(-${pointerWidth / 2}, ${pointerHeight / 2})
    `)
  }