Blobbing Particles III

This block is a continuation of a previous block, and a recreation:

apply radial gradient to circle, and clip each circle with a distanceLimitedVornoy cell
use 2 layers: cells of the same layer are blobbing/merging thanks to distanceLimitedVornoy technique; cells of distinct layers are overlapping
[new wrt. previous block] closer particles have higher intensity
[new wrt. previous block] use SimplexNoise for smooth movements

Acknowledgments to:

.particle .seed {
    fill: black;
  }
  
  .particle .influence-zone {
    fill: url("#radial-gradient");
    stroke: none;
  }

</style>
<body>
  <svg>
    <defs>
      <radialGradient id="radial-gradient" cx="50%" cy="50%" r="50%">
        <stop offset="25%" stop-color="white"></stop>
        <stop offset="100%" stop-color="black"></stop>
      </radialGradient>
    </defs>
  </svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="simplex-noise.min.js"></script>
  <script src="https://raw.githack.com/kcnarf/d3-distancelimitedvoronoi/master/distance-limited-voronoi.js"></script>
  <script>
    var width = 960,
        height = 500;
		
    var layerCount = 2,
        particleCountPerLayer = 25,
        particles = new Array(layerCount),
        influenceRadius = 20,
        proximityTreshold = Math.pow(3*influenceRadius, 2),
        baseOpacity= 0.25;
    
    for (var l = 0; l < layerCount; ++l) {
      particles[l] = new Array(particleCountPerLayer);
      for (var i = 0; i < particleCountPerLayer; ++i) {
        particles[l][i] = {
          x: width/2,//Math.random() * width,
          y: height/2//Math.random() * height
        };
      }
    }
    
    var simplex = new SimplexNoise();
		
    var limitedVoronoi = d3.distanceLimitedVoronoi()
    			.limit(influenceRadius)
    			.extent([[-influenceRadius,-influenceRadius],[width+influenceRadius,height+influenceRadius]])
    			.x( function(d) { return d.x })
    			.y( function(d) { return d.y });
		
    var svg = d3.select("svg");
   	svg.attr("width", width)
    		.attr("height", height);
    
    svg.selectAll("g").data(d3.range(layerCount))
      	.enter()
      		.append("g")
    				.classed("layer", true)
    				.attr("id", function(d) { return "layer-"+d; });
		
    //begin: add particles
    for (var l = 0; l < layerCount; l++) {
      var layer = svg.select("#layer-"+l);
      var clipPathName = "clip-"+l+"-";
      var drawnParticles = layer.selectAll(".particle").data(particles[0]);
      enteringParticles = drawnParticles.enter()
        .append("g")
          .classed("particle", true);
      enteringParticles
        .append("clipPath")
      		.attr("id", function(d,i){ return clipPathName+i; })
      	.append("path")
          .classed("clip", true);
      enteringParticles.append("circle")
          .classed("influence-zone", true)
      		.attr("r", influenceRadius)
      		.attr("clip-path", function(d, i){ return "url(#"+clipPathName+i+")"; });
    }
    //end: add particles
    
    d3.timer(function(elapsed) {
      var availableWidth = width-2*influenceRadius;
      var availableHeight = height-2*influenceRadius;
      //begin: update particles' position using SimplexNoise
      for (var l = 0; l < layerCount; l++) {
        var layer = svg.select("#layer-"+l);
        for (var i = 0; i < particleCountPerLayer; ++i) {
          var p = particles[l][i];
          p.x += simplex.noise2D(10*l+i, elapsed/10000);
          p.y += simplex.noise2D(elapsed/10000, 10*l+i);
          if (p.x < -influenceRadius) {
            p.x += (width+2*influenceRadius);
          } else if (p.x > width+influenceRadius) {
            p.x -= (width+2*influenceRadius);
          }
          if (p.y < -influenceRadius) {
            p.y += (height+2*influenceRadius);
          } else if (p.y > height+influenceRadius) {
            p.y -= (height+2*influenceRadius);
          }
        }
        //end: update particles' position using SimplexNoise

if (squareDist<minSquareDists[i]) {
              minSquareDists[i] = squareDist;
            }
            if (squareDist<minSquareDists[j]) {
              minSquareDists[j] = squareDist;
            }
          }
        }
      	return minSquareDists;
      }
    });
  </script>
</body>

Updated missing url https://raw.githack.com/Kcnarf/d3-distanceLimitedVoronoi/master/distance-limited-voronoi.js to https://raw.githack.com/kcnarf/d3-distancelimitedvoronoi/master/distance-limited-voronoi.js

https://d3js.org/d3.v4.min.js

https://raw.githack.com/Kcnarf/d3-distanceLimitedVoronoi/master/distance-limited-voronoi.js