js实现一个有机海星背景图案效果代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：js实现一个有机海星背景图案效果代码

下面为部分代码预览，完整代码请点击下载或在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>
  <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.;
    
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 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;
}

vec3 shade(in vec2 p) {
  vec2 p00 = coords();
  vec2 p0 = p00 + vec2(sin(1. + time * 2e-4) * sin(p00.x * 10. + time * 1e-4) * .2, 0.);
  float sdf = distanceField(p);
  vec3 fg = vec3(.2 + sin(floor(p.x/gridSize) * gridSize), .3+ .2 * sin(floor(p.y/gridSize) * gridSize), .5) * .7 
              + .5;
  vec3 bg = vec3(0., .1, .2) + vec3(0, .1, .1) * smoothstep(0., .05, clamp(sin(p0.x * 10. + p0.y * 20. + time * 3e-4), 0., 1.));
  float x = smoothstep(0., .1, sdf);
  
  vec3 bg2 = vec3(0, .1, .1) * smoothstep(0., .05, clamp(sin(p0.x * 5. + p0.y * 8.) * sin(2. + p0.x * 8. + p0.y * 16.), 0., 1.));
  return mix(fg, bg, x) + bg2;
}

void main () {
  vec2 p0 = coords() - vec2(0., sin(time * 2e-5));
  vec2 p = rotate(p0, 45. * PI / 180.);
  vec3 col = shade(p * 27.);
  gl_FragColor = vec4(col, 1.0);
}
  </script>
</digital-art>

  
  
      <script>
console.clear();

class DigitalArt extends HTMLElement {
  
  constructor() {
    super();
    this.canvas = null;
    this.gl = null;
    this.onResize = this.onResize.bind(this);
    this.loop = this.loop.bind(this);
  }
  
  static register() {
    customElements.define("digital-art", DigitalArt);
  }
  
  connectedCallback() {
    if (! this.gl) {
      this.setup();      
    }
  }
  
  disconnectedCallback() {
    this.dispose();
  }
  
  get devicePixelRatio() {
    return parseFloat(this.getAttribute('dpr')) || window.devicePixelRatio;
  }
  
  
  onResize() {
    const { canvas, gl, program } = this;
    const width = this.clientWidth;
    const height = this.clientHeight;
    const dpr = this.devicePixelRatio;
    canv.........完整代码请登录后点击上方下载按钮下载查看