euterpe-source/packages/visualizer/src/index.ts

export enum SmoothingAlgorythm {
    Linear,
    BezierPerpendicular,
    CatmullRom,
    BezierWeighted,
}
export enum ShapeType {
    Circle,
    Line,
    Waveform,
    /*To be Implmeneted
    Custom,
    FullSongWaveForm
    */
}
export enum WaveformOrientation {
    Vertical,
    Horizontal,
}
export enum WaveformShape {
    LineLike,
    Striped,
}
export type WaveformOptions = {
    fft_data: Float32Array,
    shape_type: WaveformShape,
    orientation: WaveformOrientation
}
type Point = {
    x: number,
    y: number,
}
type Shape = {
    shape_type: ShapeType,
    //Algo-rythm, because this is about music. Get it? xd
    smoothing_algorythm: SmoothingAlgorythm
    points: Point[]
    waveform_options?: WaveformOptions
    symmetry?: boolean
}

export class AudioVisual {
    #analyzer_node
    #svg_injecting_element
    #shape
    #buffer_length
    #fft_multiplier
    #fft_offset
    #from_fft_range
    #to_fft_range
    #point_count
    #canvas_height
    #canvas_width
    #fft_data
    #subscriber_fns = new Array<(data: Float32Array) => void>()
    constructor(
        analyzer_node: AnalyserNode,
        svg_injecting_element: SVGSVGElement,
        shape: Shape,
        buffer_length: number,
        fft_multiplier: number,
        fft_offset: number,
        from_fft_range: number,
        to_fft_range: number,
        point_count: number,
    ) {
        this.#analyzer_node = analyzer_node
        this.#svg_injecting_element = svg_injecting_element
        this.#shape = shape
        this.#buffer_length = buffer_length
        this.#fft_multiplier = fft_multiplier
        this.#fft_offset = fft_offset
        this.#from_fft_range = from_fft_range
        this.#to_fft_range = to_fft_range
        this.#point_count = point_count

        this.#fft_data = new Float32Array(this.#analyzer_node.frequencyBinCount)
        this.#canvas_width = svg_injecting_element.viewBox.baseVal.width
        this.#canvas_height = svg_injecting_element.viewBox.baseVal.height
    }

