Nexus

In this example below you will see how to do a Nexus with some HTML / CSS and Javascript

connecting points

Thumbnail
This awesome code was written by tmrDevelops, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tmrDevelops ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Nexus</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="canv" width="960" height="700">
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tmrDevelops/nexus-GgNyQJ */
body{
  width:100%;
  margin:0;
  overflow:hidden;
  background:hsla(214, 95%, 15%, 1);
}
canvas{
  background:hsla(214, 95%, 15%, 1);
  width:100%;
  height:40vw;
  padding-top:5vw;
}

/*Downloaded from https://www.codeseek.co/tmrDevelops/nexus-GgNyQJ */
$(document).ready(init);

var rad = 300;  //radius
var trad = 300;  //temp radius
var pts = [];  //points array
var c;  //canvas
var $$;  //context
var offsetX = 480;  //x offset
var offsetY = 300;  //y offset
var max = 70;  //max object parts

function init() {
    c = document.getElementById('canv');
    $$ = c.getContext('2d');
    var angle = 0;
    var speed = 0;
    var dist = 0;
    for (var i = 0; i < 200; ++i) {
        angle = Math.random() * Math.PI * 2;
        speed = Math.random() * 10;
        dist = Math.random() * rad;
        pts.push({
          x:Math.cos(angle) * dist, y:Math.sin(angle) * dist, incx:Math.cos(angle) * speed, incy:Math.sin(angle) * speed, speed:speed
        });
    }
    draw();
}

function In() {
    trad = 160;
}

function Out() {
    trad = 300;
}

function draw() {

    rad += (trad - rad) * 0.2;

    var i = 0;
    var j = 0;
    var l = pts.length;
    var part = null;
    var part2 = null;
    var dx = 0;
    var dy = 0;

    $$.fillStyle = "hsla(255, 255%, 255%, 1)";
    $$.fillRect(178, 0, 604, 600);
    $$.strokeStyle = 'hsla(214, 95%, 15%, 1)';

    for (i = 0; i < l; ++i) {
        part = pts[i];

        for (j = i + 1; j < l; ++j) {
            part2 = pts[j];

            dx = part.x - part2.x;
            dy = part.y - part2.y;

            var dif = Math.sqrt(dx * dx + dy * dy);

            if (dif < max) {

                $$.lineWidth = (max - dif) * 0.05;
                $$.beginPath();
                $$.moveTo(offsetX + part.x, offsetY + part.y);
                $$.lineTo(offsetX + part2.x, offsetY + part2.y);
                $$.stroke();
            }
        }

        // move current obj
        part.x += part.incx;
        part.y += part.incy;

        var ptDist = Math.sqrt((part.x * part.x) + (part.y * part.y))
        if (ptDist > rad) {
            var mp = (1/ptDist) * 100;
            part.x = -part.x * mp;
            part.y = -part.y * mp;
            part.incx = (Math.random() - 0.5) * part.speed;
            part.incy = (Math.random() - 0.5) * part.speed;
        }
    }



    requestAnimFrame(draw);
}

window.requestAnimFrame = (function() {
    return  window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback,  element) {
        window.setTimeout(callback, 1000 / 60);
        };
})();

Comments