javascript - 正弦波动画性能建议

Question

我正在尝试使用 javascript 创建正弦波动画，并取得了一些成功，获得了我想要的外观，但由于生成的向量数量，我似乎遇到了性能问题。

我目前正在使用 p5js 库。这是我迄今为止生成的示例，是否有任何选项可以对其进行优化以提高性能，同时保持细节/平滑度？

        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

我目前正在使用 P5js 库，但如果有其他库/方法，我愿意接受替代方案。任何指示将不胜感激。

Answer 1

从嵌套循环内部删除 console.log 行。即使我将帧速率提高到 60，这也会使动画在我的笔记本电脑上变得流畅。

我不熟悉 P5js，但对 frameRate() 的额外调用似乎是不必要的。