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

代码语言:html

所属分类:粒子

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

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

网友评论0