海底世界鱼儿游动动画效果代码-html代码-BFW代码库

海底世界鱼儿游动动画效果代码

代码语言：html

所属分类：动画

代码描述：海底世界鱼儿游动动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body { margin: 0; }

digital-art {
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

digital-art canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  height: 100%;
}
</style>


</head>

<body translate="no" >
  <digital-art dpr="auto" aria-hidden="true">
  <script type="buffer" name="position" data-size="2">
    [-1, -1, -1, 1, 1, -1, 1, -1, 1, 1, -1, 1]
  </script>
  <script type="vert">
    precision highp float;
    uniform float time;
    uniform vec2 resolution;
    varying vec4 vPos;
    attribute vec4 position;
    
    void main() {
      vPos = position;
      gl_Position = position;
    }
  </script>
  <script type="frag">
precision highp float;
uniform vec2 resolution;
uniform float time;
const float PI = 3.141592654;
const float gridSize = 10.;
const float fishGrid = 12.;
    
vec2 coords() {
  vec2 p = gl_FragCoord.xy / resolution - .5;
  float aspect = resolution.x / resolution.y;
  p.x *= aspect;
  return p;
}
    
vec2 rotate(vec2 p, float a) {
  return vec2(p.x * cos(a) - p.y * sin(a),
              p.x * sin(a) + p.y * cos(a));
}

// function from https://www.shadertoy.com/view/3ll3zr
float sdHeart(in vec2 p, float s) {
  p /= s;
  vec2 q = p;
  q.x *= 0.5 + .5 * q.y;
  q.y -= abs(p.x) * .63;
  return (length(q) - .7) * s;
}
    
float sdCircle(in vec2 p, float r) {
  return length(p) - r;
}

float sdStar(in vec2 p, in float r, in int n, in float m)
{
    // next 4 lines can be precomputed for a given shape
    float an = 3.141593/float(n);
    float en = 3.141593/m;  // m is between 2 and n
    vec2  acs = vec2(cos(an),sin(an));
    vec2  ecs = vec2(cos(en),sin(en)); // ecs=vec2(0,1) for regular polygon,

    float bn = mod(atan(p.x,p.y),2.0*an) - an;
    p = length(p)*vec2(cos(bn),abs(sin(bn)));
    p -= r*acs;
    p += ecs*clamp( -dot(p,ecs), 0.0, r*acs.y/ecs.y);
    return length(p)*sign(p.x);
}

float distanceField(vec2 p) {
  // return sdHeart(p, 9.0 + 2.5 * sin(time * 1e-3));
  float t = time * 1e-3 * 20.;
  
  return sdStar(rotate(mod(p, gridSize) - vec2(gridSize*.5) - vec2(sin(floor(p.y / gridSize) * gridSize + t * .03) * .7, sin(floor(p.x / gridSize) * gridSize + t * .05) * .3), t * .002 + floor(p.y / gridSize) * .2 + floor(p.x / gridSize) * .3), 4., 5, 3.5 + .1 
* floor(p.x / gridSize) + sin(t * .1) * .2) + sin(4. * p.x * .5 + time * 2e-3) * cos(p.y * .5 + time * 2e-3) * .05;
}
    
float bubblesDF(vec2 p) {
  float grid = 3.;
  float t = time * 1e-4;
  float xi = floor(p.x / grid) * grid;
  float yi = floor(p.y / grid) * grid;
  vec2 p1 = vec2(sin(yi * .4 + t * 2.), cos(xi + t * 3.)) * grid * .25;
  return sdCircle(mod(p, grid) - grid * .5 - p1, .5 + .2 * sin(t + xi)) + sin(p.x * 2.) * cos(p.y * 3.) * .1;
}

float subtract(float a, float b) {
  return max(-a, b);
}

vec2 fishCoords(vec2 p) {
  float grid = fishGrid;
  float rot = 45. * PI / 180.;
  vec2 motion = vec2(time * 1e-3, 0.);
  float xi = floor(p.x / grid) * grid;
  float yi = floor(p.y / grid) * grid;
  return rotate(mod(rotate(p - motion, rot), grid) - (grid) * .5, -ro.........完整代码请登录后点击上方下载按钮下载查看