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);
        
          noStroke();
        
          let size = 100;
          let x = -(size / 2);
          let y = 0;
        
          beginShape(TRIANGLE_STRIP);
        
          for (let i = 0; i < colors.length - 1; i++) {
            let j = 0;
        
            while (j < width * 2 + size / 2) {
              let waveSize = 15;
              let y0 = y + sin(delta3 + j + x) * waveSize;
        
              delta3 += 0.00003;
        
              let y2 = y + size * 1.2 + sin(delta3 + j + x) * waveSize;
        
              if (j % 2 == 0) {
                fill(colors[i]);
                vertex(x, y0); //left 1
                fill(colors[i + 1]);
                vertex(x + size / 2, y2); //tip 3
              }
        
              x += size / 2;
              j += size / 2;
            }
            x = -(size / 2);
            y += size;
          }
        
          endShape(CLOSE);
        
          pop();
        }
        
        function drawLightBlues(colors) {
          push();
        
          rotate(PI / 20);
        
          translate(-width / 2, -200);
          scale(2, 2);
        
          noStroke();
      .........完整代码请登录后点击上方下载按钮下载查看