Wallpaper Engine, понимание настройки визуализации Audio Visualizer - PullRequest
Новая
       51

Wallpaper Engine, понимание настройки визуализации Audio Visualizer

1 голос
/ 06 марта 2020

Со времени моего последнего поста я добился определенных успехов в своих обоях - исправив многие из моих предыдущих проблем

Сегодня, хотя я бы хотел получить какое-то направление, если у кого-то оно есть:

Последний виджет, над которым я работаю, это Audio Visualizer. Однако мое стремление к желанию уникальности не обходится без проблем (... вы действительно можете быть программистом без этого атрибута?). Вот ссылка, которую я моделирую, визуализатор, который я сделал несколько недель go в After Effects. https://youtu.be/cHweVjmBmP4

В "ограничениях" Javascript и Wallpaper Engine, есть ли в любом случае, что я могу повторить эти изгибы и кривые остроты в моем выводе? Сначала я полагал, что здесь поможет переменная, использующая метод arcTo () ... но мне неясно, какие координаты будут использоваться для моих касательных. И какая формула поможет объяснить затронутые данные.

Вот код в его нынешнем виде. Спасибо Michael Fedora за написание такого доступного кода. Я так много узнал об алгоритмах из чтения и даже больше, проверяя вещи самостоятельно. Я буду пытаться выяснить это, но любая помощь бесконечно ценится! 

    let i, x = 0, y = center + scale*data[0]*0.33;   
    ctx.beginPath();
    ctx.moveTo(x, y);
    for(i = 0; i < 63; i++) {
        x += width;
        y = center + scale * data[i];
        ctx.lineTo(x, y);
    }

    x += width;
    y = center + scale * (data[63] + data[127]) * 0.5;
    ctx.lineTo(x, y);
    x += width;
    y = center + scale * data[126];
    ctx.lineTo(x, y);

    x = 128*width, y = center + scale*data[64]*0.33;
    ctx.moveTo(x, y);
    for(i = 64;i < 127; i++) {
        x -= width;
        y = center + scale * data[i];
        ctx.lineTo(x, y);




    }
}

function renderLine(ctx, color) {
    ctx.lineWidth = 1;
    ctx.strokeStyle = color;
    if(glob.bloom) {
        ctx.shadowBlur = glob.bloomRadius;
        ctx.shadowColor = color;
    }
    ctx.stroke();
}

1 Ответ

0 голосов
/ 06 марта 2020

Я не вижу кривых в вашем примере AE, но длинная ломаная со стилем соединения, установленным на круглое (таким образом, углы скругляются).

Я не знаю, в частности, об Wallpaper Engine, но это похоже на обычные вещи Canvas, в которых вы можете сделать 

ctx.lineJoin = "round";

Примеры на связанной странице MDN лучше объясняют стили объединения, чем я когда-либо мог.

...