js实现canvas宇宙空间物体形态动画效果代码-html代码-BFW代码库

js实现canvas宇宙空间物体形态动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas宇宙空间物体形态动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




</head>

<body>


    <script>
        (() => {
          const TWO_PI = Math.PI * 2;
          const m = new Float32Array([
          0, 0, 0, 0,
          0, 0, 0, 0,
          0, 0, 0, 0,
          0, 0, 0, 0]);
        
        
          const vert = `
            attribute vec3 vec;
            uniform mat4 mat;
            void main(void) {
              gl_Position = mat * vec4(vec, 1.0);
              gl_PointSize = 2.0;
            }
          `;
        
          const frag = `
            void main(void) {
              gl_FragColor = vec4(1., 1., 1., .25);
            }
          `;
        
          document.body.style.background = '#232323';
          const gl = document.body.
          appendChild(document.createElement('canvas')).
          getContext('webgl', {
            preserveDrawingBuffer: true,
            powerPreference: 'high-performance' });
        
        
          Object.assign(gl.canvas.style, {
            position: 'absolute',
            left: '50%',
            top: '50%',
            transform: 'translate(-50%, -50%)',
            outline: '1px solid gray' });
        
        
        
          with (gl) {
            const NUM = 40;
            const radius = 0.7;
            let verts = [];
        
            // Superformula (equations from):
            // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333
            // http://en.wikipedia.org/wiki/Superformula
            function superShape(a, b, m, n1, n2, n3, scale, x = 0, y = 0, z = 0, rx = 0, ry = 0, rz = 0) {
              const { random, pow, abs, cos, sin } = Math;
              // with(Math) { // destrucuring vs the dreaded `with`
              let r = 0;
              let p = 0;
              let xp = 0;
              let yp = 0;
              let zp = 0;
        
              let rotX = rx;
              let rotY = ry;
              let rotZ = rz;
        
              let cosX = cos(rotX);
              let cosY = cos(rotY);
              let sinX = sin(rotX);
              let sinY = sin(rotY);
        
              while (p <= TWO_PI) {
                let ang = m * p / 4;
        
                r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1);
                xp = r * cos(p);
                yp = r * sin(p);
        
                p += 0.05;
        
                zp = zp * cosX - xp * sinX;
                xp = zp * sinX + xp * cosX;
                yp = yp * cosY - zp * sinY;
                zp = yp * sinY + zp * cosY;
        
                verts[inc] = xp * scale + x;
                verts[inc + 1] = yp * scale + y;
                verts[inc + 2] = zp * scale + z;
                inc += 3;
              }
              // }
            }
        
            let inc = 0;
            for (let i = 0; i < NUM; i++) {
              let m = Math.random() * 20;
              let n1 = Math.random() * 30;
              let n2 = Math.random() * 30;
              let n3 = Math.random() * 30;
              let scl = Math.random() * .2;
              let x = Math.random() * Math.cos(i);
              let y = Math.random() * Math.sin(i);
              let z = Math.random() - .5;
              let rx = Math.random() * TWO_PI,
              ry = Math.random() * TWO_PI,
              rz = Math.random() * TWO_PI;
      .........完整代码请登录后点击上方下载按钮下载查看