p5实现canvas渐变布料随风飘动波纹波动动画效果代码-html代码-BFW代码库

p5实现canvas渐变布料随风飘动波纹波动动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现canvas渐变布料随风飘动波纹波动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body{
          margin: 0;
          overflow: clip;
          background: #1B2021;
        }
        
        main{
          display: flex;
          height: 100vh;
        }
        
        canvas{
          margin: auto;
        }
    </style>



</head>

<body>



    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
    <script>
        const REDS = [
          "#e45064",
          "#e45064",
          "#e65d6c",
          "#ec6a5f",
          "#e13750",
          "#c03671",
          "#643d7a",
          "#284671",
          "#284671",
          "#284671"
        ];
        const YELLOWS = ["#ef9f50", "#f2c061", "#f3bf61"];
        const LIGHT_BLUES = ["#b7cbef", "#e2eaf4", "#e2eaf4"];
        const DARK_BLUES = ["#3271ac", "#4282b6", "#7abcec"];
        const backgroundColor = "#ffffff";
        const width = window.innerWidth;
        const height = window.innerHeight;
        const totalFrames = 1000;
        let frameCount = 0;
        let recording = false;
        
        function setup() {
          canvas = createCanvas(width, height, WEBGL);
          noiseSeed(20);
        }
        
        let delta = 0;
        let delta1 = 0;
        let delta2 = 0;
        let delta3 = 0;
        
        function draw() {
          frameCount += 1;
          let frameDelta = (2 * Math.PI * (frameCount % totalFrames)) / totalFrames;
        
          let bg = color(backgroundColor);
          background(bg);
        
          drawDarkBlues(DARK_BLUES, -width, -height * 0.7, PI / 150, 4);
          drawDarkBlues(DARK_BLUES, -width, -400, PI / 20, 2);
          drawLightBlues(LIGHT_BLUES);
          drawYellows(YELLOWS);
          drawReds(REDS);
        }
        
        function drawDarkBlues(colors, _x, _y, _r, _s) {
          push();
        
          rotate(_r);
        
          translate(_x, _y);
          scale(_s, _s);
        
        .........完整代码请登录后点击上方下载按钮下载查看