regl实现webgl多彩多边形拼凑动画旋转效果代码-html代码-BFW代码库

regl实现webgl多彩多边形拼凑动画旋转效果代码

代码语言：html

所属分类：动画

代码描述：regl实现webgl多彩多边形拼凑动画旋转效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  
<style>
canvas {
        touch-action: none;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
}
</style>




</head>

<body  >
  
 

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/regl.2.1.0.js"></script>
      <script >
console.clear();

const POINT_COUNT = 100;
const PIXEL_RATIO = window.devicePixelRatio;


const random = (min, max) => Math.random() * (max - min) + min;

// Helper to generate random colors, inspired by the colors seen on bubbles or oil slicks.
// See: https://codepen.io/MillerTime/pen/NXxxma
const colorSampler = (function GradientSamplerFactory() {
        // The instance to be returned.
        const sampler = {};

        // Gradient color stops in RGB format.
        const colors = [
                { r: 144, g:  18, b:  96 },
                { r:  12, g:  43, b: 179 },
                { r:   0, g: 196, b: 247 },
                { r: 190, g: 255, b: 255 },
                { r: 255, g: 232, b:   0 },
                { r: 255, g: 103, b:   0 },
                { r: 191, g:  26, b: 156 },
                { r:   0, g:  79, b: 229 },
                { r:   0, g: 196, b:   9 }
        ];

        const colorCount = colors.length;
        const colorSpans = colorCount - 1;
        const spanSize = 1 / colorSpans;

        // Helper to interpolate between two numbers
        function interpolate(a, b, p) {
                return (b - a) * p + a;
        };

        sampler.sample = function sample(position) {
                // Normalize position to 0..1 scale (inclusive of 0, exlusive of 1).
                position -= position | 0;
                if (position < 0) position = 1 - position * -1;

                const startIndex = position * colorSpans | 0;
                const startColor = colors[startIndex];
                const endColor = colors[startIndex + 1];
                // Compute relative position between two chosen color stops.
                const innerPosition = (position - (startIndex / colorSpans)) / spanSize;

                const r = interpolate(startColor.r, endColor.r, innerPosition) | 0;
                const g = interpolate(startColor.g, endColor.g, innerPosition) | 0;
                const b = interpolate(startColor.b, endColor.b, innerPosition) | 0;

                return { r, g, b };
        };

        return sampler;
})();


const points = [];
const colors = [];
let width.........完整代码请登录后点击上方下载按钮下载查看