js实现梦幻星空canvas动画效果代码-html代码-BFW代码库

js实现梦幻星空canvas动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现梦幻星空canvas动画效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

  




</head>

<body>
  <script id="fs" type="x-shader/x-fragment">
  precision mediump float;
  uniform float time;
  uniform vec2  mouse;
  uniform vec2  resolution;
  // window ratio
  float ratio = resolution.x / resolution.y; 
  float PI = 3.1415926;
  float a = PI * 2.0 / 72.0;
 
  mat2 scale(vec2 scale){
    return mat2(scale.x, 0.0, 0.0, scale.y);
  }
  
  void main(void) {
    // center center
    vec2 p = vec2(gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
    // left bottom
    //vec2 p = gl_FragCoord.xy / resolution.xy;
    float l = length(p);
    vec3 c = vec3(l, abs(sin(time) * 1.0 - p.x), abs(cos(time) * 1.0 - p.y));
    float d = 0.0;
    for (float i = 0.0; i < 72.0; i++) {
      p = p + vec2(cos(time) / 100.0, sin(time) / 100.0);
      vec2 q = p + vec2(
        cos((0.0 - time * 2.0) * PI / 180.0 * i),
        sin((0.0 - time * 2.0) * PI / 180.0 * i)) * (0.03 * i);
      d += 0.01 / length(q);
    }
    d = pow(d, 2.0);
    gl_FragColor = vec4(c * d, 1.0); 
  }
</script>

<script id="vs" type="x-shader/x-vertex">
  attribute vec3 position;

  void main(void){
    gl_Position = vec4(position, 1.0);
  }
</script>

  
      <script>
/**
 * Referenced / https://wgld.org/d/glsl/g001.html
 * Referenced / https://thebookofshaders.com
 */

// variable for global
let c, // canvas
cw, ch, // window size
mx, my, // mouse
gl, // context
uniLocation, // for shader
run, // not used
eCheck, // not used
startTime, time, tempTime; // times

/**
 * Make canvas
 */
const createCanvas = () => {
  const b = document.getElementsByTagName('body')[0];
  const c = document.createElement('canvas');
  c.setAttribute('id', 'canvas');
  c.style.position = 'fixed';
  c.style.display = 'block';
  c.style.zIndex = '-1';
  c.style.top = '0';
  c.style.left = '0';
  c.style.width = '100%';
  c.style.height = '100%';
  c.style.background = 'black';
  b.appendChild(c);
};

/**
 * Check event
 * @params {Object} e - check event
 */
const checkChange = e => {
  run = e.currentTarget.checked;
  if (run) {
    startTime = new Date().getTime();
    render();
  } else {
    tempTime += time;
  }
};

/**
 * Mouse event
 * @params {Object} e - mouse event
 */
const m.........完整代码请登录后点击上方下载按钮下载查看