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;.........完整代码请登录后点击上方下载按钮下载查看