Почему моя спектрограмма отображается вверх ногами? - PullRequest
Новая
       54

Почему моя спектрограмма отображается вверх ногами?

0 голосов
/ 24 января 2019

Я создал спектрограмму, которая получает данные от микрофона пользователя. До сих пор я был в состоянии отобразить его в градациях серого (цель - карта RGB, но она отображается вверх ногами). Очевидно, что-то происходит над моей головой в моей функции рисования. Вы можете увидеть это в прямом эфире на https://bloom510.art/spectrogram

Предоставляя поток данных байтовой частоты, моя функция рисования перебирает текущий срез пикселя 1xheight для ширины холста, добавляя значение данных к текущему значению RGB холста. 

draw(x = 0) {
    const { ctx, canvas, props } = this;
    requestAnimationFrame(() => {
        if (x > canvas.width) x = 0;
        x += 1;
        this.draw(x);
    });
    /* start at the origin, get a 1px by canvas height slice of data */
    const slice = ctx.getImageData(0, 0, 1, canvas.height);
    let sliceData = slice.data;
    for (let i = 0; i < sliceData.length; i += 4) {
        if(props.data){
            /* Add magnitudes from getByteFrequencyData to the slice */
            sliceData[i] +=  props.data[i];   
            sliceData[i + 1] += props.data[i + 1]; 
            sliceData[i + 2] += props.data[i + 2]; 
        } else {
            sliceData[i] = 0;
            sliceData[i + 1] = 0;
            sliceData[i + 2] = 0;
        }
    }
    ctx.putImageData(slice, x, 0);
}

Это красиво, но, как указано, частоты оказываются инвертированными! В настоящее время я использую CSS, чтобы перевернуть и масштабировать холст как средство решения этой проблемы. Я был бы признателен, если бы кто-то мог прояснить, где моя логика работает неправильно, и сообщить мне, как я могу это исправить в дополнение к созданию тепловой карты RGB.

...