regl实现webgl多彩多边形拼凑动画旋转效果代码
代码语言:html
所属分类:动画
代码描述:regl实现webgl多彩多边形拼凑动画旋转效果代码
代码标签: 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 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0