D3 Examples - Random pseudo-circles concave hull

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-concaveHull.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/mrdoob/stats.js/build/stats.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    var DEBUG = true;
    var simulation, stats;
    var rand  = (min , max)=>(Math.random()*max + min);
    var randPick = (arr)=>(arr[Math.round(rand(0, arr.length-1))]);
    // randomly return 1 or -1
    var randSign = ()=>(Math.random()>0.5 ? 1:-1);
  
    if(DEBUG){
      stats = new Stats();
        stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
        document.body.appendChild( stats.dom );
    }
    
    var width = 960;
    var height = 500;
    
    // circle constants
    var SHOW_CIRCLE_POINTS = false;
    var PHI = Math.PI * 4;
    var POINTS_PER_CIRCLE = 22;
    var CURVE =  d3.curveBasisClosed;    
    var RADIUS_JITTER = 0.12;
    
    // hull constants
    var SHOW_HULL = true;
    var HULL_PADDING = 10;
    var HULL_CURVE =  CURVE;
    
    // animations constants
    var UPDATE_SIMULATION_INTERVAL = 500;
    var animations = {
      position: {
        interval: 350,
        duration: 2000
      },
      shape: {
        interval:311,
        duration: 1000
      }
    };
    var circles = [
      { animating: false, x: 340, y: 150, radius: 23, color: 'cyan' },
      { animating: false, x: 540, y: 127, radius: 106, color: 'red' },
      { animating: false, x: 200, y: 200, radius: 76, color: 'blue' },
      { animating: false, x: 403, y: 370, radius: 80, color: 'green' },
    ];
    
    var canvas = d3.select("body").append("canvas")
      .attr("width", width)
      .attr("height", height);
        
    var context = canvas.node().getContext('2d');
    
    var radialLine = d3.radialLine()
        .angle(function(d){ return d.angle; })
        .radius(function(d){ return d.radius; })
        .curve(CURVE);
    
    const hull = d3.concaveHull().padding(20).distance(200);
    var hullLine = d3.line()
        .curve(HULL_CURVE);
    
    var circlePoints = function(radius, nbPoints){
      var stepAngle = PHI/nbPoints;
      var points = [];
        for(var i=0; i<nbPoints; i++){
        var jitterAngle = randSign()*(Math.random()/nbPoints);
        var angle = stepAngle*i;
        
        sign = Math.round(Math.random()) == 0 ? 1 : -1;
            var jitterRadius = sign * Math.round(
          (radius*RADIUS_JITTER)*(Math.random())
        );
        points.push({
          angle: angle,
          radius: radius + jitterRadius,
        });
      }
      return points;
    };
    
    var reshapeCircle = (circle, duration)=>{
      circle.reshaping = true;
      var oldPoints = circle.points;
      var newPoints = circlePoints(circle.radius, oldPoints.length);
      var interpolator = d3.interpolateArray(oldPoints,newPoints);
      var timer = d3.timer((time)=>{
        var timeRatio = time/duration;
        var points = interpolator(timeRatio);
        // console.log(points);
        circle.points = points;
        if(timeRatio > 1.0){
          timer.stop();
          circle.reshaping = false;
        }
      })
    };
    
    var moveCircle = (circle, duration)=>{
      var offsetX = randSign() * circle.radius * 0.3;
      var offsetY = randSign() * circle.radius * 0.3;
      
      var otherPosition = Object.assign({}, circle, {
        x: circle.x + offsetX,
        y: circle.y + offsetY
      });
      
      var interpolator = d3.interpolateObject(circle, otherPosition);
      var revInterpolator = d3.interpolateObject(otherPosition, circle); 
      
      var timer = d3.timer(function(time){
        circle.animating = true;
        var timeRatio = time/duration; 
        var _interpolator = timeRatio <= 0.5 ? interpolator : revInterpolator;
        var pos = _interpolator(timeRatio);
        circle.x = pos.x;
        circle.y = pos.y;
        if(timeRatio > 1.0){
          circle.animating = false;
          timer.stop();
        }
        
      });
    };
    // intervals, used to animate regularly the viz
    d3.interval(()=>(simulation.alpha(0.2)), UPDATE_SIMULATION_INTERVAL);
    d3.interval((time)=>{
      var _circles = circles.filter((circle)=>!circle.reshaping);
      if(_circles.length){
        var circle = randPick(_circles);
        reshapeCircle(circle, animations.shape.duration);
      } 
    });
    d3.interval(function(time){
      var _circles = circles.filter((circle)=>!circle.animating);
      if(_circles.length){
        var circle = randPick(_circles);
        moveCircle(circle, animations.position.duration);
      } 
    }, animations.position.interval);
    
     
    var drawNodes = function(nodes){
        nodes.forEach(function(node){
        context.translate(node.x, node.y);
        context.beginPath();
        
        var path = radialLine(node.points);
        context.fillStyle = node.color;
        context.fill(new Path2D(path));
        context.closePath();
        context.translate(-node.x, -node.y);
        
      });  
    };
    
    var drawHull = function(nodes, padding){
      const x = function(p){return Math.cos(p.angle) * (p.radius+padding);};
        const y = function(p){return Math.sin(p.angle) * (p.radius+padding);};
      
      const points = nodes.map(function(node){
        const {x:cx, y:cy} = node;
        return node.points.map((p)=>[ cx+x(p), cy+y(p) ]);
      }).reduce((a,b)=>a.concat(b));
      
      
      const path = hullLine(hull(points)[0]);
​
      context.beginPath();
      context.fillStyle = 'rgba(0,0,0,0)';
      context.strokeStyle = '#bbb';
      context.stroke(new Path2D(path));
      context.closePath();
      
      if(SHOW_CIRCLE_POINTS){
        points.forEach((point)=>{
          context.beginPath();
          context.fillStyle = '#bbb';
          context.arc(point[0], point[1], 2,0, Math.PI*2);
          context.fill();
          context.closePath();
        });
      }
    }
    
    var configSimulation = function(data, drawNodes){
      var ticks = 0;
      var pickPoint = function(i){ return i % 3 == 0; };
      var shouldRun = function(mod){
        return ticks % mod === 0;
      }
      var onTick = function(){
        DEBUG && stats.begin();
        ticks = ticks + 1;
        context.clearRect(0, 0, width, height);
        drawNodes(data);
        if(SHOW_HULL){
          drawHull(data, HULL_PADDING);
        }
        DEBUG && stats.end();
        };
     
      
      return d3.forceSimulation(data) 
        .force('x', d3.forceX().x(function(d){ return d.x }))
        .force('y', d3.forceY().y(function(d){ return d.y }))
        .on('tick', onTick);
    }
    // first initialisation of circles
    circles.forEach(function(c){
      c.points = circlePoints(c.radius, POINTS_PER_CIRCLE);
    });
    
    simulation = configSimulation(circles, drawNodes);
    
​
  </script>
</body>
​
    