时间戳

首页 > 解决方案 > 正弦波动画性能建议

javascript - 正弦波动画性能建议

问题描述

我正在尝试使用 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 库，但如果还有其他库/方法，我愿意接受替代方案。任何指针将不胜感激。

标签： javascriptanimationtrigonometryp5.js

解决方案

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

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

推荐阅读