デモ

Shape.js

class Shape{
    get SIZE(){ return 3 }
    get COLOR(){ return 0xFFFFFF }
    get MAX_LINE_SIZE(){ return 100 }
    get x(){ return this.graphics.x }
    set x(pos){ this.graphics.x = pos }
    get y(){ return this.graphics.y }
    set y(pos){ this.graphics.y = pos }
    // =========================================================================
    // ライン初期化
    // =========================================================================
    clearLine(){
        this.connected = [];
        this.line.clear();
    }
    // =========================================================================
    // ライン描画
    // =========================================================================
    drawLine(shape){
        let connected  = false;
        let alpha      = 1;
        let alphaRnage = this.MAX_LINE_SIZE * 0.8;
        for(let i=0,l=shape.connected.length; i < l; i++){
            if(shape.connected[i] === this){
                connected = true;
                break;
            }
        }
        if(connected) return;
        this.connected.push(shape);
        let line = this.line;
        let dist = Math.sqrt( (shape.x - this.x) * (shape.x - this.x) + (shape.y - this.y) * (shape.y - this.y) );
        if(dist < this.MAX_LINE_SIZE){
            if(dist > alphaRnage){
                alpha = 1 - (dist / this.MAX_LINE_SIZE);
            }
            line.lineStyle(1,this.COLOR,alpha);
            line.moveTo(this.x,this.y);
            line.lineTo(shape.x,shape.y);
        }
    }
    // =========================================================================
    // 移動アニメーション
    // =========================================================================
    move(){
        this.angle    += this.angleSpeed;
        let angle      = this.angle;
        let moveRangeX = this.moveRangeX;
        let moveRangeY = this.moveRangeY;
        let centerX    = this.centerX;
        let centerY    = this.centerY;
        this.x         = Math.sin(angle) * moveRangeX + centerX;
        this.y         = Math.cos(angle) * moveRangeY + centerY;
    }
    // =========================================================================
    // コンストラクタ
    // =========================================================================
    constructor(_stage,_w,_h,_x=false,_y=false){
        let SIZE  = this.SIZE;
        let COLOR = this.COLOR;
        let x;
        let y;
        let line;
        this.graphics   = new PIXI.Graphics();
        this.centerX    = x = _x ? _x : Math.random() * _w;
        this.centerY    = y = _y ? _y : Math.random() * _h;
        this.angle      = Math.random() * 360;
        this.moveRangeX = 20 + Math.random() * 50;
        this.moveRangeY = 20 + Math.random() * 50;
        this.angleSpeed = (1 + Math.random() * 2) / 100;
        this.line       = new PIXI.Graphics();
        this.connected  = [];
        line            = this.line;
        let g           = this.graphics;
        g.beginFill(COLOR);
        g.drawCircle(0,0,SIZE);
        g.endFill();
        g.x = x;
        g.y = y;
        _stage.addChild(line);
        _stage.addChild(g);
    }
}

script.js

// =============================================================================
// global
// =============================================================================<
let W        = window.innerWidth;
let H        = window.innerHeight;
let shapeNum = 100;
let shapes   = [];
let renderer;
let stage;

// =============================================================================
// events
// =============================================================================
// events:resize
// -----------------------------------------------------------------------------
let resizeObserve = {};
window.addEventListener('resize',(()=>{
    let timer;
    let events  = resizeObserve;
    let observe = (e)=>{
        W = window.innerWidth;
        H = window.innerHeight;
        for(let key in events) events[key](e);
    };
    return ()=>{
        if(timer) clearTimeout(timer);
            timer = setTimeout(observe,250);
        }
    })());
// -----------------------------------------------------------------------------
// events:animation
// -----------------------------------------------------------------------------
let animationObserve = {};
let animate          = function(){
    requestAnimationFrame(animate);
    for(let key in animationObserve) animationObserve[key]();
    renderer.render(stage);
}

// =============================================================================
//
// 実行
//
// =============================================================================
resizeObserve.resizeRenderer = ()=>{
    renderer.resize(W,H);
}
// -----------------------------------------------------------------------------
// 環境の設定
// -----------------------------------------------------------------------------
renderer = PIXI.autoDetectRenderer(800,600,{
    view      : document.querySelector('canvas'),
    antialias : true
});
stage = new PIXI.Container();
// -----------------------------------------------------------------------------
// shape追加
// -----------------------------------------------------------------------------
for(let i=0,l=shapeNum; i < l; i++){
    let shape = new Shape(stage,W,H);
    shapes.push(shape);
}
// -----------------------------------------------------------------------------
// shapeアニメーション
// -----------------------------------------------------------------------------
animationObserve.shape = ()=>{
    let shapeA;
    let shapeB;
    let dist;
    for(let i=0,l=shapes.length; i < l; i++ | 0){
        shapeA = shapes[i];
        shapeA.move();
        shapeA.clearLine();
        for(let ii=0; ii<l; ii++ | 0){
            if(ii === i) continue;
            shapeB = shapes[ii];
            shapeA.drawLine(shapeB);
        }
    }
}

window.addEventListener('click',(e)=>{
    shapes.push(new Shape(stage,W,H,e.clientX,e.clientY));
});

window.dispatchEvent(new Event('resize'));
animate();