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 mouseMove = e => {
  mx = e.clientX / cw;
  my = e.clientY / ch;
};

/**
 * Resize window
 */
const resizeWindow = () => {
  cw = c.width = window.innerWidth;
  ch = c.height = window.innerHeight;
  init();
};

/**
 * Rendering function
 */
const render = () => {
  // run?
  if (!run) return;
  // time
  time = (new Date().getTime() - startTime) * 0.001;
  // clear color
  gl.clear(gl.COLOR_BUFFER_BIT);
  // uniforms
  gl.uniform1f(uniLocation[0], time);
  gl.uniform2fv(uniLocation[1], [mx, my]);
  gl.uniform2fv(uniLocation[2], [cw, ch]);
  // draw
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  gl.flush();
  // recur
  requestAnimationFrame(render);
};

/**
 * Create shader
 * @params {String} id - element id
 * @return {Object} shader - shader object
 */
const create_shader = id => {
  let shader;
  // get reference tag
  const scriptElement = document.getElementById(id);
  // if not exsist return
  if (!scriptElement) return;
  // check script attribute
  switch (scriptElement.type) {
    // vertex shader
    case 'x-shader/x-vertex':
      shader = gl.createShader(gl.VERTEX_SHADER);
      break;
    // fragment shader
    case 'x-shader/x-fragment':
      shader = gl.createShader(gl.FRAGM.........完整代码请登录后点击上方下载按钮下载查看