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.........完整代码请登录后点击上方下载按钮下载查看