海底世界鱼儿游动动画效果代码-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;.........完整代码请登录后点击上方下载按钮下载查看