glea实现canvas凹凸不平的粘液动画效果代码-html代码-BFW代码库

glea实现canvas凹凸不平的粘液动画效果代码

代码语言：html

所属分类：动画

代码描述：glea实现canvas凹凸不平的粘液动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
  
  
<style>
body {
  margin: 0;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/glea.js"></script>
  
  
</head>

<body translate="no">
  <canvas></canvas>
  
      <script type="module">


const glsl = x => x;

const frag = glsl`
precision highp float;
#define ITERS 64
#define PI 3.141592654
uniform float width;
uniform float height;
uniform float time;

// normalize coords and correct for aspect ratio
vec2 normalizeScreenCoords()
{
  float aspectRatio = width / height;
  vec2 result = 2.0 * (gl_FragCoord.xy / vec2(width, height) - 0.5);
  result.x *= aspectRatio; 
  return result;
}

// by IQ
// cosine based palette, 4 vec3 params
vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
{
  return a + b*cos( 6.28318*(c*t+d) );
}

// by IQ
// 0.5, 0.5, 0.5                0.5, 0.5, 0.5   1.0, 1.0, 1.0   0.30, 0.20, 0.20
vec3 palette(float t) {
  float i1 = sin(t * .5);
  float i2 = sin(t * .3);
  vec3 a = vec3(0.5, 0.5, .5);
  vec3 b = vec3(0.5, .5, .5);
  vec3 c = vec3(1., 1.0, 1.0);
  vec3 d = vec3(0.30, 0.20, 0.20);
  return pal(t, a, b, c, d);
}


float rand(vec2 c){
        return fract(sin(dot(c.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

float noise(vec2 p, float freq ){
        float unit = width/freq;
        vec2 ij = floor(p/unit);
        vec2 xy = mod(p,unit)/unit;
        //xy = 3.*xy*xy-2.*xy*xy*xy;
        xy = .5*(1.-cos(PI*xy));
        float a = rand((ij+vec2(0.,0.)));
        float b = rand((ij+vec2(1.,0.)));
        float c = rand((ij+vec2(0.,1.)));
        float d = rand((ij+vec2(1.,1.)));
        float x1 = mix(a, b, xy.x);
        float x2 = mix(c, d, xy.x);
        return mix(x1, x2, xy.y);
}.........完整代码请登录后点击上方下载按钮下载查看