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

最新推荐文章于 2024-07-18 18:15:00 发布

置顶

自在飞花轻似梦paofu

最新推荐文章于 2024-07-18 18:15:00 发布

阅读量786

点赞数 1

分类专栏： js 文章标签： P5.js waves chorm浏览器波浪

原创珍贵，转载请声明出处。

本文链接：https://blog.csdn.net/weixin_42277214/article/details/113851083

版权

本文介绍了如何利用P5.js库在HTML中实现Chrome浏览器类似的动态波浪效果，通过引入p5.js库并编写相关代码，可以创建出引人注目的视觉体验。

摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述
html文件中引入p5.js
再插入如下代码

 <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)