vue3+simplex-noise实现立体等高线视觉差异动画效果代码-html代码-BFW代码库

vue3+simplex-noise实现立体等高线视觉差异动画效果代码

代码语言：html

代码描述：vue3+simplex-noise实现立体等高线视觉差异动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>




    <style>
        html, body, #app, .main {
          height: 100%;
        }
        body {
          margin: 0;
        }
        .main {
          cursor: pointer;
          width: 100%;
          height: 100%;
          transition: background-color 5s;
        }
        svg {
          position: fixed;
          display: block;
          top: 0; left: 0;
          width: 100%;
          height: 100%;
          opacity: 0.9;
          transition: filter 5s;
        }
        path {
          stroke-width: 1px;
          transition: fill 3s, stroke 5s;
          fill-rule: evenodd;
        }
    </style>


</head>

<body>
    <div id="app">
        <div class="main" :style="{ background }" @click="randomColors" @mousemove="onMouseMove">
            <svg v-for="(p, i) in paths" :key="`path-${i}`" :style="sstyle(p, i)" xmlns="http://www.w3.org/2000/svg">
      <g :style="`transform: translate(${p.tx}px, ${p.ty}px)`">
        <path :d="p.d" :fill="p.fill" :stroke="p.stroke"></path>
      </g>
    </svg>
        </div>
    </div>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chroma.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
    <script>
        Vue.createApp({
          data() {
            return {
              paths: [
              { fill: '#F6F8FA', d: '', stroke: 'none', tx: 0, ty: 0 },
              { fill: '#B6D9F2', d: '', stroke: 'none', tx: 0, ty: 0 },
              { fill: '#6FC8F3', d: '', stroke: 'none', tx: 0, ty: 0 },
              { fill: '#00B7E9', d: '', stroke: 'none', tx: 0, ty: 0 },
              { fill: '#0F8AC0', d: '', stroke: 'none', tx: 0, ty: 0 },
              { fill: '#0C5F8C', d: '', stroke: 'none', tx: 0, ty: 0 },
              { fill: '#0A3457', d: '', stroke: 'none', tx: 0, ty: 0 }],
        
              background: '#D8C0A1',
              timeCoef: 0.0001,
              mouseCoef: 10,
              mouseX: 0,
              mouseY: 0,
              mouseTX: 0,
              mouseTY: 0,
              width: 0,
              height: 0,
              cx: 0,
              cy: 0 };
        
          },
          mounted() {
            this.onResize();
            window.addEventListener('resize', this.onResize);
            this.simplex = new SimplexNoise();
            this.animate();
          },
          unmounted() {
            window.removeEventList.........完整代码请登录后点击上方下载按钮下载查看