JSFiddle - React, Tailwind, and code Playground

by Zevan

HTML

drag circles around

CSS

circle{
 cursor : pointer;   
}

JavaScript

var r = new Raphael(0, 0, 500, 500);



    
var circles = [];
var lines = [];

// make some random circles
for (var i = 0; i < 4; i++){
circles.push(r.circle(Math.random() * 150 + 150, 
                      Math.random() * 150 + 150, 
                      20 + Math.random() * 100)
              .attr({fill: "rgba(255, 0, 0, 0.3)"}));
}

var line = r.path();
var path = "";

var redLine = r.path().attr({stroke : "red"});
var redPath = "";

render();

dragAndDrop();

function render() {
    path = "";
    redPath = "";
    lines = [];
    var leng = circles.length;
    for (var i = 0; i<leng; i++){
        for (var j = i + 1; j<leng; j++){
            circleIntersection(circles[i], circles[j]);
        }
    }
    
    leng = lines.length; 
    //console.log(lines);
    for (i = 0; i < leng; i++){
        for (j = 0; j < leng; j++){
         var ip = lineIntersection(lines[i].a, lines[i].b, lines[j].a, lines[j].b); 
            if (ip){
              r.circle(ip.x, ip.y, 5);
            }
           // console.log([lines[i].a, lines[i].b, lines[j].a, lines[j].b]);
        }  
    }
    
    for (i = 0; i < leng; i++){
         redPath += "M " + lines[i].a.x + " " + lines[i].a.y + " ";
         redPath += "L " + lines[i].b.x + " " + lines[i].b.y + " ";
    }
    redLine.attr({path:redPath});
}

// easy to understand explanation here:
// http://paulbourke.net/geometry/2circle/
function circleIntersection(a, b) {
    var a, h, cx, cy, px, py;
    var ax = a.attr("cx");
    var ay = a.attr("cy");
    var bx = b.attr("cx");
    var by = b.attr("cy");
    var ra = a.attr("r");
    var rb = b.attr("r");

    var dx = Math.abs(ax - bx);
    var dy = Math.abs(ay - by);

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

    if (d > (ra + rb)) {
        // no solutions
    } else if (d < Math.abs(ra - rb)) {
        // no collisions, one inside other
    } else if (d == 0 && ra == rb) {
        // circles are coincident   
    } else {
        // there is a collision
        a =...