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;
let height;
let edgeBufferX;
let edgeBufferY;

function init() {
	width = window.innerWidth * PIXEL_RATIO;
	height = window.innerHeight * PIXEL_RATIO;
	edgeBufferX = Math.max(100, 0.08 * width);
	edgeBufferY = Math.max(100, 0.08 * height);
	const maxSpeed = 0.08 * Math.min(width, height);
	
	points.length = 0;
	colors.length = 0;
	for (let i=0; i<POINT_COUNT; i++) {
		points.push({
			x: random(-edgeBufferX, width+edgeBufferX),
			y: random(-edgeBufferY, height+edgeBufferY),
			speedX: random(-maxSpeed, maxSpeed),
			speedY: random(-maxSpeed, maxSpeed),
		});
		// Note that only the first batch of colors is baked into the shader.
		// Convert 8-bit color values into normalized (0-1) values
		const color = colorSampler.sample(Math.random());
		colors.push({
			r: color.r / 255,
			g: color.g / 255,
			b: color.b / 255
		});
	}
}

function movePoints(timeDelta) {
	const edgeL = -edgeBufferX;
	const edgeR = width + edgeBufferX;
	const edgeT = -edgeBufferY;
	const edgeB = height + edgeBufferY;
	for (const point of points) {
		point.x += point.speedX * timeDelta;
		point.y += point.speedY * timeDelta;
		if (point.x > edgeR) {
			point.x .........完整代码请登录后点击上方下载按钮下载查看