使用P5.js仿chorm浏览器几枝波浪waves效果

效果：

 <script>
        let xspacing = 8; // 每个水平位置的距离
        let waveHeight; // 用数组保存波的高度（不完全需要）
        let maxwaves = 10; // 相加的波的总数
        let theta = 10;

        // x 的增量值，根据周期和水平位置距离来计算
        let dx = new Array(maxwaves); // 4个空值
        let dx1 = new Array(maxwaves); // 4个空值
        let dx2 = new Array(maxwaves); // 4个空值

        // setup() 函数将在程式开始时被调用一次
        function setup() {
            theta=random(10)
            createCanvas(windowWidth, windowHeight);
            frameRate(30); //每一秒该显示的影格数 1s/30帧 帧数越高越清晰 最高，否则很卡
            // colorMode(RGB, 255, 255, 255, 100);
            //width=windowWidth,波的宽度,储存画布宽度的系统变量。这值是由 createCanvas() 函数的第一个参数所定义
            for (let i = 0; i < maxwaves; i++) {
                dx[i] = random(0.1, 0.2); //波的陡峭度
                dx1[i] = random(0.03, 0.12); //波的陡峭度
                dx2[i] = random(0.1, 0.15); //波的陡峭度
            }
            waveHeight = new Array(floor(width / xspacing));
            colorMode(HSB);
        }
        // 在 setup() 之后被调用,持续地重复执行其中的代码
        function draw() {
            
            background("white"); //画布背景色

            calcWave(dx);
            renderWave(150,5);
            calcWave(dx1);
            renderWave(220,3);
            calcWave(dx2);
            renderWave(98,4);
        }

        function calcWave(dx) {
            // theta 增量（尝试赋予 ‘角速度’ 不同的数值）
            theta += 0.01 //波形滚动速度

            // 所有高度设为 0
            for (let i = 0; i < waveHeight.length; i++) {
                waveHeight[i] = 0;
            }
            // 累积波的高度
            for (let j = 0; j < maxwaves; j++) {
                let x = theta;

                for (let i = 0; i < waveHeight.length; i++) {
                    // 正弦余弦交替
                    x += dx[j];

                    if (j % 2 === 0) waveHeight[i] += sin(x) * 9;
                    else waveHeight[i] += cos(x) * 6;
                   x-=0.05
                }
                
            }
        }

        function renderWave(c,h) {

            noStroke(0) //线条颜色 无
    
            fill(c,39,90,0.3);  //填充色
            translate(1,35)
            beginShape() 
            // 顶点形成的。vertex() 可用于定义点、线、三角形、四角形及多边形的顶点坐标。它只能在 beginShape() 和 endShape() 函数之间使用。
            vertex(width, height);
            vertex(0,height);
            for (let x = 0; x < waveHeight.length; x++) {
                vertex(x * (xspacing), width / h  + waveHeight[x]+ h*4)
            }
            endShape()
        }
    </script>

标签：P5,waveHeight,chorm,++,let,dx,waves,theta,maxwaves
来源： https://blog.csdn.net/weixin_42277214/article/details/113851083