simplex-noise实现canvas波纹波浪布料飘动效果代码-html代码-BFW代码库

simplex-noise实现canvas波纹波浪布料飘动效果代码

代码语言：html

所属分类：动画

代码描述：simplex-noise实现canvas波纹波浪布料飘动效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
  background: #fff;
}
</style>



</head>

<body>
  <canvas id="canvas"></canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
      <script  >
/*--------------------
Utility
--------------------*/
const lerp = (a, b, n) => (1 - n) * a + n * b;

/*--------------------
Setup
--------------------*/
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let time = 0;
const devicePixelRatio = window.devicePixelRatio || 1;
const w = 400;
const h = 400;
const simplex = new SimplexNoise();
const steps = 100;
const amplitude = 30;
const lines = 30;


/*--------------------
DrawLine
--------------------*/
const drawLine = (startY, t, seed) => {
  const step = w / steps;
  let x = -step;
  let y = 0;
  const arr = [];
  for (let i = 0; i <= steps; i++) {
    const n = simplex.noise2D((time * 0.001 + seed + i) * 0.02, (startY + time * t) * 0.0003);
    x += step;

    let amp = Math.min(i, 40);
    if (i > steps - 40) amp = steps - i;
    y = startY + n * amp;
    arr.push({ x, y });
  }
  return arr;
};



/*--------------------
Clear
--------------------*/
const clear = () => {
  ctx.clearRect(0, 0, w, h);
};

/*--------------------
Draw
--------------------*/
const draw = () => {
  const p1 = drawLine(200, 1.1, 100);
  const p2 = drawLine(200, .........完整代码请登录后点击上方下载按钮下载查看