Синусоидальная анимация

Question

Я пытаюсь создать синусоидальную анимацию с использованием javascript и добился некоторого успеха в получении нужного мне вида, но у меня возникают проблемы с производительностью, по-видимому, из-за количества генерируемых векторов.

В настоящее время я использую библиотеку p5 js. Вот пример того, что я сгенерировал до сих пор. Будут ли какие-либо варианты оптимизировать его для повышения производительности при сохранении уровня детализации / плавности?

        function setup () {
            let size = min(windowWidth, windowHeight) * 0.96;
            size = floor(size);
            createCanvas(windowWidth, windowHeight);
            noiseSeed(random(50));
            frameRate(25); 
            noFill();
        }

        function windowResized () {
            let size = min(windowWidth, windowHeight);
            size = floor(size);
            resizeCanvas(windowWidth, windowHeight);
            noiseSeed(random(50));
            frameRate(25); 
            draw();
        }

        function draw () {
            clear();
            beginShape();


            const _o = millis() * 0.0005;
            const amount = 20;
            const ampl = ( 630 / ( windowHeight ) * 100 ) + 120;

            for(var k=0;k<amount;k++) {

                beginShape();

                const offset = (1 - k / amount) * 3;
                const detail = 10;

                for(var i=0;i<(width+detail);i+=detail) {

                    let y = height * 0.5;
                    y += Math.sin(i * 0.01 - _o + ( k / 50 ) + offset) * ampl;
                    y += Math.sin(i * 0.005 - _o + 5 + offset + noise(  50  ) ) * ampl;
                    console.log(i,y);
                    vertex(i, y);

                }
                stroke(255, 255, 255, (k/(amount - 1) * 100));
                frameRate(25); 
                endShape();
            }
        }

Пример Codepen: https://codepen.io/craiell/pen/zYGbLKm

В настоящее время я использую библиотеку P5 js, но если есть другие библиотеки / методы, я открыт для альтернатив. Любые указатели будут высоко оценены.

Answer 1

Удалите строку console.log изнутри вложенных циклов. Это делает анимацию плавной на моем ноутбуке, даже если я увеличу частоту кадров до 60.

Я не знаком с P5 js, но дополнительные вызовы на frameRate() кажутся ненужными.

Answer 2

Несколько идей на моей голове:

1. for() петли блокируют протектор, перепишите ваш код, используя foreach() или map() для оптимизации потока

2. Выезд requestAnimationFrame()

3. Операции с плавающей запятой стоят дорого. Посмотрите, можете ли вы сгенерировать кэш многоразовых векторных координат