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

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

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