    #get_cured_frequency_data(): Array<number> {
        let buffer_length_cache
        if (this.#shape.shape_type == ShapeType.Waveform) {
            this.#fft_data = this.#shape.waveform_options!.fft_data
            buffer_length_cache = this.#buffer_length
            this.#buffer_length = this.#fft_data.length
        } else {
            this.#analyzer_node.getFloatFrequencyData(this.#fft_data)
        }
        const from = Math.round((this.#point_count / 100) * this.#from_fft_range)
        const to = Math.round(this.#buffer_length - (this.#buffer_length / 100) * this.#to_fft_range)
        const squeeze_factor = Math.round((this.#buffer_length - to) / this.#point_count)

        const return_array = new Array(this.#point_count)
        for (let i = 0; i < this.#point_count + 1; i++) {
            return_array[i] = this.#fft_data[from + i * squeeze_factor]
        }
        return return_array
    }

    #normalise_perpendicular_anchors(x: number, y: number) {
        const magnitude = Math.sqrt(x * x + y * y)
        return [x / magnitude, y / magnitude]
    }

    #create_perpendicular_anchors(arr: { x: number, y: number }[]) {
        const anchors = []
        switch (this.#shape.shape_type) {
            case ShapeType.Circle: {
                const pointDistance = 7
                for (let curPoint = 0; curPoint < arr.length; curPoint++) {
                    const [dx, dy] = this.#normalise_perpendicular_anchors(arr[curPoint].x, arr[curPoint].y)
                    const perpendicular = [-dy, dx]
                    anchors.push({
                        leftAnchor: {
                            x: arr[curPoint].x + pointDistance * perpendicular[0],
                            y: arr[curPoint].y + pointDistance * perpendicular[1],
                        },
                        rightAnchor: {
                            x: arr[curPoint].x - pointDistance * perpendicular[0],
                            y: arr[curPoint].y - pointDistance * perpendicular[1],
                        },
                    })
                }
                break
            }
            case ShapeType.Line: {
                const pointDistance = this.#canvas_width / arr.length
                for (let curPoint = 0; curPoint < arr.length; curPoint++) {
                    anchors.push({
                        leftAnchor: {
                            x: pointDistance * curPoint - pointDistance / 3,
                            y: arr[curPoint].y,
                        },
                        rightAnchor: {
                            x: pointDistance * curPoint + pointDistance / 3,
                            y: arr[curPoint].y,
                        },
                    })
                }
            }
        }

        return anchors
    }

    #catmull_rom_smooth(arr: { x: number, y: number }[], k: number) {
        if (k == null) k = 1
        const last = arr.length - 2
        let path = ""

        for (let i = 0; i < arr.length - 1; i++) {

            const x0 = i ? arr[i - 1].x : arr[0].x
            const y0 = i ? arr[i - 1].y : arr[0].y

            const x1 = arr[i].x
            const y1 = arr[i].y

            const x2 = arr[i + 1].x
            const y2 = arr[i + 1].y

            let subx = y2
            let suby = y2
            //Makes the last line before Z a bit less jarring
            if (this.#shape.shape_type == ShapeType.Circle) {
                subx = arr[0].x
                suby = arr[0].y
            }
            const x3 = i !== last ? arr[i + 2].x : subx
            const y3 = i !== last ? arr[i + 2].y : suby

            const cp1x = x1 + (x2 - x0) / 6 * k
            const cp1y = y1 + (y2 - y0) / 6 * k

            const cp2x = x2 - (x3 - x1) / 6 * k
            const cp2y = y2 - (y3 - y1) / 6 * k

            path += "C" + [cp1x.toFixed(2), cp1y.toFixed(2), cp2x.toFixed(2), cp2y.toFixed(2), x2.toFixed(2), y2.toFixed(2)]
        }
        return path
    }

    #mutate_points() {
        const mutated_points = []
        const frequency_data = this.#get_cured_frequency_data()
        const out_range = [0, this.#canvas_height]
        const in_range = [-165, -30]
        switch (this.#shape.shape_type) {
            case ShapeType.Line: {
                for (let i = 0; i < frequency_data.length - 1; i++) {
                    const mutator = isFinite(frequency_data[i]) ? this.#convert_range(frequency_data[i] * this.#fft_multiplier + this.#fft_offset, in_range, out_range) : -1 * this.#canvas_height
                    mutated_points.push({
                        x: this.#shape.points[i].x /** ((Math.max(FFTDataArray[i] + 100)) * 4)*/,
                        y: this.#shape.points[i].y - mutator,
                    })
                }
                break
            }
            case ShapeType.Circle: {
                for (let i = 0; i < frequency_data.length - 1; i++) {
                    const new_i = i > (frequency_data.length - 1) / 2 ? frequency_data.length - 1 - i : i
                    mutated_points.push({
                        x: this.#shape.points[i].x * Math.max((frequency_data[new_i] * this.#fft_multiplier + this.#fft_offset) / 50, 1) + this.#canvas_width / 2,
                        y: this.#shape.points[i].y * Math.max((frequency_data[new_i] * this.#fft_multiplier + this.#fft_offset) / 50, 1) + this.#canvas_height / 2,
                    })
                    /* TODO: IMPLEMENT SCALING TO BEAT
                    this.injectingHTMLElement.parentElement.style.transform = `scale(${(100 + Math.max((frequencyData[2] * 2 + 130) / 5, 1)) / 100})`
                    */
                }

                break
            }
            case ShapeType.Waveform: {
                if (this.#shape.waveform_options!.shape_type == WaveformShape.LineLike) {
                    if (this.#shape.symmetry) {
                        for (let i = 0; i < this.#shape.points.length; i += 2) {
                            let mutator = this.#convert_range(frequency_data[i / 2] * this.#fft_multiplier + this.#fft_offset, in_range, out_range)
                            if (mutator <= 0) mutator = 2
                            if (this.#shape.waveform_options!.orientation == WaveformOrientation.Horizontal) {
                                mutated_points.push({
                                    x: this.#shape.points[i].x,
                                    y: this.#shape.points[i].y - mutator
                                })
                                mutated_points.push({
                                    x: this.#shape.points[i + 1].x,
                                    y: this.#shape.points[i + 1].y + mutator
                                })
                            } else {
                                mutated_points.push({
                                    x: this.#shape.points[i].x + mutator,
                                    y: this.#shape.points[i].y
                                })
                                mutated_points.push({
                                    x: this.#shape.points[i + 1].x - mutator,
                                    y: this.#shape.points[i + 1].y
                                })
                            }
                        }
                    } else {
                        for (let i = 0; i < frequency_data.length - 1; i++) {
                            const mutator = this.#convert_range(frequency_data[i] * this.#fft_multiplier + this.#fft_offset, in_range, out_range)
                            if (this.#shape.waveform_options!.orientation == WaveformOrientation.Horizontal) {
                                mutated_points.push({
                                    x: this.#shape.points[i].x,
                                    y: this.#shape.points[i].y - mutator
                                })
                            } else {
                                mutated_points.push({
                                    x: this.#shape.points[i].x - mutator,
                                    y: this.#shape.points[i].y
                                })
                            }
                        }
                    }
                }
                break
            }
        }
        return mutated_points
    }

    #convert_range(value: number, r1: number[], r2: number[]) {
        if (!isFinite(value)) return 0
        if (value < r1[0]) return 0
        return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0]
    }

