webgl+canvas实现彩色网格变色变形动画效果代码-html代码-BFW代码库

webgl+canvas实现彩色网格变色变形动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现彩色网格变色变形动画效果代码

下面为部分代码预览，完整代码请点击下载或在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('webgl2');
const dpr = window.devicePixelRatio;
const touches = new Set();

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

in vec2 position;

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

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

uniform vec2 resolution;
uniform float time;

#define T time
#define S smoothstep

out vec4 fragColor;

float hash21(vec2 p) {
  p = fract(p * vec2(324.967, 509.314));
  p += dot(p, p + 75.09);

  return fract(p.x * p.y);
}

float flip(vec2 p) {
  float rand = hash21(p);
  return rand > .5 ? 1.: -1.;
}

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

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

float cLength(vec2 p, float k) {
  p = abs(p);

  return pow((pow(p.x, k)+pow(p.y, k)), 1./k);
}

float circle(vec2 p, vec2 c, float r, float w, float b, float s, float k) {
  float d = cLength(p - c * (p.x > -p.y ? s: -s), k);

  return S(b, -b, abs(d - r) - w);
}

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);
}

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

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

  vec2 gv = fract(uv) - .5;
  vec2 id = floor.........完整代码请登录后点击上方下载按钮下载查看