JSFiddle - React, Tailwind, and code Playground

by chrismichaelscott

HTML

<div id="diagram">
    
</div>

JavaScript

REPLULTION_RANGE = 3;

var paper = Raphael("diagram");

var circles = [];
circles.push(paper.circle(30, 50, 0, 0));
circles.push(paper.circle(45, 29, 0, 0));
circles.push(paper.circle(20, 22, 0, 0));

circles[0].animate({r: 20}, 1000, "ease-in-out");
circles[1].animate({r: 12}, 1000, "ease-in-out");
circles[2].animate({r: 19}, 1000, "ease-in-out");

var moving = true;
while (moving) {
    moving = false;
    
    // For each circle...
    for ( var a = 0; a < circles.length; a++) {
        // Check the proximity to other circles
        for ( var b = 0; b < circles.length; b++) {
            if (a == b) continue;
            
            var dx = circles[a].attr("cx") - circles[b].attr("cx"),
                dy = circles[a].attr("cy") - circles[b].attr("cy"),
                radiusA = circles[a].attr("r"),
                radiusB = circles[b].attr("r");
            
            // Use pythagorus theorum to work out how close the balls are
            var proximity = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)) - radiusA - radiusB;
            
            // If the balls are too close...
            if (proximity < REPLULTION_RANGE) {
                circles[a].attr({fill: "red"});
                circles[b].attr({fill: "red"});
            }
        }
    }
}