    #create_svg_element() {
        let path
        const arr = this.#mutate_points()
        switch (this.#shape.shape_type) {
            case ShapeType.Line: {
                path = `M ${0} ${this.#canvas_height} `
                break
            }
            case ShapeType.Circle: {
                path = `M ${arr[0].x} ${arr[0].y} `
                break
            }
            case ShapeType.Waveform: {
                path = `M ${0} ${this.#canvas_height / 2}`
                break
            }
        }
        switch (this.#shape.smoothing_algorythm) {
            case SmoothingAlgorythm.Linear: {
                switch (this.#shape.shape_type) {
                    case ShapeType.Line: {
                        for (let i = 0; i < arr.length; i++) {
                            path += `L ${arr[i].x.toFixed(2)},${arr[i].y.toFixed(2)} `
                        }
                        if (this.#shape.shape_type == ShapeType.Line) {
                            path += `L ${this.#canvas_width} ${this.#canvas_height} `
                            //path += `L ${canvas_width} ${canvas_height} `
                        }
                        break
                    }
                    case ShapeType.Circle: {
                        for (let i = 0; i < arr.length; i++) {
                            path += `L ${arr[i].x.toFixed(2)},${arr[i].y.toFixed(2)} `
                        }
                        break
                    }
                    case ShapeType.Waveform: {
                        for (let i = 0; i < arr.length; i += 2) {
                            path += `L ${arr[i].x.toFixed(2)},${arr[i].y.toFixed(2)} `
                        }
                        for (let i = arr.length - 1; i >= 0; i -= 2) {
                            path += `L ${arr[i].x.toFixed(2)},${arr[i].y.toFixed(2)} `
                        }
                    }
                }
                path += `Z `
                break
            }

            case SmoothingAlgorythm.BezierPerpendicular: {
                const anchors = this.#create_perpendicular_anchors(arr)

                for (let i = 1; i < arr.length; i++) {
                    path += `C ${anchors[i - 1].rightAnchor.x.toFixed(2)} ${anchors[i - 1].rightAnchor.y.toFixed(2)} ${anchors[i].leftAnchor.x.toFixed(2)} ${anchors[i].leftAnchor.y.toFixed(2)} ${arr[i].x.toFixed(2)} ${arr[i].y.toFixed(2)} `
                }
                if (this.#shape.shape_type == ShapeType.Line) {
                    //path += `L ${this.canvasWidth} ${this.canvasHeight / 2} `
                    path += `L ${this.#canvas_width} ${this.#canvas_height} `
                }
                path += `Z `
                break
            }

            case SmoothingAlgorythm.BezierWeighted: {
                /*THIS IS VERY MUCH BROKEN ATM :(
                for (let i = 2; i < arr.length; i++) {
                    const end = [arr.x[i], arr.y[i]] // the current point is the end of this segment of the curve
                    path += `C ${startControl[0]} ${startControl[1]} ${endControl[0]} ${endControl[1]} ${end[0]} ${end[1]}`
                }*/
                console.error("BezierWeighted not implemented yet...")
                break
            }
            case SmoothingAlgorythm.CatmullRom: {
                if (this.#shape.shape_type == ShapeType.Waveform && this.#shape.symmetry == true) {
                    //adding points so both halfs ends and start at the same center point
                    console.log(arr)
                    const first_half = [{ x: 0, y: this.#canvas_height / 2 }]
                    const second_half = [{ x: 0, y: this.#canvas_height / 2 }]
                    for (let i = 0; i < arr.length - 1; i += 2) {
                        first_half.push(arr[i])
                        second_half.push(arr[i + 1])
                    }
                    first_half.push({ x: this.#canvas_width, y: this.#canvas_height / 2 })
                    second_half.push({ x: this.#canvas_width, y: this.#canvas_height / 2 })
                    // path += `M ${this.#canvas_width},${this.#canvas_height / 2}`
                    second_half.reverse()
                    //path += ` L 0 ${this.#canvas_height / 2}`
                    path += this.#catmull_rom_smooth(first_half, 1)
                    //path += ` L ${this.#canvas_width} ${this.#canvas_height / 2}`
                    path += this.#catmull_rom_smooth(second_half, 1)
                    //path += `L 0 ${this.#canvas_height / 2}`
                }
                else {
                    path += this.#catmull_rom_smooth(arr, 1)
                }
                path += `Z`
                break
            }
        }
        return `<path width="100%" height="100%" d="${path}"/>`
    }

    on_data(fn: ((data: Float32Array) => void)) {
        this.#subscriber_fns.push(fn)
    }
    /**
     * Useful for waveforms or shapes that don't need to redraw every frame
     */
    draw_once() {
        this.#svg_injecting_element.innerHTML = this.#create_svg_element()
        this.#subscriber_fns.forEach((fn) => fn(this.#fft_data))
    }

    draw() {
        this.#svg_injecting_element.innerHTML = this.#create_svg_element()
        this.#subscriber_fns.forEach((fn) => fn(this.#fft_data))
        requestAnimationFrame(this.draw.bind(this))
    }
}

export class AudioVisualBuilder {
    #analyzer_node
    #svg_injecting_element
    #canvas_height
    #canvas_width
    #buffer_length
    #smoothing_algorythm
    #fft_size
    #fft_multipier
    #fft_offset
    #from_fft_range
    #to_fft_range
    #point_count: number
    constructor(analyzer_node: AnalyserNode, svg_injecting_element: SVGSVGElement) {
        this.#analyzer_node = analyzer_node
        this.#svg_injecting_element = svg_injecting_element
        this.#canvas_width = svg_injecting_element.viewBox.baseVal.width
        this.#canvas_height = svg_injecting_element.viewBox.baseVal.height
        this.#buffer_length = analyzer_node.frequencyBinCount
        this.#smoothing_algorythm = SmoothingAlgorythm.Linear
        this.#fft_size = 2048
        this.#fft_multipier = 1.5
        this.#fft_offset = 150
        this.#from_fft_range = 0
        this.#to_fft_range = 100
        this.#point_count = Math.round((this.#buffer_length / 100) * (this.#from_fft_range - this.#to_fft_range))
    }
    /**
     * The smoothingTimeConstant property of the AnalyserNode interface is a double value representing the averaging constant with the last analysis frame. It's basically an average between the current buffer and the last buffer the AnalyserNode processed, and results in a much smoother set of value changes over time.
     * @param fft_time_smoothing_i A double within the range 0 to 1 (0 meaning no time averaging). The default value is 0.8.
     * @returns this
     */
    set_fft_time_smoothing(fft_time_smoothing_i: number) {
        this.#analyzer_node.smoothingTimeConstant = fft_time_smoothing_i
        return this
    }
    /**
     * The fftSize property of the AnalyserNode interface is an unsigned long value and represents the window size in samples that is used when performing a Fast Fourier Transform (FFT) to get frequency domain data.
     *
     *  If the point count set for the analyzer is less than the fft_from > FFT_DATA > fft_to, points might go missing or something will break. In that case increase, otherwise keep to as low as possible due to performance reasons
     * @param fft_size Must be a power of 2 between 2^5 and 2^15, so one of: `32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768.` Defaults to `2048`.
     * @returns this
     */
    set_fft_size(fft_size: number) {
        if (!(this.#fft_size && !(this.#fft_size & (this.#fft_size - 1)))) throw Error("fft_size not power of two")
        this.#analyzer_node.fftSize = this.#fft_size = fft_size
        this.#buffer_length = this.#analyzer_node.frequencyBinCount
        return this
    }
    /**
     * Changes how the FFT data is parsed.
     * Limits the range like:
     *
     * `from_fft_range < FFT_DATA < to_fft_range`,
     *
     * then splits the remaining data evently between point_count.
     * `fft_multiplier` and `fft_offset` define how the data then affects the point mutation. FFT data goes from `-Infinity` to `0` (Noise floor usually around `-160`db from experience) Multiplying the number exaggerates the higher decibel changes, making the result more dynamic, whilst the offset keeps the visualizer from clipping.
     *
     * Reccomended values are around:
     *
     * `shape_type == line`
     *
     *  - multiplier: 3
     *
     *  - offset: -30
     *
     * `shape_type == circle`
     *
     *  - multiplier: 1.5
     *
     *  - offset: 150
     * @param param0
     * @returns
     */
    set_fft_data_tresholds({ from_fft_range_i = 0, to_fft_range_i = 100, point_count_i = Math.round((this.#buffer_length / 100) * (from_fft_range_i - to_fft_range_i)), fft_multiplier_i = 2, fft_offset_i = -50 }) {
        this.#from_fft_range = from_fft_range_i
        this.#to_fft_range = to_fft_range_i
        this.#point_count = point_count_i
        this.#fft_multipier = fft_multiplier_i
        this.#fft_offset = fft_offset_i
        return this
    }
    /**
     * Defines what the svg d attribute path command will use.
     *
     * `Linear` - Uses no interpolation between points, jagged but very fast
     *
     * `BezierPerpendicular` - Sets the Cubic Bézier anchors perpendicular to the point. Great for Line shapes with no curves.
     *
     * `CatmullRom` - Uses Centripetal Catmull–Rom spline under the hood, then translates them to Cubic Bézier points. Best quality, worst performance.
     *
     * `BezierWeighted` - DO NOT USE! It's broken at the moment :/. Sets the Cubic Bézier anchors halfway between the next and previous point. Better than Linear on Circular shapes and doesn't have the "invards bulding" side effect of Catmull Rom

     * @param algorythm Linear = 0; BezierPerpendicular = 1; CatmullRom = 2; BezierWeighted = 3;
     * @returns
     */
    set_smoothing_algorythm(algorythm: SmoothingAlgorythm) {
        this.#smoothing_algorythm = algorythm
        return this
    }
    /**
     * Creates the Audio Visualizer. To start drawing, use .draw(). To further modify it's looks use CSS, eg:
     * ```css
     * svg {
     *   fill: grey;
     *   stroke: black;
     *   transform: rotate(90deg);
    * }
    * ```
     * @param shape_type Circle = 0; Line = 1;
     * @returns `new AudioVisual`
     */
    build(shape_type: ShapeType, symmetry: boolean, waveform_options?: WaveformOptions) {
        const shape = this.#create_shape(shape_type, symmetry, waveform_options)
        return new AudioVisual(this.#analyzer_node, this.#svg_injecting_element, shape, this.#buffer_length, this.#fft_multipier, this.#fft_offset, this.#from_fft_range, this.#to_fft_range, this.#point_count)
    }
    #create_shape(shape_type: ShapeType, symmetry: boolean, waveform_options?: WaveformOptions): Shape {
        const point_amount = this.#get_cured_frequency_data().length
        let new_shape: Shape
        switch (shape_type) {
            case ShapeType.Line: {
                const points = []
                for (let i = 0; i < point_amount; i++) {
                    points.push({
                        x: (this.#canvas_width / point_amount) * i,
                        y: 0,
                    })
                }
                new_shape = { shape_type, points, smoothing_algorythm: this.#smoothing_algorythm }
                break
            }
            case ShapeType.Circle: {
                const points = []
                const radius = this.#canvas_height > this.#canvas_width ? this.#canvas_height / 5 : this.#canvas_width / 5
                for (let i = 0; i < point_amount; i++) {
                    points.push({
                        x: Math.cos(((2 * Math.PI) / point_amount) * i - Math.PI / 2) * radius,
                        y: Math.sin(((2 * Math.PI) / point_amount) * i - Math.PI / 2) * radius,
                    })
                }

                new_shape = { shape_type, points, smoothing_algorythm: this.#smoothing_algorythm }
                break
            }
            case ShapeType.Waveform: {
                if (waveform_options === undefined) {
                    console.error("Waveform options undefined at shapetype.waveform, please define!")
                    throw Error("Waveform options undefined at shapetype.waveform, please define!")
                }
                const fft_length = this.#get_cured_frequency_data(waveform_options.fft_data).length
                const points = []
                for (let i = 0; i < fft_length; i++) {
                    let x, y
                    if (waveform_options.shape_type == WaveformShape.LineLike) {
                        x = (this.#canvas_width / point_amount) * i
                        y = this.#canvas_height / 2
                    } else {
                        throw Error("WaveformShape.Striped not implemented yet")
                    }
                    waveform_options.orientation == WaveformOrientation.Horizontal ?
                        points.push({ x: x, y: y }) :
                        points.push({ x: y, y: x })
                    //Douple the points needed for symmetry
                    if (symmetry) {
                        waveform_options.orientation == WaveformOrientation.Horizontal ?
                            points.push({ x: x, y: y }) :
                            points.push({ x: y, y: x })
                    }
                }
                new_shape = { shape_type, points, smoothing_algorythm: this.#smoothing_algorythm, symmetry: symmetry, waveform_options: waveform_options }
            }
        }
        return new_shape
    }

    #get_cured_frequency_data(fft_data?: Float32Array) {
        if (!fft_data) {
            fft_data = new Float32Array(this.#buffer_length)
            this.#analyzer_node.getFloatFrequencyData(fft_data)
        }
        const from = Math.round((this.#point_count / 100) * this.#from_fft_range)
        const to = Math.round(this.#buffer_length - (this.#buffer_length / 100) * this.#to_fft_range)
        const squeezeFactor = Math.round((this.#buffer_length - to) / this.#point_count)

        const return_array = new Array(this.#point_count)
        for (let i = 0; i < this.#point_count; i++) {
            return_array[i] = fft_data[from + i * squeezeFactor]
        }
        return return_array
    }

}