js实现canvas粒子神经网络可视化动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子神经网络可视化动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        canvas {
        	position: absolute;
        	top: 0;
        	left: 0;
        }
    </style>




</head>

<body>
    <canvas id=c></canvas>


    <script>
        var w = c.width = window.innerWidth,
        h = c.height = window.innerHeight,
        ctx = c.getContext('2d'),
        
        opts = {
        
          range: 180,
          baseConnections: 3,
          addedConnections: 5,
          baseSize: 5,
          minSize: 1,
          dataToConnectionSize: .4,
          sizeMultiplier: .7,
          allowedDist: 40,
          baseDist: 40,
          addedDist: 30,
          connectionAttempts: 100,
        
          dataToConnections: 1,
          baseSpeed: .04,
          addedSpeed: .05,
          baseGlowSpeed: .4,
          addedGlowSpeed: .4,
        
          rotVelX: .003,
          rotVelY: .002,
        
          repaintColor: '#111',
          connectionColor: 'hsla(200,60%,light%,alp)',
          rootColor: 'hsla(0,60%,light%,alp)',
          endColor: 'hsla(160,20%,light%,alp)',
          dataColor: 'hsla(40,80%,light%,alp)',
        
          wireframeWidth: .1,
          wireframeColor: '#88f',
        
          depth: 250,
          focalLength: 250,
          vanishPoint: {
            x: w / 2,
            y: h / 2 } },
        
        
        
        squareRange = opts.range * opts.range,
        squareAllowed = opts.allowedDist * opts.allowedDist,
        mostDistant = opts.depth + opts.range,
        sinX = sinY = 0,
        cosX = cosY = 0,
        
        connections = [],
        toDevelop = [],
        data = [],
        all = [],
        tick = 0,
        totalProb = 0,
        
        animating = false,
        
        Tau = Math.PI * 2;
        
        ctx.fillStyle = '#222';
        ctx.fillRect(0, 0, w, h);
        ctx.fillStyle = '#ccc';
        ctx.font = '50px Verdana';
        ctx.fillText('Calculating Nodes', w / 2 - ctx.measureText('Calculating Nodes').width / 2, h / 2 - 15);
        
        window.setTimeout(init, 4); // to render the loading screen
        
        function init() {
        
          connections.length = 0;
          data.length = 0;
          all.length = 0;
          toDevelop.length = 0;
        
          var connection = new Connection(0, 0, 0, opts.baseSize);
          connection.step = Connection.rootStep;
          connections.push(connection);
          all.push(connection);
          connection.link();
        
          while (toDevelop.length > 0) {
        
            toDevelop[0].link();
            toDevelop.shift();
          }
        
          if (!animating) {
            animating = true;
            anim();
          }
        }
        function Connection(x, y, z, size) {
        
          this.x = x;
          this.y = y;
          this.z = z;
          this.size = size;
        
          this.screen = {};
        
          this.links = [];
          this.probabilities = [];
          this.isEnd = false;
        
          this.glowSpeed = opts.baseGlowSpeed + opts.addedGlowSpeed * Math.random();
        }
        Connection.prototype.link = function () {
        
          if (this.size < opts.minSize)
          return this.isEnd = true;
        
          var links = [],
          connectionsNum = opts.baseConnections + Math.random() * opts.addedConnections | 0,
          attempt = opts.connectionAttempts,
        
          alpha,beta,len,
          cosA,sinA,cosB,sinB,
          pos = {},
          passedExisting,passedBuffered;
        
          while (links.length < connectionsNum && --attempt > 0) {
        
            alpha = Math.random() * Math.PI;
            beta = Math.random() * Tau;
            len = opts.baseDist + opts.addedDist * Math.random();
        
            cosA = Math.cos(alpha);
            sinA = Math.sin(alpha);
            cosB = Math.cos(beta);
            sinB = Math.sin(beta);
        
            pos.x = this.x + len * cosA * sinB;
            pos.y = this.y + len * sinA * sinB;
            pos.z = this.z + len * cosB;
        
            if (pos.x * pos.x + pos.y * pos.y + pos.z * pos.z < squareRange) {
        
              passedExisting = true;
              passedBuffered = true;
              for (var i = 0; i < connections.length; ++i)
              if (squareDist(pos, connections[i]) < squareAllowed)
              passedExisting = false;
        
              if (passedExisting)
              for (var i = 0; i < links.length; ++i)
              if (squareDist(pos, links[i]) < squareAllowed)
              passedBuffered = false;
        
              if (passedExisting && passedBuffered)
              links.push({ x: pos.x, y: pos.y, z: pos.z });
        
            }
        
          }
        
          if (links.length === 0)
          this.isEnd = true;else
          {
            for (var i = 0; i < links.length; ++i) {
        
              var pos = links[i],
              connection = new Connection(pos.x, pos.y, pos.z, this.size * opts.sizeMultiplier);
        
              this.links[i] = connection;
              all.push(connection);
              connections.push(connection);
            }
            for (var i = 0; i < this.links.length; ++i)
            toDevelop.push(this.links[i]);
          }
        };
        Connection.prototype.step = function () {
        
          this.setScreen();
          this.screen.color = (this.isEnd ? opts.endColor : opts.connectionColor).replace('light', 30 + tick * this.glowSpeed % 30).replace('alp', .2 + (1 - this.screen.z / mostDistant) * .8);
        
          for (var i = 0; i < this.links.length; ++i) {
            ctx.moveTo(this.screen.x, this.screen.y);
            ctx.lineTo(thi.........完整代码请登录后点击上方下载按钮下载查看