canvas+webgl实现彩虹伞旋转放大缩小动画效果代码-html代码-BFW代码库

canvas+webgl实现彩虹伞旋转放大缩小动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas+webgl实现彩虹伞旋转放大缩小动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  
  background:
  repeating-radial-gradient(
  circle at center,
    #444 0 10%,
    #111 10% 20%
  );
  
  touch-action: none;
}

canvas {
  width: 100%;
  height: auto;
  object-fit: contain;
}
</style>



</head>

<body >
  <canvas id="canvas"></canvas>

      <script>
/*********
* made by Matthias Hurrle (@atzedent)
*/

/** @type {HTMLCanvasElement} */
const canvas = window.canvas;
const gl = canvas.getContext('webgl');
const dpr = window.devicePixelRatio;
const touches = new Set();

const vertexSource = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

attribute vec2 position;

void main(void) {
    gl_Position = vec4(position, 0., 1.);
}
`;
const fragmentSource = `
/*********
* made by Matthias Hurrle (@atzedent)
*/

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec2 resolution;
uniform float time;

const float PI = radians(180.);
const float TAU = 2. * PI;

#define T 1.5 + time

mat2 rot( in float a) {
  float s = sin(a),
    c = cos(a);

  return mat2(c, -s, s, c);
}

float cLength(float f, float k) {
  k = abs(k);
  float v = pow(f, k);

  return pow(v + v, 1. / k);
}

vec3 hsv2rgb(vec3 c) {
  vec4 k = vec4(1., 2. / 3., 1. / 3., 3.);
  vec3 p = abs(fract(c.xxx + k.xyz) * 6. - k.www);

  return c.z * mix(k.xxx, clamp(p - k.xxx, .0, 1.), c.y);
}

vec2 polygon(vec2 p, float width, int sides) {
  float angle = atan(p.x, p.y);
  float radius = TAU / float(sides);

  float dist = cos(floor(.5 + angle / radius) * radius - angle) * length(p);
  float poly = step(width, dist);

  return vec2(poly, dist);
}

void main(void) {
  float t = T * .125;
  float f = .5 + .5 * sin(t);
  float mn = min(resolution.x, resolution.y);
  vec2 uv = (
    gl_FragCoord.xy - .5 * resolution.xy
  ) / (mn - mn * .8 * f);

  uv *= .5;
  uv *= rot(T * .1);

  vec2 sdf = polygon(uv, .1, 10);

  float a.........完整代码请登录后点击上方下载按钮下载查看