force directed layout

function Node(id, ix, iy){
    return {
        node: document.getElementById(id),
        getX:function () {
            return parseInt(this.node.getAttribute('cx'));
        },
        getY:function () {
            return parseInt(this.node.getAttribute('cy'));
        },
        setX:function (x) {
            this.node.setAttribute('cx',x);
        },
        setY:function (y) {
            this.node.setAttribute('cy',y);
        },
        ix: ix, iy: iy,
        setI:function () {
            this.setY(this.iy);
            this.setX(this.ix);
        },
        net_force:{x:0,y:0},
        velocity:{x:0,y:0},
    };
}

// <circle cx="114" cy="93" r="17" fill="rgba(0, 0, 0, 1)" class="circle" id="c5">
//              </circle>
//              <circle cx="299" cy="108" r="17" fill="rgba(0, 0, 0, 1)" class="circle" id="c6">
//              </circle>

let nodes=[
    Node('c1',190,49),
    Node('c2',329,204),
    Node('c3',118,194),
    Node('c4',214,223),
    Node('c5',114,93),
    Node('c6',299,108)
];


// <line x1="114" y1="93" x2="329" y2="204" style="stroke:rgb(255,0,0);stroke-width:2" id="l25"/>
// <line x1="114" y1="93" x2="118" y2="194" style="stroke:rgb(255,0,0);stroke-width:2" id="l35"/>
// <line x1="299" y1="108" x2="329" y2="204" style="stroke:rgb(255,0,0);stroke-width:2" id="l26"/>
// <line x1="299" y1="108" x2="214" y2="223" style="stroke:rgb(255,0,0);stroke-width:2" id="l46"/>

let lines=[
    {line:document.getElementById('l12'),a:0,b:1},
    {line:document.getElementById('l13'),a:0,b:2},
    {line:document.getElementById('l14'),a:0,b:3},
    {line:document.getElementById('l24'),a:1,b:3},
    {line:document.getElementById('l25'),a:1,b:4},
    {line:document.getElementById('l35'),a:2,b:4},
    {line:document.getElementById('l26'),a:1,b:5},
    {line:document.getElementById('l46'),a:3,b:5}
];

let ctxHeight=400, ctxWidth=500, circleRadius=25;
let R=100,A=0.02, damping=0.7;

function fdl_barycentric_method(){

    // calculate repulsive forces
    for(let i=0;i<nodes.length;i++){
        let v=nodes[i];
        let u;
        v.net_force.x=v.net_force.y=0;
        for(let j=0;j<nodes.length;j++){
            if(i==j)
                continue;
            u=nodes[j];
            let rsq=(v.getX()-u.getX())*(v.getX()-u.getX())+(v.getY()-u.getY())*(v.getY()-u.getY());
            // repulsion
            v.net_force.x += R * (v.getX()-u.getX()) /rsq;
            v.net_force.y += R * (v.getY()-u.getY()) /rsq;
        }
        for(let j=0;j<lines.length;j++){
            let l=lines[j];
            if(l.a!=i && l.b!=i)
                continue;
            if(l.a==i)
                u=nodes[l.b];
            else
                u=nodes[l.a];
            // countin the attraction
            v.net_force.x+=A*(u.getX() - v.getX());
            v.net_force.y+=A*(u.getY() - v.getY());
        }
        // counting the velocity (with damping 0.85)
        v.velocity.x = (v.velocity.x + v.net_force.x)*damping;
        v.velocity.y = (v.velocity.y + v.net_force.y)*damping;

    }
    // draw egdes or lines
    for(let i=0;i<lines.length;i++){
        let l =lines[i];
        l.line.setAttribute('x1',nodes[l.a].getX())
        l.line.setAttribute('y1',nodes[l.a].getY())
        l.line.setAttribute('x2',nodes[l.b].getX())
        l.line.setAttribute('y2',nodes[l.b].getY())
    }

    let vsum=0;
    // set new positions
    for(let i=0;i<nodes.length;i++){
        let v = nodes[i];
        // v.x += v.velocity.x;
        // v.y += v.velocity.y;
        v.setX(v.getX()+v.velocity.x);
        v.setY(v.getY()+v.velocity.y);
        vsum+=Math.abs(v.velocity.x)+Math.abs(v.velocity.y);
        console.log("velocity: ("+v.velocity.x+", "+v.velocity.y+")")
    }

    // draw txts
    for(let i=0;i<nodes.length;i++){
        let t =document.getElementById('t'+(i+1));
        t.setAttribute('x',nodes[i].getX())
        t.setAttribute('y',nodes[i].getY())
    }

    console.log("vsum: "+vsum)
    if( vsum<1 ) // equilibrium
        clearInterval(si);
}

let si;

document.getElementById('draw_btn').addEventListener('click', function(e){
    console.log('Draw')
    let k=0, tr, ta;
    R = isNaN(tr=document.getElementById('rval').value)?R:parseFloat(tr);
    A = isNaN(ta=document.getElementById('aval').value)?R:parseFloat(ta);
    console.log(`R: ${R}, A: ${A}`)
    si = setInterval(
        function(){
            fdl_barycentric_method();
            k++;
            console.log("k: "+k)
        }
    , 100);

    // fdl();
});

document.getElementById('stop_btn').addEventListener('click', function(e){
    console.log('Stop')
    clearInterval(si);
    // fdl();
});

document.getElementById('refresh_btn').addEventListener('click', function(e){
    console.log('Refresh')
    // nodes
    for(let i=0;i<nodes.length;i++){
        let v = nodes[i];
        v.setI();
    }
    // texts
    for(let i=0;i<nodes.length;i++){
        let t =document.getElementById('t'+(i+1));
        t.setAttribute('x',nodes[i].ix)
        t.setAttribute('y',nodes[i].iy)
    }

    // lines
    for(let i=0;i<lines.length;i++){
        let l =lines[i];
        l.line.setAttribute('x1',nodes[l.a].ix)
        l.line.setAttribute('y1',nodes[l.a].iy)
        l.line.setAttribute('x2',nodes[l.b].ix)
        l.line.setAttribute('y2',nodes[l.b].iy)
    }
});